/* Johann Hubert: fixed frame, one guide per screen. Fonts as in the reels: Instrument Serif for the big words, Inter for everything else. No italics. */
@font-face { font-family: 'IS'; src: url(img/InstrumentSerif-Regular.ttf); }
@font-face { font-family: 'In'; src: url(img/Inter.ttf); font-weight: 100 900; }
:root { --ink: #1a1714; --bg: #fbf9f5; --pad: 16px; --ease: cubic-bezier(.16, 1, .3, 1); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.35 'In', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a, button { color: inherit; font: inherit; }
a { text-decoration: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
p, h2, h3, figure { margin: 0; font-weight: 400; }
img { display: block; }

/* Frame: stays put, everything else moves underneath */
.frame { position: fixed; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: baseline; padding: var(--pad); pointer-events: none; }
.frame > * { pointer-events: auto; }
.top { top: 0; }
.bottom { bottom: 0; }
.frame .l { display: flex; gap: 18px; }
.frame .c { position: absolute; left: 50%; transform: translateX(-50%); }
.mark, .name, .big { font-family: 'IS', Georgia, serif; }
.mark { position: absolute; left: 50%; top: calc(var(--pad) - 4px); transform: translateX(-50%); font-size: 28px; letter-spacing: -.2px; transition: letter-spacing .5s var(--ease); white-space: nowrap; }
.mark:hover { letter-spacing: .6px; }
.frame .l a, .frame a.r { display: inline-block; transition: transform .3s var(--ease), opacity .3s; }
.frame .l a:hover, .frame a.r:hover { transform: translateY(-2px); opacity: .5; }
nav a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }

/* Slider: snap scrolling, one guide per screen */
.slider { position: fixed; inset: 0; overflow: hidden auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.slider::-webkit-scrollbar { display: none; }
.item { position: relative; height: 100%; display: flex; align-items: center; padding: 0 var(--pad); scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; }
.side { flex: 1 1 0; display: flex; align-items: flex-start; gap: 0 20px; z-index: 2; }
.side.l { justify-content: space-between; padding-right: 4vw; }
.side.r { justify-content: space-between; padding-left: 4vw; }

/* The texts wait above or below and glide in when their guide becomes active */
.side > * { transform: translateY(-40vh); transition: transform 1.5s var(--ease); }
.item.after .side > * { transform: translateY(40vh); }
.item.active .side > * { transform: translateY(0); }
.side .name, .side .act { transition-duration: 1.8s; }

.name { font-size: clamp(48px, 5.2vw, 84px); font-weight: 400; line-height: .88; letter-spacing: -.01em; display: flex; flex-direction: column; cursor: default; position: relative; white-space: nowrap; }
.kind, .price { padding-top: .5em; }
.act { padding-top: .5em; }
.dl { position: relative; display: inline-block; transition: transform .3s var(--ease); }
.dl::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform-origin: right; transition: transform .45s var(--ease); }
.dl:hover { transform: translateY(-2px); }
.dl:hover::after { transform: scaleX(.35); }

/* Cover photo: reveals and settles when active */
.cover { width: min(34vw, calc((100vh - 128px) * .8)); height: calc(100% - 128px); overflow: hidden; flex: none; background: #ece6dc; }
.cover img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateY(4%); opacity: 0; transition: transform 1.6s var(--ease), opacity 1.2s var(--ease); }
.item.active .cover img { transform: scale(1) translateY(0); opacity: 1; }
.item.active .cover:hover img { transform: scale(1.03); }

/* Inline sign-up */
.mail { display: flex; gap: 10px; border-bottom: 1px solid var(--ink); animation: grow .5s var(--ease); }
.mail input { border: 0; outline: 0; background: transparent; font: inherit; color: inherit; width: 200px; padding: 0 0 3px; }
.mail button { padding-bottom: 3px; transition: transform .3s var(--ease), opacity .3s; }
.mail button:hover { transform: translateX(3px); opacity: .5; }
.ok { animation: grow .5s var(--ease); display: inline-block; }
@keyframes grow { from { opacity: 0; transform: translateX(10px); } }

/* Mood picture behind a hovered name */
.mood { position: fixed; left: var(--pad); width: 15vw; aspect-ratio: 4/5; background: center/cover; transform: translateY(-50%) scale(.94); opacity: 0; transition: opacity .35s, transform .6s var(--ease); z-index: 1; pointer-events: none; }
.mood.on { opacity: 1; transform: translateY(-50%) scale(1); }

/* About */
.page { padding: 100px var(--pad) 140px; }
.intro { display: grid; grid-template-columns: 1fr 30vw; gap: 4vw; align-items: start; }
.big { font-size: clamp(42px, 5.6vw, 92px); font-weight: 400; line-height: .98; letter-spacing: -.01em; }
.photo { overflow: hidden; }
.photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; margin-top: 80px; max-width: 66%; }
.cols h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.rise { transform: translateY(40vh); opacity: 0; transition: transform 1.6s var(--ease), opacity 1.2s var(--ease); }
.in .rise { transform: none; opacity: 1; }
.in .intro .rise:nth-child(2), .in .cols .rise:nth-child(2) { transition-delay: .08s; }
.in .cols .rise:nth-child(3) { transition-delay: .16s; }

@media (max-width: 980px) {
  :root { --pad: 14px; }
  body { font-size: 13px; }
  .frame .l { gap: 12px; }
  .frame .c { display: none; }
  .mark { font-size: 24px; top: calc(var(--pad) - 3px); }
  .item { flex-direction: column; justify-content: center; gap: 10px; padding-top: 56px; padding-bottom: 44px; }
  .cover { order: -1; height: max(90px, min(62vh, calc(100% - 190px))); width: auto; aspect-ratio: 3/4; max-width: 80vw; }
  .side { flex: none; width: 100%; padding: 0 !important; }
  .name { font-size: 40px; flex-direction: row; gap: 8px; flex-wrap: wrap; white-space: normal; }
  .side.l { align-items: flex-end; }
  .kind { padding-top: 0; }
  .mood { display: none; }
  .mail input { width: 52vw; }
  .page { padding-top: 96px; }
  .intro, .cols { grid-template-columns: 1fr; max-width: none; gap: 24px; }
  .cols { margin-top: 40px; }
}

/* Very narrow phones: logo gets its own line */
@media (max-width: 430px) {
  .top { flex-wrap: wrap; }
  .top .mark { position: static; transform: none; order: -1; width: 100%; text-align: center; margin-bottom: 8px; }
  .item { padding-top: 84px; }
  .cover { height: max(90px, min(62vh, calc(100% - 210px))); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; animation-duration: .01s !important; transition-delay: 0s !important; }
}

/* About scrolls normally: the bottom bar gets paper behind it so text never runs under it */
.about .bottom { background: var(--bg); }
@media (min-width: 981px) { .about .intro { grid-template-columns: 1fr 24vw; } .about .cols { margin-top: 48px; } }

/* A guide cover is a page: show it whole, never cropped */
.cover.doc { background: transparent; display: flex; align-items: center; }
.cover.doc img { height: auto; max-height: 100%; object-fit: contain; box-shadow: 0 18px 40px -22px rgba(26,23,20,.45); }

/* Sign-up details */
.fine { font-size: 11px; color: #7D756A; margin-top: 6px; max-width: 260px; }
.fine a { text-decoration: underline; text-underline-offset: 2px; }
.err { color: #8a2b1f; }
.subbox { position: relative; }
.subbox .mail input { width: 170px; }
.subbox .fine { position: absolute; bottom: 100%; margin: 0 0 6px; white-space: nowrap; max-width: none; }
.mail button:disabled { opacity: .4; }