/* BOTH — Webfonts
 * PP Editorial New (serif) — editorial voice, the "DOING" word
 * PP Mori (grotesque sans) — workhorse UI + the "BOTH" word
 * Trimmed to the weights actually used: Editorial New 200,
 * Mori 400 and 600 (all upright — no italics on the page).
 */

@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Ultralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("fonts/PPMori-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("fonts/PPMori-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html, body { margin: 0; padding: 0; background: #FFFCF2; }
/* Keep iOS Safari from inflating HTML text inside the scaled hero stack
   (SVG text is never inflated, which made the pill label look smaller
   than the invite line on iPhones). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { letter-spacing: 0; }
#db-pin { position: relative; height: 200vh; }
#db-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
#db-stage { width: 100%; padding: calc(var(--pad, 1) * clamp(16px, 2.2vw, 32px)); box-sizing: border-box; }
#db-card {
  width: 100%; position: relative; overflow: hidden;
  height: calc(100svh - var(--pad, 1) * clamp(32px, 4.4vw, 64px));
  border-radius: 78px; background: #2E1914;
  font-family: 'PP Mori', system-ui, sans-serif;
}
#db-card .fill { position: absolute; inset: 0; }
#db-card .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 88%; }
#db-card .grain {
  opacity: 0.30; mix-blend-mode: overlay; pointer-events: none; background-size: 200px 200px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMyIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWx0ZXI9InVybCgjbikiLz48L3N2Zz4=");
}
#db-card .stack { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--s, 1)); width: 968px; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; will-change: transform; }
#db-card .lockup { display: flex; align-items: baseline; justify-content: center; gap: 28px; }
#db-card .doing { font-family: 'PP Editorial New', Georgia, serif; font-weight: 200; font-size: 153px; line-height: 1; color: #FFFCF2; }
#db-card .wordmark { height: 127px; width: auto; display: block; }
#db-card .pills { display: flex; align-items: center; justify-content: center; gap: 16px; }

#db-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding: clamp(26px, 5.6vw, 72px) 0 clamp(14px, 1.8vw, 22px); display: flex; justify-content: center; pointer-events: none; opacity: 0; }
#db-header.on { opacity: 1; }
/* Solid-to-transparent cream fade behind the fixed header — content
   fades out as it approaches, no backdrop blur (no ghosted text). */
#db-header .blur { position: absolute; left: 0; right: 0; top: 0; bottom: -56px; pointer-events: none; opacity: var(--t, 0); background: linear-gradient(180deg, #FFFCF2 0%, #FFFCF2 58%, rgba(255,252,242,0) 100%); }
#db-header .lockup { position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: center; gap: 2.69vw; }
#db-header .doing { font-family: 'PP Editorial New', Georgia, serif; font-weight: 200; font-size: 14.64vw; line-height: 1; color: #FFFCF2; color: color-mix(in oklab, #2E1914 calc(var(--t, 0) * 100%), #FFFCF2); }
#db-header .wmwrap { position: relative; height: 12.18vw; }
#db-header .wmwrap img { height: 12.18vw; width: auto; display: block; }
#db-header .wmwrap img.dark { position: absolute; left: 0; top: 0; opacity: var(--t, 0); }

#db-invite { font-family: 'PP Mori', system-ui, sans-serif; color: #FFFCF2; font-weight: 600; font-size: 24px; text-transform: uppercase; line-height: 1; white-space: nowrap; margin: 0 0 52px; text-align: center; }

/* ---- intro, below the fold ---- */
#db-intro { font-family: 'PP Mori', system-ui, sans-serif; color: #2E1914; background: #FFFCF2; padding: calc(56px + 16vw) 4vw clamp(48px, 6vw, 80px); }
#db-intro .inner { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); align-items: stretch; }
@media (min-width: 760px) { #db-intro .inner { grid-template-columns: repeat(6, 1fr); } }
#db-intro .eyebrow { grid-column: 1 / -1; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(13px, 1.4vw, 20px); font-weight: 500; line-height: 1.2; text-transform: uppercase; margin: clamp(20px, 2.6vw, 40px) 0 calc(22px - clamp(20px, 2.4vw, 32px)); text-align: left; }
@media (min-width: 760px) {
  #db-intro .titlebox { grid-column: 1 / 6; }
  #db-intro .qlist { grid-column: 1 / -1; }
  /* Globe as its own full-bleed band between the questions and footer. */
  #db-intro .globebox { grid-column: 1 / -1; margin-left: -4vw; margin-right: -4vw; }
}
#db-intro .titlebox { padding: clamp(24px, 4vw, 64px) 0 clamp(8px, 1.4vw, 20px); text-align: left; }
#db-intro h1 { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; font-size: clamp(13px, 1.4vw, 20px); line-height: 1.2; text-transform: uppercase; margin: 0 0 clamp(14px, 1.4vw, 20px); text-wrap: pretty; }
#db-intro .lede { font-family: 'PP Editorial New', Georgia, serif; font-weight: 400; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.08; max-width: 22em; margin: 0; text-wrap: pretty; }
#db-intro .cta { font-family: 'PP Editorial New', Georgia, serif; font-weight: 400; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.06; color: #2E1914; margin: clamp(48px, 6vw, 88px) 0 0; text-wrap: pretty; }
#db-intro .cta span { display: inline-block; margin-top: -0.25em; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(13px, 1.4vw, 20px); font-weight: 500; text-transform: uppercase; margin-top: 0; }
#db-intro .globebox { background: #2E1914; border: 2px solid #2E1914; border-radius: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(8px, 0.8vw, 12px); }
#db-intro .globebox .globewrap { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; overflow: hidden; }
#db-intro .globebox img { width: 100%; height: 100%; object-fit: cover; display: block; }
#db-intro .globebox .rings span { position: absolute; left: 50%; transform: translate(-50%, -50%); font-weight: 600; font-size: clamp(13px, 1.1vw, 16px); line-height: 1; text-transform: uppercase; color: #FFFCF2; white-space: nowrap; text-shadow: 0 0 8px #2E1914, 0 0 8px #2E1914, 0 0 4px #2E1914; }
#db-intro .globebox .rings span:nth-child(1) { top: 30%; }
#db-intro .globebox .rings span:nth-child(2) { top: 50%; }
#db-intro .globebox .rings span:nth-child(3) { top: 70%; }
#db-intro .qlist { display: flex; flex-direction: column; border-top: 1px solid #2E1914; margin-left: -4vw; margin-right: -4vw; }
#db-intro .cta { padding-left: 4vw; padding-right: 4vw; }
#db-intro .qrow { display: grid; grid-template-columns: clamp(50px, 5vw, 76px) 1fr; align-items: baseline; padding: clamp(13px, 1.5vw, 20px) 4vw; border-bottom: 1px solid #2E1914; }
#db-intro .qrow .qn { font-family: 'PP Editorial New', Georgia, serif; font-weight: 200; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.1; }
#db-intro .qrow p { font-weight: 400; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; margin: 0; text-wrap: pretty; }
#db-foot { font-family: 'PP Mori', system-ui, sans-serif; background: #FFFCF2; color: #2E1914; font-weight: 600; font-size: 13px; text-transform: uppercase; text-align: center; padding: 0 4vw clamp(40px, 5vw, 72px); margin: 0; line-height: 1; }
#db-intro a { color: #2E1914; }
#db-intro a:hover { color: #92B8EF; }

/* ---- mobile ---- */
@media (max-width: 759px) {
  /* The hero stack is scaled to ~1/3 on phones, so bump the invite line
     and pill inside it to keep them legible. */
  #db-invite { font-size: 48px; margin-bottom: 84px; }
  #db-card .pills svg { transform: scale(1.7); transform-origin: center top; }
  /* Breathing space between the hero card and the intro — a bit more
     than the 4vw side gutter. */
  #db-intro { padding-top: 9vw; }
  #db-intro .titlebox { padding-top: 0; }
  /* Corner radius scaled down for phone-width cards (the scroll script
     uses the matching 32px base below 760px). */
  #db-card { border-radius: 32px; }
  #db-intro .globebox { border-radius: 32px; }
  /* Near-full-bleed lockup, with just a bit more side padding than the
     desktop proportions give. */
  #db-card .doing { font-size: 142px; }
  #db-card .wordmark { height: 118px; }
  /* Half the invite-to-lockup breathing room below the lockup
     (32px total vs 64px above, counting the stack's 12px gap). */
  #db-card .pills { margin-top: 20px; }
}

@media (min-width: 760px) {
  /* Square corners for the full-bleed globe band (overrides the 78px base
     radius; kept after it in the cascade). */
  #db-intro .globebox { border-radius: 0; }
}