/* Ivy fonts: Journal for most text, Ora Display for the big name, Presto Display for the italic
   signature lines, Presto Text Thin for the moving quote and the fine print */
@font-face { font-family: "Ivy Ora Display"; src: url("fonts/Ivy-Ora-Display-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ivy Presto Display"; src: url("fonts/Ivy-Presto-Display-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ivy Presto Text"; src: url("fonts/Ivy-Presto-Text-Thin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ivy Journal"; src: url("fonts/Ivy-Journal-Thin.otf") format("opentype"); font-display: swap; }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Same text size on every page: stop phones from auto-resizing text or zooming the page out */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
:root {
  --paper: #f5f3ee;   /* soft off-white */
  --ink: #111;
  --accent: #30482c;  /* the one accent: deep green */
  --empty: #e7e4dd;   /* photo placeholder while loading */
  --display: "Ivy Ora Display", Georgia, serif;
  --italic: "Ivy Presto Display", Georgia, serif;
  --text: "Ivy Presto Text", Georgia, serif;
  --journal: "Ivy Journal", Georgia, serif;
}
::selection { background: var(--accent); color: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--journal);
  font-weight: 400;
  font-synthesis: none; /* each Ivy font has one weight — never fake a bold or slant */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* Which Ivy font goes where */
.hero h1, .about-intro h1, .about-me h2, .contact h1, .title, .footer__big, .more-styles, .style-card__name { font-family: var(--display); }
.love h2, .footer__name { font-family: var(--italic); }
.marquee, .footer__bottom { font-family: var(--text); }

/* Fixed corner navigation — no underlines, inverts over photos */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between;
  padding: 20px clamp(16px, 2.2vw, 32px);
  font-size: clamp(20px, 1.8vw, 26px); font-weight: 300;
  mix-blend-mode: difference; color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.nav.is-visible { opacity: 1; }
.nav.is-visible a { pointer-events: auto; }
.nav a { transition: opacity .2s; }
.nav a:hover { opacity: .5; }
.nav__right { display: flex; gap: 26px; }
/* Home page, computer: big top links */
@media (min-width: 721px) {
  .nav--home { font-size: clamp(30px, 3.2vw, 50px); padding-top: 24px; }
  .nav--home .nav__right { gap: clamp(26px, 2.6vw, 44px); }
}

/* Home: name */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 100px 16px 60px;
  overflow: clip; /* as the name drifts down while scrolling, it slips away under the bar, never past it */
}
.hero h1, .about-intro h1 {
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero h1 {
  /* 4 lines always fit on the first screen, whatever the window's shape */
  font-size: clamp(44px, min(13vw, (100vh - 170px) / 4.4), 220px);
  font-size: clamp(44px, min(13vw, (100svh - 170px) / 4.4), 220px);
  line-height: 1.1; /* room for the long tails (p, g, y) to clear the tall letters on the next line */
}
.hero h1 span { display: block; }
/* Soft fade in, all lines together — waits while the opening intro is playing */
.hero h1 span i { display: block; font-style: normal; opacity: 0; filter: blur(16px); animation: blur-in 1.8s cubic-bezier(.25,.6,.3,1) .1s forwards; }
.has-intro .hero h1 span i { animation-play-state: paused; }

/* Opening intro (home): a ring fills around a pinhole of light, then the lens opens */
.intro { display: none; }
.has-intro, .has-intro body { overflow: hidden; }
.has-intro .intro, .intro.is-opening { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.intro__shade {
  position: absolute; inset: 0; background: var(--accent);
  --r: calc(var(--p, 0) * 2.4vmin + var(--q, 0) * 80vmax);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .5px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .5px));
}
.intro__ring {
  position: absolute; left: 50%; top: 50%; width: 20vmin; height: 20vmin;
  transform: translate(-50%, -50%) scale(calc(1 + var(--q, 0) * 2)); opacity: calc(1 - var(--q, 0) * 2.5);
}
.intro__ring circle { fill: none; stroke: var(--paper); stroke-width: .6; }
.intro__ring .track { opacity: .25; }
.intro__ring .fill { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transform: rotate(-90deg); transform-origin: 50% 50%; }
.intro__pct {
  position: absolute; left: 0; right: 0; top: calc(50% + 13vmin); text-align: center;
  color: var(--paper); font-size: 13px; letter-spacing: .12em; font-variant-numeric: tabular-nums;
  opacity: calc(1 - var(--q, 0) * 4);
}

/* Moving quote band */
.marquee {
  background: #3d3d3d; color: #ecebe8;
  overflow: hidden; white-space: nowrap;
  position: relative; z-index: 1; /* solid: the drifting name never shows through it */
  padding: clamp(10px, 1.2vw, 16px) 0;
}
.marquee__track { display: inline-flex; will-change: transform; }.marquee__item {
  display: inline-flex; align-items: center;
  font-size: clamp(22px, 2.8vw, 42px); letter-spacing: -0.02em; line-height: 1;
}
.marquee__item::after {
  content: ""; width: .18em; height: .18em; border-radius: 50%;
  background: currentColor; margin: 0 .55em;
}

/* "about        contact" — spread wide */
/* "about / contact" — giant words across the page. They glide in from both sides as you scroll,
   On hover a green circle follows the mouse underneath the letters — it only shows through the letters themselves. */
@property --spot { syntax: "<length>"; inherits: false; initial-value: 0px; }
.split {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2vw;
  padding: clamp(48px, 7vw, 110px) clamp(24px, 11vw, 220px); overflow: hidden; /* lines up with the photo grid */
  --slide: 0; /* 1 = far apart, 0 = in place; set by script.js while scrolling */
}
.split__word {
  font-weight: 300; font-size: clamp(56px, 8.5vw, 150px); line-height: .9; letter-spacing: -0.06em;
  position: relative;
}
.split__word:first-child { transform: translateX(calc(var(--slide) * -18vw)); }
.split__word:last-child  { transform: translateX(calc(var(--slide) * 18vw)); }
.split__word {
  --mx: 50%; --my: 50%; --spot: 0px;
  background: radial-gradient(circle var(--spot) at var(--mx) var(--my), var(--accent) 99%, var(--ink) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: --spot .45s cubic-bezier(.2,.7,.1,1);
}
.split__word:hover { --spot: .55em; }

/* Photo grids — even columns, tops lined up */
.photos {
  columns: 3; column-gap: clamp(20px, 3vw, 60px);
  padding: 0 clamp(24px, 11vw, 220px);
}
.photos img { margin-bottom: clamp(20px, 3.5vw, 68px); break-inside: avoid; background: var(--empty); }
/* Even columns (Film): same gap everywhere, flat top and bottom */
.photos--even { columns: auto; display: flex; --gap: clamp(32px, 4.5vw, 90px); gap: var(--gap); box-sizing: content-box; }
.photos--even .photos__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.photos--even .crop { position: relative; flex: 1 1 0; min-height: 0; }
.photos--even .crop__in { position: absolute; inset: 0; overflow: hidden; background: var(--empty); }
.photos--even .crop img { margin: 0; max-width: none; background: none; }

/* Film page theme: dark film-base background, film-stock names printed up the margins */
body.theme-film { --empty: #2a241a; background: #17130b; color: #efe8dc; }
.theme-film .crop__in { border-radius: 4px; } /* a hint of a rounded corner, like a printed frame */
.theme-film .lead { opacity: .7; }
.theme-film .more-styles a:hover { color: #a57353; }
.film-label {
  position: absolute; top: 0; white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg); /* reads bottom to top, like the edge of a film strip */
  font: 400 clamp(11px, 1.75vw, 28px)/1 "Courier Prime", "Courier New", monospace; color: #a57353;
}
.film-label--left { right: calc(100% + clamp(8px, 1.3vw, 22px)); }
.film-label--right { left: calc(100% + clamp(8px, 1.3vw, 22px)); }

/* Section headings */
.title {
  font-size: clamp(56px, 11vw, 160px); font-weight: 400;
  letter-spacing: -0.02em; line-height: .95;
  padding: clamp(120px, 16vw, 200px) clamp(24px, 11vw, 220px) clamp(24px, 3vw, 40px);
}
.lead {
  max-width: calc(34em + 2 * clamp(24px, 11vw, 220px)); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35;
  padding: 0 clamp(24px, 11vw, 220px) clamp(60px, 8vw, 110px);
}

/* Testimonials */
.love { padding: clamp(120px, 14vw, 200px) clamp(16px, 2vw, 28px) clamp(60px, 8vw, 100px); }
.love h2 {
  text-align: center; font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(44px, 6vw, 88px); margin-bottom: clamp(40px, 6vw, 80px);
}
.love__window { overflow: hidden; max-width: 1180px; margin: 0 auto; }
.love__track { display: flex; transition: transform .7s cubic-bezier(.6,0,.2,1); }
.love__quote { flex: 0 0 50%; padding: 0 clamp(16px, 3vw, 48px); }
.love__quote p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; }
.love__quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 14px; opacity: .6; }
/* One thin two-way arrow: left half goes back, right half goes forward */
.love__arrows { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.love__arrows button { display: block; padding: 14px 0; transition: transform .3s, opacity .2s; }
.love__arrows svg { display: block; width: 46px; height: 18px; }
.love__arrows button:hover { color: var(--accent); }

/* Style cards (work + about) — the whole block fills one screen, so the cards
   take the shape of the window: slim and tall on phones, wider on big screens */
.style-screen {
  height: 100vh; height: 100svh; min-height: 560px;
  display: flex; flex-direction: column;
  padding-bottom: clamp(70px, 13vh, 150px);
}
.style-screen .title { padding-top: clamp(84px, 12vh, 150px); font-size: clamp(56px, min(11vw, 13vh), 160px); }
.styles {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3vw, 60px);
  padding: 0 clamp(12px, 11vw, 220px);
}
.style-card { display: flex; flex-direction: column; min-height: 0; }
.style-card__img { flex: 1; min-height: 0; overflow: hidden; background: var(--empty); }
.style-card__img img { height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.1,1); }
.style-card:hover img { transform: scale(1.05); }
.style-card__name { text-align: center; margin-top: 16px; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.015em; }

/* About */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); padding: clamp(110px, 14vw, 180px) clamp(16px, 2vw, 28px) clamp(60px, 8vw, 110px); align-items: end; }
.about-intro h1 { font-size: clamp(64px, 10vw, 160px); line-height: 1.05; }
.about-intro .eyebrow { margin-top: 24px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.about-intro p { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35; margin-top: 24px; max-width: 26em; }
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 22px); }
.about-photos img { aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }
.about-me { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); padding: 0 clamp(16px, 2vw, 28px) clamp(60px, 8vw, 110px); align-items: center; }
.about-me h2 { font-weight: 400; font-size: clamp(48px, 7vw, 100px); letter-spacing: -0.02em; line-height: .95; margin-bottom: 28px; }
.about-me p { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35; max-width: 26em; }
.about-me img { filter: grayscale(1); }

/* Other styles at the bottom of a style page */
.more-styles { display: flex; justify-content: space-around; padding: clamp(80px, 10vw, 140px) 16px; font-size: clamp(32px, 5vw, 72px); letter-spacing: -0.02em; }
.more-styles a { transition: color .2s; }
.more-styles a:hover { color: var(--accent); }

/* Contact form */
.contact { max-width: 620px; margin: 0 auto; padding: clamp(120px, 14vw, 180px) 16px clamp(60px, 8vw, 100px); }
.contact h1 { font-weight: 400; font-size: clamp(56px, 9vw, 120px); letter-spacing: -0.02em; line-height: .95; margin-bottom: clamp(40px, 5vw, 64px); }
.form { display: grid; gap: 30px; }
.field { display: grid; gap: 6px; font-size: 14px; opacity: .9; }
.field input, .field textarea, .select__btn {
  font: 18px var(--journal); color: #111;
  background: transparent; border: 0; border-bottom: 1px solid rgba(17,17,17,.35);
  padding: 8px 0; outline: none; width: 100%; border-radius: 0; text-align: left;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .select__btn:focus-visible { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 90px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.select { position: relative; }
.select__btn { display: flex; justify-content: space-between; align-items: center; }
.select__btn .chev { transition: transform .35s; }
.select.is-open .chev { transform: rotate(180deg); }
.select__list {
  list-style: none; overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .45s cubic-bezier(.6,0,.2,1), opacity .3s;
}
.select.is-open .select__list { max-height: 220px; opacity: 1; }
.select__list li button { display: block; width: 100%; text-align: left; padding: 12px 0; font-size: 20px; letter-spacing: -0.02em; transition: padding .25s, opacity .2s; }
.select__list li button:hover { padding-left: 10px; color: var(--accent); }
.form__submit {
  justify-self: start; margin-top: 10px; padding: 16px 40px; border-radius: 999px;
  background: var(--accent); color: var(--paper); font-size: 17px; transition: opacity .2s;
}
.form__submit:hover { opacity: .8; }
.form__note { font-size: 14px; opacity: .6; }

/* Footer */
/* Dark footer: contact + page list, phone / email, big signature, live Brooklyn time */
.footer { --gut: clamp(16px, 2.2vw, 32px); background: #181818; color: var(--paper); padding-top: min(clamp(56px, 9vw, 130px), 9vh); }
/* spacing also follows the window's height, so the footer never reaches up under the top menu */
/* The page lies on top of the footer like a sheet; scrolling to the end slides it up and uncovers the footer */
.sheet { position: relative; z-index: 1; background: inherit; display: flow-root; }
.footer { position: sticky; bottom: 0; z-index: 0; }
.footer::after { content: ""; position: absolute; inset: 0; background: #000; pointer-events: none; opacity: calc((1 - var(--shown, 1)) * .6); }
.footer a { transition: opacity .2s; }
.footer a:hover { opacity: .55; }
.footer .is-here { opacity: .4; pointer-events: none; }
.footer__main { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 32px; align-items: end; padding: 0 var(--gut); }
.footer__big { display: block; font-weight: 300; font-size: clamp(56px, min(7vw, 12vh), 112px); line-height: 1; letter-spacing: -0.02em; margin-bottom: clamp(14px, 1.6vw, 22px); }
.footer__links { list-style: none; display: grid; gap: 4px; line-height: 1.25; font-size: clamp(17px, 1.55vw, 22px); text-transform: uppercase; letter-spacing: -0.01em; }
.footer__info { display: grid; gap: 2px; }
.footer__info span { font-size: clamp(12px, 1.05vw, 15px); text-transform: capitalize; opacity: .6; }
.footer__info a { font-size: clamp(16px, 1.55vw, 21px); overflow-wrap: anywhere; }
.footer__sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: min(clamp(56px, 12vw, 170px), 11vh) var(--gut) clamp(18px, 2vw, 26px); }
.footer__name { font-weight: 400; font-size: clamp(52px, min(7.6vw, 13vh), 124px); line-height: .9; letter-spacing: -0.01em; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(245, 243, 238, .28); padding: 16px var(--gut); font-size: clamp(11px, .95vw, 13px); font-variant-numeric: tabular-nums; }
.footer__bottom small { font-size: inherit; }

/* Scroll reveal — subtle */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.1,1); }
.reveal.is-in { opacity: 1; transform: none; }

@keyframes fade-in { to { opacity: 1; } }
/* the name comes into focus: out-of-focus and faint → sharp, like a lens focusing */
@keyframes blur-in { to { opacity: 1; filter: blur(0); } }


/* Phones */
@media (max-width: 720px) {
  /* about me · work · contact in one row, instagram tucked under contact */
  .nav {
    display: grid; grid-template-columns: auto auto auto; justify-content: space-between;
    row-gap: 2px; font-size: 24px; padding: 16px 12px;
  }
  .nav__right { display: contents; }
  .nav a[href="about.html"] { grid-area: 1 / 1; }
  .nav a[href="work.html"] { grid-area: 1 / 2; }
  .nav a[href="contact.html"] { grid-area: 1 / 3; justify-self: end; }
  .nav a[href*="instagram"] { grid-row: 2; grid-column: 1 / -1; justify-self: end; } /* spans the row so it doesn't widen contact's column */
  .nav--home { font-size: clamp(26px, 8.4vw, 34px); }
  .marquee { padding: 16px 0; }
  .marquee__item { font-size: 28px; }
  /* Phone photo grid: thin side margins, same as the gap between photos */
  .photos { columns: 2; column-gap: 12px; padding: 0 12px; }
  .photos img { margin-bottom: 12px; }
  .photos--even { --gap: 18px; }
  /* Film on phones: side margins match the gap between photos, with the film-stock names tucked inside them */
  .theme-film .photos { padding: 0 20px; --gap: 20px; column-gap: var(--gap); }
  .film-label { font-size: 9px; }
  .film-label--left { right: calc(100% + 5px); }
  .film-label--right { left: calc(100% + 5px); }
  .split { padding: 48px 12px; }
  .split__word { font-size: 14.6vw; }
  .photos--even .crop img { margin-bottom: 0; }
  .love__window {
    overflow: hidden;
  }
  .love__track {
    width: 100%; overflow-x: auto; overflow-y: hidden;
    touch-action: pan-x pan-y; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; transition: none;
  }
  .love__track::-webkit-scrollbar { display: none; }
  .love__quote { flex-basis: 100%; scroll-snap-align: start; }
  .style-card__name { font-size: 22px; margin-top: 16px; }
  .title, .lead { padding-left: 12px; padding-right: 12px; }
  .about-intro, .about-me, .form__row { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .footer__nav { grid-column: 1 / -1; }
  /* phones: the footer fills the screen up to just under the top menu; the extra room goes above the signature */
  .footer { display: flex; flex-direction: column; min-height: calc(100svh - 130px); padding-top: 48px; }  .footer__sign { margin-top: auto; padding-top: 48px; }
  .more-styles { flex-direction: column; align-items: center; gap: 20px; }
}

/* Scroll-developed full-bleed photograph, print, and contact roll */
.develop {
  --develop-frame-size: clamp(180px, 18vw, 258px);
  --develop-print-width: 100vw;
  --develop-print-height: 100svh;
  --develop-print-scale: 1.5;
  --develop-print-rotate: 0deg;
  --develop-print-x: 0px;
  --develop-print-y: 0vh;
  --develop-print-opacity: .14;
  --develop-print-padding: 0px;
  --develop-caption-height: 0px;
  --develop-caption-pad: 0px;
  --develop-card-reveal: 0;
  --develop-roll-progress: 0;
  --develop-roll-x: 120vw;
  --develop-slot-reveal: 0;
  position: relative;
  height: 300vh;
  height: 300svh;
  overflow: clip;
  isolation: isolate;
  background: #171711;
  color: var(--paper);
  box-shadow: 1px 0px 20px 0px #000;
}
.develop__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(80, 77, 61, .35), transparent 58%),
    #171711;
}
.develop__sticky::before,
.develop__sticky::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.develop__sticky::before {
  opacity: .14;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(240, 233, 217, .045) 4px, transparent 5px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(240, 233, 217, .025) 6px, transparent 7px);
  mix-blend-mode: soft-light;
}
.develop__sticky::after {
  background: radial-gradient(ellipse at 50% 48%, transparent 32%, rgba(0, 0, 0, .56) 100%);
}
.develop__atmosphere {
  position: absolute;
  z-index: 0;
  inset: -5%;
  overflow: hidden;
  opacity: .3;
  filter: blur(24px) saturate(.62) brightness(.42);
  transform: scale(1.05);
}
.develop__atmosphere img { width: 100%; height: 100%; object-fit: cover; }
.develop__copy {
  position: absolute;
  z-index: 5;
  top: clamp(84px, 12vh, 132px);
  left: clamp(24px, 8vw, 120px);
  max-width: 430px;
}
.develop__eyebrow {
  margin-bottom: clamp(18px, 2vw, 28px);
  color: #c4bca9;
  font: 400 12px/1.2 var(--text);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.develop__copy h2 {
  color: var(--paper);
  font: 400 clamp(54px, 7.4vw, 106px)/.88 var(--display);
  letter-spacing: -.035em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .72);
}
.develop__copy h2 em { color: #c9c2b1; font-family: var(--italic); font-weight: 400; }
.develop__caption {
  margin-top: clamp(18px, 2.2vw, 30px);
  color: rgba(245, 243, 238, .82);
  font: 400 clamp(15px, 1.35vw, 19px)/1.35 var(--journal);
}
.develop__prompt {
  position: absolute;
  z-index: 5;
  top: clamp(92px, 13vh, 140px);
  right: clamp(24px, 8vw, 120px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(245, 243, 238, .8);
  font: 400 11px/1 var(--text);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.develop__prompt span { width: 26px; height: 1px; background: #b7ad94; }
.develop__print,
.develop__frame {
  box-sizing: border-box;
  width: var(--develop-frame-size);
  border: 1px solid rgba(17, 16, 13, .32);
  background: #f0ede5;
  color: #211f1a;
}
.develop__print {
  position: absolute;
  z-index: 6;
  top: calc(50% + var(--develop-print-y));
  left: 50%;
  display: flex;
  flex-direction: column;
  width: var(--develop-print-width);
  height: var(--develop-print-height);
  padding: var(--develop-print-padding);
  border-color: rgba(17, 16, 13, var(--develop-card-reveal));
  background: rgba(240, 237, 229, var(--develop-card-reveal));
  opacity: var(--develop-print-opacity);
  transform: translate3d(calc(-50% + var(--develop-print-x)), -50%, 0) scale(var(--develop-print-scale)) rotate(var(--develop-print-rotate));
  transform-origin: center;
  box-shadow: 0 16px 52px rgba(0, 0, 0, calc(.28 * var(--develop-card-reveal)));
  will-change: transform, opacity;
}
.develop__print img {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 0;
  object-fit: cover;
  background: #39372f;
}
.develop__print figcaption,
.develop__frame figcaption {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  gap: 8px;
  height: 16px;
  overflow: hidden;
  padding-top: 8px;
  font: 400 8px/8px var(--text);
  letter-spacing: .09em;
}
.develop__print figcaption {
  height: var(--develop-caption-height, 16px);
  padding-top: var(--develop-caption-pad, 8px);
  opacity: var(--develop-card-reveal);
}
.develop__roll-window {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  outline: none;
}
.develop__roll-window:focus-visible { outline: 1px solid rgba(245, 243, 238, .7); outline-offset: -8px; }
.develop__roll {
  position: absolute;
  top: var(--develop-roll-y, 69%);
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  width: max-content;
  min-width: 100%;
  padding: 25px 20px;
  border-top: 12px solid #25251f;
  border-bottom: 12px solid #25251f;
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, #171711 17px 27px, transparent 27px 43px),
    #25251f;
  opacity: var(--develop-roll-progress);
  transform: translate3d(var(--develop-roll-x), -50%, 0);
  will-change: transform, opacity;
}
.develop__roll::before,
.develop__roll::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, #aaa18e 0 7px, transparent 7px 22px);
  opacity: .75;
}
.develop__roll::before { top: 3px; }
.develop__roll::after { bottom: 3px; }
.develop__frame {
  position: relative;
  flex: 0 0 var(--develop-frame-size);
  padding: 6px 6px 8px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
}
.develop__frame--slot img { opacity: var(--develop-slot-reveal); }
.develop__frame img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #39372f;
}
.develop__flash {
  position: absolute;
  z-index: 10;
  inset: 0;
  background: #fffdf6;
  opacity: 0;
  pointer-events: none;
}
.develop__flash.is-fired { animation: develop-exposure 280ms ease-out both; }
@keyframes develop-exposure {
  0%, 100% { opacity: 0; }
  18% { opacity: .82; }
}

@media (max-width: 720px) {
  .develop { --develop-frame-size: clamp(150px, 40vw, 220px); height: 260vh; height: 260svh; }
  .develop__sticky { min-height: 560px; }
  .develop__copy { top: 13vh; left: 20px; max-width: 74vw; }
  .develop__eyebrow { margin-bottom: 16px; font-size: 10px; }
  .develop__copy h2 { font-size: clamp(50px, 14vw, 74px); }
  .develop__caption { max-width: 19em; font-size: 15px; margin-top: 16px; }
  .develop__prompt { top: auto; right: 20px; bottom: 9vh; font-size: 9px; }
  .develop__roll { top: var(--develop-roll-y, 70%); gap: 8px; padding: 20px 14px; }
  .develop__print figcaption,
  .develop__frame figcaption { height: 14px; padding-top: 7px; font-size: 7px; line-height: 7px; }
  .develop__frame { padding: 5px 5px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .love__track { transition-duration: .01ms; }
  .develop__print,
  .develop__roll { will-change: auto; }
  .develop__flash.is-fired { animation: none; }
}
.develop.is-static { height: auto; min-height: 0; overflow: visible; }
.develop.is-static .develop__sticky {
  position: relative;
  display: flow-root;
  height: auto;
  min-height: 0;
  padding: clamp(100px, 14vw, 170px) 0 64px;
  overflow: hidden;
}
.develop.is-static .develop__copy { position: relative; inset: auto; margin: 0 clamp(20px, 8vw, 120px); }
.develop.is-static .develop__prompt,
.develop.is-static .develop__flash { display: none; }
.develop.is-static .develop__print {
  position: relative;
  top: auto;
  left: auto;
  width: var(--develop-frame-size);
  height: auto;
  min-height: 0;
  margin: 54px auto 42px;
  padding: 6px 6px 8px;
  border-color: rgba(17, 16, 13, .32);
  background: #f0ede5;
  opacity: 1;
  transform: none;
  box-shadow: 0 16px 52px rgba(0, 0, 0, .28);
}
.develop.is-static .develop__print img { flex: initial; height: auto; aspect-ratio: 3 / 2; }
.develop.is-static .develop__print figcaption { height: 16px; padding-top: 8px; opacity: 1; }
.develop.is-static .develop__roll-window { position: relative; inset: auto; overflow-x: auto; padding: 20px 0; }
.develop.is-static .develop__roll { position: relative; top: auto; left: auto; width: max-content; margin: 0 auto; opacity: 1; transform: none; }
.develop.is-static .develop__frame--slot img { opacity: 1; }
@media (max-width: 720px) {
  .develop.is-static .develop__copy { margin: 0 20px; }
  .develop.is-static .develop__print { padding: 5px 5px 7px; }
  .develop.is-static .develop__print figcaption { height: 14px; padding-top: 7px; }
  .develop.is-static .develop__roll { margin-left: 14px; }
}