/* Page one: her three collages, in PDF points on desktop. */
#about { --about-dot-period: calc(107.5 * var(--u)); --about-dots: #71013b; --about-hover-shadow: #0002; --about-legible: #0007; --about-peel-back: #f7d7e1; --about-peel-crease: #d995aa; --about-peel-shadow: #0000004d; }
.about-hero { position: relative; height: calc(756.75 * var(--u)); overflow: clip; background: var(--black); }
.about-hero-frame { height: 100%; z-index: 2; pointer-events: none; }
.about-sequin-depth, .about-heading-depth, .about-note-depth { position: absolute; inset: 0; }
.about-note-depth { z-index: 1; transform-origin: 75% 75%; }
.about-sequins { position: absolute; inset: 0; --dur: 1800ms; }
.about-sequin-base { position: absolute; width: 100%; height: calc(100% + 10.5 * var(--u)); top: calc(-5.35 * var(--u)); max-width: none; object-fit: cover; object-position: 50% 50%; }
/* The canvas wall takes brushes; touch keeps vertical scrolling and pinch zoom. */
.about-hero { touch-action: pan-y pinch-zoom; }
.about-heading-shadow { position: absolute; left: calc(60.48 * var(--u)); top: calc(57.84 * var(--u)); width: calc(611.04 * var(--u)); height: calc(389.52 * var(--u)); }
#about-heading { position: absolute; left: calc(57.08 * var(--u)); top: calc(93.28 * var(--u)); width: calc(593.9785 * var(--u)); font: 400 calc(179.44975 * var(--u))/.77605 var(--font-display); text-transform: uppercase; text-align: center; letter-spacing: -.05em; --step: 150ms; }
/* The tight line box needs this offset to keep Peace Sans's PDF baseline. */
#about-heading { padding-top: calc(20.09 * var(--u)); }
.about-note { --n: var(--u); position: absolute; z-index: 1; right: calc(-21.45 * var(--u)); top: calc(291.56 * var(--u)); width: calc(533.7 * var(--n)); height: calc(549.84 * var(--n)); color: var(--black); --drop: -150px; --tilt: 11deg; }
.about-note-paper { position: absolute; max-width: none; left: 0; top: calc(73.7559 * var(--n)); width: calc(462.75 * var(--n)); height: calc(482.25 * var(--n)); transform: rotate(-9.17126deg); transform-origin: 0 0; }
.about-note-paper img { width: 100%; height: 100%; }
/* The paper's bottom-right corner lifts on hover. Corner at (99.92%, 90.3%) of her image; the
   fold runs along her bottom and right edges, and the lifted flap shows the paper's back. */
@property --peel { syntax: "<length>"; inherits: true; initial-value: 0px; }
.about-note-paper {
  --peel: 0px;
  --ax: calc(99.92% - .9954 * var(--peel)); --ay: calc(90.3% + .0957 * var(--peel));
  --bx: calc(99.92% - .106 * var(--peel)); --by: calc(90.3% - .9944 * var(--peel));
  transition: --peel 250ms var(--ease-out);
}
.about-note-paper img { clip-path: polygon(0 0, 100% 0, 100% var(--by), var(--bx) var(--by), var(--ax) var(--ay), var(--ax) 100%, 0 100%); }
.about-note-paper::before, .about-note-paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.about-note-paper::before { background: var(--about-peel-shadow); clip-path: polygon(var(--ax) var(--ay), calc(99.92% + .25 * var(--peel)) calc(90.3% + .2 * var(--peel)), var(--bx) var(--by)); }
.about-note-paper::after {
  background: linear-gradient(315deg, var(--about-peel-crease) calc(33 * var(--n) + .7 * var(--peel)), var(--about-peel-back) calc(33 * var(--n) + 1.15 * var(--peel)));
  clip-path: polygon(var(--ax) var(--ay), var(--bx) var(--by), calc(99.92% - .94 * var(--peel)) calc(90.3% - .76 * var(--peel)));
}
@media (hover: hover) and (pointer: fine) { .about-note:hover .about-note-paper { --peel: calc(30 * var(--n)); } }
@media (prefers-reduced-motion: reduce) { .about-note-paper { transition: none; } }
.about-note p { position: absolute; white-space: nowrap; font-family: var(--font-body); font-weight: 700; line-height: 1; transform: rotate(-12.53843deg); transform-origin: 0 .91em; --rise: 12px; }
.about-note-name { left: calc(129.6293 * var(--n)); top: calc(173.6129 * var(--n)); font-size: calc(53.92113 * var(--n)); letter-spacing: -.065em; }
.about-note-greeting { left: calc(84.2474 * var(--n)); top: calc(236.2254 * var(--n)); font-size: calc(42.68194 * var(--n)); letter-spacing: -.065em; }
.about-note-you { left: calc(209.6539 * var(--n)); top: calc(248.9009 * var(--n)); font-size: calc(42.68194 * var(--n)); letter-spacing: -.065em; }
.about-note p.about-note-degree { left: calc(197.9542 * var(--n)); top: calc(317.8248 * var(--n)); font-size: calc(23.865 * var(--n)); font-weight: 400; transform: rotate(-14.81538deg); }
.about-note-degree span { display: block; }
.about-note-degree span + span { position: relative; left: calc(-49.85 * var(--n)); top: calc(4.65 * var(--n)); }
.about-note-resume { position: absolute; left: calc(210.1436 * var(--n)); top: calc(392.4233 * var(--n)); transform: rotate(-14.40086deg); transform-origin: 0 0; }
.about-note-resume a { --dur: 1500ms; display: inline-flex; align-items: center; min-height: 44px; height: calc(44.73 * var(--n)); padding-inline: calc(4.5 * var(--n)); background-image: linear-gradient(var(--turquoise), var(--turquoise)); background-repeat: no-repeat; background-size: 100% 100%; font: 700 calc(27.81 * var(--n))/1 var(--font-body); letter-spacing: -.005em; text-transform: uppercase; text-decoration-thickness: calc(2 * var(--n)); text-underline-offset: calc(3 * var(--n)); }
.about-ninety { position: relative; overflow: clip; background: var(--forest); }
.about-ninety-frame { height: calc(756.75 * var(--u)); }
.about-olive-drift { --shift: calc(10 * var(--u)); position: absolute; inset: calc(-1 * var(--shift)) 0; }
.about-olive-drift img { position: absolute; width: max(calc(756.75 * var(--u)), calc(100cqi * .561804)); height: max(calc(1347 * var(--u)), 100cqi); max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.about-time { position: absolute; left: calc(223.4578 * var(--u)); top: calc(98.34 * var(--u)); font: 400 calc(71.16455 * var(--u))/1 var(--font-display); text-transform: uppercase; white-space: nowrap; letter-spacing: -.062em; word-spacing: 0; --step: 80ms; }
.about-meet { position: absolute; left: calc(223.0226 * var(--u)); top: calc(152.2349 * var(--u)); font: 700 calc(60.08616 * var(--u))/1 var(--font-body); letter-spacing: -.065em; white-space: nowrap; }
.about-count [data-count] { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.about-room { position: absolute; left: calc(81.3643 * var(--u)); top: calc(262.251 * var(--u)); width: calc(861.7713 * var(--u)); height: calc(448.5276 * var(--u)); border-radius: calc(15 * var(--u)); overflow: hidden; --r: calc(15 * var(--u)); clip-path: inset(0 round var(--r)); --from: inset(50% 50% 50% 50% round var(--r)); }
.about-room img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.about-room [hidden] { display: none; }
.about-intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.about-intro-play {
  /* Lower left, clear of her face and of the captions burned into her video. */
  position: absolute; left: 4.5%; bottom: 7%; display: grid; place-items: center;
  width: max(44px, calc(76 * var(--u))); height: max(44px, calc(76 * var(--u)));
  padding: 0; border: 2px solid var(--cream); border-radius: 50%;
  background: var(--pink); color: var(--wine); box-shadow: 0 5px 22px var(--about-peel-shadow); cursor: pointer;
}
.about-intro-play svg { width: 43%; height: 43%; }
.about-intro-play::before { content: ""; position: absolute; inset: -3px; border: 2px solid var(--pink); border-radius: inherit; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .about-room.is-in .about-intro-play::before { animation: about-intro-pulse 950ms var(--ease-out) both; animation-delay: calc(var(--d, 0ms) + 900ms); }
  #about:not(.is-visible) .about-intro-play::before { animation-play-state: paused; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about-intro-play { transition: scale 180ms var(--ease-out); }
  .about-intro-play:hover { scale: 1.055; }
}
@keyframes about-intro-pulse { from { opacity: .5; scale: 1; } to { opacity: 0; scale: 1.4; } }
.about-why { position: relative; overflow: clip; background: var(--wine); }
.about-why-frame { height: calc(653.25 * var(--u)); }
.about-dot-drift { position: absolute; inset: calc(-1 * var(--about-dot-period)) 0; background-color: var(--about-dots); background-image: radial-gradient(circle, var(--white) 0 calc(3.8 * var(--u)), transparent calc(4.4 * var(--u))), radial-gradient(circle, var(--white) 0 calc(3.8 * var(--u)), transparent calc(4.4 * var(--u))); background-size: var(--about-dot-period) var(--about-dot-period); background-position: calc(-1.9 * var(--u)) calc(58.75 * var(--u)), calc(51.85 * var(--u)) calc(5 * var(--u)); animation: about-dots 40s linear infinite; }
.about-why-heading { position: absolute; left: calc(141.8017 * var(--u)); top: calc(80.2044 * var(--u)); font: 400 calc(81.57751 * var(--u))/1 var(--font-display); text-transform: uppercase; white-space: nowrap; letter-spacing: -.07em; word-spacing: .08em; --step: 100ms; }
.about-cards { position: absolute; left: calc(28.8624 * var(--u)); right: calc(28.8624 * var(--u)); top: calc(190.4222 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8.24 * var(--u)); }
.about-card { position: relative; height: calc(416.5248 * var(--u)); border-radius: calc(15 * var(--u)); background: var(--white); color: var(--brick); transition: translate 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.about-card h3 { position: absolute; left: calc(20.5262 * var(--u)); top: calc(23.78 * var(--u)); font: 700 calc(33.5175 * var(--u))/1.09644 var(--font-body); letter-spacing: 0; }
.about-card-one h3 { left: calc(36.4626 * var(--u)); top: calc(42.055 * var(--u)); }
.about-card-three h3 { left: calc(33.2079 * var(--u)); }
.about-card p { position: absolute; left: calc(20.5262 * var(--u)); top: calc(154.035 * var(--u)); font: 400 max(15px, calc(25.2675 * var(--u)))/calc(30 * var(--u)) var(--font-bricolage); letter-spacing: -.03em; white-space: nowrap; }
.about-card-one p { top: calc(155.813 * var(--u)); }
@keyframes about-dots { to { translate: 0 var(--about-dot-period); } }
@keyframes about-sequin-settle { from { scale: 1.06; } to { scale: 1; } }
@keyframes about-coin-flip { from { rotate: y 1turn; } to { rotate: y 0turn; } }
@media (prefers-reduced-motion: no-preference) {
  .js .about-sequins.is-in .about-sequin-base { animation: about-sequin-settle 1800ms var(--ease-out) both; }
  .js .about-time.is-in .about-coin { animation: about-coin-flip 900ms var(--spring) both; animation-delay: 150ms; }
  .js .about-time.is-in .about-coin:last-child { animation-delay: 470ms; }
  .js .about-card-reveal:not(.is-in):nth-child(1) { rotate: -2deg; }
  .js .about-card-reveal:not(.is-in):nth-child(2) { rotate: 1deg; }
  .js .about-card-reveal:not(.is-in):nth-child(3) { rotate: 2deg; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about-card:hover { translate: 0 -6px; box-shadow: 0 12px 24px var(--about-hover-shadow); }
}
@media (max-width: 699px) {
  #about { --about-dot-period: calc(64 * var(--m)); }
  .about-hero { height: calc(822 * var(--m)); }
  .about-sequin-base { height: 100%; top: 0; object-fit: cover; object-position: 47% center; }
  .about-heading-shadow { left: calc(12 * var(--m)); top: calc(49 * var(--m)); width: calc(367.3 * var(--m)); height: calc(234.1 * var(--m)); }
  #about-heading { left: calc(12.65 * var(--m)); top: calc(70.3 * var(--m)); width: calc(357.05 * var(--m)); padding-top: calc(12.08 * var(--m)); font-size: calc(107.87 * var(--m)); }
  .about-note { --n: calc(.78 * var(--m)); top: calc(320 * var(--m)); right: calc(-12 * var(--m)); }
  .about-note-resume a { font-size: max(19px, calc(27.81 * var(--n))); }
  .about-ninety-frame { height: calc(480 * var(--m)); }
  .about-olive-drift img { width: calc(600 * var(--m)); height: calc(1068 * var(--m)); }
  .about-time { left: max(16px, env(safe-area-inset-left, 0px)); top: calc(56 * var(--m)); width: calc(358 * var(--m)); white-space: normal; font-size: calc(43 * var(--m)); line-height: .97; text-align: center; }
  .about-time { max-width: calc(100% - 32px); font-size: calc(44 * var(--m)); letter-spacing: -.035em; word-spacing: 0; }
  .about-meet { left: 0; right: 0; top: calc(155 * var(--m)); text-align: center; font-size: calc(29 * var(--m)); letter-spacing: -.06em; text-shadow: 0 1px 14px var(--about-legible); }
  .about-room { left: calc(16 * var(--m)); top: calc(230 * var(--m)); width: calc(358 * var(--m)); height: calc(201.375 * var(--m)); border-radius: calc(15 * var(--m)); --r: calc(15 * var(--m)); }
  .about-intro-play { width: max(44px, calc(64 * var(--m))); height: max(44px, calc(64 * var(--m))); }
  .about-why-frame { height: auto; padding: calc(54 * var(--m)) max(16px, env(safe-area-inset-left, 0px)) calc(58 * var(--m)); }
  .about-dot-drift { background-size: var(--about-dot-period) var(--about-dot-period); }
  .about-why-heading { position: relative; left: auto; top: auto; font-size: calc(51 * var(--m)); line-height: .95; white-space: normal; text-align: center; }
  .about-cards { position: relative; left: auto; right: auto; top: auto; display: grid; grid-template-columns: 1fr; gap: calc(18 * var(--m)); margin-top: calc(40 * var(--m)); }
  .about-card { height: auto; padding: calc(27 * var(--m)) calc(24 * var(--m)) calc(31 * var(--m)); border-radius: calc(15 * var(--m)); }
  .about-card h3, .about-card-one h3, .about-card-three h3 { position: relative; left: auto; top: auto; font-size: calc(32 * var(--m)); line-height: 1.08; letter-spacing: -.04em; }
  .about-card h3 br { display: none; }
  .about-card h3 br::after { content: ' '; }
  .about-card p, .about-card-one p { position: relative; left: auto; top: auto; margin-top: calc(25 * var(--m)); font-size: max(19px, calc(23 * var(--m))); line-height: 1.25; white-space: normal; letter-spacing: -.025em; }
  .about-card p br { display: none; }
}

/* The exit-crossing range starts when the hero’s top reaches the viewport’s top.
   Dedicated wrappers leave her positions, tilts and entrance reveals untouched. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .about-hero { view-timeline: --about-depth block; }
    .about-sequin-depth, .about-heading-depth, .about-note-depth {
      animation: about-depth-sequins linear backwards;
      animation-timeline: --about-depth;
      animation-range: exit-crossing 0% exit-crossing 100%;
    }
    .about-heading-depth { animation-name: about-depth-heading; }
    .about-note-depth { animation-name: about-depth-note; }
  }
  .about-hero { --depth-sequins: 36px; --depth-heading: -38px; --depth-note: -60px; }
}
@keyframes about-depth-sequins { from { transform: translateY(0); } to { transform: translateY(var(--depth-sequins)); } }
@keyframes about-depth-heading { from { transform: translateY(0); } to { transform: translateY(var(--depth-heading)); } }
@keyframes about-depth-note { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(var(--depth-note)) rotate(-3deg); } }
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .about-hero { --depth-sequins: 18px; --depth-heading: -20px; --depth-note: -30px; }
}