/* =====================================================
   ROOT + BASE
===================================================== */

:root{
  --navy:#14253d;
  --navy2:#263b58;
  --muted:#667080;
  --line:#d9ddda;
  --cream:#fafafa;
  --white:#ffffff;
  --accent:#4c6170;
  --teal:#85a4ab;
  --light-accent:#e8ebea;
  --sidebar-rail:58px;
  --sidebar-full:200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-width:none;}
::-webkit-scrollbar{width:0;height:0;display:none;}
body{
  margin:0;
  padding-left:var(--sidebar-rail);
  background:var(--cream);
  color:var(--navy);
  font-family:'Work Sans',Arial,sans-serif;
  font-size:16px;
  font-weight:300;
  line-height:1.65;
}
body.lightbox-open{overflow:hidden;}
img{display:block;width:100%;}
button,a{font:inherit;}
a{color:inherit;}
.page{overflow:hidden;}

h1,h2,h3{
  margin:0;
  font-family:'DM Serif Display',Georgia,serif;
  font-weight:400;
}
h1{font-size:clamp(68px,10vw,136px);line-height:.86;letter-spacing:-.03em;}
h2{font-size:clamp(38px,5vw,56px);line-height:1;letter-spacing:-.02em;}
h3{font-size:29px;line-height:1.08;}
p{margin-top:0;}

.eyebrow,
.section-number,
.small-label{
  margin-bottom:14px;
  color:var(--accent);
  font-size:14px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.project-hero,
.project-section{
  width:min(1152px,calc(100% - 96px));
  margin-left:auto;
  margin-right:auto;
}

/* =====================================================
   SIDEBAR — same logo/retract behavior as index
===================================================== */

.side-nav{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:var(--sidebar-rail);
  background:var(--light-accent);
  border-right:2px solid #fff;
  z-index:6000;
  overflow:hidden;
  transition:width .24s ease;
  pointer-events:auto;
}

.side-nav.hover-open{
  width:var(--sidebar-full);
}

.side-nav-inner{
  height:100%;
  width:var(--sidebar-full);
  padding:24px 8px 28px;
  overflow:hidden;
}

.side-brand{
  display:block;
  width:42px;
  height:42px;
  margin:0 0 56px 0;
  opacity:1;
  pointer-events:auto;
  transform:none;
  text-decoration:none;
  transition:transform .18s ease;
}

.side-brand:hover{
  transform:scale(1.10);
}

.side-logo{
  display:block;
  width:42px;
  height:42px;
  fill:none;
  stroke:#42524d;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.side-links{
  display:flex;
  flex-direction:column;
  gap:0;
  width:170px;
  padding-left:14px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-8px);
  transition:opacity .16s ease .04s,transform .2s ease,visibility 0s linear .20s;
}

.side-nav.hover-open .side-links{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:opacity .16s ease .04s,transform .2s ease,visibility 0s;
}

.side-nav-item{
  width:100%;
  margin:0 0 30px 0;
}
.side-nav-item:last-child{margin-bottom:0;}

.side-main-link,
.side-dropdown-toggle{
  width:100%;
  min-height:24px;
  padding:0;
  border:0;
  background:transparent;
  color:#42524d;
  font-family:inherit;
  font-size:16px;
  font-weight:400;
  line-height:1.35;
  text-align:left;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:color .16s ease,transform .18s ease;
}

.side-dropdown-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-right:15px;
}

.side-main-link:hover,
.side-dropdown-toggle:hover{
  color:#fff;
  transform:translateX(4px);
}

.side-dropdown-arrow{
  display:inline-block;
  font-size:18px;
  line-height:1;
  transition:transform .22s ease;
}
.side-dropdown.is-open .side-dropdown-arrow{transform:rotate(180deg);}

.side-submenu-wrap{
  display:grid;
  grid-template-rows:0fr;
  margin-top:0;
  opacity:0;
  transition:grid-template-rows .26s ease,opacity .18s ease,margin-top .26s ease;
}
.side-dropdown.is-open .side-submenu-wrap{
  grid-template-rows:1fr;
  margin-top:13px;
  opacity:1;
}

.side-submenu{
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:11px;
  padding-left:12px;
}

.side-submenu a{
  display:block;
  color:#42524d;
  font-size:14px;
  line-height:1.3;
  text-decoration:none;
  white-space:nowrap;
  opacity:.82;
  transition:color .16s ease,transform .18s ease,opacity .16s ease;
}
.side-submenu a:hover{color:#fff;opacity:1;transform:translateX(4px);}

/* =====================================================
   SCROLLING SNAKE
===================================================== */

.scroll-snake{
  display:block;
  visibility:visible;
  opacity:1;
  position:fixed;
  top:8px;
  bottom:8px;
  right:12px;
  width:48px;
  height:auto;
  z-index:5500;
  pointer-events:none;
  overflow:visible;
}

.scroll-snake svg{
  display:block;
  visibility:visible;
  width:48px;
  height:100%;
  overflow:visible;
}

#snake-ghost,
#snake-path{
  display:block;
  visibility:visible;
  fill:none;
  stroke-width:4.5;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#snake-ghost{stroke:#d5dfdc;opacity:1;}
#snake-path{stroke:#42524d;opacity:1;}

/* =====================================================
   HERO + SHARED SECTION LAYOUT
===================================================== */

.project-hero{padding-top:78px;padding-bottom:100px;}
.project-hero h1{max-width:840px;}
.hero-copy{
  max-width:680px;
  margin-top:34px;
  margin-bottom:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}

.project-section{
  padding:92px 0 110px;
  border-top:1px solid var(--line);
}

.section-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:60px;
  align-items:end;
  margin-bottom:58px;
}
.section-number{margin-bottom:12px;}
.section-summary{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

/* =====================================================
   PROJECT ONE — TWO DENSE MOSAIC SECTIONS
===================================================== */

.mosaic-subsection{margin-top:8px;}
.second-mosaic-subsection{margin-top:82px;}

.subsection-heading{
  display:flex;
  align-items:flex-end;
  gap:24px;
  margin-bottom:26px;
}
.subsection-heading .small-label{margin:0 0 3px;}
.subsection-heading h3{font-size:34px;}

.mosaic-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:dense;
  grid-auto-rows:108px;
  gap:16px;
}

.mosaic-card,
.mosaic-text-card{
  grid-column:span 1;
  grid-row:span 2;
  min-width:0;
  border-radius:14px;
}

.mosaic-card{
  padding:0;
  overflow:hidden;
  border:0;
  background:#dde3e1;
  cursor:zoom-in;
}
.mosaic-card.wide{grid-column:span 2;}
.mosaic-card.tall{grid-row:span 4;}

.mosaic-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .28s ease,filter .28s ease;
}
.mosaic-card:hover img{transform:scale(1.045);filter:brightness(.96);}

.mosaic-text-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
  background:#fff;
  border:1px solid var(--line);
}
.mosaic-text-card p:last-child{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.mosaic-text-card.accent-card{background:var(--light-accent);border-color:transparent;}
.interaction-note{margin-top:18px;margin-bottom:0;color:var(--muted);font-size:13px;}

/* =====================================================
   PROJECT TWO — EDITORIAL + VERTICAL PAPER IMAGE
===================================================== */

.editorial-intro{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(230px,.5fr);
  gap:72px;
  margin-bottom:60px;
}
.editorial-copy{max-width:720px;}
.editorial-copy p,
.story-copy p{
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

.project-meta{
  padding:24px;
  border-radius:14px;
  background:var(--light-accent);
}
.project-meta p{margin:0 0 12px;font-size:14px;}
.project-meta p:last-child{margin-bottom:0;}
.project-meta span{
  display:block;
  margin-bottom:2px;
  color:var(--accent);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.large-media{
  width:92%;
  margin:0 auto 68px;
}
.large-media img{
  max-height:700px;
  object-fit:cover;
  border-radius:14px;
}

.portrait-paper-media{
  width:min(520px,58%);
  margin:0 auto 72px;
}
.paper-frame{
  width:100%;
  aspect-ratio:8.5 / 11;
  padding:10px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(20,37,61,.08);
}
.paper-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
}

figcaption{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.5;}

/* =====================================================
   PROJECT THREE — SMALLER PHOTOGRAPHY
===================================================== */

.story-block{
  width:94%;
  margin:0 auto 68px;
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr);
  gap:58px;
  align-items:center;
}

.story-copy h3{margin-bottom:24px;}
.story-image{margin:0;display:flex;justify-content:center;}
.story-image img{
  width:min(100%,560px);
  max-height:560px;
  object-fit:cover;
  border-radius:14px;
}

.photo-pair{
  width:86%;
  margin:0 auto 72px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.photo-pair figure,
.small-photo-pair figure{margin:0;}
.photo-pair img{
  width:100%;
  max-height:390px;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:14px;
}

.reflection-layout{
  width:92%;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
  gap:58px;
  align-items:center;
}

.small-photo-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.small-photo-pair img{
  width:100%;
  aspect-ratio:4 / 3;
  max-height:260px;
  object-fit:cover;
  border-radius:14px;
}

/* =====================================================
   PROJECT FOUR
===================================================== */

.project-four{min-height:520px;}
.project-four .section-heading{margin-bottom:0;}
.empty-project-space{min-height:220px;}

/* =====================================================
   LIGHTBOX
===================================================== */

.image-lightbox{
  position:fixed;
  inset:0;
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:52px;
  background:rgba(20,37,61,.88);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
.image-lightbox.is-open{opacity:1;visibility:visible;}
.image-lightbox img{
  width:auto;
  max-width:min(1200px,92vw);
  max-height:88vh;
  border-radius:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.24);
}
.lightbox-close{
  position:absolute;
  top:20px;
  right:28px;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-family:'Work Sans',Arial,sans-serif;
  font-size:38px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  transition:transform .16s ease,opacity .16s ease;
}
.lightbox-close:hover{transform:scale(1.1);opacity:.75;}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:900px){
  .side-nav-item{margin-bottom:24px;}
  .side-submenu{gap:10px;}
}

@media(max-width:800px){
  :root{--sidebar-rail:54px;--sidebar-full:176px;}
  body{padding-left:var(--sidebar-rail);}
  .project-hero,.project-section{width:calc(100% - 72px);}
  .scroll-snake{right:7px;width:38px;}
  .scroll-snake svg{width:38px;}
  .project-hero{padding-top:62px;padding-bottom:76px;}
  .project-section{padding:72px 0 84px;}
  .section-heading{grid-template-columns:1fr;gap:24px;}
  .section-summary{max-width:600px;}

  .mosaic-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:104px;}
  .mosaic-card.wide{grid-column:span 2;}

  .editorial-intro,
  .story-block,
  .reflection-layout{
    grid-template-columns:1fr;
    gap:34px;
  }

  .portrait-paper-media{width:min(500px,78%);}
  .story-block,.reflection-layout{width:100%;}
  .story-image img{width:min(100%,520px);}
  .photo-pair{width:100%;}
}

@media(max-width:620px){
  .mosaic-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px;}
  .mosaic-card,
  .mosaic-card.wide,
  .mosaic-card.tall,
  .mosaic-text-card{
    grid-column:1 / -1;
    grid-row:auto;
    min-height:230px;
  }
  .mosaic-text-card{min-height:180px;padding:18px;}
  .mosaic-card img{min-height:230px;}

  .photo-pair,
  .small-photo-pair{grid-template-columns:1fr;}
  .photo-pair img{max-height:360px;}
  .small-photo-pair img{max-height:320px;}
  .portrait-paper-media{width:min(420px,90%);}
  .large-media{width:100%;}
  .image-lightbox{padding:24px;}
}


/* =====================================================
   V3 — PROJECT 1 ANIMATED FLAT GARDEN
===================================================== */

.garden-subsection{
  margin-top:8px;
}

.garden-planter{
  width:100%;
  margin:0 0 18px;
}

.garden-planter-rim{
  width:100%;
  height:18px;
  border-radius:7px 7px 3px 3px;
  background:#7d5134;
  box-shadow:0 4px 0 rgba(20,37,61,.07);
}

.garden-planter-body{
  width:96%;
  height:34px;
  margin:0 auto;
  border-radius:0 0 12px 12px;
  background:#946542;
}

.garden-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(110px,16%);
  gap:22px;
  align-items:end;
  width:100%;
  min-height:250px;
  padding:18px 18px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
}

.garden-plants-area{
  min-width:0;
  align-self:end;
}

.garden-plants-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:205px;
}

.garden-plant{
  flex:1 1 0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-width:0;
  margin:0;
}

.garden-sprite{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:100%;
  max-height:205px;
  object-fit:contain !important;
}

.garden-egg-area{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-width:0;
  min-height:218px;
}

.egg-animation-slot{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  min-height:218px;
}

.egg-sprite{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:100%;
  max-height:218px;
  object-fit:contain !important;
}

.garden-path-placeholder,
.egg-path-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:170px;
  padding:18px;
  border:1px dashed #bcc8c4;
  border-radius:12px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

.garden-path-placeholder{
  width:100%;
}

.egg-path-placeholder{
  width:100%;
  min-height:210px;
}

.garden-note-card{
  width:min(650px,100%);
  margin-top:18px;
  padding:18px 20px;
  border-radius:14px;
  background:var(--light-accent);
}

.garden-note-card .small-label{
  margin-bottom:8px;
}

.garden-note-card p:last-child{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

/* Keep every garden animation at its original image ratio. */
.garden-stage img{
  aspect-ratio:auto !important;
}

/* =====================================================
   V3 — PROJECT 2: THREE LARGE IMAGES LEFT / PAGE RIGHT
===================================================== */

.project-two-media-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);
  gap:46px;
  align-items:start;
  width:100%;
}

.project-two-large-stack{
  display:flex;
  flex-direction:column;
  gap:36px;
  min-width:0;
}

.project-two-large-stack .large-media{
  width:100%;
  margin:0;
}

.project-two-large-stack .large-media img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  border-radius:14px;
}

.project-two-media-layout .portrait-paper-media{
  position:sticky;
  top:34px;
  width:100%;
  margin:0;
}

.project-two-media-layout .paper-frame{
  width:100%;
  aspect-ratio:8.5 / 11;
}

.project-two-media-layout .paper-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
}

@media(max-width:800px){
  .garden-stage{
    grid-template-columns:minmax(0,1fr) 105px;
    gap:12px;
    padding:14px 12px 10px;
  }

  .garden-plants-row{
    gap:6px;
  }

  .garden-sprite{
    max-height:170px;
  }

  .egg-sprite{
    max-height:190px;
  }

  .project-two-media-layout{
    grid-template-columns:minmax(0,1fr) minmax(220px,.62fr);
    gap:28px;
  }
}

@media(max-width:620px){
  .garden-stage{
    grid-template-columns:1fr;
  }

  .garden-egg-area,
  .egg-animation-slot{
    min-height:170px;
  }

  .egg-sprite{
    max-height:170px;
  }

  .project-two-media-layout{
    grid-template-columns:1fr;
  }

  .project-two-media-layout .portrait-paper-media{
    position:static;
    width:min(440px,88%);
    margin:0 auto;
  }
}


/* =====================================================
   V4 — SUNPUDDLE FIRST-SECTION ASSETS
===================================================== */

/*
  Eight plant positions are visible at once, left-to-right.
  Their images never receive a forced aspect ratio, so every animation
  frame keeps the proportions of the uploaded PNG.
*/
.garden-stage{
  grid-template-columns:minmax(0,1fr) minmax(118px,14%);
  gap:18px;
  min-height:270px;
}

.garden-plants-row{
  align-items:flex-end;
  gap:4px;
  min-height:220px;
}

.garden-plant{
  flex:1 1 0;
  min-width:0;
  overflow:visible;
}

.garden-sprite{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:220px !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
  transform-origin:50% 100%;
  transition:transform .18s ease;
}

.garden-plant:hover .garden-sprite{
  transform:scale(1.07);
}

.garden-egg-area,
.egg-animation-slot{
  min-height:238px;
}

.egg-sprite{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:238px !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}


/* Bird + static supporting images under the garden row */
.sunpuddle-asset-row{
  display:grid;
  grid-template-columns:minmax(150px,.72fr) minmax(170px,.82fr) minmax(0,1.8fr);
  gap:16px;
  align-items:start;
  margin-top:20px;
}

.sunpuddle-asset-card{
  min-width:0;
  margin:0;
  border-radius:14px;
}

.bird-asset-card{
  padding:18px;
  background:#fff;
  border:1px solid var(--line);
}

.bird-animation-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:190px;
}

.bird-sprite{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:190px !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}

.static-asset-card{
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  cursor:zoom-in;
}

.static-asset-card img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
  transition:transform .22s ease;
}

.static-asset-card:hover img{
  transform:scale(1.035);
}

.sunpuddle-asset-row figcaption{
  margin-bottom:0;
}


/* Project 2 remains: 3 large images stacked left, paper image right. */
.project-two-media-layout{
  grid-template-columns:minmax(0,1.48fr) minmax(300px,.72fr);
  gap:52px;
}

.project-two-large-stack{
  gap:34px;
}

.project-two-media-layout .portrait-paper-media{
  align-self:start;
}


@media(max-width:900px){
  .garden-stage{
    grid-template-columns:minmax(0,1fr) 108px;
  }

  .garden-sprite{
    max-height:180px !important;
  }

  .egg-sprite{
    max-height:205px !important;
  }

  .sunpuddle-asset-row{
    grid-template-columns:1fr 1fr;
  }

  .wide-static-asset{
    grid-column:1 / -1;
  }

  .project-two-media-layout{
    grid-template-columns:minmax(0,1.35fr) minmax(235px,.65fr);
    gap:30px;
  }
}


@media(max-width:620px){
  .garden-stage{
    grid-template-columns:1fr;
  }

  .garden-plants-row{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px 6px;
  }

  .garden-sprite{
    max-height:150px !important;
  }

  .garden-egg-area,
  .egg-animation-slot{
    min-height:180px;
  }

  .egg-sprite{
    max-height:180px !important;
  }

  .sunpuddle-asset-row{
    grid-template-columns:1fr;
  }

  .wide-static-asset{
    grid-column:auto;
  }

  .bird-animation-slot{
    min-height:160px;
  }

  .bird-sprite{
    max-height:160px !important;
  }

  .project-two-media-layout{
    grid-template-columns:1fr;
  }
}


/* =====================================================
   V5 — PROJECT 1 / SECTION 1 REFERENCE LAYOUT
   Based on the supplied labeled composition.
===================================================== */

/* The first section is intentionally static except for sprite animations. */
.garden-subsection figure,
.garden-subsection article{
  margin:0;
}


/* -------------------------
   GARDEN + PLANTER
------------------------- */

.sunpuddle-garden{
  position:relative;
  width:100%;
  min-height:330px;
  margin-top:4px;
  padding-top:74px;
}

/* Bird floats over the plants and is not inside a card. */
.garden-bird{
  position:absolute;
  top:0;
  left:64%;
  z-index:20;

  display:flex;
  align-items:center;
  justify-content:center;

  width:92px;
  height:66px;

  transform:translateX(-50%);
  pointer-events:none;
}

.bird-sprite{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:92px !important;
  max-height:66px !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}


/*
  Plants sit directly above the planter.
  Negative spacing and overflow allow neighboring plants to overlap naturally.
*/
.garden-plants-row{
  position:relative;
  z-index:10;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;

  width:96%;
  min-height:225px;

  margin:0 auto -8px !important;
  padding:0 7px;

  gap:0 !important;
  overflow:visible !important;
}

.garden-plant{
  position:relative;

  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;

  flex:0 0 13.4% !important;
  min-width:0;
  margin:0 -0.45% !important;

  overflow:visible !important;
  pointer-events:none;
}

.garden-sprite{
  display:block;

  width:auto !important;
  height:auto !important;

  max-width:none !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;

  transform:none !important;
  transition:none !important;

  transform-origin:50% 100%;
}

/* Individual heights roughly match the supplied garden silhouette. */
.plant-tomato .garden-sprite{
  max-height:145px !important;
  margin-right:-8px;
}

.plant-cucumber .garden-sprite{
  max-height:125px !important;
  margin-left:-12px;
  margin-right:-14px;
}

.plant-bean .garden-sprite{
  max-height:158px !important;
  margin-left:-8px;
  margin-right:-8px;
}

.plant-corn .garden-sprite{
  max-height:218px !important;
  margin-left:-10px;
  margin-right:-8px;
}

.plant-lettuce .garden-sprite{
  max-height:105px !important;
  margin-left:-12px;
  margin-right:-12px;
}

.plant-onion .garden-sprite{
  max-height:148px !important;
  margin-left:-8px;
  margin-right:-8px;
}

.plant-strawberry .garden-sprite{
  max-height:102px !important;
  margin-left:-12px;
  margin-right:-8px;
}

.plant-potato .garden-sprite{
  max-height:175px !important;
  margin-left:-10px;
}

/* Planter is BELOW the plants, not above them. */
.garden-planter{
  position:relative;
  z-index:6;

  width:96% !important;
  margin:0 auto !important;
}

.garden-planter-rim{
  position:relative;
  z-index:2;

  width:100%;
  height:15px;

  border-radius:4px;
  background:#7d5134;

  box-shadow:none;
}

.garden-planter-body{
  width:96%;
  height:31px;

  margin:-1px auto 0;

  border-radius:0 0 9px 9px;
  background:#946542;
}


/* -------------------------
   TOP THREE ASSETS
------------------------- */

.sunpuddle-top-assets{
  display:grid;
  grid-template-columns:1.45fr .96fr 1.04fr;
  gap:16px;

  width:100%;
  margin-top:28px;

  align-items:stretch;
}

.reference-card{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:0;

  padding:14px;

  border:1px solid #d3d8d6;
  border-radius:30px;

  background:#fff;

  overflow:hidden;
}

.reference-card img{
  display:block;

  width:auto !important;
  height:auto !important;

  max-width:100% !important;
  max-height:100% !important;

  object-fit:contain !important;
  aspect-ratio:auto !important;

  transform:none !important;
  transition:none !important;
}

.duck-village-card{
  min-height:360px;
  padding:0 12px 0 0;
}

.duck-village-card img{
  width:100% !important;
  max-height:350px !important;
  object-position:left center;
}

.bamboo-card{
  min-height:360px;
}

.bamboo-card img{
  max-height:325px !important;
}

/* Egg gets its own larger/taller box on the right. */
.egg-card{
  min-height:360px;
  padding:8px;
}

.egg-animation-slot{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:330px !important;
}

.egg-sprite{
  display:block;

  width:auto !important;
  height:auto !important;

  max-width:96% !important;
  max-height:330px !important;

  object-fit:contain !important;
  aspect-ratio:auto !important;
}


/* -------------------------
   LOWER REFERENCE MOSAIC
------------------------- */

/*
  12-column placement follows the attached mockup:
  text | guzheng/pond
  fish1 | wishes table | kitchen
  fish2 | dandelion | kitchen
  fish3 | text
  pot | park sign
  final text
*/
.sunpuddle-reference-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:16px;

  width:100%;
  margin-top:18px;
}

.reference-text-card{
  display:flex;
  flex-direction:column;
  justify-content:center;

  min-width:0;
  min-height:190px;

  padding:32px;

  border-radius:30px;

  background:#e1e3e2;
}

.reference-text-card .small-label{
  margin-bottom:10px;
}

.reference-text-card p:last-child{
  margin:0;

  color:var(--navy);
  font-size:15px;
  line-height:1.65;
}


/* Large left text + stacked right assets */
.text-card-one{
  grid-column:1 / span 7;
  grid-row:1 / span 2;
  min-height:420px;
}

.guzheng-card{
  grid-column:8 / span 5;
  grid-row:1;
  min-height:195px;
}

.guzheng-card img{
  max-height:145px !important;
}

.pond-plants-card{
  grid-column:8 / span 5;
  grid-row:2;
  min-height:195px;
}

.pond-plants-card img{
  max-height:160px !important;
}


/* Middle image cluster */
.fish-one-card{
  grid-column:1 / span 4;
  grid-row:3 / span 2;
  min-height:360px;
}

.fish-one-card img{
  max-height:320px !important;
}

.wishes-table-card{
  grid-column:5 / span 4;
  grid-row:3;
  min-height:175px;
}

.wishes-table-card img{
  max-height:145px !important;
}

.kitchen-card{
  grid-column:9 / span 4;
  grid-row:3 / span 2;
  min-height:360px;
}

.kitchen-card img{
  max-height:330px !important;
}

.fish-two-card{
  grid-column:1 / span 4;
  grid-row:5 / span 2;
  min-height:300px;
}

.fish-two-card img{
  max-height:270px !important;
}

.dandelion-card{
  grid-column:5 / span 4;
  grid-row:4 / span 3;
  min-height:300px;
}

.dandelion-card img{
  max-height:275px !important;
}


/* Fish 3 + second text block */
.fish-three-card{
  grid-column:1 / span 5;
  grid-row:7 / span 2;
  min-height:310px;
}

.fish-three-card img{
  max-height:280px !important;
}

.text-card-two{
  grid-column:6 / span 7;
  grid-row:7 / span 2;
  min-height:310px;
}


/* Pot + park sign */
.pot-card{
  grid-column:1 / span 5;
  grid-row:9 / span 2;
  min-height:320px;
}

.pot-card img{
  max-height:280px !important;
}

.park-sign-card{
  grid-column:6 / span 7;
  grid-row:9 / span 2;
  min-height:320px;
}

.park-sign-card img{
  max-height:280px !important;
}


/* Full-width final text card */
.text-card-three{
  grid-column:1 / -1;
  grid-row:11;
  min-height:180px;
}


/* No click-to-zoom affordance anywhere in Project 1 / Section 1. */
.garden-subsection .reference-card,
.garden-subsection img{
  cursor:default !important;
}

.garden-subsection .reference-card:hover img,
.garden-subsection img:hover{
  transform:none !important;
  filter:none !important;
}


/* =====================================================
   RESPONSIVE REFERENCE LAYOUT
===================================================== */

@media(max-width:900px){

  .sunpuddle-garden{
    min-height:290px;
  }

  .garden-plants-row{
    min-height:190px;
  }

  .plant-corn .garden-sprite{
    max-height:185px !important;
  }

  .plant-potato .garden-sprite,
  .plant-bean .garden-sprite{
    max-height:150px !important;
  }

  .plant-tomato .garden-sprite,
  .plant-onion .garden-sprite{
    max-height:130px !important;
  }

  .sunpuddle-top-assets{
    grid-template-columns:1.35fr .9fr 1fr;
    gap:12px;
  }

  .duck-village-card,
  .bamboo-card,
  .egg-card{
    min-height:300px;
  }

  .egg-animation-slot{
    min-height:275px !important;
  }

  .egg-sprite{
    max-height:275px !important;
  }

  .sunpuddle-reference-grid{
    gap:12px;
  }

  .reference-card,
  .reference-text-card{
    border-radius:22px;
  }

}


@media(max-width:700px){

  .sunpuddle-garden{
    min-height:250px;
    padding-top:58px;
  }

  .garden-bird{
    left:61%;
    width:72px;
    height:52px;
  }

  .bird-sprite{
    max-width:72px !important;
    max-height:52px !important;
  }

  .garden-plants-row{
    width:100%;
    min-height:165px;
    padding:0;
  }

  .garden-plant{
    flex-basis:13.8% !important;
    margin:0 -0.65% !important;
  }

  .garden-sprite{
    max-width:150% !important;
  }

  .plant-corn .garden-sprite{
    max-height:155px !important;
  }

  .plant-potato .garden-sprite,
  .plant-bean .garden-sprite{
    max-height:128px !important;
  }

  .plant-tomato .garden-sprite,
  .plant-onion .garden-sprite{
    max-height:110px !important;
  }

  .plant-cucumber .garden-sprite{
    max-height:96px !important;
  }

  .plant-lettuce .garden-sprite,
  .plant-strawberry .garden-sprite{
    max-height:82px !important;
  }

  .garden-planter{
    width:100% !important;
  }

  .sunpuddle-top-assets{
    grid-template-columns:1.4fr 1fr;
  }

  .egg-card{
    grid-column:1 / -1;
    min-height:300px;
  }

  .egg-animation-slot{
    min-height:270px !important;
  }

  .egg-sprite{
    max-height:270px !important;
  }

  /*
    Keep the lower ten image assets compact and side-by-side
    instead of turning every image into a full-width mobile block.
  */
  .sunpuddle-reference-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  .text-card-one{
    grid-column:1 / -1;
    grid-row:auto;
    min-height:240px;
  }

  .guzheng-card,
  .pond-plants-card,
  .fish-one-card,
  .wishes-table-card,
  .kitchen-card,
  .fish-two-card,
  .dandelion-card,
  .fish-three-card,
  .pot-card,
  .park-sign-card{
    grid-column:span 3;
    grid-row:auto;
    min-height:210px;
  }

  .text-card-two,
  .text-card-three{
    grid-column:1 / -1;
    grid-row:auto;
    min-height:210px;
  }

}


@media(max-width:460px){

  .sunpuddle-top-assets{
    grid-template-columns:1fr 1fr;
  }

  .duck-village-card{
    grid-column:1 / -1;
  }

  .sunpuddle-reference-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .guzheng-card,
  .pond-plants-card,
  .fish-one-card,
  .wishes-table-card,
  .kitchen-card,
  .fish-two-card,
  .dandelion-card,
  .fish-three-card,
  .pot-card,
  .park-sign-card{
    grid-column:span 1;
    min-height:180px;
    padding:8px;
  }

  .text-card-one,
  .text-card-two,
  .text-card-three{
    grid-column:1 / -1;
  }
}


/* =====================================================
   V6 — PROJECT 1 / SECTION 1 NEW REFERENCE LAYOUT
===================================================== */

.garden-subsection figure,
.garden-subsection article{
  margin:0;
}

/* Garden */
.sunpuddle-garden{
  position:relative;
  width:100%;
  min-height:390px;
  margin-top:2px;
  padding-top:90px;
  overflow:visible;
}

/* Bird: 300% larger than before and moved to the left. */
.garden-bird{
  position:absolute;
  top:-28px;
  left:12%;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  width:276px !important;
  height:198px !important;
  transform:translateX(-50%);
  pointer-events:none;
  overflow:visible;
}

.bird-sprite{
  width:auto !important;
  height:auto !important;
  max-width:276px !important;
  max-height:198px !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}

/* Plants are free-standing and can overlap. */
.garden-plants-row{
  position:relative;
  z-index:10;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  width:97%;
  min-height:285px;
  margin:0 auto -10px !important;
  padding:0 4px;
  gap:0 !important;
  overflow:visible !important;
}

.garden-plant{
  position:relative;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  flex:0 0 13.25% !important;
  min-width:0;
  margin:0 -0.55% !important;
  overflow:visible !important;
  pointer-events:none;
}

.garden-sprite{
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
  transform:none !important;
  transition:none !important;
  transform-origin:50% 100%;
}

/* Corn +30%; all other plants +60% from V5. */
.plant-tomato .garden-sprite{max-height:232px !important;margin-right:-18px;}
.plant-cucumber .garden-sprite{max-height:200px !important;margin-left:-22px;margin-right:-26px;}
.plant-bean .garden-sprite{max-height:253px !important;margin-left:-18px;margin-right:-20px;}
.plant-corn .garden-sprite{max-height:283px !important;margin-left:-18px;margin-right:-16px;}
.plant-lettuce .garden-sprite{max-height:168px !important;margin-left:-22px;margin-right:-22px;}
.plant-onion .garden-sprite{max-height:237px !important;margin-left:-18px;margin-right:-18px;}
.plant-strawberry .garden-sprite{max-height:163px !important;margin-left:-24px;margin-right:-18px;}
.plant-potato .garden-sprite{max-height:280px !important;margin-left:-22px;}

/* Planter sits directly below the plant row. */
.garden-planter{
  position:relative;
  z-index:6;
  width:97% !important;
  margin:0 auto !important;
}
.garden-planter-rim{
  position:relative;
  z-index:2;
  width:100%;
  height:15px;
  border-radius:4px;
  background:#7d5134;
  box-shadow:none;
}
.garden-planter-body{
  width:96%;
  height:31px;
  margin:-1px auto 0;
  border-radius:0 0 9px 9px;
  background:#946542;
}

/* Slight hover magnification, but nothing opens. */
.garden-subsection .reference-card img,
.garden-subsection .egg-sprite{
  transition:transform .22s ease !important;
  transform-origin:center center;
}
.garden-subsection .reference-card:hover img,
.garden-subsection .egg-card:hover .egg-sprite{
  transform:scale(1.045) !important;
}
.garden-subsection .reference-card,
.garden-subsection .egg-card{
  cursor:default !important;
}

/* New reference grid */
.sunpuddle-reference-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:150px;
  gap:16px;
  width:100%;
  margin-top:28px;
}

.reference-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:14px;
  border:1px solid #d3d8d6;
  border-radius:30px;
  background:#fff;
  overflow:hidden;
}

.reference-card img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}

/* top composition */
.duck-village-card{grid-column:1 / span 4;grid-row:1 / span 2;padding:0 10px 0 0;}
.duck-village-card img{width:100% !important;object-position:left center;}
.bamboo-card{grid-column:5 / span 2;grid-row:1 / span 2;}
.bamboo-card img{max-height:275px !important;}
.kitchen-card{grid-column:7 / span 3;grid-row:1 / span 3;}
.kitchen-card img{max-height:420px !important;}

.egg-card{
  grid-column:10 / span 3;
  grid-row:1 / span 3;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:22px 4px 0;
  background:transparent;
  border:0;
  overflow:visible;
}
.egg-animation-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:0 !important;
}
.egg-sprite{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:390px !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}

.guzheng-card{grid-column:1 / span 6;grid-row:3;}
.guzheng-card img{max-height:125px !important;}

.text-card-one{grid-column:1 / span 7;grid-row:4;min-height:0;}
.pond-plants-card{grid-column:8 / span 5;grid-row:4;}
.pond-plants-card img{max-height:130px !important;}

.fish-one-card{grid-column:1 / span 3;grid-row:5;}
.wishes-table-card{grid-column:4 / span 3;grid-row:5;}
.fish-three-card{grid-column:7 / span 3;grid-row:5;}
.text-card-two{grid-column:10 / span 3;grid-row:5 / span 2;min-height:0;}
.fish-two-card{grid-column:1 / span 3;grid-row:6;}
.dandelion-card{grid-column:4 / span 3;grid-row:6;}
.pot-card{grid-column:7 / span 3;grid-row:6;}

.fish-one-card img,
.fish-two-card img,
.fish-three-card img{max-height:130px !important;}

.wishes-table-card img,
.dandelion-card img,
.pot-card img{max-height:128px !important;}

.text-card-three{grid-column:1 / span 6;grid-row:7 / span 2;min-height:0;}
.park-sign-card{grid-column:7 / span 6;grid-row:7 / span 2;}
.park-sign-card img{max-height:270px !important;}

.reference-text-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:30px;
  border-radius:30px;
  background:#dedfdf;
}
.reference-text-card .small-label{margin-bottom:10px;}
.reference-text-card p:last-child{
  margin:0;
  color:var(--navy);
  font-size:15px;
  line-height:1.65;
}

@media(max-width:900px){
  .garden-bird{left:14%;width:225px !important;height:160px !important;}
  .bird-sprite{max-width:225px !important;max-height:160px !important;}
  .garden-plants-row{min-height:250px;}
  .sunpuddle-reference-grid{grid-auto-rows:135px;gap:12px;}
  .reference-card,.reference-text-card{border-radius:23px;}
}

@media(max-width:700px){
  .sunpuddle-garden{min-height:290px;padding-top:70px;}
  .garden-bird{top:-14px;left:16%;width:180px !important;height:130px !important;}
  .bird-sprite{max-width:180px !important;max-height:130px !important;}
  .garden-plants-row{width:100%;min-height:205px;padding:0;}
  .garden-planter{width:100% !important;}

  .sunpuddle-reference-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-auto-rows:140px;
  }

  .duck-village-card{grid-column:1 / span 3;grid-row:1 / span 2;}
  .bamboo-card{grid-column:4 / span 1;grid-row:1 / span 2;}
  .kitchen-card{grid-column:5 / span 2;grid-row:1 / span 3;}
  .egg-card{grid-column:1 / span 2;grid-row:3 / span 2;}
  .guzheng-card{grid-column:3 / span 3;grid-row:3;}
  .text-card-one{grid-column:1 / span 3;grid-row:5;}
  .pond-plants-card{grid-column:4 / span 3;grid-row:5;}
  .fish-one-card,.wishes-table-card,.fish-three-card,
  .fish-two-card,.dandelion-card,.pot-card{grid-column:span 2;grid-row:auto;}
  .text-card-two{grid-column:5 / span 2;grid-row:6 / span 2;}
  .text-card-three{grid-column:1 / span 3;grid-row:auto / span 2;}
  .park-sign-card{grid-column:4 / span 3;grid-row:auto / span 2;}
}

@media(max-width:480px){
  .sunpuddle-reference-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:155px;
    gap:10px;
  }
  .duck-village-card,.guzheng-card,.text-card-one,
  .pond-plants-card,.text-card-three,.park-sign-card{
    grid-column:1 / -1;
    grid-row:auto;
  }
  .bamboo-card,.kitchen-card,.egg-card,.fish-one-card,
  .wishes-table-card,.fish-three-card,.fish-two-card,
  .dandelion-card,.pot-card{
    grid-column:span 1;
    grid-row:auto;
  }
  .text-card-two{
    grid-column:1 / -1;
    grid-row:auto;
    min-height:190px;
  }
}


/* =====================================================
   V7 — FLYING BIRD
===================================================== */

/*
  The bird now flies continuously across the full garden while Bird1–Bird6
  cycle. JS advances both the frame and its horizontal position together.
*/
.garden-bird{
  top:-28px !important;
  left:0 !important;

  width:100% !important;
  height:198px !important;

  transform:none !important;

  display:block !important;

  overflow:visible !important;
  pointer-events:none !important;
}

.garden-bird .bird-sprite{
  position:absolute;

  top:0;
  left:calc(
    (100% - 276px) *
    var(--bird-progress, 0)
  );

  width:auto !important;
  height:auto !important;

  max-width:276px !important;
  max-height:198px !important;

  object-fit:contain !important;
  aspect-ratio:auto !important;

  transition:
    left 145ms linear !important;

  will-change:left;
}

/* Keep the motion smooth and appropriately scaled on smaller screens. */
@media(max-width:900px){
  .garden-bird{
    width:100% !important;
    height:160px !important;
    left:0 !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      (100% - 225px) *
      var(--bird-progress, 0)
    );

    max-width:225px !important;
    max-height:160px !important;
  }
}

@media(max-width:700px){
  .garden-bird{
    top:-14px !important;
    width:100% !important;
    height:130px !important;
    left:0 !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      (100% - 180px) *
      var(--bird-progress, 0)
    );

    max-width:180px !important;
    max-height:130px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .garden-bird .bird-sprite{
    transition:none !important;
  }
}


/* =====================================================
   V8 — BIRD DIRECTION / PLANT SCALE / ASSET SPACING
===================================================== */

/* Bird is now 500% of the original V5 size and flies right -> left. */
.garden-bird{
  top:-92px !important;
  left:0 !important;
  width:100% !important;
  height:330px !important;
  transform:none !important;
  display:block !important;
  overflow:visible !important;
  pointer-events:none !important;
}

.garden-bird .bird-sprite{
  position:absolute;
  top:0;

  left:calc(
    (100% - 460px) *
    var(--bird-progress, 1.08)
  );

  width:auto !important;
  height:auto !important;
  max-width:460px !important;
  max-height:330px !important;

  object-fit:contain !important;
  aspect-ratio:auto !important;

  transition:left 145ms linear !important;
  will-change:left;
}


/* Give the enlarged plants a little more vertical room. */
.sunpuddle-garden{
  min-height:435px !important;
  padding-top:118px !important;
}

.garden-plants-row{
  min-height:305px !important;
}


/*
  Corn stays 30% larger than the V5 size.
  Every other plant is now 80% larger than its V5 size.
*/
.plant-tomato .garden-sprite{
  max-height:261px !important;   /* 145 × 1.80 */
}

.plant-cucumber .garden-sprite{
  max-height:225px !important;   /* 125 × 1.80 */
}

.plant-bean .garden-sprite{
  max-height:284px !important;   /* 158 × 1.80 */
}

.plant-corn .garden-sprite{
  max-height:283px !important;   /* 218 × 1.30 */
}

.plant-lettuce .garden-sprite{
  max-height:189px !important;   /* 105 × 1.80 */
}

.plant-onion .garden-sprite{
  max-height:266px !important;   /* 148 × 1.80 */
}

.plant-strawberry .garden-sprite{
  max-height:184px !important;   /* 102 × 1.80 */
}

.plant-potato .garden-sprite{
  max-height:315px !important;   /* 175 × 1.80 */
}


/* -----------------------------------------------------
   Lower assets: boxes never overlap one another.
   Hover scaling stays clipped inside each item's box.
----------------------------------------------------- */

.sunpuddle-reference-grid{
  align-items:stretch !important;
}

.sunpuddle-reference-grid > .reference-card,
.sunpuddle-reference-grid > .reference-text-card{
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  min-height:0;
  overflow:hidden !important;
  transform:none !important;
}

.sunpuddle-reference-grid > .reference-card:hover,
.sunpuddle-reference-grid > .reference-text-card:hover{
  z-index:1 !important;
  transform:none !important;
}

.sunpuddle-reference-grid .reference-card img{
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  transform:scale(1) !important;
}

.sunpuddle-reference-grid .reference-card:hover img{
  transform:scale(1.045) !important;
}

/* Egg has its own grid cell and cannot intrude into neighboring assets. */
.sunpuddle-reference-grid > .egg-card{
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.sunpuddle-reference-grid .egg-sprite{
  max-width:100% !important;
  max-height:100% !important;
}


/* Responsive bird / plant sizing */
@media(max-width:900px){
  .garden-bird{
    top:-62px !important;
    height:275px !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      (100% - 385px) *
      var(--bird-progress, 1.08)
    );
    max-width:385px !important;
    max-height:275px !important;
  }

  .sunpuddle-garden{
    min-height:390px !important;
    padding-top:104px !important;
  }

  .garden-plants-row{
    min-height:275px !important;
  }
}

@media(max-width:700px){
  .garden-bird{
    top:-38px !important;
    height:215px !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      (100% - 300px) *
      var(--bird-progress, 1.08)
    );
    max-width:300px !important;
    max-height:215px !important;
  }

  .sunpuddle-garden{
    min-height:335px !important;
    padding-top:90px !important;
  }

  .garden-plants-row{
    min-height:225px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .garden-bird .bird-sprite{
    transition:none !important;
  }
}


/* =====================================================
   V9 — BIGGER BIRD / BIGGER PLANTS / DIRT / ASSET SCALE
===================================================== */

/* Bird: another +300 percentage points from the original size.
   Original V5 was 92×66, so this is now 800% = 736×528.
   Raised 5px from V8. */
.garden-bird{
  top:-97px !important;
  height:528px !important;
}

.garden-bird .bird-sprite{
  left:calc(
    (100% - 736px) *
    var(--bird-progress, 1.08)
  );

  max-width:736px !important;
  max-height:528px !important;
}


/* More room for the newly enlarged plants. */
.sunpuddle-garden{
  min-height:540px !important;
  padding-top:190px !important;
}

.garden-plants-row{
  min-height:350px !important;
}


/*
  V8 -> V9 plant increases:
  corn: +20%
  every non-corn plant: +30%
*/
.plant-tomato .garden-sprite{
  max-height:339px !important;
}

.plant-cucumber .garden-sprite{
  max-height:293px !important;
}

.plant-bean .garden-sprite{
  max-height:369px !important;
}

.plant-corn .garden-sprite{
  max-height:340px !important;
}

.plant-lettuce .garden-sprite{
  max-height:246px !important;
}

.plant-onion .garden-sprite{
  max-height:346px !important;
}

.plant-strawberry .garden-sprite{
  max-height:239px !important;
}

.plant-potato .garden-sprite{
  max-height:410px !important;
}


/* Dirt bar sits behind the roots and directly against the planter. */
.garden-dirt{
  position:relative;
  z-index:7;

  width:93%;
  height:22px;

  margin:-18px auto -4px;

  border-radius:50% 50% 3px 3px / 65% 65% 3px 3px;

  background:#6f4930;
}

.garden-planter{
  z-index:6 !important;
}


/* Lower framed assets are 15% larger inside their existing boxes.
   The boxes still clip them, so they cannot overlap one another. */
.sunpuddle-reference-grid > .reference-card{
  overflow:hidden !important;
}

.sunpuddle-reference-grid .reference-card img{
  transform:scale(1.15) !important;
  transform-origin:center center !important;
}

.sunpuddle-reference-grid .reference-card:hover img{
  transform:scale(1.20) !important;
}


/* Responsive bird sizing keeps the same stronger scale relationship. */
@media(max-width:900px){
  .garden-bird{
    top:-67px !important;
    height:442px !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      (100% - 616px) *
      var(--bird-progress, 1.08)
    );

    max-width:616px !important;
    max-height:442px !important;
  }

  .sunpuddle-garden{
    min-height:470px !important;
    padding-top:160px !important;
  }

  .garden-plants-row{
    min-height:315px !important;
  }
}


@media(max-width:700px){
  .garden-bird{
    top:-43px !important;
    height:344px !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      (100% - 480px) *
      var(--bird-progress, 1.08)
    );

    max-width:480px !important;
    max-height:344px !important;
  }

  .sunpuddle-garden{
    min-height:385px !important;
    padding-top:130px !important;
  }

  .garden-plants-row{
    min-height:255px !important;
  }

  .garden-dirt{
    width:96%;
    height:18px;
    margin:-15px auto -3px;
  }
}


/* =====================================================
   V10 — FIRST-SECTION SPACING / PLANTS / LOWER ASSETS
===================================================== */

/* Reduce the space between "First Section" and the garden by ~40%. */
.garden-subsection .subsection-heading{
  margin-bottom:16px !important;
}

.sunpuddle-garden{
  padding-top:114px !important;
  min-height:464px !important;
}


/* Bird: raise another ~20px so it visually aligns with the subsection heading. */
.garden-bird{
  top:-117px !important;
}


/* Additional plant increases from V9. */
.plant-lettuce .garden-sprite{
  max-height:369px !important;   /* 246 × 1.50 */
}

.plant-strawberry .garden-sprite{
  max-height:359px !important;   /* 239 × 1.50 */
}

.plant-onion .garden-sprite{
  max-height:519px !important;   /* 346 × 1.50 */
}

.plant-potato .garden-sprite{
  max-height:492px !important;   /* 410 × 1.20 */
}


/* Potato, tomato, and onion sit 5px lower than the other plants. */
.plant-potato .garden-sprite,
.plant-tomato .garden-sprite,
.plant-onion .garden-sprite{
  position:relative !important;
  top:5px !important;
}


/*
  Bottom 8 image assets: another +15% from V9.
  These remain clipped within their own cards so they cannot overlap neighbors.
*/
.pond-plants-card img,
.fish-one-card img,
.wishes-table-card img,
.fish-three-card img,
.fish-two-card img,
.dandelion-card img,
.pot-card img,
.park-sign-card img{
  transform:scale(1.3225) !important; /* 1.15 × 1.15 */
  transform-origin:center center !important;
}

.pond-plants-card:hover img,
.fish-one-card:hover img,
.wishes-table-card:hover img,
.fish-three-card:hover img,
.fish-two-card:hover img,
.dandelion-card:hover img,
.pot-card:hover img,
.park-sign-card:hover img{
  transform:scale(1.38) !important;
}


/* Responsive adjustments preserve the same intent without crushing the garden. */
@media(max-width:900px){
  .garden-subsection .subsection-heading{
    margin-bottom:16px !important;
  }

  .sunpuddle-garden{
    padding-top:96px !important;
    min-height:430px !important;
  }

  .garden-bird{
    top:-87px !important;
  }

  .plant-lettuce .garden-sprite{
    max-height:323px !important;
  }

  .plant-strawberry .garden-sprite{
    max-height:314px !important;
  }

  .plant-onion .garden-sprite{
    max-height:454px !important;
  }

  .plant-potato .garden-sprite{
    max-height:431px !important;
  }
}

@media(max-width:700px){
  .garden-subsection .subsection-heading{
    margin-bottom:14px !important;
  }

  .sunpuddle-garden{
    padding-top:78px !important;
    min-height:360px !important;
  }

  .garden-bird{
    top:-63px !important;
  }

  .plant-lettuce .garden-sprite{
    max-height:268px !important;
  }

  .plant-strawberry .garden-sprite{
    max-height:260px !important;
  }

  .plant-onion .garden-sprite{
    max-height:377px !important;
  }

  .plant-potato .garden-sprite{
    max-height:358px !important;
  }
}


/* =====================================================
   V11 — 200PX GARDEN OVERLAP / DOUBLE DIRT / TALLER ASSETS
===================================================== */

/*
  Pull the entire plant/soil/planter group upward by ~200px.
  The heading and flying bird stay visually underneath the plants,
  creating the requested overlap instead of a large empty gap.
*/
.garden-subsection{
  position:relative;
}

.first-section-heading{
  position:relative;
  z-index:2;
}

.sunpuddle-garden{
  position:relative;
  z-index:3;

  min-height:340px !important;
  padding-top:190px !important;
  margin-top:-200px !important;
}

/* Bird stays behind the plant layer. */
.garden-bird{
  z-index:2 !important;
}

/* Plants, dirt, and planter sit above the bird + heading. */
.garden-plants-row{
  position:relative;
  z-index:12 !important;
}

.garden-dirt{
  position:relative;
  z-index:10 !important;

  /* 2× the previous 22px dirt height */
  height:44px !important;

  /* keep it tucked behind the plant bases and attached to planter */
  margin:-35px auto -5px !important;
}

.garden-planter{
  position:relative;
  z-index:9 !important;
}


/* =====================================================
   BOTTOM 8 ASSETS — SLIGHTLY TALLER
===================================================== */

/*
  Keep the same layout/column placement, but give the bottom image rows
  more vertical room so the assets read taller without overlapping.
*/
.sunpuddle-reference-grid{
  grid-auto-rows:165px !important;
}

.fish-one-card,
.wishes-table-card,
.fish-three-card,
.fish-two-card,
.dandelion-card,
.pot-card{
  min-height:165px !important;
}

.text-card-two{
  min-height:346px !important;
}

.text-card-three,
.park-sign-card{
  min-height:346px !important;
}

/* Preserve the current enlarged image scale while allowing more visible height. */
.fish-one-card img,
.wishes-table-card img,
.fish-three-card img,
.fish-two-card img,
.dandelion-card img,
.pot-card img{
  max-height:145px !important;
}

.park-sign-card img{
  max-height:300px !important;
}


/* Responsive overlap is reduced proportionally so the mobile layout stays usable. */
@media(max-width:900px){
  .sunpuddle-garden{
    min-height:315px !important;
    padding-top:160px !important;
    margin-top:-165px !important;
  }

  .garden-dirt{
    height:40px !important;
    margin:-31px auto -5px !important;
  }

  .sunpuddle-reference-grid{
    grid-auto-rows:150px !important;
  }
}

@media(max-width:700px){
  .sunpuddle-garden{
    min-height:285px !important;
    padding-top:130px !important;
    margin-top:-125px !important;
  }

  .garden-dirt{
    height:36px !important;
    margin:-28px auto -4px !important;
  }

  .sunpuddle-reference-grid{
    grid-auto-rows:150px !important;
  }
}


/* =====================================================
   V12 — MORE OVERLAP / HUGE BIRD / SIDEBAR TEXT BOX COLOR
===================================================== */

/*
  Pull the plants + dirt + planter upward ANOTHER 200px.
  V11 used -200px, so the total overlap is now about -400px.
*/
.sunpuddle-garden{
  margin-top:-400px !important;
}


/*
  Bird:
  - moved DOWN by about 500px from its previous position
  - another +300 percentage points from the original bird size
    (800% -> 1100% of original)
  - starts 120px farther to the right
  - sits above the plants so the flying bird visibly overlaps them
*/
.garden-bird{
  top:383px !important;
  z-index:25 !important;
  height:726px !important;
}

.garden-bird .bird-sprite{
  left:calc(
    ((100% - 1012px) * var(--bird-progress, 1.08))
    + 120px
  ) !important;

  max-width:1012px !important;
  max-height:726px !important;
}


/* Keep plants/dirt/planter stacked below the bird. */
.garden-plants-row{
  z-index:12 !important;
}

.garden-dirt{
  z-index:10 !important;
}

.garden-planter{
  z-index:9 !important;
}


/* Text boxes now use the exact same background as the sidebar. */
.reference-text-card{
  background:var(--light-accent) !important;
}


/* Responsive: preserve the same relative changes while keeping it usable. */
@media(max-width:900px){
  .sunpuddle-garden{
    margin-top:-330px !important;
  }

  .garden-bird{
    top:318px !important;
    height:610px !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      ((100% - 850px) * var(--bird-progress, 1.08))
      + 100px
    ) !important;

    max-width:850px !important;
    max-height:610px !important;
  }
}

@media(max-width:700px){
  .sunpuddle-garden{
    margin-top:-250px !important;
  }

  .garden-bird{
    top:250px !important;
    height:465px !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      ((100% - 648px) * var(--bird-progress, 1.08))
      + 80px
    ) !important;

    max-width:648px !important;
    max-height:465px !important;
  }
}


/* =====================================================
   V13 — BIRD RANGE / VARIED PLANT SPEEDS / PARK SIGN ROW
===================================================== */

/* Bird is 160px higher than V12. */
.garden-bird{
  top:223px !important;
}

/* Bird begins another 150px farther right than V12.
   V12 offset = 120px; new offset = 270px. */
.garden-bird .bird-sprite{
  left:calc(
    ((100% - 1012px) * var(--bird-progress, 1.08))
    + 270px
  ) !important;
}


/* Make the final Park Sign + text row genuinely taller,
   rather than letting the contents overflow a shorter grid row. */
.sunpuddle-reference-grid{
  grid-template-rows:
    repeat(6, 165px)
    210px
    210px !important;
}

.text-card-three,
.park-sign-card{
  min-height:0 !important;
  height:100% !important;
}

.park-sign-card img{
  max-height:385px !important;
}


/* Responsive versions keep the last row taller without overlap. */
@media(max-width:900px){
  .garden-bird{
    top:158px !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      ((100% - 850px) * var(--bird-progress, 1.08))
      + 250px
    ) !important;
  }

  .sunpuddle-reference-grid{
    grid-template-rows:
      repeat(6, 150px)
      190px
      190px !important;
  }

  .park-sign-card img{
    max-height:345px !important;
  }
}

@media(max-width:700px){
  .garden-bird{
    top:90px !important;
  }

  .garden-bird .bird-sprite{
    left:calc(
      ((100% - 648px) * var(--bird-progress, 1.08))
      + 230px
    ) !important;
  }

  /* At this breakpoint the grid rearranges, so allow its auto placement
     to determine height while preserving a larger Park Sign/text pair. */
  .sunpuddle-reference-grid{
    grid-template-rows:none !important;
  }

  .text-card-three,
  .park-sign-card{
    min-height:380px !important;
    height:auto !important;
  }

  .park-sign-card img{
    max-height:335px !important;
  }
}


/* =====================================================
   V14 — PROJECT 1 REFINEMENTS + PROJECT 2 IMAGE ZOOM
===================================================== */

/* Bird another 25px higher. */
.garden-bird{
  top:198px !important;
}


/* -----------------------------------------------------
   Project 1: taller Pond Plants + Context row
----------------------------------------------------- */

/*
  Row 4 now gets extra height, while the overall arrangement stays intact.
*/
.sunpuddle-reference-grid{
  grid-template-rows:
    165px
    165px
    165px
    195px
    165px
    165px
    210px
    210px !important;
}

.text-card-one,
.pond-plants-card{
  min-height:0 !important;
  height:100% !important;
}

.pond-plants-card img{
  max-height:168px !important;
}


/* -----------------------------------------------------
   Project 1: wider Process text box
----------------------------------------------------- */

/* Process grows from 3 columns to 4. */
.text-card-two{
  grid-column:9 / span 4 !important;
  grid-row:5 / span 2 !important;
}

/* Assets to its left become slightly narrower. */
.fish-one-card{
  grid-column:1 / span 3 !important;
  grid-row:5 !important;
}

.wishes-table-card{
  grid-column:4 / span 2 !important;
  grid-row:5 !important;
}

.fish-three-card{
  grid-column:6 / span 3 !important;
  grid-row:5 !important;
}

.fish-two-card{
  grid-column:1 / span 3 !important;
  grid-row:6 !important;
}

.dandelion-card{
  grid-column:4 / span 2 !important;
  grid-row:6 !important;
}

.pot-card{
  grid-column:6 / span 3 !important;
  grid-row:6 !important;
}


/* -----------------------------------------------------
   Project 2: hover + click magnification
----------------------------------------------------- */

.project-two .large-media,
.project-two .portrait-paper-media{
  overflow:visible;
}

.project-two .project-two-zoomable{
  cursor:zoom-in !important;
  transform:scale(1);
  transform-origin:center center;
  transition:
    transform .22s ease,
    filter .22s ease !important;
}

@media(hover:hover) and (pointer:fine){
  .project-two .project-two-zoomable:hover{
    transform:scale(1.035) !important;
    filter:brightness(.97);
  }
}

.project-two .project-two-zoomable:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:5px;
}

/* Keep all four Project 2 image ratios intact. */
.project-two-large-stack .large-media img{
  width:100%;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
}

.project-two-media-layout .paper-frame img{
  width:100%;
  height:100%;
  object-fit:contain !important;
}


/* Magnified image view. */
.image-lightbox{
  cursor:zoom-out;
}

.image-lightbox img{
  width:auto !important;
  height:auto !important;
  max-width:92vw !important;
  max-height:88vh !important;
  object-fit:contain !important;
  cursor:default;
}


/* -----------------------------------------------------
   Responsive equivalents
----------------------------------------------------- */

@media(max-width:900px){
  .garden-bird{
    top:133px !important;
  }

  .sunpuddle-reference-grid{
    grid-template-rows:
      150px
      150px
      150px
      178px
      150px
      150px
      190px
      190px !important;
  }
}

@media(max-width:700px){
  .garden-bird{
    top:65px !important;
  }

  /* Existing mobile auto-placement takes priority here. */
  .sunpuddle-reference-grid{
    grid-template-rows:none !important;
  }

  .text-card-one,
  .pond-plants-card{
    min-height:190px !important;
    height:auto !important;
  }

  .text-card-two{
    grid-column:4 / span 3 !important;
    grid-row:auto / span 2 !important;
  }

  .fish-one-card,
  .wishes-table-card,
  .fish-three-card,
  .fish-two-card,
  .dandelion-card,
  .pot-card{
    grid-column:span 2 !important;
    grid-row:auto !important;
  }
}


/* =====================================================
   V15 — PLANT SIZE + WITHDRAWN PANDEMONIUM PATH UPDATE
===================================================== */

/* Corn, bean, and tomato are 10% smaller than V14. */
.plant-tomato .garden-sprite{
  max-height:305px !important;
}

.plant-bean .garden-sprite{
  max-height:332px !important;
}

.plant-corn .garden-sprite{
  max-height:306px !important;
}

@media(max-width:900px){
  .plant-tomato .garden-sprite{
    max-height:275px !important;
  }

  .plant-bean .garden-sprite{
    max-height:299px !important;
  }

  .plant-corn .garden-sprite{
    max-height:275px !important;
  }
}

@media(max-width:700px){
  .plant-tomato .garden-sprite{
    max-height:229px !important;
  }

  .plant-bean .garden-sprite{
    max-height:249px !important;
  }

  .plant-corn .garden-sprite{
    max-height:229px !important;
  }
}


/* =====================================================
   V16 — PROJECT 2 REARRANGEMENT
===================================================== */

/* Main description spans the width above the media. */
.project-two-intro-copy{
  width:min(780px,100%);
  margin-bottom:54px;
}

.project-two-intro-copy p{
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}


/*
  Left: three reduced images.
  Right: metadata box first, then larger vertical WP4 image beneath it.
*/
.project-two-v16-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(340px,.9fr) !important;
  gap:64px !important;
  align-items:start !important;
}

.project-two-large-stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:34px !important;
}

/* Large images are approximately half their previous displayed size. */
.project-two-large-stack .large-media{
  width:50% !important;
  margin:0 auto !important;
}

.project-two-large-stack .large-media img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  border-radius:14px;
}


/* Right column */
.project-two-right-column{
  display:flex;
  flex-direction:column;
  gap:46px;
  min-width:0;
}

.project-two-right-column .project-meta{
  width:100%;
  margin:0;
}


/* Vertical image is moved down and made larger. */
.project-two-right-column .portrait-paper-media{
  width:100% !important;
  max-width:620px !important;
  margin:0 auto !important;
}

.project-two-right-column .paper-frame{
  width:100% !important;
  aspect-ratio:8.5 / 11;
  padding:10px;
}

.project-two-right-column .paper-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}


/* No Project 2 captions. */
.project-two figcaption{
  display:none !important;
}


/* Retain hover and click magnification behavior. */
.project-two .project-two-zoomable{
  cursor:zoom-in !important;
  transition:transform .22s ease, filter .22s ease !important;
  transform-origin:center center;
}

@media(hover:hover) and (pointer:fine){
  .project-two .project-two-zoomable:hover{
    transform:scale(1.045) !important;
    filter:brightness(.97);
  }
}


@media(max-width:900px){
  .project-two-v16-layout{
    grid-template-columns:minmax(0,1fr) minmax(280px,.82fr) !important;
    gap:38px !important;
  }

  .project-two-large-stack .large-media{
    width:58% !important;
  }
}


@media(max-width:700px){
  .project-two-v16-layout{
    grid-template-columns:1fr !important;
  }

  .project-two-large-stack .large-media{
    width:min(70%,420px) !important;
  }

  .project-two-right-column{
    width:min(100%,520px);
    margin:0 auto;
  }
}


/* =====================================================
   V17 — PROJECT 2 LEFT IMAGES FILL AVAILABLE ROW WIDTH
===================================================== */

/*
  WP1, WP2, and WP3 now fill the entire remaining left-column width
  beside the metadata / WP4 column.
*/
.project-two-v16-layout .project-two-large-stack{
  width:100% !important;
  align-items:stretch !important;
}

.project-two-v16-layout .project-two-large-stack .large-media{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

.project-two-v16-layout .project-two-large-stack .large-media img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
}

/* Keep the same two-column relationship while letting the images
   naturally size from the available horizontal space. */
.project-two-v16-layout{
  grid-template-columns:minmax(0,1fr) minmax(340px,.9fr) !important;
}

@media(max-width:900px){
  .project-two-v16-layout{
    grid-template-columns:minmax(0,1fr) minmax(280px,.82fr) !important;
  }

  .project-two-v16-layout .project-two-large-stack .large-media{
    width:100% !important;
  }
}

@media(max-width:700px){
  .project-two-v16-layout .project-two-large-stack .large-media{
    width:100% !important;
  }
}


/* =====================================================
   V18 — PROJECT 1 PART II / SKETCHY SECRET
===================================================== */

.sketchy-secret-section{
  margin-top:96px !important;
}

.sketchy-secret-layout{
  display:flex;
  flex-direction:column;
  gap:30px;
}


/* -----------------------------------------------------
   VIDEO
----------------------------------------------------- */

.sketchy-video-card{
  width:100%;
  overflow:hidden;
  border-radius:28px;
  background:#000;
}

.sketchy-video{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
  background:#000;
  object-fit:contain;
}


/* -----------------------------------------------------
   IMAGE / ANIMATION ROWS
----------------------------------------------------- */

.sketchy-row{
  display:grid;
  width:100%;
  gap:28px;
  align-items:stretch;
}

/* Screenshot 1 large left / Front animation narrow right */
.sketchy-row-one{
  grid-template-columns:minmax(0,3fr) minmax(190px,1fr);
}

/* Back animation narrow left / Screenshot 2 large right */
.sketchy-row-two{
  grid-template-columns:minmax(190px,1fr) minmax(0,3fr);
}

/* Screenshot 3 large left / CB animation narrow right */
.sketchy-row-three{
  grid-template-columns:minmax(0,3fr) minmax(190px,1fr);
}

.sketchy-media-card{
  margin:0;
  min-width:0;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
}

/* All Part II visuals are hover-interactive but are not clickable/openable. */
.sketchy-media-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:
    transform .24s ease,
    filter .24s ease;
  transform-origin:center center;
  user-select:none;
  -webkit-user-drag:none;
}

@media(hover:hover) and (pointer:fine){
  .sketchy-media-card:hover img{
    transform:scale(1.045);
    filter:brightness(.97);
  }
}

.sketchy-screenshot{
  background:#fff;
}

.sketchy-screenshot img{
  object-fit:cover;
}

.sketchy-sprite-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:#fff;
}

.sketchy-animation-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:100%;
}

.sketchy-sprite{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}


/* Keep the paired rows close to the proportions in the supplied layout. */
.sketchy-row-one .sketchy-media-card,
.sketchy-row-two .sketchy-media-card,
.sketchy-row-three .sketchy-media-card{
  min-height:320px;
}


/* -----------------------------------------------------
   TEXT PANEL
----------------------------------------------------- */

.sketchy-text-panel{
  min-height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 52px;
  border-radius:28px;
  background:var(--light-accent);
}

.sketchy-text-panel p{
  margin:0;
  color:var(--navy);
  font-size:18px;
  line-height:1.7;
}


/* -----------------------------------------------------
   RESPONSIVE
----------------------------------------------------- */

@media(max-width:900px){
  .sketchy-row-one,
  .sketchy-row-two,
  .sketchy-row-three{
    grid-template-columns:minmax(0,2.5fr) minmax(170px,1fr);
  }

  .sketchy-row-two{
    grid-template-columns:minmax(170px,1fr) minmax(0,2.5fr);
  }

  .sketchy-row-one .sketchy-media-card,
  .sketchy-row-two .sketchy-media-card,
  .sketchy-row-three .sketchy-media-card{
    min-height:270px;
  }
}

@media(max-width:700px){
  .sketchy-secret-layout{
    gap:20px;
  }

  .sketchy-row-one,
  .sketchy-row-two,
  .sketchy-row-three{
    grid-template-columns:1fr !important;
  }

  .sketchy-row-one .sketchy-media-card,
  .sketchy-row-two .sketchy-media-card,
  .sketchy-row-three .sketchy-media-card{
    min-height:240px;
  }

  .sketchy-sprite-card{
    min-height:300px !important;
  }

  .sketchy-text-panel{
    min-height:200px;
    padding:32px 28px;
  }
}


/* =====================================================
   V19 — SECOND SECTION DESCRIPTION + VIDEO SOURCE
===================================================== */

.sketchy-secret-section .subsection-description{
  max-width:720px;
  margin:10px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}


/* =====================================================
   V20 — LARGER SKETCHY SECRET CHARACTER ANIMATIONS
===================================================== */

.sketchy-sprite-card{
  padding:10px !important;
}

.sketchy-animation-slot{
  overflow:visible !important;
}

.sketchy-sprite{
  width:112% !important;
  height:112% !important;
  max-width:112% !important;
  max-height:112% !important;
  object-fit:contain !important;
  transform:scale(1.08);
  transform-origin:center center;
}

@media(hover:hover) and (pointer:fine){
  .sketchy-sprite-card:hover .sketchy-sprite{
    transform:scale(1.125) !important;
  }
}

/* =====================================================
   V21 — PROJECT 3 / MATLAB VECTOR VENTURES
===================================================== */

.project-three-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:28px;
  align-items:stretch;
}

/* Shared media cards */
.project-three-media{
  margin:0;
  min-width:0;
  overflow:visible;
}

.project-three-map-card{
  grid-column:span 3;
}

.project-three-wide{
  grid-column:1 / -1;
}

.project-three-media img{
  display:block;
  width:100%;
  height:100%;
  border-radius:18px;
  object-fit:cover;
}

/* Maps and terminal screenshots keep their full screenshots visible. */
.project-three-map-card img,
.project-three-terminal img{
  object-fit:contain;
  background:#111;
}

/* First two rows follow the reference's balanced card proportions. */
.project-three-map-card{
  min-height:330px;
}

.project-three-map-card img{
  min-height:330px;
}

/* Full-width terminal examples. */
.project-three-terminal{
  min-height:410px;
}

.project-three-terminal img{
  min-height:410px;
}

/* Every Project 3 image gets the same subtle hover expansion. */
.project-three-hover{
  transform:scale(1);
  transform-origin:center center;
  transition:
    transform .22s ease,
    filter .22s ease,
    box-shadow .22s ease;
}

@media(hover:hover) and (pointer:fine){
  .project-three-hover:hover{
    transform:scale(1.025);
    filter:brightness(.975);
    box-shadow:0 16px 34px rgba(20,37,61,.10);
  }
}

/* Only the three maps can open the magnified preview. */
.project-three-map{
  cursor:zoom-in;
}

.project-three-map:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:5px;
}

/* Text panels use exactly the sidebar background variable. */
.project-three-text-card{
  grid-column:span 2;
  min-height:250px;
  padding:30px;
  border-radius:18px;
  background:var(--light-accent);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.project-three-text-large{
  grid-column:span 3;
  min-height:330px;
}

.project-three-text-card .small-label{
  margin-bottom:12px;
}

.project-three-text-card h3{
  margin-bottom:14px;
}

.project-three-text-card p:last-child{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

/* Responsive layout */
@media(max-width:900px){
  .project-three-grid{
    gap:22px;
  }

  .project-three-map-card,
  .project-three-text-large{
    grid-column:1 / -1;
  }

  .project-three-text-card{
    grid-column:span 3;
  }

  .project-three-map-card,
  .project-three-map-card img{
    min-height:280px;
  }

  .project-three-terminal,
  .project-three-terminal img{
    min-height:320px;
  }
}

@media(max-width:620px){
  .project-three-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .project-three-map-card,
  .project-three-wide,
  .project-three-text-card,
  .project-three-text-large{
    grid-column:1;
  }

  .project-three-map-card,
  .project-three-map-card img{
    min-height:220px;
  }

  .project-three-terminal,
  .project-three-terminal img{
    min-height:240px;
  }

  .project-three-text-card,
  .project-three-text-large{
    min-height:220px;
    padding:24px;
  }
}