:root {
  color-scheme: light;
  --ink: #151416;
  --muted: #6f6b70;
  --paper: #fbfafb;
  --wash: #e8f3f4;
  --pink: #f3a5bd;
  --pink-deep: #d97f9e;
  --pink-shadow: #b96b86;
  --line: rgba(21, 20, 22, 0.16);
  --soft-shadow: 0 34px 70px rgba(70, 55, 62, 0.16);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

@font-face {
  font-family: "Courier Prime";
  src: url("./assets/about/CourierPrime-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JMH Typewriter";
  src: url("./assets/internship/fonts/jmh-typewriter.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Internship Chinese Typewriter";
  src: url("./assets/internship/fonts/zhen-typewriter-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

/* Keep the portfolio entrance clean and white behind the navigation. */
body:has(.stage[data-mode="home"]) {
  background: #fff;
}

body:has(.stage[data-mode="home"]) .site-nav nav {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(205, 224, 226, 0.74), rgba(255, 255, 255, 0) 76px)
      center top / min(84vw, 1600px) 118px no-repeat,
    radial-gradient(circle at center 34%, rgba(255, 255, 255, 0.84), rgba(251, 250, 251, 0) 34%),
    var(--paper);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding-top: clamp(22px, 3.3vh, 48px);
  pointer-events: none;
}

.site-nav nav {
  display: flex;
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  justify-content: center;
  width: min(84vw, 1600px);
  min-height: 68px;
  padding: 0 24px;
  background: rgba(217, 235, 237, 0.66);
  box-shadow: 0 0 34px rgba(125, 137, 141, 0.08);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.site-nav a {
  font-size: clamp(0.88rem, 1.12vw, 1.28rem);
  font-weight: 650;
  letter-spacing: 0;
  white-space: nowrap;
}

.stage {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 112px 18px 36px;
}

.laptop-trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: min(44.4vw, 456px);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: center 48%;
  transition:
    transform 900ms cubic-bezier(0.2, 0.9, 0.14, 1),
    opacity 620ms ease;
}

.click-note {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 0.82rem;
  opacity: 0;
  transition: opacity 240ms ease;
}

.laptop-trigger:hover .click-note,
.laptop-trigger:focus-visible .click-note {
  opacity: 1;
}

.laptop-trigger:focus-visible {
  outline: 2px solid rgba(217, 127, 158, 0.72);
  outline-offset: 14px;
}

.laptop {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.28;
  filter: drop-shadow(var(--soft-shadow));
}

.laptop-view {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  backface-visibility: hidden;
}

.laptop-view-front {
  transform: perspective(1100px) rotateY(var(--turn-deg, 0deg)) scaleX(var(--turn-scale, 1));
  transform-origin: center center;
}

.screen-lid {
  position: absolute;
  inset: 0 3.5% 22%;
  border-radius: 15px 15px 5px 5px;
  border: 12px solid rgba(232, 171, 190, 0.84);
  border-bottom-width: 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, #f8c5d5, #e3a1b8);
  box-shadow:
    inset 0 2px 9px rgba(255, 255, 255, 0.8),
    inset 0 -8px 18px rgba(154, 78, 103, 0.16),
    0 16px 22px rgba(162, 113, 128, 0.18);
}

.camera {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #a56d82;
  transform: translateX(-50%);
  box-shadow:
    -78px 3px 0 -2px rgba(150, 97, 115, 0.42),
    78px 3px 0 -2px rgba(150, 97, 115, 0.42);
}

.screen {
  position: absolute;
  inset: 3.8% 3.6% 8%;
  overflow: hidden;
  border-radius: 3px;
  background: #fefefe;
  box-shadow: inset 0 0 0 1px rgba(40, 22, 28, 0.14);
}

.screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screen-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.26), transparent 36%);
}

.brand {
  position: absolute;
  bottom: -21px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(0.58rem, 1vw, 0.76rem);
  font-weight: 700;
  color: rgba(80, 58, 68, 0.52);
}

.hinge {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 22.5%;
  height: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, #d98aa5, #b76f87);
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.56);
}

.base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27%;
  border-radius: 5px 5px 22px 22px / 5px 5px 34px 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 38%),
    linear-gradient(180deg, #f6acc4, #dc7da0 72%, #8d4f62);
  transform: perspective(520px) rotateX(22deg);
  transform-origin: top;
  box-shadow:
    inset 0 14px 18px rgba(255, 255, 255, 0.34),
    inset 0 -15px 18px rgba(95, 43, 58, 0.28);
}

.keyboard {
  position: absolute;
  left: 12%;
  top: 14%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  width: 58%;
}

.keyboard span {
  height: clamp(5px, 0.9vw, 9px);
  border-radius: 2px;
  background: linear-gradient(180deg, #ffffff, #e8edf0);
  box-shadow: 0 1px 1px rgba(79, 48, 57, 0.18);
}

.trackpad {
  position: absolute;
  right: 22%;
  top: 23%;
  width: 18%;
  height: 34%;
  border-radius: 4px;
  background: rgba(226, 162, 184, 0.84);
  box-shadow: inset 0 0 0 1px rgba(115, 68, 84, 0.1);
}

.lights {
  position: absolute;
  right: 5%;
  bottom: 16%;
  display: flex;
  gap: 10px;
}

.lights i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8df91;
  box-shadow: 0 0 6px rgba(232, 223, 145, 0.8);
}

.desktop {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 112px 20px 34px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  transition:
    opacity 520ms ease 260ms,
    transform 680ms cubic-bezier(0.2, 0.9, 0.14, 1) 180ms;
}

.desktop-shell {
  position: relative;
  width: min(1120px, 92vw, calc((100vh - 164px) * 1.4145));
  aspect-ratio: 3508 / 2480;
  overflow: hidden;
  border: 10px solid rgba(243, 165, 189, 0.94);
  border-bottom-width: 18px;
  border-radius: 18px;
  background:
    linear-gradient(rgba(18, 30, 22, 0.02), rgba(18, 30, 22, 0.02)),
    url("./assets/desktop-clean.png") center / cover;
  box-shadow: var(--soft-shadow);
}

.desktop-bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 10px 12px 0 18px;
  color: rgba(255, 255, 255, 0);
  background: transparent;
  font-size: 0.88rem;
  font-weight: 620;
  pointer-events: none;
}

.close-desktop {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  pointer-events: auto;
  cursor: pointer;
}

.folder-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.folder-hotspot {
  position: absolute;
  display: block;
  width: clamp(136px, 10.4vw, 176px);
  aspect-ratio: 509 / 424;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(21, 20, 22, 0.62),
    0 4px 12px rgba(21, 20, 22, 0.34);
  cursor: pointer;
  transform-origin: center;
}

.folder-visual {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  transition: transform 380ms cubic-bezier(0.2, 0.82, 0.18, 1);
}

.folder-name {
  position: absolute;
  left: 50%;
  display: block;
  min-width: max-content;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.64rem, 1.1vw, 0.98rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.08;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.folder-hotspot.haerin .folder-name,
.folder-hotspot.clover .folder-name,
.folder-hotspot.music .folder-name {
  top: calc(100% + 0.45rem);
  transform: translate(-50%, -4px);
}

.folder-hotspot.carpe .folder-name,
.folder-hotspot.palette .folder-name {
  bottom: calc(100% + 0.45rem);
  transform: translate(-50%, 4px);
}

.folder-hotspot:hover .folder-visual,
.folder-hotspot:focus-visible .folder-visual {
  transform: translate(-50%, -50%) scale(1.1);
}

.folder-hotspot:hover .folder-name,
.folder-hotspot:focus-visible .folder-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.folder-hotspot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 4px;
}

.folder-hotspot.is-shaking {
  animation: folder-shake 360ms ease-in-out;
}

.folder-hotspot.haerin .folder-visual {
  background-image: url("./assets/folder-haerin.png");
}

.folder-hotspot.clover .folder-visual {
  background-image: url("./assets/folder-clover.png");
}

.folder-hotspot.carpe .folder-visual {
  background-image: url("./assets/folder-carpe.png");
}

.folder-hotspot.palette .folder-visual {
  background-image: url("./assets/folder-palette.png");
}

.folder-hotspot.music .folder-visual {
  background-image: url("./assets/folder-music.png");
}

.folder-hotspot.haerin,
.folder-hotspot.clover,
.folder-hotspot.carpe,
.folder-hotspot.palette,
.folder-hotspot.music {
  left: var(--folder-left, 12%);
  top: var(--folder-top, 12%);
}

.folder-hotspot.music {
  --folder-left: 15%;
  --folder-top: 5.5%;
}

.folder-hotspot.palette {
  --folder-left: 6.1%;
  --folder-top: 20.8%;
}

.folder-hotspot.haerin {
  --folder-left: 75.6%;
  --folder-top: 9.4%;
}

.folder-hotspot.clover {
  --folder-left: 84.4%;
  --folder-top: 35.7%;
}

.folder-hotspot.carpe {
  --folder-left: 78.3%;
  --folder-top: 65.2%;
}

@keyframes folder-shake {
  0%,
  100% {
    transform: rotate(0deg) translateX(0);
  }

  22% {
    transform: rotate(-2deg) translateX(-2px);
  }

  48% {
    transform: rotate(2deg) translateX(2px);
  }

  72% {
    transform: rotate(-1deg) translateX(-1px);
  }
}

.stage[data-mode="desktop"] .laptop-trigger {
  transform: scale(2.7) translateY(3vh);
  opacity: 0;
  pointer-events: none;
}

.stage[data-mode="desktop"] .desktop {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.stage[data-visual-open="true"] .desktop-shell {
  filter: saturate(0.45) brightness(0.92);
}

.visual-modal {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.stage[data-visual-open="true"] .visual-modal {
  opacity: 1;
  pointer-events: auto;
}

.finder-window {
  width: min(434px, calc(70vw - 32px));
  min-height: 224px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 22px 65px rgba(41, 43, 48, 0.18),
    0 1px 4px rgba(41, 43, 48, 0.08);
  backdrop-filter: blur(18px);
}

.finder-sidebar {
  padding: 20px 18px;
  background: rgba(246, 246, 247, 0.82);
  border-right: 1px solid rgba(210, 210, 214, 0.64);
}

.traffic-lights {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}

.traffic-lights i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.traffic-lights i:nth-child(1) {
  background: #ff5f57;
}

.traffic-lights i:nth-child(2) {
  background: #ffbd2e;
}

.traffic-lights i:nth-child(3) {
  background: #28c840;
}

.finder-sidebar p,
.finder-sidebar h2 {
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 760;
  color: #34363a;
}

.finder-sidebar h2 {
  margin-top: 30px;
  color: rgba(52, 54, 58, 0.52);
}

.finder-sidebar .sidebar-active {
  border-radius: 13px;
  padding: 10px 13px;
  margin-left: -9px;
  margin-right: -9px;
  color: #007aff;
  background: rgba(229, 229, 231, 0.86);
}

.finder-main {
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(255, 255, 255, 0.76);
}

.finder-toolbar {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(226, 226, 229, 0.82);
  color: #4a4c50;
  font-size: 0.64rem;
  font-weight: 650;
}

.visual-close {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 0 0 0 1px rgba(170, 34, 34, 0.14);
  cursor: pointer;
}

.toolbar-icons {
  margin-left: auto;
  display: flex;
  gap: 16px;
}

.toolbar-icons i {
  width: 30px;
  height: 24px;
  border: 3px solid rgba(70, 72, 76, 0.72);
  border-radius: 5px;
}

.visual-folder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  align-content: center;
  min-height: 189px;
  padding: 20px 25px 25px;
}

.visual-folder {
  display: grid;
  justify-items: center;
  gap: 13px;
  border: 0;
  background: transparent;
  color: #34363a;
  font-size: 0.62rem;
  font-weight: 550;
  cursor: pointer;
}

.visual-folder span {
  position: relative;
  width: min(78px, 15vw);
  aspect-ratio: 1.28;
  border-radius: 5px;
  background: var(--folder-color);
  box-shadow:
    inset 0 8px 12px rgba(255, 255, 255, 0.38),
    0 6px 13px rgba(71, 72, 75, 0.1);
}

.visual-folder span::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14%;
  width: 42%;
  height: 28%;
  border-radius: 10px 14px 0 0;
  background: color-mix(in srgb, var(--folder-color) 82%, #ffffff);
}

.posts-folder {
  --folder-color: #cce8ce;
}

.zine-folder {
  --folder-color: #dcdde0;
}

.posts-page {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #f2f8f0 url("./assets/posts/posts-background.jpeg") center / cover no-repeat;
  transition: opacity 260ms ease;
}

.stage[data-mode="posts"] .desktop,
.stage[data-mode="posts"] .laptop-trigger {
  opacity: 0;
  pointer-events: none;
}

.stage[data-mode="posts"] .posts-page {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body:has(.stage[data-mode="posts"]) .site-nav {
  opacity: 0;
  pointer-events: none;
}

.posts-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
  padding: 0 clamp(18px, 3vw, 48px);
  color: #f00072;
  font-size: 0.82rem;
  font-weight: 600;
}

.posts-topbar button,
.posts-controls button,
.post-detail button {
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.posts-back {
  width: 36px;
  height: 36px;
  font-size: 1.35rem;
}

.posts-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.posts-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.posts-three,
.posts-three > div {
  width: 100%;
  height: 100%;
}

.posts-three {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
}

.posts-three.is-dragging {
  cursor: grabbing;
}

.posts-scene-title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(70vw, 800px);
  color: #26392c;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.posts-scene-title span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
}

.posts-scene-title strong {
  display: block;
  font-family: Georgia, serif;
  font-size: clamp(5rem, 15vw, 14rem);
  font-weight: 400;
  line-height: 0.9;
  opacity: 0.12;
}

.post-3d-card {
  width: 250px;
  height: 340px;
  transform-style: preserve-3d;
}

.post-card-face {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: 0 18px 40px rgba(50, 70, 52, 0.15);
  color: #223125;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.post-card-face:hover,
.post-card-face:focus-visible {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 25px 52px rgba(50, 70, 52, 0.22);
}

.post-card-cover {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #e2e7df;
}

.post-card-cover img,
.post-card-cover video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card-video {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  color: #243526;
  font-size: 0.8rem;
}

.post-card-title {
  display: block;
  min-height: 66px;
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.posts-controls {
  position: absolute;
  bottom: 22px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #26392c;
  transform: translateX(-50%);
}

.posts-xhs-link {
  position: absolute;
  bottom: 78px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 0;
  background: transparent;
  color: #f00072;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.posts-xhs-link:hover,
.posts-xhs-link:focus-visible {
  text-decoration: underline;
}

.posts-controls button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f00072;
  font-size: 1.2rem;
}

.posts-progress {
  min-width: 56px;
  text-align: center;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: #f00072;
}

.post-detail {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 32, 23, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.post-detail.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.post-detail-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  width: min(1120px, 94vw);
  height: min(720px, 88vh);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 70px rgba(12,25,16,0.22);
}

.post-detail-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  background: #eef1ed;
  touch-action: pan-y;
}

.post-detail-viewport {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.post-detail-viewport img,
.post-detail-viewport video {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.post-detail-viewport video {
  background: #111;
}

.post-media-prev,
.post-media-next {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.85) !important;
  font-size: 1.3rem;
  transform: translateY(-50%);
}

.post-media-prev { left: 14px; }
.post-media-next { right: 14px; }

.post-detail button[hidden] {
  display: none;
}

.post-media-progress {
  position: absolute;
  bottom: 16px;
  left: 50%;
  padding: 5px 10px;
  border-radius: 30px;
  background: rgba(22,34,24,0.65);
  color: white;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}

.post-detail-copy {
  position: relative;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 60px clamp(24px, 3vw, 48px) 40px;
  color: #26392c;
}

.post-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.9) !important;
  font-size: 1.5rem;
}

.post-detail-author {
  margin: 0 0 22px;
  font-size: 0.8rem;
  font-weight: 650;
}

.post-detail-copy h2 {
  margin: 0 0 30px;
  font-size: clamp(1.5rem, 2.2vw, 2.25rem);
  line-height: 1.2;
  font-weight: 650;
}

.post-detail-body {
  white-space: pre-wrap;
  font-size: 0.95rem;
  line-height: 1.8;
}

.post-detail-body p {
  margin: 0 0 1em;
}

.about-page {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: url("./assets/about/pink-sea.jpeg") center / cover no-repeat;
  transition: opacity 360ms ease;
}

.about-ripple {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stage[data-mode="about"] .desktop,
.stage[data-mode="about"] .laptop-trigger {
  opacity: 0;
  pointer-events: none;
}

.stage[data-mode="about"] .about-page {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body:has(.stage[data-mode="about"]) .site-nav {
  opacity: 0;
  pointer-events: none;
}

.writing-page {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  background: #7fa3bf;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms ease;
}

.stage[data-mode="writing"] .desktop,
.stage[data-mode="writing"] .laptop-trigger {
  opacity: 0;
  pointer-events: none;
}

.stage[data-mode="writing"] .writing-page {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body:has(.stage[data-mode="writing"]) .site-nav {
  opacity: 0;
  pointer-events: none;
}

.photography-page {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  background: #83b1f3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.research-page {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  background: #a9c9c9;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms ease;
}

.stage[data-mode="research"] .desktop,
.stage[data-mode="research"] .laptop-trigger {
  opacity: 0;
  pointer-events: none;
}

.stage[data-mode="research"] .research-page {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body:has(.stage[data-mode="research"]) .site-nav {
  opacity: 0;
  pointer-events: none;
}

.research-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #83b1f3;
  pointer-events: none;
  isolation: isolate;
}

.research-ocean {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(.9) brightness(.96);
}

.research-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.stage[data-mode="photography"] .desktop,
.stage[data-mode="photography"] .laptop-trigger {
  opacity: 0;
  pointer-events: none;
}

.stage[data-mode="photography"] .photography-page {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body:has(.stage[data-mode="photography"]) .site-nav {
  opacity: 0;
  pointer-events: none;
}

.photography-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #83b1f3;
  pointer-events: none;
  isolation: isolate;
}

.photography-field {
  --field-x: 0px;
  --field-y: 0px;
  position: absolute;
  left: var(--field-left);
  top: var(--field-top);
  display: block;
  width: var(--field-width);
  height: var(--field-height);
  transform: translate3d(calc(-50% + var(--field-x)), calc(-50% + var(--field-y)), 0) rotate(var(--field-rotate, 0deg));
  will-change: transform;
  transition: opacity 240ms ease;
}

.photography-fallback,
.research-fallback,
.photography-mosaic {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  transition: opacity 240ms ease;
}

.photography-fallback,
.research-fallback,
.photography-page.is-mosaic-ready .photography-mosaic,
.research-page.is-mosaic-ready .photography-mosaic {
  opacity: 1;
}

.photography-page.is-mosaic-ready .photography-fallback,
.research-page.is-mosaic-ready .research-fallback {
  opacity: 0;
}

.photography-field-blue-main {
  --field-left: 70%;
  --field-top: 20%;
  --field-width: 174vw;
  --field-height: 142vh;
  z-index: 1;
  opacity: 0.88;
  background: radial-gradient(ellipse at center, #83b1f3 0%, rgba(131, 177, 243, 0.96) 39%, rgba(131, 177, 243, 0) 74%);
}

.photography-field-green {
  --field-left: 24%;
  --field-top: 98%;
  --field-width: 182vw;
  --field-height: 154vh;
  --field-rotate: -8deg;
  z-index: 2;
  opacity: 0.93;
  background: linear-gradient(26deg, #708962 0%, rgba(112, 137, 98, 0.94) 34%, rgba(112, 137, 98, 0.5) 52%, rgba(112, 137, 98, 0) 75%);
}

.photography-field-blue-secondary {
  --field-left: 13%;
  --field-top: 16%;
  --field-width: 116vw;
  --field-height: 108vh;
  z-index: 3;
  opacity: 0.44;
  background: radial-gradient(ellipse at center, #83b1f3 0%, rgba(131, 177, 243, 0.86) 34%, rgba(131, 177, 243, 0) 73%);
}

.photography-texture {
  position: absolute;
  inset: -12%;
  z-index: 6;
  opacity: 0.035;
  background-image:
    repeating-radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.32) 0 0.7px, transparent 0.9px 3.4px),
    repeating-linear-gradient(117deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(33, 49, 42, 0.05) 1px 2px, transparent 2px 6px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: soft-light;
}

.photography-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.writing-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.writing-background-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.writing-ripple-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 320ms ease;
}

.writing-page.is-ripple-ready .writing-ripple-canvas {
  opacity: 1;
}

.writing-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.writing-page[data-book-detail="true"] .writing-content {
  opacity: 0;
  visibility: hidden;
}

.writing-page[data-book-detail="true"] > .writing-back {
  visibility: hidden;
}

.writing-book-detail {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.writing-page[data-book-detail="true"] .writing-book-detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.writing-detail-back {
  position: fixed;
  top: 18px;
  left: clamp(14px, 2vw, 36px);
  z-index: 2;
  border: 0;
  padding: 8px 10px;
  color: #173c55;
  background: transparent;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.writing-detail-back:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.writing-articles {
  width: min(900px, calc(100% - clamp(36px, 10vw, 140px)));
  min-height: calc(100% - 140px);
  margin: 90px auto 50px;
  padding: clamp(24px, 5vw, 68px);
  color: #17384d;
  background: rgba(239, 246, 246, 0.78);
  box-shadow: 0 18px 55px rgba(26, 49, 64, 0.12);
  backdrop-filter: blur(12px);
}

.writing-article[aria-hidden="true"] {
  display: none;
}

.writing-article-header {
  margin-bottom: clamp(28px, 5vw, 60px);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(23, 56, 77, 0.2);
}

.writing-article-header > p {
  margin: 0 0 0.7rem;
  color: #57768a;
  font-family: "JMH Typewriter", Georgia, serif;
  font-size: 0.624rem;
  letter-spacing: 0.14em;
}

.writing-article-header h1 {
  margin: 0;
  color: #173c55;
  font: 600 clamp(1.6rem, 4vw, 2.96rem)/1.08 Georgia, "Songti SC", serif;
}

.writing-article-body {
  font-family: "Songti SC", "Noto Serif CJK SC", serif;
  font-size: clamp(0.8rem, 1.08vw, 0.96rem);
  line-height: 2;
  letter-spacing: 0.025em;
}

.writing-article-body p {
  margin: 0 0 1.4em;
}

.writing-article-body .writing-article-opening,
.writing-article-body .writing-article-lead {
  margin-bottom: 1.8em;
  color: #1c4259;
  font-size: clamp(0.92rem, 1.36vw, 1.16rem);
  line-height: 1.85;
}

.writing-article-body .writing-article-section-title {
  margin: 3.2em 0 1.1em;
  color: #17384d;
  font: 600 clamp(1.08rem, 1.76vw, 1.44rem)/1.45 Georgia, "Songti SC", serif;
}

.writing-article-figure {
  margin: clamp(28px, 5vw, 54px) auto;
  text-align: center;
}

.writing-article-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(26, 36, 44, 0.16));
}

.writing-article-end {
  margin-top: 3rem;
  color: #57768a;
  font: 0.96rem "JMH Typewriter", Georgia, serif;
  text-align: center;
}

.writing-book {
  position: absolute;
  top: var(--book-top);
  left: var(--book-left);
  display: block;
  width: clamp(118px, 8vw, 168px);
  aspect-ratio: 945 / 784;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.writing-book-love {
  --book-left: 13.9%;
  --book-top: 19.8%;
}

.writing-book-forest {
  --book-left: 23.5%;
  --book-top: 30.1%;
}

.writing-book-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: scale(1);
  transform-origin: center;
  transition: transform 380ms cubic-bezier(0.2, 0.82, 0.18, 1);
}

.writing-book-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.writing-book-name {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  display: block;
  min-width: max-content;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.8rem, 1.15vw, 1rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(21, 20, 22, 0.62), 0 4px 12px rgba(21, 20, 22, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.writing-book:hover .writing-book-art,
.writing-book:focus-visible .writing-book-art {
  transform: scale(1.1);
}

.writing-book:hover .writing-book-name,
.writing-book:focus-visible .writing-book-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.writing-book:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.86);
  outline-offset: 5px;
}

.writing-book.is-shaking .writing-book-art {
  animation: folder-shake 360ms ease-in-out;
}

@media (max-width: 640px) {
  .writing-book {
    width: clamp(96px, 26vw, 136px);
  }

  .writing-book-love {
    --book-left: 25%;
    --book-top: 22%;
  }

  .writing-book-forest {
    --book-left: 76%;
    --book-top: 35%;
  }

  .writing-articles {
    width: calc(100% - 24px);
    min-height: calc(100% - 110px);
    margin: 72px auto 24px;
    padding: 24px 20px 36px;
  }

  .writing-article-body {
    line-height: 1.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .writing-ripple-canvas {
    display: none;
  }
}

/* AI Research: four hover previews arranged like scattered project cards. */
.research-page {
  overflow: hidden auto;
}

.research-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  color: #163b52;
  font-family: inherit;
}

.research-intro {
  position: absolute;
  top: clamp(72px, 8vh, 108px);
  left: clamp(28px, 7vw, 112px);
  z-index: 2;
  text-shadow: 0 1px 22px rgba(255, 255, 255, .45);
}

.research-kicker,
.research-card-heading,
.research-card-caption,
.research-preview-hint {
  font-family: "JMH Typewriter", "Courier New", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.research-kicker {
  margin: 0 0 7px;
  font-size: clamp(10px, .85vw, 13px);
}

.research-intro h1 {
  margin: 0;
  font-family: "JMH Typewriter", Georgia, serif;
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1;
}

.research-card {
  position: absolute;
  display: block;
  width: clamp(260px, 27vw, 410px);
  padding: 11px 12px 9px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 15px;
  color: inherit;
  background: rgba(239, 248, 250, .34);
  box-shadow: 0 16px 42px rgba(18, 51, 70, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  pointer-events: auto;
  transform: rotate(var(--card-tilt, 0deg));
  transition: transform 420ms cubic-bezier(.2, .7, .25, 1), box-shadow 420ms ease, background 420ms ease;
}

.research-card:hover,
.research-card:focus-visible {
  z-index: 5;
  background: rgba(248, 252, 253, .62);
  box-shadow: 0 24px 58px rgba(18, 51, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
  transform: rotate(0deg) translateY(-6px) scale(1.025);
}

.research-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.research-card--film {
  top: 22%;
  left: 8%;
  --card-tilt: -2deg;
}

.research-card--images {
  top: 18%;
  right: 8%;
  --card-tilt: 2deg;
}

.research-card--treewaves {
  bottom: 10%;
  left: 31%;
  --card-tilt: 1.5deg;
}

.research-card--whereislove {
  right: 7%;
  bottom: 13%;
  --card-tilt: -1.5deg;
}

.research-card-heading,
.research-card-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: rgba(22, 59, 82, .85);
  font-size: 10px;
}

.research-card-heading {
  height: 21px;
  padding: 0 2px 8px;
}

.research-card-caption {
  min-height: 23px;
  padding: 7px 2px 0;
  font-size: 11px;
  letter-spacing: .04em;
}

.research-card-caption > span {
  font-size: 15px;
}

.research-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1.57;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(230, 246, 249, .88), rgba(185, 216, 221, .58));
  box-shadow: inset 0 0 0 1px rgba(39, 86, 104, .06);
  isolation: isolate;
}

.research-film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(145deg, #cadfe1, #8db4b8);
}

.research-preview-hint {
  position: absolute;
  right: 9px;
  bottom: 8px;
  z-index: 3;
  max-width: calc(100% - 18px);
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 4px;
  color: #fff;
  background: rgba(17, 46, 62, .48);
  font-size: 8px;
  line-height: 1.2;
  pointer-events: none;
}

.research-play-mark,
.research-open-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  color: white;
  background: rgba(18, 55, 75, .38);
  box-shadow: 0 4px 20px rgba(13, 41, 55, .2);
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.research-play-mark {
  padding-left: 2px;
  font-size: 13px;
}

.research-card--film:hover .research-play-mark,
.research-card--film:focus-within .research-play-mark {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
}

.research-image-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(220, 239, 240, .86), rgba(175, 207, 211, .62));
}

.research-placeholder-sheet {
  position: absolute;
  width: 38%;
  height: 66%;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 5px;
  background: rgba(250, 253, 252, .62);
  box-shadow: 0 8px 18px rgba(34, 75, 89, .14);
  transition: transform 500ms cubic-bezier(.2, .7, .25, 1);
}

.sheet-back { transform: translate(-24%, -2%) rotate(-11deg); }
.sheet-middle { transform: translate(0, -1%) rotate(3deg); }
.sheet-front { display: grid; place-items: center; transform: translate(22%, 2%) rotate(10deg); }
.sheet-front i { color: rgba(27, 72, 89, .7); font-family: "JMH Typewriter", monospace; font-size: clamp(10px, 1vw, 14px); font-style: normal; line-height: 1.65; text-align: center; letter-spacing: .14em; }
.research-card--images:hover .sheet-back { transform: translate(-36%, -5%) rotate(-15deg); }
.research-card--images:hover .sheet-middle { transform: translate(0, -7%) rotate(0deg); }
.research-card--images:hover .sheet-front { transform: translate(36%, 4%) rotate(15deg); }

.research-live-preview iframe,
.research-love-preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px;
  height: 1000px;
  border: 0;
  background: #f8fbfc;
  transform: scale(.23);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.research-live-preview iframe,
.research-love-preview iframe {
  z-index: 1;
  opacity: 1;
}

@media (max-width: 760px) {
  .research-page { overflow-x: hidden; overflow-y: auto; }
  .research-content {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: start;
    gap: 18px 10px;
    min-height: 100svh;
    padding: 90px 18px 36px;
  }
  .research-intro {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1 / -1;
    margin: 0 0 8px;
  }
  .research-card {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 8px 9px 7px;
    border-radius: 12px;
    --card-tilt: 0deg;
  }
  .research-card--film { grid-column: 1 / span 5; }
  .research-card--images { grid-column: 2 / span 5; }
  .research-card--treewaves { grid-column: 1 / span 5; }
  .research-card--whereislove { grid-column: 2 / span 5; }
  .research-preview { aspect-ratio: 1.6; }
  .research-live-preview iframe,
  .research-love-preview iframe { transform: scale(.22); }
}

/* AI Research: loose, borderless image layout inspired by the reference film. */
.research-page {
  overflow-x: hidden;
  overflow-y: auto;
}

.research-content {
  position: relative;
  inset: auto;
  min-height: 125vh;
  height: 125vh;
}

.research-card {
  width: clamp(250px, 27vw, 440px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  transition: none;
}

.research-card:hover,
.research-card:focus-visible {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.research-card:focus-visible {
  outline: 1px solid rgba(22, 59, 82, .8);
  outline-offset: 5px;
}

.research-card--film,
.research-card--images,
.research-card--treewaves,
.research-card--whereislove {
  --card-tilt: 0deg;
}

.research-card--film { top: 22vh; }
.research-card--images { top: 18vh; }

.research-card-heading {
  height: auto;
  min-height: 22px;
  padding: 0 0 8px;
  font-size: 11px;
}

.research-card-caption {
  min-height: 0;
  padding: 8px 0 0;
  font-size: 11px;
}

.research-preview {
  overflow: hidden;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.research-film-preview {
  aspect-ratio: 16 / 9;
}

.research-film {
  object-fit: contain;
}

.research-preview-hint,
.research-play-mark,
.research-open-mark {
  display: none;
}

.research-image-placeholder {
  aspect-ratio: 4 / 3;
  background: rgba(222, 237, 238, .3);
}

.research-placeholder-sheet {
  display: none;
}

.research-live-preview,
.research-love-preview {
  aspect-ratio: 8 / 5;
}

.research-live-preview iframe,
.research-love-preview iframe {
  width: 400%;
  height: 400%;
  border: 0;
  border-radius: 0;
  transform: scale(.25);
  transform-origin: top left;
}

.research-card--treewaves {
  bottom: 10%;
  top: auto;
}

.research-card--whereislove {
  bottom: 13%;
  top: auto;
}

@media (max-width: 760px) {
  .research-content {
    position: relative;
    inset: auto;
    min-height: 0;
    height: auto;
    padding-bottom: 8vh;
  }

  .research-card {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .research-card:hover,
  .research-card:focus-visible {
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .research-card--treewaves,
  .research-card--whereislove {
    top: auto;
    bottom: auto;
    margin-top: clamp(56px, 8vh, 104px);
  }

  .research-live-preview iframe,
  .research-love-preview iframe {
    transform: scale(.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .research-card,
  .research-card * { transition-duration: 1ms !important; }
}

.about-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
  padding: 0 clamp(18px, 3vw, 48px);
  color: #44404a;
  font-size: 0.82rem;
  font-weight: 600;
}

.about-back {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.35rem;
  cursor: pointer;
}

.about-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.94fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 54px);
  width: min(100%, 1600px);
  min-height: 100vh;
  margin: auto;
  padding: 90px clamp(30px, 5vw, 88px) 38px;
}

.about-notes {
  position: relative;
  align-self: stretch;
  min-height: 520px;
}

.about-line {
  position: absolute;
  margin: 0;
  color: #514453;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
}

.about-line-one {
  top: 21%;
  left: 9%;
}

.about-line-two {
  top: 46%;
  left: 0;
}

.about-line-three {
  top: 71%;
  left: 5%;
}

.about-tree {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: min(76vh, 710px);
  min-height: 500px;
  justify-self: center;
  overflow: visible;
}

.about-tree-scene,
.about-tree-scene > div {
  width: 100%;
  height: 100%;
}

.about-tree-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-tree-photo {
  display: block;
  width: 94px;
  height: 112px;
  object-fit: contain;
  backface-visibility: hidden;
  filter: drop-shadow(0 8px 8px rgba(34, 28, 45, 0.19));
  user-select: none;
}

.about-contact {
  align-self: start;
  justify-self: end;
  width: min(100%, 310px);
  margin-top: clamp(35px, 9vh, 92px);
  padding: 27px 26px 24px;
  border: 1px solid rgba(107, 88, 108, 0.16);
  border-top: 4px solid #d5b4cc;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 18px 48px rgba(78, 60, 74, 0.07);
}

.about-contact h1 {
  margin: 0 0 25px;
  color: #423748;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  font-weight: 400;
}

.about-contact > a:not(.about-resume),
.about-contact p {
  display: grid;
  gap: 3px;
  margin: 0 0 17px;
  font-size: 0.91rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.about-contact > a:not(.about-resume):hover {
  color: #a75b85;
}

.about-contact > a:not(.about-resume) span:first-child,
.about-contact p span:first-child {
  color: #887c86;
  font-size: 0.72rem;
}

.about-cv-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
  padding-top: 17px;
  border-top: 1px solid rgba(107, 88, 108, 0.18);
}

.about-resume,
.about-cv-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7f476a;
  font-size: 0.85rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.about-resume:hover,
.about-cv-preview:hover {
  color: #b35e89;
}

.about-back:focus-visible,
.about-contact a:focus-visible,
.about-contact button:focus-visible {
  outline: 2px solid #bd8bad;
  outline-offset: 4px;
}

.cv-preview[open] {
  display: flex;
  flex-direction: column;
  width: min(94vw, 950px);
  height: min(90vh, 870px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(71, 58, 76, 0.18);
  border-radius: 6px;
  background: #fbfafb;
  box-shadow: 0 24px 80px rgba(39, 32, 49, 0.25);
}

.cv-preview::backdrop {
  background: rgba(45, 38, 53, 0.44);
  backdrop-filter: blur(5px);
}

.cv-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  flex: none;
  padding: 0 16px 0 22px;
  border-bottom: 1px solid rgba(71, 58, 76, 0.12);
  color: #49404b;
  font-size: 0.85rem;
  font-weight: 600;
}

.cv-preview-bar > div {
  display: flex;
  gap: 8px;
}

.cv-preview-bar a,
.cv-preview-bar button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #49404b;
  font-size: 1.3rem;
  cursor: pointer;
}

.cv-preview-bar a:hover,
.cv-preview-bar button:hover {
  background: #f1e9ef;
}

.cv-preview-document {
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow: auto;
  overflow-anchor: none;
  background: #eee9ee;
  text-align: center;
}

.cv-preview-document img {
  display: block;
  width: min(100%, 850px);
  height: auto;
  margin: 0 auto;
  box-shadow: 0 8px 28px rgba(39, 32, 49, 0.1);
}

.cv-preview.is-zoomed .cv-preview-document img {
  width: 1320px;
  max-width: none;
}

.cv-preview-open {
  align-self: flex-end;
  flex: none;
  padding: 10px 20px;
  color: #7f476a;
  font-size: 0.78rem;
}

@media (max-width: 980px) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 82px 22px 48px;
  }

  .about-tree {
    grid-row: 1;
    width: min(82vw, 430px);
    height: min(68vh, 600px);
    min-height: 0;
  }

  .about-contact {
    grid-row: 2;
    justify-self: center;
    width: min(100%, 410px);
    margin: 0;
  }

  .about-notes {
    grid-row: 3;
    width: min(100%, 410px);
    min-height: 220px;
    justify-self: center;
  }

  .about-line-one { top: 5%; left: 0; }
  .about-line-two { top: 40%; left: 7%; }
  .about-line-three { top: 77%; left: 1%; }
}

.zine-page {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #f5f6ed url("./assets/materials/materials-background.jpeg") center / cover no-repeat;
  transition: opacity 360ms ease;
}

.stage[data-mode="zine"] .desktop,
.stage[data-mode="zine"] .laptop-trigger {
  opacity: 0;
  pointer-events: none;
}

.stage[data-mode="zine"] .zine-page {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body:has(.stage[data-mode="zine"]) .site-nav {
  opacity: 0;
  pointer-events: none;
}

.zine-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
  padding: 0 clamp(18px, 3vw, 48px);
  color: #f00072;
  font-size: 0.82rem;
  font-weight: 600;
}

.zine-topbar button,
.zine-detail button {
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.zine-back {
  width: 36px;
  height: 36px;
  background: transparent;
  font-size: 1.35rem;
}

.zine-stage {
  position: absolute;
  inset: 72px 0 0;
  overflow: hidden;
  transition: none;
}

.zine-cloud {
  position: absolute;
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: clamp(8px, 1.8vw, 26px);
  width: min(92vw, 1380px);
  transform: translateX(-50%);
}

.zine-cloud-top {
  top: 5%;
  min-height: 36%;
}

.zine-cloud-bottom {
  bottom: 5%;
  min-height: 32%;
}

.zine-card {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 1;
  cursor: pointer;
  transform: none;
  transition: none;
}

.zine-page.is-entered .zine-card {
  opacity: 1;
  transform: none;
}

.zine-card-poster {
  width: clamp(80px, 9vw, 130px);
  height: clamp(110px, 22vh, 176px);
}

.zine-card-narrow {
  width: clamp(38px, 5vw, 64px);
  height: clamp(108px, 19vh, 156px);
}

.zine-card-square {
  width: clamp(94px, 11vw, 158px);
  height: clamp(94px, 17vh, 158px);
}

.zine-card-wide {
  width: clamp(118px, 13vw, 186px);
  height: clamp(60px, 12vh, 96px);
}

.zine-card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 16px 30px rgba(70, 65, 82, 0.14);
  animation: zine-float 5.8s ease-in-out var(--float-delay) infinite alternate;
  transition: box-shadow 240ms ease, filter 240ms ease;
}

.zine-card:hover img,
.zine-card:focus-visible img {
  box-shadow: 0 22px 36px rgba(70, 65, 82, 0.22);
  filter: saturate(1.14);
}

.zine-card:focus-visible {
  outline: 2px solid #cd8ba5;
  outline-offset: 6px;
}

@keyframes zine-float {
  from { transform: translateY(-7px) rotate(var(--tilt)); }
  to { transform: translateY(9px) rotate(var(--tilt)); }
}

.zine-search {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 19px;
  width: min(44vw, 470px);
  height: 60px;
  padding: 0 23px;
  overflow: hidden;
  border: 1px solid rgba(191, 185, 197, 0.66);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 50px rgba(109, 97, 116, 0.13);
  backdrop-filter: blur(16px);
  transform: translate(-50%, -50%);
}

.zine-search-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid #67727b;
  border-radius: 50%;
}

.zine-search-icon::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -4px;
  width: 8px;
  height: 2px;
  background: #67727b;
  transform: rotate(46deg);
}

.zine-search-caret {
  width: 2px;
  height: 22px;
  margin-left: 6px;
  background: #a46885;
  animation: zine-caret 760ms steps(1) infinite;
}

.zine-search-scan {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #afd7d8, #d994b5);
  transform: scaleX(0);
  transform-origin: left;
}

.zine-page.is-analysing .zine-search-caret {
  opacity: 0;
}

.zine-page.is-analysing .zine-search-scan {
  animation: zine-scan 3.8s linear forwards;
}

.zine-page.is-analysing .zine-card img {
  animation-duration: 2.8s;
}

@keyframes zine-caret {
  50% { opacity: 0; }
}

@keyframes zine-scan {
  to { transform: scaleX(1); }
}

.zine-page.is-focused .zine-stage {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.zine-detail {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: clamp(8px, 2vw, 30px);
  padding: 80px clamp(18px, 5vw, 80px) 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition: none;
}

.zine-page.is-focused .zine-detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.zine-detail button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f00072;
  font-size: 1.3rem;
}

.zine-detail-close,
.zine-detail-zoom {
  position: absolute;
  top: 22px;
  right: 28px;
  z-index: 20;
  pointer-events: auto;
}

.zine-detail-zoom { display: none !important; }

.zine-detail-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.zine-detail-image-wrap img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 22px 54px rgba(68, 61, 74, 0.18);
}

.zine-detail.is-zoomed .zine-detail-image-wrap {
  align-items: flex-start;
}

.zine-detail.is-zoomed .zine-detail-image-wrap img {
  width: min(100%, 1100px);
  height: auto;
  max-width: none;
  max-height: none;
}

.internship-page {
  --book-page-outer-padding: 11%;
  --book-page-inner-padding: 10%;
  --book-section-gap: 5rem;
  --internship-book-width: min(90vw, 1600px);
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-x: hidden;
  overflow-y: auto;
  background: #8eb9ed;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.stage[data-mode="internships"] .internship-page {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body:has(.stage[data-mode="internships"]) .site-nav {
  display: none;
}

.internship-environment {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.internship-environment img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.internship-pixels {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.internship-paper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: var(--internship-book-width);
  transform: translateX(-50%);
  background: rgba(244, 248, 250, 0.69);
  box-shadow: 0 0 24px rgba(24, 43, 55, 0.15), inset 1px 0 rgba(255, 255, 255, 0.55), inset -1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.internship-spine {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 11;
  width: clamp(28px, 3.8vw, 56px);
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(27, 35, 50, 0.06) 24%, rgba(20, 27, 36, 0.38) 47%, rgba(18, 23, 33, 0.44) 50%, rgba(25, 30, 40, 0.28) 54%, rgba(255, 255, 255, 0.26) 79%, transparent 100%);
  pointer-events: none;
}

.internship-back,
.photography-back,
.research-back,
.writing-back {
  position: fixed;
  top: 18px;
  left: clamp(14px, 2vw, 36px);
  z-index: 50;
  border: 0;
  padding: 8px 10px;
  color: #173c55;
  background: transparent;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.internship-back:focus-visible,
.photography-back:focus-visible,
.research-back:focus-visible,
.writing-back:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.internship-book {
  position: relative;
  z-index: 10;
  width: var(--internship-book-width);
  margin: 0 auto;
}

.internship-book-body {
  position: relative;
}

.internship-book-content {
  position: relative;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

/* Keep the complete internship book aligned with its navigation typeface. */
.internship-book-content :is(h1, h2, h3, p, span, small, strong, li, figcaption, dt, dd) {
  font-family:
    Inter, "Internship Chinese Typewriter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.internship-spread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 47%) 6% minmax(0, 47%);
  align-items: center;
  min-height: 100svh;
  padding: 88px 0 74px;
  color: #203647;
}

.internship-spread + .internship-spread::before {
  position: absolute;
  top: 0;
  left: 9%;
  right: 9%;
  height: 1px;
  background: rgba(38, 61, 74, 0.22);
  content: "";
}

.internship-leaf {
  min-width: 0;
}

.internship-leaf-left {
  grid-column: 1;
  padding-inline: var(--book-page-outer-padding) var(--book-page-inner-padding);
}

.internship-leaf-right {
  grid-column: 3;
  padding-inline: var(--book-page-inner-padding) var(--book-page-outer-padding);
}

.internship-overline,
.internship-folio,
.internship-caption,
.internship-figure figcaption {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
}

.internship-overline {
  margin-bottom: 25px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.internship-spread h1,
.internship-spread h2,
.internship-spread h3,
.internship-spread p {
  overflow-wrap: break-word;
}

.internship-spread h1,
.internship-spread h2 {
  margin: 0 0 26px;
  font-family:
    "Courier Prime", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.02;
}

.internship-spread h1 {
  font-size: clamp(3.15rem, 4.4vw, 4.8rem);
}

.internship-spread h2 {
  font-size: clamp(2rem, 3.28vw, 3.68rem);
}

.internship-spread #care-title {
  white-space: nowrap;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem);
}

.internship-spread h3 {
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 700;
}

.internship-leaf > p:not(.internship-overline, .internship-caption),
.internship-retro p {
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.82;
}

.internship-opening-meta {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 35px 0;
  font-family: "JMH Typewriter", "Courier Prime", ui-monospace, monospace;
  font-size: 0.94rem;
  line-height: 1.5;
  text-align: center;
}

.internship-opening .internship-intro {
  max-width: 28rem;
  font-family:
    "Courier Prime", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.45;
}

.internship-badge-leaf {
  display: grid;
  place-items: center;
}

.internship-badge {
  --badge-drag-x: 0px;
  --badge-drag-y: 0px;
  display: block;
  position: relative;
  z-index: 4;
  width: min(75.2%, 400px);
  height: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform: translate3d(var(--badge-drag-x), var(--badge-drag-y), 0) rotate(4deg);
  transform-origin: center;
  filter: drop-shadow(0 24px 25px rgba(36, 49, 62, 0.22));
  will-change: transform;
  -webkit-user-drag: none;
}

.internship-badge.is-dragging {
  z-index: 30;
  cursor: grabbing;
}

.internship-folio {
  position: absolute;
  right: 5%;
  bottom: 24px;
  color: #526878;
  font-variant-numeric: tabular-nums;
}

.internship-stat {
  display: grid;
  gap: 4px;
  margin-top: 42px;
}

.internship-stat strong,
.internship-metrics strong {
  font-family:
    "Courier Prime", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.08rem, 3.44vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
}

.internship-stat span,
.internship-metrics span {
  font-size: 0.82rem;
}

.internship-figure {
  min-width: 0;
  margin: 0;
}

.internship-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.internship-figure figcaption,
.internship-caption {
  margin-top: 8px;
  color: #4e6574;
}

.internship-video-stack {
  display: grid;
  gap: 24px;
}

.internship-video {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e7ecee;
}

.internship-video:focus-visible {
  outline: 3px solid #203647;
  outline-offset: 4px;
}

.internship-video > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.internship-poster-row,
.internship-care-photos {
  display: grid;
  gap: 10px;
}

.internship-poster-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.internship-banner {
  margin-top: 24px;
}

.internship-document {
  padding: 18px;
  border: 1px solid rgba(44, 73, 90, 0.25);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6px 20px rgba(35, 63, 73, 0.06);
}

.internship-document-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(44, 73, 90, 0.22);
  font-size: 0.82rem;
  font-weight: 700;
}

.internship-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 15px;
}

.internship-report-grid > div {
  min-height: 112px;
  padding: 12px;
  border: 1px solid rgba(44, 73, 90, 0.12);
  background: #fff;
}

.internship-report-grid strong {
  display: block;
}

.internship-report-grid strong {
  margin-bottom: 9px;
  font-size: 0.74rem;
}

.internship-report-grid p {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.55;
}

.internship-process,
.internship-timeline ol,
.internship-sop ol {
  list-style: none;
  padding: 0;
}

.internship-process {
  display: grid;
  gap: 10px;
  margin: 35px 0 0;
}

.internship-process li {
  display: flex;
  gap: 18px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(44, 73, 90, 0.25);
  font-family:
    "Courier Prime", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.2rem;
}

.internship-process span {
  font-family:
    "Courier Prime", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72rem;
}

.internship-gift-photo img {
  max-height: 320px;
  object-fit: cover;
}

.internship-brief {
  margin-top: 22px;
}

.internship-brief dl {
  margin: 10px 0 0;
}

.internship-brief dl > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(44, 73, 90, 0.12);
  font-size: 0.78rem;
  line-height: 1.45;
}

.internship-brief dl > div:last-child {
  border-bottom: 0;
}

.internship-brief dt {
  font-weight: 700;
}

.internship-brief dd {
  margin: 0;
}

.internship-timeline {
  max-width: 460px;
}

.internship-timeline h3 {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(44, 73, 90, 0.34);
}

.internship-timeline ol {
  margin: 0;
}

.internship-timeline li {
  display: grid;
  grid-template-columns: 85px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(44, 73, 90, 0.18);
  font-size: 0.91rem;
}

.internship-timeline time {
  font-variant-numeric: tabular-nums;
  color: #526878;
}

.internship-retro {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid rgba(44, 73, 90, 0.32);
}

.internship-retro span {
  font-size: 0.75rem;
  font-weight: 700;
}

.internship-retro p {
  margin-bottom: 0;
}

.internship-care-banner {
  margin-top: 25px;
}

.internship-care-photos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.internship-care-photos img {
  height: auto;
  object-fit: contain;
}

.internship-care-video {
  width: 100%;
}

.internship-anniversary-steps {
  display: grid;
  gap: 14px;
  margin-top: 48px;
  font-family:
    "Courier Prime", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.5rem;
}

.internship-sop ol {
  margin: 8px 0 0;
}

.internship-sop li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(44, 73, 90, 0.14);
}

.internship-sop li:last-child {
  border-bottom: 0;
}

.internship-sop li > span {
  grid-row: span 2;
  font-size: 0.72rem;
}

.internship-sop strong {
  font-size: 0.88rem;
}

.internship-sop small {
  margin-top: 3px;
  font-size: 0.74rem;
}

.internship-template {
  margin-top: 16px;
}

.internship-template-table {
  overflow: hidden;
  border: 1px solid rgba(44, 73, 90, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.internship-template-row,
.internship-template-placeholder {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.internship-template-row span {
  min-width: 0;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(44, 73, 90, 0.18);
  border-right: 1px solid rgba(44, 73, 90, 0.12);
  font-size: 0.62rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.internship-template-row span:last-child,
.internship-template-placeholder i:last-child {
  border-right: 0;
}

.internship-template-placeholder i {
  height: 34px;
  margin: 7px 4px;
  border-right: 1px solid rgba(44, 73, 90, 0.1);
  background: #e5e9e9;
}

.internship-metrics {
  display: flex;
  gap: 45px;
  margin: 33px 0 24px;
}

.internship-metrics > div {
  display: grid;
  gap: 4px;
}

.internship-role-card {
  max-width: 320px;
}

.internship-role-card img {
  max-height: 170px;
  object-fit: cover;
}

.internship-brainstorm-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.internship-brainstorm-gallery .main {
  grid-column: 1 / -1;
}

.internship-brainstorm-gallery .main img {
  max-height: 270px;
  object-fit: cover;
}

.internship-brainstorm-gallery .internship-figure:not(.main) img {
  height: 155px;
  object-fit: cover;
}

.internship-ending-date {
  font-family:
    "Courier Prime", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.4rem;
}

.internship-ending-summary {
  margin: 0;
  font-family: "JMH Typewriter", "Courier Prime", ui-monospace, monospace;
  font-size: clamp(1.2rem, 2.16vw, 2.2rem);
  font-weight: 400;
  line-height: 1.36;
  text-align: center;
}

.internship-ending-words {
  font-family:
    "Courier Prime", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.16rem, 1.92vw, 2.08rem) !important;
  line-height: 1.55 !important;
  text-align: center;
}

.internship-ending-brand {
  margin-top: 60px;
  font-size: 0.8rem !important;
  font-weight: 700;
}

/* This sits after the editorial rules so every English and numeric treatment
   uses the same sans-serif family as the book navigation. */
.internship-book-content :is(h1, h2, h3, p, span, small, strong, li, figcaption, dt, dd) {
  font-family:
    Inter, "Internship Chinese Typewriter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.internship-book-content .internship-opening-meta span,
.internship-book-content .internship-ending-summary,
.internship-book-content .internship-spread h2,
.internship-book-content .internship-stat strong,
.internship-book-content .internship-metrics strong,
.internship-book-content .internship-ending-words {
  font-family:
    "JMH Typewriter", "Internship Chinese Typewriter", "Courier Prime", ui-monospace,
    monospace;
}

@media (max-width: 760px) {
  body {
    background:
      linear-gradient(180deg, rgba(205, 224, 226, 0.74), rgba(255, 255, 255, 0) 72px)
        center top / 100vw 104px no-repeat,
      var(--paper);
  }

  .site-nav {
    padding-top: 12px;
  }

  .site-nav nav {
    gap: 14px;
    justify-content: flex-start;
    width: 100%;
    min-height: 58px;
    overflow-x: auto;
    padding: 0 18px;
  }

  .site-nav a {
    font-size: 0.88rem;
  }

  .internship-book {
    width: var(--internship-book-width);
  }

  .internship-page {
    --internship-book-width: 96vw;
  }

  .internship-back,
  .photography-back,
  .research-back,
  .writing-back {
    top: 12px;
    left: 8px;
  }

  .photography-field-blue-main {
    --field-left: 74%;
    --field-top: 18%;
    --field-width: 210vw;
    --field-height: 116vh;
  }

  .photography-field-green {
    --field-left: 12%;
    --field-top: 100%;
    --field-width: 242vw;
    --field-height: 142vh;
    --field-rotate: -10deg;
    background: linear-gradient(24deg, #708962 0%, rgba(112, 137, 98, 0.95) 40%, rgba(112, 137, 98, 0.54) 57%, rgba(112, 137, 98, 0) 81%);
  }

  .photography-field-blue-secondary {
    --field-left: 8%;
    --field-top: 31%;
    --field-width: 154vw;
    --field-height: 88vh;
  }

  .internship-paper {
    background: rgba(244, 248, 250, 0.78);
  }

  .internship-spine {
    display: none;
  }

  .internship-spread {
    grid-template-columns: 1fr;
    gap: 30px;
    min-height: 0;
    padding: 78px 0 58px;
  }

  .internship-opening {
    min-height: 100svh;
  }

  .internship-leaf-left,
  .internship-leaf-right {
    grid-column: 1;
    padding-inline: 28px;
  }

  .internship-spread h1 {
    font-size: clamp(2.55rem, 12vw, 4rem);
  }

  .internship-spread h2 {
    font-size: clamp(1.88rem, 8vw, 2.72rem);
  }

  .internship-badge {
    width: min(60%, 288px);
  }

  .internship-video-stack {
    gap: 18px;
  }

  .internship-folio {
    right: 28px;
    bottom: 22px;
  }

  .internship-brainstorm-gallery .internship-figure:not(.main) img {
    height: 120px;
  }

  .internship-metrics {
    gap: 28px;
  }

  .hero {
    padding-top: 98px;
  }

  .laptop-trigger {
    width: min(55.2vw, 312px);
  }

  .screen-lid {
    border-width: 8px;
    border-bottom-width: 20px;
  }

  .desktop {
    padding-top: 86px;
  }

  .desktop-shell {
    width: min(94vw, calc((100vh - 128px) * 1.4145));
    min-height: 0;
    aspect-ratio: auto;
    border-width: 7px;
    border-bottom-width: 14px;
  }

  .desktop-shell::before {
    content: "";
    display: block;
    padding-top: 70.7%;
  }

  .folder-name {
    font-size: 0.72rem;
  }

  .visual-modal {
    padding: 16px;
  }

  .finder-window {
    width: min(434px, calc(70vw - 32px));
    min-height: 0;
  }

  .finder-toolbar {
    min-height: 35px;
    padding: 0 13px;
  }

  .toolbar-icons {
    display: none;
  }

  .visual-folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    min-height: 189px;
    padding: 20px 25px 25px;
  }

  .visual-folder span {
    width: min(78px, 15vw);
  }

  .post-3d-card {
    width: 200px;
    height: 285px;
  }

  .post-detail-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 52%) minmax(0, 48%);
    height: min(780px, 94vh);
  }

  .post-detail-copy {
    padding: 42px 24px 30px;
  }

  .about-topbar {
    height: 60px;
  }

  .about-layout {
    padding-top: 74px;
  }

  .about-tree {
    width: min(86vw, 360px);
    height: min(66vh, 530px);
  }

  .about-line {
    font-size: 13px;
  }

  .about-notes {
    min-height: 205px;
  }

  .cv-preview[open] {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .zine-topbar {
    height: 60px;
  }

  .zine-stage {
    inset: 60px 0 0;
  }

  .zine-cloud {
    width: 96vw;
    gap: 5px;
  }

  .zine-cloud-top {
    top: 3%;
    min-height: 33%;
  }

  .zine-cloud-bottom {
    bottom: 5%;
    min-height: 33%;
  }

  .zine-card-poster {
    width: min(17vw, 76px);
    height: min(21vh, 130px);
  }

  .zine-card-narrow {
    width: min(9vw, 40px);
    height: min(21vh, 130px);
  }

  .zine-card-square {
    width: min(19vw, 86px);
    height: min(15vh, 86px);
  }

  .zine-card-wide {
    width: min(28vw, 120px);
    height: min(9vh, 62px);
  }

  .zine-search {
    width: min(72vw, 370px);
    height: 50px;
  }

  .zine-detail {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 2px;
    padding: 75px 8px 20px;
  }

  .zine-detail button {
    width: 32px;
    height: 32px;
  }

  .zine-detail-close,
  .zine-detail-zoom {
    top: 16px;
    right: 16px;
  }

  .zine-detail-zoom {
    right: 60px;
  }
}

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

/* Ordered, full-frame AIGC image preview */
.research-image-placeholder {
  display: block;
  aspect-ratio: 4 / 3;
  background: transparent;
}

.research-image-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 650ms ease;
}

.research-image-slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .research-image-slide { transition-duration: 1ms; }
}

/* Photography portfolio wall: clean white canvas and widely spaced thumbnails */
.photography-page {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #438ddd url("./assets/photography/gallery/photography-background.jpeg") center center / cover no-repeat;
  transition: opacity 360ms ease;
  scrollbar-width: none;
}

.photography-page::-webkit-scrollbar { display: none; }

.photography-content {
  position: relative;
  z-index: 1;
  min-height: 100%;
  pointer-events: auto;
}

.photography-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: start;
  gap: clamp(52px, 7vw, 108px) clamp(12px, 1.8vw, 30px);
  width: min(100%, 1920px);
  margin: 0 auto;
  padding: clamp(96px, 13vh, 150px) clamp(24px, 5vw, 96px) 18vh;
}

.photography-slot {
  position: relative;
  grid-column: span var(--photo-span, 3);
  margin-top: var(--photo-drop, 0px);
  margin-bottom: 0;
  background: transparent;
  opacity: 0;
  transform: translate3d(var(--photo-drift-x, 0px), calc(14px + var(--photo-drift-y, 0px)), 0) scale(.985);
  transition: opacity 700ms ease, transform 850ms cubic-bezier(.2,.7,.2,1), background-color 350ms ease;
  transition-delay: var(--photo-delay, 0ms);
  will-change: transform;
}

.photography-slot img,
.photography-slot video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.photography-slot video { max-height: 72vh; }

.photography-page[aria-hidden="false"] .photography-slot {
  opacity: 1;
  transform: translate3d(var(--photo-drift-x, 0px), var(--photo-drift-y, 0px), 0) scale(1);
}

.photography-slot:hover {
  z-index: 2;
  background: #eceeea;
  transform: translate3d(var(--photo-drift-x, 0px), calc(var(--photo-drift-y, 0px) - 5px), 0) scale(1.045);
  transition-delay: 0ms;
}

.photography-back { color: #222; }

@media (max-width: 760px) {
  .photography-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 38px 12px;
    padding: 88px 18px 100px;
  }

  .photography-slot { grid-column: span 2; }
  .photography-slot[data-span="4"] { grid-column: span 4; }
}

@media (prefers-reduced-motion: reduce) {
  .photography-slot { transition-duration: 1ms; }
}