/* 03 At home: a light cream magazine spread. Her five original photos start as a little pile of
   prints and fan out into the spread as you scroll (the office photo grows into the feature while
   the others fly out to their places at different speeds), over afternoon window light, a giant
   outlined word, orchid line drawings and handwritten captions. One print is a polaroid, one a
   frame cut from a film strip. Photos only move, scale and turn flat (no 3D tilt). */
@property --hm-fy { syntax: "<length>"; inherits: false; initial-value: 0px; }

#home {
  --hm-paper: #f4ebe4;
  --hm-paper-2: #fbf4ef;
  --hm-ink: #2a0e1a;
  --hm-plum: #6e2448;
  --hm-line: rgba(110, 36, 72, 0.62);
  --hm-shadow: 0 34px 60px -30px rgba(74, 15, 38, 0.55), 0 10px 22px -14px rgba(74, 15, 38, 0.35);
  position: relative;
  color: var(--hm-ink);
  background:
    radial-gradient(60% 50% at 8% 92%, rgba(255, 196, 218, 0.55), transparent 70%),
    radial-gradient(50% 45% at 96% 30%, rgba(255, 214, 228, 0.6), transparent 70%),
    linear-gradient(180deg, var(--hm-paper-2), var(--hm-paper) 40%, #f1e3dc);
  border-radius: clamp(26px, 3.4vw, 54px);
  overflow: clip;
}
#home .hm-stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }

/* ---- background: afternoon window light, glow, giant outlined word */
#home .hm-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#home .hm-glow { position: absolute; left: 34%; top: 18%; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 240, 246, 0.35) 40%, transparent 68%); }
#home .hm-sun { position: absolute; right: -14%; top: -12%; width: 74%; height: 118%; transform: skewX(-24deg); transform-origin: 50% 0; filter: blur(14px); opacity: 0.8;
  background: linear-gradient(90deg, transparent 0 4%, rgba(255, 252, 244, 0.95) 4% 30%, transparent 30% 34%, rgba(255, 252, 244, 0.95) 34% 60%, transparent 60% 64%, rgba(255, 252, 244, 0.95) 64% 90%, transparent 90%);
  -webkit-mask: linear-gradient(180deg, transparent 0 7%, #000 7% 46%, transparent 46% 50%, #000 50% 76%, transparent 90%);
          mask: linear-gradient(180deg, transparent 0 7%, #000 7% 46%, transparent 46% 50%, #000 50% 76%, transparent 90%);
  animation: hm-sun 16s ease-in-out infinite alternate; }
#home .hm-sun::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 210, 160, 0.35) 50%, transparent); mix-blend-mode: multiply; }
@keyframes hm-sun { to { transform: skewX(-19deg) translateX(-5%); opacity: 0.62; } }
#home .hm-giant { position: absolute; left: 0; top: 52%; margin: 0; display: flex; align-items: center; gap: 0.18em; white-space: nowrap; transform: translateY(-50%); will-change: transform;
  font: 400 clamp(180px, 27vw, 460px) / 0.8 var(--display); letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1.4px rgba(110, 36, 72, 0.17); }
#home .hm-giant i { font: italic 400 0.3em/1 var(--serif); -webkit-text-stroke: 0; color: rgba(255, 46, 136, 0.2); }

/* ---- orchid line drawings */
#home .hm-defs { position: absolute; width: 0; height: 0; }
#home .hm-orchid { position: absolute; z-index: 6; pointer-events: none; overflow: visible; fill: none; stroke: var(--hm-line); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#home .hm-orchid .o-stem { stroke-width: 2.1; }
#home .hm-orchid .o-leaf { stroke-width: 1.8; }
#home .hm-orchid .o-ped { stroke-width: 1.4; }
#home .hm-orchid .o-f { --dr: 0; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--dr)); }
#home .o-pt { fill: rgba(255, 223, 234, calc(var(--fo, 1) * 0.92)); }
#home .o-lip { fill: rgba(255, 46, 136, calc(var(--fo, 1) * 0.55)); }
#home .o-vn { stroke-width: 0.9; stroke: rgba(110, 36, 72, 0.4); }
#home .o-col { fill: rgba(233, 195, 138, 0.9); stroke: none; }
#home .hm-orchid .o-stem, #home .hm-orchid .o-leaf, #home .hm-orchid .o-ped { stroke-dasharray: 1 1; }
#home .hm-orchid-a { left: -1.5%; top: calc(max(39%, 182px + 6vh + 6.7vw) - 7.5vh); width: min(25vw, 40vh); transform-origin: 20% 100%; animation: hm-sway 7s ease-in-out infinite alternate; }
#home .hm-orchid-b { left: calc(var(--x5) + var(--w5) - 14px); bottom: -1.5%; width: min(14.6vw, 23vh); transform: scaleX(-1); transform-origin: 50% 100%; z-index: 4; }
@keyframes hm-sway { from { rotate: -1.2deg; } to { rotate: 1.4deg; } }

/* ---- the words */
#home .hm-copy { position: absolute; z-index: 40; left: var(--pad); top: calc(64px + 6vh); width: min(31vw, 440px); }
#home .kicker { color: rgba(42, 14, 26, 0.66); }
#home .hm-title { position: relative; width: fit-content; margin: 14px 0 18px -0.04em; font: 400 clamp(64px, 7.6vw, 128px) / 0.88 var(--display); letter-spacing: -0.01em; color: var(--hm-ink); }
#home .hm-title em { font: italic 400 0.84em/1 var(--serif); color: var(--hot); margin-left: 0.04em; }
#home .hm-swash { position: absolute; left: 30%; bottom: -0.2em; width: 66%; height: auto; overflow: visible; fill: none; stroke: var(--hot); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--sw, 0); opacity: 0.85; }
#home .lede { color: rgba(42, 14, 26, 0.74); max-width: 30ch; }
#home .lede em { color: var(--hm-ink); }

/* ---- the photographs: crisp, clean corners, a soft shadow; they turn only flat */
#home { --h5: min(78vh, 860px); --w5: calc(var(--h5) * 1360 / 1672); --x5: calc(52% - var(--w5) / 2); }
#home .hm-ph { position: absolute; margin: 0; z-index: 12; translate: 0 calc(var(--py, 0px) + var(--hm-fy)); transition: scale 0.6s var(--ease); animation: hm-float 7s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.7s); }
@keyframes hm-float { from { --hm-fy: -5px; } to { --hm-fy: 6px; } }
#home .hm-ph:hover { scale: 1.025; z-index: 26; }
#home .hm-in { position: relative; width: 100%; height: 100%; }
#home .hm-img { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: #e9dcd4; box-shadow: var(--hm-shadow); }
#home .hm-img img { width: 100%; height: 100%; object-fit: cover; }
#home .hm-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); background: linear-gradient(130deg, rgba(255, 255, 255, 0.14), transparent 26%); }

/* the feature: the full-length office picture, never cropped (its box is the photo's own ratio) */
#home .hm-p5 { z-index: 14; height: var(--h5); width: var(--w5); left: var(--x5); top: calc(50% - var(--h5) / 2 + 2.5vh); }
#home .hm-p5 .hm-img { border-radius: 18px; }
#home .hm-vf { position: absolute; width: 30px; height: 30px; border: 2px solid var(--hot); opacity: 0.9; }
#home .hm-vf-tl { left: -14px; top: -14px; border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
#home .hm-vf-br { right: -14px; bottom: -14px; border-left: 0; border-top: 0; border-bottom-right-radius: 9px; }

#home .hm-p3 { --h: min(42vh, 460px); --fr: 16px; --ft: 10px; --w: calc((var(--h) - 2 * var(--ft)) * 621 / 1104 + 2 * var(--fr));
  z-index: 10; height: var(--h); width: var(--w); left: calc(var(--x5) - var(--w) + 14px); top: max(39%, 182px + 6vh + 6.7vw); }
#home .hm-p4 { --h: min(44vh, 480px); z-index: 10; height: var(--h); width: calc(var(--h) * 0.75); left: calc(var(--x5) + var(--w5) + 1.6vw); top: calc(64px + 2vh); }
#home .hm-p1 { --w: min(17vw, 29vh, 300px); z-index: 18; width: var(--w); left: calc(var(--pad) - 0.6vw); top: 51.5%; }
#home .hm-pola .hm-in { padding: 9px 9px 40px; background: #fdfaf7; border-radius: 4px; box-shadow: var(--hm-shadow); }
#home .hm-pola .hm-img { height: auto; aspect-ratio: 1374 / 1717; border-radius: 2px; box-shadow: none; }
#home .hm-p2 { --h: min(48vh, 520px); z-index: 18; height: var(--h); width: calc(var(--h) * 1125 / 2000); left: calc(100% - var(--h) * 1125 / 2000 - 2.4vw); top: 49%; }
#home .hm-arch .hm-img { border-radius: 999px 999px 16px 16px; }
#home .hm-film .hm-in { padding: var(--ft) var(--fr); border-radius: 3px; box-shadow: var(--hm-shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23160b11' fill-rule='evenodd' d='M0 0H16V16H0Z M6.2 3.6h3.6a1.6 1.6 0 0 1 1.6 1.6v5.6a1.6 1.6 0 0 1-1.6 1.6H6.2a1.6 1.6 0 0 1-1.6-1.6V5.2a1.6 1.6 0 0 1 1.6-1.6Z'/%3E%3C/svg%3E") 0 0 / var(--fr) var(--fr) repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23160b11' fill-rule='evenodd' d='M0 0H16V16H0Z M6.2 3.6h3.6a1.6 1.6 0 0 1 1.6 1.6v5.6a1.6 1.6 0 0 1-1.6 1.6H6.2a1.6 1.6 0 0 1-1.6-1.6V5.2a1.6 1.6 0 0 1 1.6-1.6Z'/%3E%3C/svg%3E") 100% 0 / var(--fr) var(--fr) repeat-y,
    linear-gradient(#160b11, #160b11) 50% 0 / calc(100% - 2 * var(--fr)) 100% no-repeat; }
#home .hm-film .hm-img { border-radius: 2px; box-shadow: none; }
#home .hm-sheen { position: absolute; inset: -10% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.1) 52%, transparent 60%); transform: translateX(-60%); animation: hm-sheen 5.5s var(--ease) infinite; pointer-events: none; mix-blend-mode: soft-light; }
@keyframes hm-sheen { 0%, 45% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
#home .hm-tape { position: absolute; left: 50%; top: -12px; width: 82px; height: 24px; margin-left: -41px; rotate: -4deg; background: rgba(255, 196, 218, 0.8); box-shadow: 0 2px 6px rgba(74, 15, 38, 0.14); }
#home .hm-p3 .hm-tape { left: 30%; rotate: 8deg; background: rgba(233, 195, 138, 0.72); }

/* handwritten captions (on the paper, with a drawn arrow) and paper tags */
#home .hm-cap { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; white-space: nowrap; font: italic 400 clamp(17px, 1.4vw, 22px)/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--hm-plum); }
#home .hm-cap span { display: inline-block; padding: 2px 0; clip-path: inset(-30% calc((1 - var(--cw, 1)) * 100%) -30% -6%); }
#home .hm-arrow { width: 52px; height: 30px; flex: none; overflow: visible; fill: none; stroke: var(--hot); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--cw, 1)); }
#home .hm-p5 .hm-cap { left: 50%; top: calc(100% + 5px); transform: translateX(-50%); flex-direction: row-reverse; font-size: clamp(17px, 1.3vw, 21px); }
#home .hm-p5 .hm-arrow { width: 40px; height: 24px; margin-top: -12px; }
#home .hm-p3 .hm-cap { left: 26%; top: calc(100% + 8px); }
#home .hm-p3 .hm-arrow { width: 44px; height: 26px; margin-top: -14px; }
#home .hm-p4 .hm-cap { left: 0.5vw; top: calc(100% + 10px); flex-direction: column; align-items: flex-start; gap: 2px; }
#home .hm-p4 .hm-arrow { width: 26px; height: 26px; margin-left: 10px; }
#home .hm-tag { left: -22px; bottom: 7%; padding: 7px 13px 8px; background: #fffaf6; border-radius: 3px; rotate: -4deg; box-shadow: 0 10px 20px -12px rgba(74, 15, 38, 0.6), 0 0 0 1px rgba(110, 36, 72, 0.06); clip-path: inset(-20px calc((1 - var(--cw, 1)) * 100%) -20px -20px); }
#home .hm-tag span { clip-path: none; }
#home .hm-cap-in { left: 14px; right: 12px; bottom: 11px; font-size: clamp(15px, 1.2vw, 19px); color: #3b1424; }

/* doodles */
#home .hm-doodle { position: absolute; z-index: 36; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--dd, 1)); pointer-events: none; }
#home .hm-heart { width: 0.34em; stroke: var(--hot); stroke-width: 2.6; left: calc(100% + 0.08em); top: -0.02em; rotate: 14deg; }
#home .hm-stars { width: 70px; stroke: rgba(222, 150, 70, 0.95); stroke-width: 1.8; left: calc(var(--x5) + var(--w5) + 0.6vw); bottom: 2.5vh; }
#home .hm-note { position: absolute; z-index: 36; margin: 0; left: calc(var(--x5) - 7.5vw); bottom: 2.8vh; font: italic 400 clamp(20px, 1.6vw, 26px)/1 var(--serif); color: var(--hot); rotate: -6deg; opacity: var(--dd, 1); }


/* ---- phones and tall screens: a two-column spread, tags instead of arrows */
@media (max-width: 820px), (max-aspect-ratio: 85/100) {
  #home { --h5: min(40svh, 410px); --x5: 3.5vw; }
  #home .hm-stage { min-height: 600px; }
  #home .hm-copy { top: calc(66px + 1.5svh); width: auto; right: 44%; }
  #home .hm-title { font-size: clamp(48px, 13.5vw, 74px); margin: 8px 0 10px; }
  #home .lede { font-size: 15px; line-height: 1.48; }
  #home .hm-p5 { top: calc(33svh + 4px); }
  #home .hm-p4 { --h: min(24svh, 230px); left: auto; right: 3vw; top: calc(62px + 1svh); }
  #home .hm-p3 { --h: min(21svh, 200px); --fr: 9px; --ft: 6px; left: calc(var(--x5) + var(--w5) - 8px); top: calc(35svh + 8px); }
  #home .hm-p2 { --h: min(26svh, 250px); left: auto; right: 2.5vw; top: calc(58svh); }
  #home .hm-p1 { --w: min(38vw, 170px); left: 4.5vw; top: auto; bottom: 2.6svh; }
  #home .hm-pola .hm-in { padding: 6px 6px 30px; }
  #home .hm-cap-in { font-size: 13px; left: 9px; bottom: 9px; }
  #home .hm-tape { width: 54px; height: 17px; margin-left: -27px; top: -8px; }
  #home .hm-vf { width: 20px; height: 20px; }
  #home .hm-vf-tl { left: -9px; top: -9px; } #home .hm-vf-br { right: -9px; bottom: -9px; }
  /* every caption becomes a small paper tag on its photo */
  #home .hm-cap:not(.hm-cap-in) { top: auto; left: auto; right: auto; bottom: -11px; transform: none; flex-direction: row; padding: 5px 9px 6px; font-size: 14.5px; background: #fffaf6; border-radius: 3px; rotate: -3deg; box-shadow: 0 8px 16px -10px rgba(74, 15, 38, 0.6), 0 0 0 1px rgba(110, 36, 72, 0.06); clip-path: inset(-20px calc((1 - var(--cw, 1)) * 100%) -20px -20px); }
  #home .hm-cap:not(.hm-cap-in) span { clip-path: none; padding: 0; }
  #home .hm-cap .hm-arrow { display: none; }
  #home .hm-p5 .hm-cap { left: 22px; top: -13px; bottom: auto; rotate: -2deg; }
  #home .hm-p3 .hm-cap { right: 4px; bottom: -12px; rotate: 3deg; font-size: 13.5px; padding: 5px 7px 6px; }
  #home .hm-p4 .hm-cap { left: -14px; bottom: 10px; }
  #home .hm-p2 .hm-cap { right: 4px; bottom: -12px; }
  #home .hm-orchid-a { width: 62vw; left: -12vw; bottom: auto; top: calc(66px + 16svh); }
  #home .hm-orchid-b { width: 40vw; right: auto; left: 43vw; top: auto; bottom: -3svh; }
  #home .hm-heart { width: 0.36em; }
  #home .hm-stars { width: 50px; left: 45vw; bottom: 9svh; }
  #home .hm-note { left: auto; right: 7vw; bottom: 1.6svh; font-size: 19px; }
}

/* ---- tablets in portrait: the desktop spread, stacked under the words */
@media (min-width: 600px) and (max-aspect-ratio: 85/100) {
  #home { --h5: min(52svh, 760px); --x5: calc(50% - var(--w5) / 2); }
  #home .hm-copy { top: calc(70px + 2svh); right: 34%; }
  #home .hm-title { font-size: clamp(56px, 11vw, 110px); }
  #home .lede { font-size: clamp(16px, 2.1vw, 19px); }
  #home .hm-p5 { top: 30svh; }
  #home .hm-p4 { --h: min(22svh, 300px); right: 4vw; top: calc(70px + 1svh); }
  #home .hm-p3 { --h: min(26svh, 360px); --fr: 14px; --ft: 9px; left: 3vw; top: 37svh; }
  #home .hm-p1 { --w: min(25vw, 260px); left: 3.5vw; bottom: 2svh; }
  #home .hm-p2 { --h: min(30svh, 420px); right: 3vw; top: 57svh; }
  #home .hm-cap:not(.hm-cap-in) { font-size: clamp(15px, 2vw, 19px); }
  #home .hm-cap-in { font-size: clamp(14px, 1.9vw, 17px); }
  #home .hm-p3 .hm-cap { left: 10px; right: auto; }
  #home .hm-orchid-a { width: 40vw; left: -6vw; top: 22svh; }
  #home .hm-orchid-b { width: 26vw; left: auto; right: 2vw; bottom: auto; top: 33svh; }
  #home .hm-stars { left: auto; right: 34vw; bottom: 5svh; }
  #home .hm-note { right: auto; left: 46vw; bottom: 2.4svh; }
}

@media (prefers-reduced-motion: reduce) {
  #home .hm-sun, #home .hm-orchid-a, #home .hm-ph, #home .hm-sheen { animation: none; }
}