:root {
  --cream: #f8f2e8;
  --cream-soft: #fbf6ee;
  --cream-deep: #efe3d1;
  --paper: rgba(255, 249, 241, 0.96);
  --paper-shadow: rgba(73, 49, 31, 0.14);
  --paper-shadow-deep: rgba(64, 41, 24, 0.22);
  --tan: #c6a27c;
  --tan-deep: #90684a;
  --brown: #654a35;
  --ink: #4f3a2c;
  --muted: #85705f;
  --blue: #8ea7b4;
  --blue-soft: #d4e0e7;
  --line: rgba(104, 77, 55, 0.12);
  --grid: rgba(124, 95, 70, 0.05);
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --shadow-soft: 0 18px 38px rgba(73, 49, 31, 0.12);
  --shadow-card: 0 26px 56px rgba(73, 49, 31, 0.18);
  --shadow-deep: 0 42px 90px rgba(64, 41, 24, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-serif);
  color: var(--ink);
  background:
    linear-gradient(rgba(248, 245, 239, 0.08), rgba(248, 245, 239, 0.08)),
    url("../images/DSC09079.jpg") center center / cover no-repeat;
  background-color: #e9eeef;
  overflow-x: hidden;
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  overflow: hidden;
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before {
  z-index: -3;
  background:
    radial-gradient(circle at 82% 34%, rgba(183, 214, 232, 0.18), rgba(183, 214, 232, 0) 34%),
    linear-gradient(180deg, rgba(250, 246, 238, 0.48), rgba(250, 246, 238, 0.26) 34%, rgba(250, 246, 238, 0.34) 100%),
    linear-gradient(90deg, rgba(250, 246, 238, 0.24) 0%, rgba(250, 246, 238, 0.10) 52%, rgba(250, 246, 238, 0.03) 72%, rgba(250, 246, 238, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 24%),
    repeating-linear-gradient(
      0deg,
      transparent 0 31px,
      rgba(124, 95, 70, 0.045) 31px 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 31px,
      rgba(123, 97, 75, 0.035) 31px 32px
    );
}

.hero::after {
  z-index: -2;
  opacity: 0.24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
}

.hero__glow--warm {
  width: 34rem;
  height: 26rem;
  top: -3rem;
  left: -8rem;
  background: radial-gradient(circle, rgba(235, 212, 176, 0.9) 0%, rgba(235, 212, 176, 0) 72%);
}

.hero__glow--cool {
  width: 30rem;
  height: 24rem;
  right: -8rem;
  bottom: -4rem;
  background: radial-gradient(circle, rgba(196, 214, 223, 0.8) 0%, rgba(196, 214, 223, 0) 72%);
}

.collage {
  position: relative;
  width: min(72rem, 100%);
  height: clamp(32rem, 72vw, 50rem);
  transform-style: preserve-3d;
  transform: perspective(1600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.layer {
  position: absolute;
  transform:
    translate3d(var(--parallax-x, 0px), calc(var(--parallax-y, 0px) + var(--hover-lift, 0px)), 0)
    rotate(var(--rotate, 0deg));
  transform-origin: center;
  will-change: transform;
}

.desk-shadow {
  left: 5%;
  right: 4%;
  bottom: 6%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(84, 56, 35, 0.28) 0%,
    rgba(84, 56, 35, 0.18) 38%,
    rgba(84, 56, 35, 0) 78%
  );
  filter: blur(26px);
  z-index: 0;
}

.backboard {
  left: 3.5%;
  top: 5%;
  width: 91%;
  height: 86%;
  border-radius: 2rem 2.2rem 1.8rem 1.9rem;
  background:
    radial-gradient(circle at 14% 18%, rgba(236, 217, 190, 0.62) 0 5%, transparent 5.5%),
    radial-gradient(circle at 26% 63%, rgba(112, 80, 55, 0.2) 0 4.6%, transparent 5.2%),
    radial-gradient(circle at 43% 28%, rgba(242, 230, 213, 0.52) 0 4.8%, transparent 5.3%),
    radial-gradient(circle at 63% 58%, rgba(116, 83, 56, 0.18) 0 4.5%, transparent 5.1%),
    radial-gradient(circle at 81% 20%, rgba(229, 206, 177, 0.58) 0 4.7%, transparent 5.2%),
    radial-gradient(circle at 74% 76%, rgba(120, 88, 61, 0.18) 0 4.4%, transparent 5%),
    linear-gradient(145deg, #c8a27c 0%, #a77f5d 54%, #886349 100%);
  border: 1px solid rgba(112, 82, 58, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 18px 34px rgba(63, 42, 25, 0.18);
  z-index: 1;
}

.backboard::before,
.backboard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.backboard::before {
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.backboard::after {
  inset: 0.85rem;
  border: 1px solid rgba(255, 245, 232, 0.14);
}

.prop {
  position: absolute;
  pointer-events: none;
}

.camera {
  left: 2%;
  top: 10%;
  width: min(11rem, 16%);
  aspect-ratio: 1.46;
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg, #56453d 0%, #3a2d28 60%, #261d1a 100%);
  border: 1px solid rgba(255, 246, 235, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 34px rgba(46, 31, 22, 0.18);
  z-index: 2;
}

.camera::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 247, 236, 0.08);
}

.camera__top,
.camera__viewfinder,
.camera__button,
.camera__lens {
  position: absolute;
}

.camera__top {
  left: 1rem;
  top: -0.85rem;
  width: 3.9rem;
  height: 1.55rem;
  border-radius: 0.9rem 0.9rem 0.35rem 0.35rem;
  background: linear-gradient(180deg, #463730, #2f2420);
  box-shadow: 0 8px 16px rgba(41, 29, 22, 0.16);
}

.camera__viewfinder {
  right: 1.05rem;
  top: 1rem;
  width: 1.8rem;
  height: 1.15rem;
  border-radius: 0.32rem;
  background: linear-gradient(180deg, #8fa6b2, #617888);
  opacity: 0.9;
}

.camera__button {
  right: 2.55rem;
  top: -0.28rem;
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #d8b58e, #a97b58);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
}

.camera__lens {
  left: 50%;
  top: 50%;
  width: 4.35rem;
  height: 4.35rem;
  border-radius: 50%;
  transform: translate(-50%, -42%);
  background:
    radial-gradient(circle at 38% 35%, rgba(176, 200, 214, 0.28), transparent 24%),
    radial-gradient(circle, #0f171d 0%, #19232b 32%, #31414b 54%, #161d22 76%, #0f1316 100%);
  border: 0.55rem solid #d4b089;
  box-shadow:
    inset 0 0 0 0.18rem rgba(255, 255, 255, 0.12),
    0 12px 22px rgba(32, 20, 13, 0.18);
}

.journal {
  left: 3%;
  bottom: 9%;
  width: min(9.8rem, 14%);
  aspect-ratio: 0.74;
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 22%),
    linear-gradient(145deg, #8f684d 0%, #6f503a 100%);
  border: 1px solid rgba(255, 244, 228, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 20px 32px rgba(66, 44, 28, 0.14);
  z-index: 1;
}

.journal::before {
  content: "";
  position: absolute;
  inset: 0.65rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 245, 232, 0.12);
}

.journal__band {
  position: absolute;
  right: 1rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 0.36rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(74, 55, 41, 0.76), rgba(54, 41, 31, 0.92));
}

.journal__label {
  position: absolute;
  left: 1.15rem;
  bottom: 1.5rem;
  padding: 0.38rem 0.65rem;
  border-radius: 999px;
  background: rgba(248, 239, 228, 0.88);
  color: rgba(89, 66, 48, 0.74);
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.film-strip-deco {
  right: 8%;
  bottom: 16%;
  width: 7.8rem;
  height: 2rem;
  border-radius: 0.45rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(90deg, transparent 0 1.36rem, rgba(229, 220, 206, 0.22) 1.36rem 1.62rem),
    linear-gradient(145deg, rgba(53, 43, 37, 0.96), rgba(31, 24, 21, 0.98));
  box-shadow: 0 16px 28px rgba(37, 28, 23, 0.16);
  z-index: 2;
}

.film-strip-deco::before,
.film-strip-deco::after {
  content: "";
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  height: 0.26rem;
  background: repeating-linear-gradient(90deg, rgba(236, 226, 214, 0.72) 0 0.38rem, transparent 0.38rem 0.9rem);
}

.film-strip-deco::before {
  top: 0.22rem;
}

.film-strip-deco::after {
  bottom: 0.22rem;
}

.film-roll {
  right: 9%;
  top: 14%;
  width: 4.9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.18), transparent 18%),
    radial-gradient(circle, #49413a 0%, #302923 55%, #211c18 100%);
  box-shadow: 0 18px 32px rgba(53, 40, 32, 0.18);
  z-index: 2;
}

.film-roll::before {
  content: "";
  position: absolute;
  left: 46%;
  top: 46%;
  width: 6.1rem;
  height: 1.45rem;
  border-radius: 0.4rem;
  transform: translate(-8%, 120%) rotate(-28deg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    repeating-linear-gradient(90deg, rgba(231, 221, 208, 0.9) 0 0.28rem, transparent 0.28rem 0.82rem),
    linear-gradient(145deg, rgba(55, 44, 38, 0.96), rgba(25, 19, 17, 0.98));
}

.film-roll__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #f8efe4 0%, #dac0a0 100%);
  box-shadow: 0 0 0 0.48rem rgba(245, 235, 224, 0.09);
}

.folio {
  left: 15%;
  top: 14%;
  width: 68%;
  height: 67%;
  z-index: 2;
}

.folio__body,
.folio__tab,
.folio__stamp,
.folio__spine {
  position: absolute;
}

.folio__body {
  inset: 0;
  border-radius: 2.2rem 1.5rem 1.75rem 1.35rem;
  background:
    linear-gradient(160deg, rgba(255, 252, 247, 0.78), rgba(255, 255, 255, 0) 18%),
    linear-gradient(145deg, #efdec8 0%, #e8d6c0 52%, #d6b492 100%),
    repeating-linear-gradient(0deg, rgba(118, 90, 66, 0.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 13px);
  border: 1px solid rgba(133, 104, 77, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    0 10px 0 rgba(157, 121, 88, 0.24),
    0 22px 48px rgba(64, 41, 24, 0.12),
    var(--shadow-deep);
}

.folio__body::before,
.folio__body::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.folio__body::before {
  inset: 1.25rem;
  border: 1px solid rgba(103, 78, 56, 0.12);
  border-radius: 1.3rem;
}

.folio__body::after {
  inset: 0;
  border-radius: inherit;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.folio__tab {
  top: -1.25rem;
  left: 8%;
  width: 10.5rem;
  height: 1.75rem;
  border-radius: 0.95rem 0.95rem 0 0;
  background: linear-gradient(180deg, #d5b18a 0%, #c39c76 100%);
  box-shadow: 0 -4px 10px rgba(67, 44, 27, 0.08);
}

.folio__stamp {
  left: 8%;
  bottom: 7%;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(105, 76, 53, 0.2);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(90, 64, 45, 0.75);
  background: rgba(251, 244, 234, 0.42);
}

.folio__spine {
  right: -1.5rem;
  top: 18%;
  padding: 1rem 0.65rem;
  border-radius: 0.85rem 0.85rem 0.85rem 0.2rem;
  background: linear-gradient(180deg, #d3e0e8 0%, #a2b8c3 100%);
  color: rgba(71, 57, 46, 0.8);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  box-shadow: var(--shadow-soft);
}

.title-card {
  left: 22%;
  bottom: 12%;
  width: min(31rem, 34%);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transition: filter 220ms ease;
  z-index: 3;
}

.title-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 36%;
  bottom: -0.38rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 250, 244, 0.85), rgba(142, 167, 180, 0.4), rgba(142, 167, 180, 0));
}

.title-card__kicker {
  margin: 0 0 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(102, 78, 58, 0.68);
  text-shadow: 0 1px 0 rgba(255, 249, 241, 0.65);
}

.title-card h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.02em;
  font-size: clamp(2.65rem, 4.8vw, 4.55rem);
  line-height: 0.84;
  color: #4c3320;
  font-weight: 700;
  letter-spacing: -0.06em;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 250, 244, 0.82),
    0 18px 28px rgba(79, 58, 44, 0.12);
}

.title-card__line {
  display: block;
}

.title-card__line--accent {
  font-size: 0.96em;
  letter-spacing: -0.055em;
}

.title-card__tagline {
  margin: 0.95rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(111, 88, 69, 0.7);
  text-shadow: 0 1px 0 rgba(255, 249, 241, 0.68);
}

.photo-frame {
  padding: 0.75rem 0.75rem 2.15rem;
  background: rgba(255, 252, 248, 0.95);
  border: 1px solid rgba(113, 85, 62, 0.12);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-card);
  isolation: isolate;
  overflow: visible;
  z-index: 4;
  transition: box-shadow 220ms ease, filter 220ms ease;
}

.photo-frame::before {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(120, 91, 67, 0.1);
  pointer-events: none;
}

.photo-frame__image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 0.85rem;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(99, 76, 55, 0.08);
  background-color: #efe5d8;
  z-index: 1;
}

.photo-frame__image::before,
.photo-frame__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.photo-frame__image::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(76, 57, 41, 0.02), rgba(76, 57, 41, 0.14));
}

.photo-frame__image::after {
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.photo-frame__image--warm {
  background:
    radial-gradient(circle at 70% 24%, rgba(255, 248, 239, 0.75), transparent 28%),
    linear-gradient(140deg, #f3e8da 0%, #dac1a6 60%, #c9a27d 100%);
}

.photo-frame__image--mist {
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.85), transparent 24%),
    linear-gradient(160deg, #f8f3ec 0%, #e4d7c7 56%, #c7d4db 100%);
}

.photo-frame__image--cool {
  background:
    radial-gradient(circle at 20% 24%, rgba(251, 247, 239, 0.55), transparent 28%),
    linear-gradient(150deg, #dde8ed 0%, #b5c7d2 52%, #e4d7c8 100%);
}

.photo-frame__image--linen {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #efe4d3 0%, #d5c0a9 100%);
}

.photo-frame__image--tan {
  background:
    radial-gradient(circle at 75% 20%, rgba(255, 248, 239, 0.6), transparent 26%),
    linear-gradient(145deg, #f1e4d4 0%, #caa27b 100%);
}

.photo-frame__caption {
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.72rem;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(84, 63, 47, 0.72);
  z-index: 5;
}

.photo-frame__tape {
  position: absolute;
  width: clamp(3.15rem, 5.4vw, 4.85rem);
  height: clamp(0.86rem, 1.35vw, 1.1rem);
  border-radius: 0.28rem;
  opacity: 0.94;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 5px 14px rgba(80, 60, 42, 0.12);
}

.photo-frame__tape::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(111, 84, 58, 0.14);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(90deg, rgba(132, 102, 76, 0.08) 0 1px, transparent 1px 9px);
}

.photo-frame__tape::after {
  content: "";
  position: absolute;
  inset: 16% 22%;
  border-radius: 999px;
  border-top: 1px solid rgba(126, 98, 73, 0.12);
  opacity: 0.55;
}

.photo-frame__tape--paper {
  background: rgba(247, 236, 220, 0.9);
}

.photo-frame__tape--blue {
  background: rgba(201, 216, 225, 0.92);
}

.photo-frame__tape--tan {
  background: rgba(217, 192, 165, 0.9);
}

.photo-frame__tape--top-left {
  top: -0.62rem;
  left: -0.72rem;
  transform: rotate(-15deg);
}

.photo-frame__tape--top-right {
  top: -0.66rem;
  right: -0.72rem;
  transform: rotate(15deg);
}

.photo-frame__tape--bottom-left {
  bottom: -0.48rem;
  left: -0.78rem;
  transform: rotate(11deg);
}

.photo-frame__tape--bottom-right {
  bottom: -0.5rem;
  right: -0.78rem;
  transform: rotate(-13deg);
}

.photo-frame--feature {
  left: 44%;
  top: 2%;
  width: 24%;
  aspect-ratio: 0.78;
  z-index: 7;
}

.photo-frame--left {
  left: 4%;
  top: 24%;
  width: 19%;
  aspect-ratio: 0.78;
  z-index: 5;
}

.photo-frame--right {
  right: 3%;
  top: 29%;
  width: 20%;
  aspect-ratio: 0.88;
  z-index: 4;
}

.photo-frame--wide {
  left: 43%;
  bottom: 5%;
  width: 22%;
  aspect-ratio: 1.58;
  z-index: 6;
}

.photo-frame--mini {
  right: 12%;
  bottom: 4%;
  width: 14.5%;
  aspect-ratio: 0.98;
  z-index: 8;
}

.note-slip,
.label-tab,
.paperclip,
.spark {
  z-index: 9;
}

.note-slip {
  left: 24%;
  top: 12%;
  padding: 0.72rem 1rem;
  border-radius: 0.75rem 0.75rem 0.75rem 0.3rem;
  background: rgba(255, 250, 243, 0.86);
  border: 1px solid rgba(110, 82, 58, 0.12);
  box-shadow: var(--shadow-soft);
}

.note-slip span {
  display: block;
  font-size: 0.98rem;
  font-style: italic;
  color: rgba(84, 63, 47, 0.74);
  letter-spacing: 0.01em;
}

.label-tab {
  right: 8%;
  top: 18%;
  padding: 0.8rem 1rem;
  border-radius: 1rem 1rem 1rem 0.3rem;
  background: rgba(144, 167, 180, 0.9);
  box-shadow: var(--shadow-soft);
}

.label-tab span {
  display: block;
  color: rgba(54, 48, 43, 0.84);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.paperclip {
  left: 12%;
  top: 20%;
  width: 1.4rem;
  height: 3.2rem;
}

.paperclip__outer,
.paperclip__inner {
  position: absolute;
  border: 2px solid rgba(134, 103, 77, 0.78);
  border-bottom: 0;
  border-radius: 0.8rem 0.8rem 0 0;
}

.paperclip__outer {
  inset: 0;
}

.paperclip__inner {
  top: 0.45rem;
  left: 50%;
  width: 0.6rem;
  height: 1.95rem;
  transform: translateX(-50%);
}

.spark {
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.5;
}

.spark::before,
.spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(166, 129, 98, 0.8);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.spark::before {
  width: 2px;
  height: 100%;
}

.spark::after {
  width: 100%;
  height: 2px;
}

.spark--1 {
  left: 7.5%;
  bottom: 14%;
}

.spark--2 {
  right: 7.5%;
  top: 13%;
}

@media (hover: hover) and (pointer: fine) {
  .photo-frame:hover {
    --hover-lift: -0.45rem;
    box-shadow: 0 30px 64px rgba(64, 41, 24, 0.24);
    filter: saturate(1.02);
  }

  .title-card:hover {
    --hover-lift: -0.12rem;
    filter: brightness(1.03);
  }
}

@media (max-width: 900px) {
  .collage {
    height: clamp(34rem, 110vw, 46rem);
  }

  .camera {
    left: 0;
    top: 12%;
    width: 9.4rem;
  }

  .journal {
    left: 0.5%;
    bottom: 10%;
    width: 8.2rem;
  }

  .film-roll {
    right: 6%;
    top: 15%;
    width: 4rem;
  }

  .film-strip-deco {
    right: 6%;
    bottom: 17%;
    width: 6.4rem;
  }

  .backboard {
    left: 2.5%;
    top: 7%;
    width: 95%;
    height: 84%;
  }

  .folio {
    left: 11%;
    top: 14%;
    width: 76%;
    height: 66%;
  }

  .folio__tab {
    width: 8.5rem;
    left: 9%;
  }

  .title-card {
    left: 18%;
    bottom: 12%;
    width: 36%;
  }

  .photo-frame--feature {
    left: 47%;
    top: 4%;
    width: 30%;
  }

  .photo-frame--left {
    left: 1%;
    top: 25%;
    width: 24%;
  }

  .photo-frame--right {
    right: 1%;
    top: 36%;
    width: 24%;
  }

  .photo-frame--wide {
    left: 39%;
    bottom: 12%;
    width: 28%;
  }

  .photo-frame--mini {
    right: 10%;
    bottom: 4%;
    width: 18%;
  }

  .note-slip {
    left: 20%;
    top: 13%;
  }

  .label-tab {
    right: 6%;
    top: 20%;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-inline: 0.85rem;
  }

  .camera,
  .journal,
  .film-roll,
  .film-strip-deco,
  .note-slip,
  .label-tab,
  .paperclip,
  .spark {
    display: none;
  }

  .hero__glow--warm {
    width: 22rem;
    height: 18rem;
    top: -4rem;
    left: -8rem;
  }

  .hero__glow--cool {
    width: 18rem;
    height: 16rem;
    right: -6rem;
    bottom: -4rem;
  }

  .collage {
    height: clamp(35rem, 146vw, 42rem);
  }

  .desk-shadow {
    left: 2%;
    right: 2%;
    bottom: 7%;
  }

  .backboard {
    left: 1.5%;
    top: 8%;
    width: 97%;
    height: 85%;
  }

  .folio {
    left: 7%;
    top: 15%;
    width: 86%;
    height: 68%;
  }

  .folio__spine {
    right: -0.95rem;
    padding: 0.85rem 0.45rem;
    font-size: 0.56rem;
  }

  .folio__stamp {
    left: 7%;
    font-size: 0.56rem;
    letter-spacing: 0.18em;
  }

  .title-card {
    left: 17%;
    bottom: 12%;
    width: 47%;
  }

  .title-card__kicker,
  .title-card__tagline,
  .photo-frame__caption,
  .label-tab span {
    letter-spacing: 0.12em;
  }

  .title-card__kicker,
  .title-card__tagline {
    font-size: 0.54rem;
  }

  .title-card h1 {
    font-size: clamp(1.9rem, 7.4vw, 2.85rem);
  }

  .photo-frame {
    padding: 0.55rem 0.55rem 1.85rem;
    border-radius: 1rem;
  }

  .photo-frame::before {
    inset: 0.36rem;
    border-radius: 0.72rem;
  }

  .photo-frame__caption {
    left: 0.72rem;
    right: 0.72rem;
    bottom: 0.54rem;
    font-size: 0.44rem;
  }

  .photo-frame--feature {
    left: 50%;
    top: 8%;
    width: 30%;
  }

  .photo-frame--left {
    left: -6%;
    top: 29%;
    width: 24%;
  }

  .photo-frame--right {
    right: -5%;
    top: 42%;
    width: 24%;
  }

  .photo-frame--wide {
    left: 39%;
    bottom: 19%;
    width: 29%;
  }

  .photo-frame--mini {
    right: 1%;
    bottom: 7%;
    width: 16%;
  }
}

@media (max-width: 420px) {
  .title-card {
    left: 18%;
    bottom: 12%;
    width: 51%;
  }

  .title-card__kicker,
  .title-card__tagline {
    font-size: 0.5rem;
  }

  .title-card h1 {
    font-size: clamp(1.7rem, 7vw, 2.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collage,
  .layer,
  .photo-frame,
  .title-card {
    transition: none !important;
  }
}