@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/*
  Pixel-faithful reproduction of the reference design (1920x1080 canvas).
  --px = 1 design-pixel, expressed as a viewport-width fraction so the
  whole canvas scales uniformly (preserving exact relative positions,
  curves and proportions) at any screen width.
*/
:root {
  --px: calc(100vw / 1920);
  --page-bg: #321328;
  --folder: #ece0c8;
  --ink: #321328;
  --cream: #ece0c8;
  --panel: #e2d7bd;
  --tab-about: #a79f4a;
  --tab-art: #706e2a;
  --text-light: #fefbf4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body.stagebody {
  background: var(--page-bg);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  width: 100vw;
  height: calc(1080 * var(--px));
  overflow: hidden;
}

/* ---------- header ---------- */
.hdr-title {
  position: absolute;
  left: calc(96 * var(--px));
  top: calc(66 * var(--px));
  font-size: calc(42 * var(--px));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.hdr-email {
  position: absolute;
  right: calc(97 * var(--px));
  top: calc(65 * var(--px));
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hdr-email-label {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: calc(100 * var(--px));
  font-size: calc(26 * var(--px));
  font-weight: 400;
  color: var(--cream);
  opacity: 1;
  transition: max-width .6s cubic-bezier(.65,0,.35,1), opacity .45s ease;
}
.hdr-email-pill {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  font-size: calc(23 * var(--px));
  font-weight: 500;
  color: var(--ink);
  background: var(--folder);
  padding: calc(10 * var(--px)) 0;
  border-radius: 999px;
  transition: max-width .6s cubic-bezier(.65,0,.35,1), opacity .5s ease, padding .6s cubic-bezier(.65,0,.35,1);
}
.hdr-email:hover .hdr-email-label,
.hdr-email:focus-visible .hdr-email-label,
.hdr-email.copied .hdr-email-label { max-width: 0; opacity: 0; }
.hdr-email:hover .hdr-email-pill,
.hdr-email:focus-visible .hdr-email-pill,
.hdr-email.copied .hdr-email-pill {
  max-width: calc(420 * var(--px));
  opacity: 1;
  padding: calc(10 * var(--px)) calc(20 * var(--px));
}
.hdr-email:active .hdr-email-pill { transform: scale(.97); }

/* ---------- folder tabs ----------
   Built directly from the designer's Figma export (exact vector curves +
   text-as-paths). Each source SVG is cropped to that tab's own precise,
   non-overlapping bump bounding box, so the three sit side by side with
   no shared transparent canvas (avoids the paint glitch that showed up
   when three full-width layered SVGs were stacked on top of each other). */
.tabs-wrap {
  position: absolute;
  left: calc(95 * var(--px));
  top: calc(191 * var(--px));
  width: calc(1728 * var(--px));
  height: calc(87 * var(--px));
  z-index: 2;
}
.tab-btn {
  position: absolute;
  top: 0;
  height: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: filter .15s ease;
}
.tab-btn img { display: block; width: 100%; height: 100%; }
.tab-btn:hover, .tab-btn:focus-visible { filter: brightness(1.07); }
.tab-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: -4px; }

.tab1 { left: calc(0 * var(--px)); width: calc(600 * var(--px)); z-index: 3; }
.tab2 { left: calc(488 * var(--px)); width: calc(412 * var(--px)); z-index: 1; }
.tab3 { left: calc(1240 * var(--px)); width: calc(412 * var(--px)); z-index: 1; }

/* ---------- folder body ---------- */
.folder-body {
  position: absolute;
  left: calc(95 * var(--px));
  top: calc(278 * var(--px));
  width: calc(1728 * var(--px));
  height: calc(701 * var(--px));
  background: var(--folder);
  color: var(--ink);
  border-radius: 0 calc(42 * var(--px)) calc(42 * var(--px)) calc(42 * var(--px));
  z-index: 1;
  transition: background .3s ease, color .3s ease;
}
/* the whole panel re-skins to the active tab's color, cream/about/art */
.folder-body.theme-about { background: var(--tab-about); color: var(--text-light); }
.folder-body.theme-art { background: var(--tab-art); color: var(--text-light); }

/* ---------- cards row ---------- */
.cards {
  display: flex;
  align-items: flex-start;
  padding: calc(58 * var(--px)) calc(54 * var(--px));
  gap: calc(80 * var(--px));
}

.card {
  position: relative;
  display: block;
  width: calc(260 * var(--px));
  text-decoration: none;
  color: var(--ink);
  margin-top: calc(var(--stagger, 0) * var(--px));
  transition: margin-top .5s cubic-bezier(.4,0,.2,1);
}
.card:hover, .card:focus-visible { margin-top: 0; }
.card.disabled { cursor: default; }

/* thumb + body share ONE rounded, clipped container so the panel that
   grows in behind the description always reads as the same continuous
   card as the thumbnail above it -- no seam at the corners. */
.card-visual {
  border-radius: calc(12 * var(--px));
  overflow: hidden;
  /* forces its own compositing layer so the rounded clip and the image
     underneath it anti-alias together, instead of showing a hairline
     seam where the child's straight edge meets the parent's curve */
  transform: translateZ(0);
  isolation: isolate;
  /* backstop color behind everything: while card-body's height animates,
     the browser has to recompute this container's rounded clip mask every
     frame, which can leave a hairline at the corner arc showing whatever
     is behind it. Keeping that backstop already dark-beige during hover
     (instead of only the inner card-body being dark-beige) means that
     hairline reveals more dark-beige instead of the lighter folder cream. */
  background: transparent;
  transition: background .4s ease;
}
.card:hover .card-visual, .card:focus-visible .card-visual { background: var(--panel); }

.card-thumb {
  width: 100%;
  height: calc(var(--thumb-h, 286) * var(--px));
  background: var(--panel);
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body {
  display: flex;
  flex-direction: column;
  margin-top: calc(33 * var(--px));
  height: calc(42 * var(--px));
  padding: 0;
  background: transparent;
  border-radius: calc(12 * var(--px));
  transition: height .5s cubic-bezier(.4,0,.2,1), margin-top .5s cubic-bezier(.4,0,.2,1),
              padding .5s cubic-bezier(.4,0,.2,1), background .4s ease;
}
.card:hover .card-body, .card:focus-visible .card-body {
  height: calc(var(--expand-h, 276) * var(--px));
  margin-top: 0;
  padding: calc(14 * var(--px)) calc(20 * var(--px)) calc(20 * var(--px));
  background: var(--panel);
}
.title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex: none;
}
.title-row .t {
  font-size: calc(28 * var(--px));
  font-weight: 800;
  letter-spacing: -0.02em;
}
.title-row .plus {
  font-size: calc(24 * var(--px));
  font-weight: 400;
  opacity: .65;
  transition: opacity .3s ease;
}
.card:hover .title-row .plus, .card:focus-visible .title-row .plus { opacity: 0; }

.tag {
  order: -1;
  align-self: flex-start;
  background: var(--folder);
  font-size: calc(15 * var(--px));
  font-weight: 500;
  padding: 0 calc(16 * var(--px));
  border-radius: calc(18 * var(--px));
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .3s ease .05s, max-height .5s cubic-bezier(.4,0,.2,1),
              margin-bottom .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1);
}
.card:hover .tag, .card:focus-visible .tag {
  opacity: 1;
  max-height: calc(40 * var(--px));
  margin-bottom: calc(10 * var(--px));
  padding: calc(8 * var(--px)) calc(16 * var(--px));
}

.desc {
  font-size: calc(22 * var(--px));
  line-height: 1.35;
  font-weight: 400;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: opacity .3s ease .08s, max-height .5s cubic-bezier(.4,0,.2,1), margin-top .5s cubic-bezier(.4,0,.2,1);
}
.card:hover .desc, .card:focus-visible .desc {
  opacity: 1;
  max-height: calc(140 * var(--px));
  margin-top: calc(16 * var(--px));
}

.seemore {
  align-self: flex-end;
  margin-top: calc(16 * var(--px));
  font-size: calc(20 * var(--px));
  font-weight: 600;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .3s ease .1s, max-height .5s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.card:hover .seemore, .card:focus-visible .seemore { opacity: 1; max-height: calc(30 * var(--px)); }

/* ---------- panel: about ---------- */
.panel { display: none; }
.panel.active { display: block; position: relative; height: 100%; }

.about-layout {
  position: absolute;
  left: calc(104 * var(--px));
  top: calc(146 * var(--px));
  display: flex;
  align-items: flex-start;
  gap: calc(65 * var(--px));
}
.about-photo {
  position: relative;
  width: calc(593 * var(--px));
  height: calc(415 * var(--px));
  flex: none;
}
/* radius + clip live on the image itself (not this wrapper) so the
   credit tooltip below can extend past the photo edge unclipped */
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(20 * var(--px));
}
.about-icon-wrap {
  position: absolute;
  top: calc(16 * var(--px));
  right: calc(16 * var(--px));
}
.about-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  border: none;
  border-radius: 50%;
  background: var(--text-light);
  color: #919fb9;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: calc(19 * var(--px));
  cursor: pointer;
  transition: transform .15s ease;
}
.about-icon:hover, .about-icon:focus-visible { transform: scale(1.08); }

.about-tooltip {
  position: absolute;
  top: calc(46 * var(--px));
  right: 0;
  width: calc(280 * var(--px));
  background: var(--folder);
  color: var(--ink);
  font-size: calc(15 * var(--px));
  line-height: 1.45;
  font-weight: 400;
  padding: calc(16 * var(--px));
  border-radius: calc(16 * var(--px));
  box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 5;
}
.about-icon-wrap:hover .about-tooltip,
.about-icon-wrap:focus-within .about-tooltip {
  opacity: 1;
  transform: translateY(0);
}
.about-text { width: calc(900 * var(--px)); }
.about-text p {
  font-size: calc(24 * var(--px));
  line-height: 1.65;
  font-weight: 400;
}
.about-extra { margin-top: calc(90 * var(--px)); font-size: calc(24 * var(--px)); }
.about-extra p { margin-bottom: calc(4 * var(--px)); }
.about-extra .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(100 * var(--px));
}
.about-extra .out { font-weight: 700; }

/* ---------- panel: art pieces ---------- */
.art-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(32 * var(--px));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-light);
}

/* ---------- mobile fallback (below this width the fixed canvas no
   longer makes sense; switch to a simple stacked, always-expanded layout) ---------- */
@media (max-width: 760px) {
  :root { --px: calc(100vw / 420); }
  .stage { height: auto; min-height: 100vh; padding-bottom: calc(60 * var(--px)); }
  .cards { flex-direction: column; padding: calc(58 * var(--px)) calc(24 * var(--px)); gap: calc(56 * var(--px)); }
  .card { width: 100%; margin-top: 0 !important; }
  .card-thumb { height: calc(var(--thumb-h, 286) * 0.85 * var(--px)); }
  .card-body { height: auto !important; overflow: visible; }
  .tag, .desc, .seemore { opacity: 1 !important; max-height: none !important; margin: revert; }
  .tag { margin-bottom: calc(10 * var(--px)) !important; }
  .desc { margin-top: calc(10 * var(--px)) !important; }
  .seemore { margin-top: calc(10 * var(--px)) !important; }
  .title-row .plus { display: none; }
  .folder-body { height: auto; padding-bottom: calc(40 * var(--px)); }

  .about-layout { position: static; flex-direction: column; padding: calc(40 * var(--px)) calc(24 * var(--px)) 0; gap: calc(24 * var(--px)); }
  .about-photo, .about-text { width: 100%; }
  .about-extra { margin-top: calc(40 * var(--px)); }
  .about-extra .row { gap: calc(4 * var(--px)) calc(24 * var(--px)); flex-direction: column; }

  .art-cards { flex-direction: column; padding: calc(40 * var(--px)) calc(24 * var(--px)) 0; gap: calc(48 * var(--px)); }
  .art-cards .card { width: 100%; margin-top: 0 !important; }
}