/* ============================================================
   YIYAO'S PORTFOLIO — v2
   Watercolor paper + ink handwriting + screen-print collage
   Reference: gaheon "About My Youth"
   ============================================================ */

:root {
  --paper: #f8f4ea;
  --paper-deep: #f1ebdc;
  --ink: #a8af8e;          /* soft sage green, from user's swatch */
  --ink-pink: #c96a5e;     /* dried-rose ink */
  --text: #847d6e;         /* small gray captions */
  --text-dark: #55503f;

  --sage: #cfdcb4;
  --sage-deep: #a9bd85;
  --powder: #c3d9e6;
  --powder-deep: #93b7cb;
  --blush: #f2d3d1;
  --blush-deep: #e3a9a4;
  --butter: #f2e5bd;
  --butter-deep: #d9c07c;
  --clay: #ecc9b3;

  --hand: "Caveat", cursive;
  --note: "Shadows Into Light Two", cursive;
  --body: "Karla", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--text);
  background-color: var(--paper);
  /* halftone dot grain, like risograph paper */
  background-image: radial-gradient(rgba(94, 84, 62, 0.038) 1px, transparent 1.4px);
  background-size: 11px 11px;
  overflow-x: hidden;
}

::selection { background: var(--butter); }

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

img { max-width: 100%; display: block; }

/* ---------------- NAV ---------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 5vw 12px;
  background: rgba(242, 237, 225, 0.88);
  backdrop-filter: blur(5px);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
}
.nav-logo img {
  height: 34px;
  width: auto;
  transform: rotate(-2deg);
  transition: transform 0.25s;
  filter: drop-shadow(0 3px 4px rgba(85, 75, 50, 0.18));
}
.nav-logo:hover img { transform: rotate(2deg) scale(1.06); }

.nav-links { display: flex; gap: clamp(10px, 2.4vw, 30px); list-style: none; }

.nav-links a {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 3px;
  position: relative;
  transition: color 0.2s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 3px;
  background: var(--butter-deep);
  border-radius: 3px;
  transform: rotate(-1deg);
  transition: right 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }

/* ---------------- SHARED TYPE ---------------- */
.tiny {
  font-family: var(--note);
  font-size: 1.02rem;
  color: var(--text);
  letter-spacing: 0.04em;
}

.script {
  font-family: var(--hand);
  font-weight: 700;
  color: var(--ink);
  line-height: 0.9;
}

.gray-note {
  font-size: 0.86rem;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.7;
}

/* ---------------- HERO (index) ---------------- */
.hero {
  position: relative;
  min-height: 92vh;
  padding: 8vh 6vw 10vh;
  overflow: hidden;
}

.hero .tiny { display: block; margin-bottom: 3vh; }

.hero h1 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(4rem, 11vw, 9.5rem);
  line-height: 0.88;
  color: var(--ink);
  position: relative;
  z-index: 3;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

.hero h1 .line2 {
  display: block;
  margin-left: clamp(1rem, 5vw, 4.5rem);
  transform: rotate(-2.5deg);
  color: var(--ink-pink);
}

.hero .hero-cap {
  margin-top: 3.5vh;
  max-width: 34ch;
  position: relative;
  z-index: 3;
}

/* name note — torn paper sticker */
.name-note {
  position: relative;
  margin: 5vh auto 0;
  width: fit-content;
  padding: 44px 110px 40px 58px;
  background: url("assets/tornnote.png") center / 100% 100% no-repeat;
  transform: rotate(-1.5deg);
  z-index: 3;
  float: left;
  margin-left: 40%;
}
.name-note .nm {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--text-dark);
  line-height: 1;
  white-space: nowrap;
}
.name-note .gr {
  font-family: var(--note);
  font-size: 1rem;
  color: var(--text);
  margin-top: 6px;
}
.name-note .pin {
  position: absolute;
  top: -34px;
  right: -30px;
  width: 34px;
  transform: rotate(10deg);
}

/* collage prints */
.print {
  position: absolute;
  background: #fbf8ef;
  padding: 8px 8px 6px;
  box-shadow: 0 14px 30px rgba(85, 75, 50, 0.16);
  z-index: 1;
  transition: transform 0.3s ease;
}
.print:hover { transform: scale(1.04) rotate(0deg) !important; z-index: 6; }
.print img { width: 100%; }
.print figcaption {
  font-family: var(--note);
  font-size: 0.8rem;
  color: var(--text);
  text-align: center;
  padding-top: 5px;
}

/* scattered watercolor stickers — each one leans on a neighbour */
.picnic {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.picnic img {
  position: absolute;
  filter: drop-shadow(0 10px 14px rgba(85, 75, 50, 0.18));
  transition: transform 0.3s ease;
  pointer-events: auto;
}
.picnic img:hover { transform: scale(1.07) rotate(0deg) !important; z-index: 7; }
/* melon — sits on the gourd print's bottom-right corner */
.picnic .p-melon   { left: calc(4vw + 238px);  top: 47%; width: 88px;  rotate: -10deg; z-index: 3; }
/* book — rests by the name note's lower-left */
.picnic .p-book    { left: calc(50% + 180px); top: 20%; width: 106px; rotate: -7deg; z-index: 4; }
/* chair — casual in the bottom-right, touching the documentary print */
.picnic .p-chair   { right: 24vw; bottom: 2vh;  width: 140px; rotate: 9deg;  z-index: 3; }

/* tape strips over prints */
.tape {
  position: absolute;
  width: 72px;
  height: 22px;
  top: -11px;
  left: 50%;
  background: url("assets/tape.png") center / cover no-repeat;
  opacity: 0.9;
  z-index: 3;
}
.tape.r { transform: translateX(-50%) rotate(3deg); }
.tape.l { transform: translateX(-50%) rotate(-4deg); }

/* loose stickers */
.sticker { position: absolute; z-index: 4; filter: drop-shadow(0 6px 8px rgba(85,75,50,0.18)); }

/* faint background script words */
.wm {
  position: absolute;
  font-family: var(--hand);
  color: rgba(70, 105, 100, 0.055);
  font-size: 5.5rem;
  white-space: nowrap;
  z-index: 0;
  user-select: none;
}

/* ---------------- SECTIONS ---------------- */
.section { position: relative; padding: 11vh 8vw; }

.section-head .chap {
  font-family: var(--note);
  font-size: 1.05rem;
  color: var(--text);
  display: block;
  margin-bottom: 8px;
}
.section-head h2 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  color: var(--ink);
  transform: rotate(-1.2deg);
  width: fit-content;
}
.section-head .gray-note { margin-top: 12px; max-width: 46ch; }

/* empty editable slot for user's own text */
.about-slot {
  margin-top: 20px;
  max-width: 52ch;
  min-height: 80px;
  border-bottom: 1px dashed rgba(120, 110, 85, 0.35);
}

/* ---------------- COLLECTION CARDS ---------------- */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 56px 38px;
  margin-top: 7vh;
}

.card {
  position: relative;
  background: #fbf8ef;
  padding: 10px 10px 16px;
  box-shadow: 0 16px 32px rgba(85, 75, 50, 0.15);
  display: block;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.card:nth-child(4n+1) { transform: rotate(-2.4deg); }
.card:nth-child(4n+2) { transform: rotate(1.6deg) translateY(26px); }
.card:nth-child(4n+3) { transform: rotate(-1.2deg); }
.card:nth-child(4n)   { transform: rotate(2.6deg) translateY(14px); }
.card:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow: 0 24px 44px rgba(85, 75, 50, 0.2);
  z-index: 5;
}

.card .visual { position: relative; height: 200px; overflow: hidden; }
.card .visual > * { position: absolute; }

.card h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--ink);
  margin: 14px 4px 0;
}
.card .sub {
  font-family: var(--body);
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 4px 4px 2px;
}
.card .open {
  font-family: var(--note);
  font-size: 0.85rem;
  color: var(--ink-pink);
  margin: 8px 4px 0;
  opacity: 0;
  transition: opacity 0.25s;
}
.card:hover .open { opacity: 1; }

/* watercolor swatches */
.swatch { width: 100%; height: 100%; position: relative; }
.swatch::after {
  /* print-grain noise */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.1;
}
.sw-green  { background: radial-gradient(115% 95% at 25% 22%, #e2ebcd 0%, var(--sage) 45%, rgba(169,189,133,0.55) 78%, rgba(169,189,133,0.15) 100%), #f6f3e8; }
.sw-blue   { background: radial-gradient(115% 95% at 30% 25%, #e3eef4 0%, var(--powder) 45%, rgba(147,183,203,0.55) 78%, rgba(147,183,203,0.15) 100%), #f5f3ea; }
.sw-pink   { background: radial-gradient(115% 95% at 28% 24%, #f9e9e6 0%, var(--blush) 45%, rgba(227,169,164,0.5) 78%, rgba(227,169,164,0.12) 100%), #f7f2e9; }
.sw-yellow { background: radial-gradient(115% 95% at 26% 24%, #f8f0d6 0%, var(--butter) 45%, rgba(217,192,124,0.5) 78%, rgba(217,192,124,0.14) 100%), #f7f3e6; }
.sw-clay   { background: radial-gradient(115% 95% at 28% 24%, #f6e4d5 0%, var(--clay) 48%, rgba(216,160,125,0.45) 78%, rgba(216,160,125,0.12) 100%), #f6f1e8; }

.swatch .st {
  position: absolute;
  filter: drop-shadow(0 4px 6px rgba(85,75,50,0.2));
}

/* ---------------- ACTIVITY BLOCKS (subpages) ---------------- */
.chapter-hero { position: relative; padding: 9vh 8vw 6vh; text-align: center; }
.chapter-hero .chap { font-family: var(--note); font-size: 1.05rem; color: var(--text); display: block; margin-bottom: 10px; }
.chapter-hero h1 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 6.5rem);
  color: var(--ink);
  transform: rotate(-1.5deg);
  width: fit-content;
  margin: 0 auto;
}
.chapter-hero .gray-note { margin-top: 14px; max-width: 40ch; margin-left: auto; margin-right: auto; }
.chapter-hero .hero-strip {
  margin-top: 6vh;
  max-width: 640px;
  position: relative;
}

.activities { padding: 4vh 8vw 12vh; }

.activity {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto 13vh;
}
.activity:nth-of-type(even) .a-visual { order: -1; }
.activity:nth-of-type(odd)  { transform: rotate(-0.4deg); }
.activity:nth-of-type(even) { transform: rotate(0.4deg); }

/* music & documentary pages — one centred column, text in the middle */
.music-activity,
.center-col {
  grid-template-columns: 1fr;
  max-width: 780px;
  margin: 0 auto 9vh;
  text-align: center;
  transform: none;
}
.music-activity .a-body h3,
.center-col .a-body h3 { text-align: center; }
.music-activity .a-body .sub,
.center-col .a-body .sub { display: block; text-align: center; }
.music-activity .a-body p,
.center-col .a-body p { max-width: 640px; margin-left: auto; margin-right: auto; }
.music-activity .a-facts,
.center-col .a-facts {
  max-width: 460px;
  margin: 28px auto 0;
  text-align: left;
}
.pdf-link.inline {
  margin-top: 0;
  font-size: 1rem;
  padding: 5px 16px 5px;
  box-shadow: 0 3px 9px rgba(85, 75, 50, 0.12);
}

/* raw urls inside fact rows — clearly clickable, underlined */
.a-facts .text-link {
  font-family: var(--body);
  color: var(--text-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--sage-deep);
  text-underline-offset: 4px;
  word-break: break-all;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.a-facts .text-link:hover { color: var(--ink-pink); text-decoration-color: var(--ink-pink); }

/* documentary player — embedded, plays on the page (film-strip frame around it) */
.doc-video {
  position: relative;
  max-width: 900px;
  margin: 0 auto 10vh;
  z-index: 2;
  text-align: center;
}
.video-hint {
  font-family: var(--note);
  font-size: 1.2rem;
  color: var(--ink-pink);
  letter-spacing: 0.02em;
  text-align: center;
  transform: rotate(-1.5deg);
}
.doc-video .video-hint { margin-bottom: 14px; }
.video-showcase .video-hint { margin: 22px auto 0; }
.video-shell {
  position: relative;
  background: #34302a;
  padding: 34px 26px;
  border-radius: 10px;
  box-shadow: 0 18px 34px rgba(60, 52, 35, 0.28);
}
.video-shell::before,
.video-shell::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 16px;
  background-image: radial-gradient(circle at center, #f3eddc 4.5px, transparent 5px);
  background-size: 26px 16px;
  background-repeat: repeat-x;
  background-position: center;
}
.video-shell::before { top: 8px; }
.video-shell::after { bottom: 8px; }
.video-shell iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 3px;
  background: #000;
}

/* soft depth so the big hand-written titles don't sit dead flat */
h1, h2, h3, .feature-title, .script {
  text-shadow:
    0.035em 0.05em 0 rgba(85, 75, 50, 0.13),
    0.08em 0.11em 16px rgba(85, 75, 50, 0.18);
}

.a-body h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: var(--ink);
  line-height: 1;
}
.a-body .sub {
  font-family: var(--note);
  font-size: 1.12rem;
  color: var(--ink-pink);
  display: block;
  margin: 8px 0 18px;
}
.a-body p {
  font-size: 0.94rem;
  line-height: 1.85;
  margin-bottom: 14px;
  max-width: 52ch;
}

.a-facts { list-style: none; margin-top: 20px; }
.a-facts li {
  padding: 9px 2px;
  border-bottom: 1px dashed rgba(120, 110, 85, 0.3);
  font-size: 0.9rem;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.a-facts .k {
  font-family: var(--note);
  color: var(--ink);
  font-size: 1rem;
  min-width: 88px;
}

.a-visual .print { position: relative; transform: rotate(1.8deg); transition: transform 0.3s; }
.a-visual .print:hover { transform: rotate(0deg) scale(1.02); }
.a-visual .print .visual { height: 300px; overflow: hidden; position: relative; }
.a-visual .print .visual img { width: 100%; height: 100%; object-fit: cover; }

.ph-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--note);
  color: rgba(85, 80, 63, 0.55);
  font-size: 1.02rem;
  text-align: center;
  z-index: 2;
}

/* ---------------- ABING FEATURE (media) ---------------- */
/* 居中纯文字介绍行 */
.abing-feature {
  position: relative;
  text-align: center;
  max-width: 1180px;
  margin: 0 auto 13vh;
}

.abing-intro {
  max-width: 74ch;
  margin: 0 auto 6vh;
}

.abing-intro h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: var(--ink);
  line-height: 1;
}

.abing-intro .sub {
  font-family: var(--note);
  font-size: 1.12rem;
  color: var(--ink-pink);
  display: block;
  margin: 10px 0 18px;
}

.abing-intro p {
  font-size: 0.95rem;
  line-height: 1.85;
  margin: 0 auto;
}

/* 介绍下面的手写体小列表（my role / built with / listen） */
.abing-facts {
  max-width: 560px;
  margin: 30px auto 0;
  text-align: left;
}

/* ---------------- COLLAGE DECORATIONS ---------------- */
/* 抠好底的贴纸，散在文字区块两侧；层级压在内容下方，绝不盖住文字/截图 */
.collage-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* 双层投影：近处贴纸浮起 + 远处落影，配合白边做出 die-cut 立体感 */
  filter:
    drop-shadow(0 4px 6px rgba(85, 75, 50, 0.22))
    drop-shadow(0 16px 22px rgba(85, 75, 50, 0.28));
}

.doc-zone { position: relative; }

/* 文字与网格抬到贴纸之上 */
.abing-intro,
.shot-grid,
.pdf-line,
.center-col .a-body { position: relative; z-index: 2; }

@media (max-width: 1300px) {
  .collage-deco { display: none; }
}

/* 10 张截图：一行 5 张 × 2 行，无边框无装饰，规整排列（16:10 适配宽屏截图） */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 1360px;
  margin: 0 auto;
}

/* 大屏时网格向两侧扩展，单张更大 */
@media (min-width: 1000px) {
  .shot-grid { margin: 0 -2.5vw; }
}

.shot {
  aspect-ratio: 16 / 10;
  background: #eee8d9;
  overflow: hidden;
}

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

/* 截图下面：完整 pdf 链接（复用全局 .pdf-link 样式，仅在 media 页居中） */
.abing-feature .pdf-link { margin-top: 3vh; }

/* ---------------- VIDEO SHOWCASE (academics) ---------------- */
.video-showcase {
  position: relative;
  max-width: 880px;
  margin: 2vh auto 10vh;
  padding: 34px 52px 40px;
}

.video-frame {
  position: relative;
  filter: drop-shadow(0 20px 34px rgba(85, 75, 50, 0.2));
}
.video-frame > img {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.video-frame video,
.video-frame iframe {
  position: absolute;
  /* cut-out of the Serenity poster (measured): left 10.29% top 14.78% w 79.43% h 70.44% */
  left: 10.29%;
  top: 14.78%;
  width: 79.43%;
  height: 70.44%;
  object-fit: cover;
  border: 0;
  background: #dde7f2;
  z-index: 1;
}

/* denim patches scattered around the video */
.video-showcase .deco {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(60, 70, 100, 0.22));
}
.video-showcase .deco img { width: 100%; display: block; }

/* CLASSEN BLUE spelled in denim letter patches */
.denim-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.denim-title img {
  height: 46px;
  width: auto;
  filter: drop-shadow(0 4px 6px rgba(60, 70, 100, 0.25));
}
.denim-title img:nth-child(3n) { transform: rotate(-3.5deg) translateY(-2px); }
.denim-title img:nth-child(3n+1) { transform: rotate(2.5deg) translateY(1px); }
.denim-title img:nth-child(3n+2) { transform: rotate(-1.5deg); }
.denim-title .gap { width: 30px; }

/* handwritten aside */
.aside-note {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
  opacity: 0.75;
  transform: rotate(-2deg);
  display: inline-block;
}

/* ---------------- ABOUT NOTE CARD ---------------- */
.note-card {
  position: relative;
  max-width: 620px;
  margin-top: 6vh;
  padding: 40px 46px 44px;
  background: url("assets/spiralnote.png") center / 100% 100% no-repeat;
  transform: rotate(-1deg);
  min-height: 300px;
}
.note-card h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.note-card ul { list-style: none; }
.note-card li {
  font-family: var(--note);
  font-size: 1.08rem;
  color: var(--text-dark);
  padding: 5px 0;
}
.note-card li b { color: var(--ink); font-weight: 400; }

/* ---------------- FOOTER ---------------- */
.footer {
  margin-top: 6vh;
  padding: 9vh 8vw 7vh;
  background: var(--paper-deep);
  text-align: center;
}
.footer .script { font-size: 2.2rem; }
.footer .gray-note { margin-top: 12px; }
.footer a { color: var(--ink-pink); }
.footer a:hover { text-decoration: underline wavy; }

/* ---------------- FEATURE BLOCKS (arts page) ---------------- */
.feature-block {
  position: relative;
  max-width: 1120px;
  margin: 0 auto 14vh;
  text-align: center;
}
.feature-head { position: relative; }
.feature-title {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.8rem);
  color: var(--ink);
  transform: rotate(-1.2deg);
  width: fit-content;
  margin: 0 auto;
  line-height: 1;
}
.feature-sub {
  font-family: var(--note);
  font-size: 1.15rem;
  color: var(--ink-pink);
  display: block;
  margin: 12px 0 16px;
}
.feature-text {
  font-size: 0.94rem;
  line-height: 1.85;
  max-width: 60ch;
  margin: 0 auto;
}

/* photo galleries */
.gallery-grid {
  display: grid;
  gap: 36px 30px;
  margin-top: 6vh;
}
.gallery-grid.g5 { grid-template-columns: repeat(6, 1fr); }
.gallery-grid.g5 .slot { grid-column: span 3; aspect-ratio: 16 / 9; }
.gallery-grid.g5 .slot:nth-child(n+3) { grid-column: span 2; }
/* gourd photos are all 16:9 — let them fit fully instead of being cropped */
.gallery-grid.g5 .slot img { object-fit: contain; background: #fbf8ef; }
.gallery-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.gallery-grid.g4 { grid-template-columns: repeat(4, 1fr); }
/* club photos come in mixed ratios — show them whole, no cropping */
.gallery-grid.g3 .slot img { object-fit: contain; background: #fbf8ef; }

.slot {
  position: relative;
  background: #fbf8ef;
  padding: 10px 10px 10px;
  box-shadow: 0 12px 26px rgba(85, 75, 50, 0.15);
  aspect-ratio: 4 / 3;
  transition: transform 0.3s ease;
}
.slot:hover { transform: scale(1.02); z-index: 5; }
.slot .inner {
  width: 100%;
  height: 100%;
  border: 1.5px dashed rgba(120, 110, 85, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--note);
  color: rgba(85, 80, 63, 0.55);
  font-size: 1.05rem;
  text-align: center;
  padding: 8px;
}
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- MUSIC PAGE COLLAGE (ensemble block) ---------------- */
.ensemble-wrap { position: relative; }
.ensemble-wrap .music-activity,
.ensemble-wrap .gallery-grid { position: relative; z-index: 1; }

.mdeco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.mdeco.line { opacity: 0.45; }
.mdeco.stick { filter: drop-shadow(0 7px 11px rgba(85, 75, 50, 0.22)); }

/* scattered around the centred text column — 6 pieces only */
.md-swirl      { top: -56px; left: -0.5%; width: 215px; transform: rotate(-8deg); }
.md-treble     { top: -40px; right: 3.5%; width: 108px; transform: rotate(9deg); z-index: 2; }
.md-headphones { top: 40%;  right: 0.8%; width: 118px; transform: rotate(5deg); z-index: 2; opacity: 0.85; }
.md-circle     { top: 34%; left: 0%; width: 150px; transform: rotate(-6deg); }
.md-piano      { bottom: 6px;  left: 0.8%; width: 138px; transform: rotate(-7deg); z-index: 2; }
.md-doodle     { bottom: -40px; left: 14%;  width: 74px;  transform: rotate(-12deg); z-index: 2; }

@media (max-width: 1100px) {
  .md-headphones { display: none; }
  .md-swirl  { width: 150px; top: -40px; }
  .md-treble { width: 80px; }
  .md-circle { width: 110px; }
  .md-piano  { width: 100px; }
}
@media (max-width: 900px) {
  .mdeco { display: none; }
}

/* club row — a little playful */.gallery-grid.g3 .slot:nth-child(1) { transform: rotate(-2deg); }
.gallery-grid.g3 .slot:nth-child(2) { transform: rotate(1.6deg) translateY(8px); }
.gallery-grid.g3 .slot:nth-child(3) { transform: rotate(-1.2deg) translateY(-4px); }
.gallery-grid.g3 .slot:nth-child(1):hover,
.gallery-grid.g3 .slot:nth-child(3):hover { transform: rotate(0deg) scale(1.02); }
.gallery-grid.g3 .slot:nth-child(2):hover { transform: rotate(0deg) translateY(0) scale(1.02); }

/* portfolio pdf link */
.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6vh;
  font-family: var(--note);
  font-size: 1.15rem;
  color: var(--text-dark);
  background: #fbf7ec;
  border: 1.6px solid rgba(168, 175, 142, 0.9);
  border-radius: 999px;
  padding: 11px 26px 12px;
  box-shadow: 0 6px 14px rgba(85, 75, 50, 0.13);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.pdf-link::after { content: "↗"; font-family: var(--body); font-size: 0.95rem; line-height: 1; }
.pdf-link:hover {
  transform: translateY(-2px) rotate(-0.8deg);
  background: var(--butter);
  color: var(--text-dark);
  box-shadow: 0 11px 22px rgba(85, 75, 50, 0.2);
}

/* ---------------- COLLAGE STICKERS (arts page) ---------------- */
.deco {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(85, 75, 50, 0.32));
}

/* — Gourd, Everywhere — */
.deco-g1 { left: 4.5%;  top: -46px; width: 152px; rotate: -8deg; }   /* 翠玉葫芦 · 标题左 */
.deco-g2 { right: 5%;   top: -66px; width: 174px; rotate: 9deg; }    /* 酒葫芦 · 标题右 */
.deco-g3 { left: 9.5%;  top: 44%;   width: 112px; rotate: 7deg; }    /* 素葫芦 · 文字左 */
.deco-g4 { right: 9%;   top: 44%;   width: 138px; rotate: 32deg; }  /* 蝴蝶葫芦 · 与左侧酒葫芦齐高 */

/* — School Art Club — */
.deco-a1 { left: 3%;    top: -44px; width: 140px; rotate: -6deg; }   /* 调色盘 · 标题左 */
.deco-a2 { right: 4%;   top: -86px; width: 150px; rotate: 5deg;      /* 大卫 · 标题右，重阴影 */
           filter: drop-shadow(0 22px 32px rgba(70, 65, 45, 0.45)); }
.deco-a3 { left: 10%;   top: 60%;   width: 92px;  rotate: -5deg; }   /* Faith 颜料包 · 画笔罐右下方 */
.deco-a4 { right: 6.5%; top: 28%;   width: 62px;  rotate: 8deg; }    /* Love · 文字右上 */
.deco-a5 { right: 14%;  top: 56%;   width: 66px;  rotate: -7deg; }   /* Joy · 文字右中 */
.deco-a6 { right: 3.5%; top: 64%;   width: 56px;  rotate: 5deg; }    /* Kindness · 文字右，不压图册 */
.deco-a7 { left: 1.5%;  top: 22%;   width: 130px; rotate: 60deg; }   /* 画笔罐 · 立起来，调色盘与 Faith 之间 */

@media (max-width: 1100px) {
  .deco { display: none; }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
  .hero .print, .sticker { display: none; }
  .collage-mobile { display: grid !important; }
  .activity { grid-template-columns: 1fr; }
  .activity:nth-of-type(even) .a-visual { order: 0; }
  .gallery-grid.g5 { grid-template-columns: 1fr 1fr; }
  .gallery-grid.g5 .slot,
  .gallery-grid.g5 .slot:nth-child(n+3) { grid-column: span 1; }
  .gallery-grid.g3 { grid-template-columns: 1fr; }
  .gallery-grid.g4 { grid-template-columns: 1fr 1fr; }
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
  .video-shell { padding: 26px 16px; }
  .picnic { display: none; }
}

.collage-mobile { display: none; position: relative; margin-top: 6vh; gap: 20px; }
.collage-mobile .print { position: relative; display: block; }