/* ============ Bethany Flora — bethanyflora.com ============ */

/* Swap in licensed Citadel here when available:
@font-face {
  font-family: "Citadel";
  src: url("assets/fonts/citadel.woff2") format("woff2");
  font-display: swap;
}
*/

:root {
  --white: #ffffff;
  --cream: #fff9f5;
  --peach: #ffc9a9;
  --peach-deep: #ff9e7a;
  --lavender: #d8c7f0;
  --purple: #a78bdb;
  --ink: #2e2a33;
  /* browser chrome / overscroll tone; mirrors the theme-color meta tag */
  --chrome: #fff0e7;
  --ink-soft: #5d5566;
  --grad: linear-gradient(135deg, var(--peach) 0%, var(--lavender) 100%);
  --grad-deep: linear-gradient(135deg, var(--peach-deep) 0%, var(--purple) 100%);
  --script: "Citadel", "Great Vibes", "Snell Roundhand", cursive;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* hidden still leaves the page pannable sideways by touch on iOS; clip cannot
     be scrolled at all. hidden first as the fallback for Safari < 16. */
  overflow-x: hidden;
  overflow-x: clip;
  /* paints the overscroll/safe areas above and below the page, which would
     otherwise rubber-band to white against the warm hero and footer */
  background-color: var(--chrome);
}

body {
  font-family: var(--sans);
  color: var(--ink);
  /* warm rather than white: browsers that tint their chrome from the body
     background must never sample pure white here. Sections that should be
     white set it explicitly. */
  background: var(--chrome);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h2 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

section { position: relative; }

/* ---------- Reveal on scroll ---------- */
/* Only hidden when JS is present to reveal it again — otherwise a script
   failure would leave the whole page blank below the hero. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease var(--d, 0ms), transform 0.8s ease var(--d, 0ms);
}
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue svg { animation: none !important; }
  .js .socials.visible .bubble { animation: none; }
  /* the card still swaps faces, just without the rotation */
  .flip-card-inner { transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  /* no bottom padding: the cutout stands flush on the hero's bottom edge */
  padding: calc(3rem + env(safe-area-inset-top, 0px)) 1.5rem 0;
  background: var(--cream);
  overflow: hidden;
}

/* Flattens the very top of the hero to exactly the chrome tone. The hero's top
   edge is otherwise a horizontal gradient (the peach blob), so any flat browser
   bar above it shows a seam. This also gives the iOS status bar a clean, even
   background to sit on once the page paints under it. */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(130px + env(safe-area-inset-top, 0px));
  background: linear-gradient(to bottom, var(--chrome) 0%, var(--chrome) 30%, rgba(255, 240, 231, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
}
.hero-blob-1 {
  width: 65vmin; height: 65vmin;
  background: var(--peach);
  top: -12vmin; right: -18vmin;
}
.hero-blob-2 {
  width: 70vmin; height: 70vmin;
  background: var(--lavender);
  bottom: -18vmin; left: -20vmin;
}

.hero-name {
  font-family: var(--script);
  font-weight: 400;
  /* Low floor so the name never wraps to two lines on narrow phones. The
     negative side margins let it reach into the hero's padding, which is what
     buys the extra size on mobile without crowding the tagline. */
  font-size: clamp(2.5rem, 16vw, 6.5rem);
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  line-height: 1.1;
  background: var(--grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* em based so the paint box keeps pace with the font at every size */
  padding: 0.06em 0.2em 0.24em;
  position: relative;
  z-index: 1;
}

/* Background-removed cutout: no frame, ring, or border — just Bethany standing
   on the blobs. The source is cropped at her waist, so she is pushed flush to
   the hero's bottom edge and the crop reads as the page edge, not a cut. */
/* <picture> is the flex item, so the auto margin that pins her to the bottom
   has to live here rather than on the <img>. */
.hero picture {
  display: block;
  margin-top: auto;
  position: relative;
  z-index: 1;
  font-size: 0;
}
.hero-photo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(96vw, 460px);
  /* this crop is taller and narrower than the last one, so it needs a little
     more height to keep the same presence in the hero */
  max-height: 72svh;
}

.hero-tagline {
  z-index: 1;
  margin-top: 1.5rem;
  font-size: clamp(0.8rem, 3.2vw, 1.15rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Floats over the cutout with no chip behind it. The shadow is tight and dark
   so it vanishes against her shirt and only adds definition on pale ground. */
.scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  filter: drop-shadow(0 1px 2px rgba(46, 42, 51, 0.28));
}
.scroll-cue:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.scroll-cue svg { animation: bob 2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* At 320px the name is a hair too wide at 16vw and wraps to two lines. */
@media (max-width: 359px) {
  .hero-name { font-size: 14.5vw; }
}

/* Short viewports (landscape phones): shrink the name and photo so the hero
   still fits on one screen instead of spilling past it. */
@media (max-height: 540px) {
  .hero { padding-top: 1.5rem; }
  .hero-name { font-size: clamp(2.2rem, 8vw, 3.4rem); }
  .hero-tagline { margin-top: 0.75rem; }
  .hero-photo { max-height: 58svh; }
  .scroll-cue { display: none; }
}

/* ---------- Script accents ---------- */
/* background-clip:text only paints across the padding box, so any glyph ink
   outside it is dropped entirely. Script faces overhang their line box and
   advance width (descenders, the swash on f), so every script element needs
   em based padding to keep its ink inside the painted area. */
.script-accent {
  display: block;
  font-family: var(--script);
  font-size: clamp(3.6rem, 14vw, 6rem);
  line-height: 1;
  padding: 0.06em 0.18em 0.26em;
  background: var(--grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}
/* Script used as a real section heading (About Me) */
.script-heading {
  font-size: clamp(4.5rem, 21vw, 9rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.15;
  opacity: 1;
  /* negative margins offset the padding so the wider paint box does not
     squeeze the content width and force a wrap */
  padding: 0.06em 0.2em 0.24em;
  margin: 0 -0.2em 1.25rem;
}

.script-accent-big {
  position: absolute;
  top: -0.2em;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  font-size: clamp(4rem, 18vw, 8rem);
  /* script faces have tall ascenders/descenders; the extra leading keeps them
     clear of the section's overflow:hidden at any viewport width */
  line-height: 1.9;
  opacity: 0.16;
  white-space: nowrap;
  padding: 0 0.22em;
  z-index: 0;
}

/* ---------- About ---------- */
/* The section spans full width so its background matches Find Me; the inner
   wrapper holds the measure. Constraining the section itself would fight the
   script heading's negative margins. */
.about {
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  background: var(--cream);
}
.about-inner {
  max-width: 640px;
  margin: 0 auto;
}
.about p { color: var(--ink-soft); font-size: 1.02rem; }

/* ---------- Story sections (split layout) ---------- */
.story {
  padding: 4.5rem 1.25rem;
  overflow: hidden;
  background: var(--white);
}
.story-ramp { background: var(--cream); }

.split {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}
.split-flip { flex-direction: row-reverse; }

.split-photo {
  position: relative;
  flex: 0 0 46%;
  max-width: 46%;
}
.split-text { flex: 1; min-width: 0; }
.split-text p {
  color: var(--ink-soft);
  font-size: clamp(0.88rem, 2.6vw, 1.02rem);
}

/* photo treatments */
.blob {
  position: absolute;
  inset: 6% -6% -6% 6%;
  border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
  z-index: -1;
}
.blob-peach { background: linear-gradient(135deg, var(--peach) 0%, var(--lavender) 90%); opacity: 0.6; }
.blob-lavender { background: linear-gradient(135deg, var(--lavender) 0%, var(--peach) 90%); opacity: 0.6; }

.photo-cutout { filter: drop-shadow(0 14px 28px rgba(46, 42, 51, 0.18)); }

/* The plane is flat-cropped at both edges (the nose is cut just past ARCHER),
   so it is scaled past its column and bled off the left. The cut edge crosses
   the blob's right edge rather than stopping short of it, which would leave a
   crescent of blob showing at the front. */
/* --bleed lives on the column so the blob can be positioned from the same
   geometry as the photo. --her is roughly where Bethany's centre sits across
   each crop, which is what the blob is centred on. */
.story-air .split-photo {
  overflow: visible;
  --bleed: 84px;
  --her: 0.53;
  --blob-w: 94%;
}
/* Phones use the closer bethanyplane-MOBILE crop. The +14px is the only part
   that hangs past the column, keeping clear of the fixed 20px gutter. A
   percentage width here would widen that overhang as the column grows and run
   the nose into the text between roughly 520px and 768px. */
.story-air .photo-cutout {
  width: calc(100% + 14px + var(--bleed));
  max-width: none;
  margin-left: calc(-1 * var(--bleed));
}
/* Desktop keeps the wider crop and its own tuning; the 3.5rem gutter there is
   roomy enough that a percentage width stays clear. */
@media (min-width: 768px) {
  /* narrower on desktop so the recentred blob does not get clipped flat by the
     section's overflow at the left edge */
  .story-air .split-photo { --her: 0.40; --blob-w: 85%; }
  .story-air .photo-cutout {
    width: 167%;
    margin-left: -58%;
  }
}

/* Centred on Bethany rather than on the column. Her centre sits at
   (-bleed + her x image width); the blob is half its own width left of that. */
.story-air .blob {
  top: 50%;
  bottom: auto;
  height: 118%;
  width: var(--blob-w);
  right: auto;
  left: calc(-1 * var(--bleed) + var(--her) * (100% + 14px + var(--bleed)) - var(--blob-w) / 2);
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .story-air .blob {
    left: calc(-58% + var(--her) * 167% - var(--blob-w) / 2);
  }
}

.photo-card {
  border-radius: var(--radius);
  box-shadow: 0 16px 38px rgba(46, 42, 51, 0.2);
}
.tilt-left { transform: rotate(-2.5deg); }
.tilt-right { transform: rotate(2deg); }

/* Ramp card: shows the photo, then flips on its Y axis to the pushback clip.
   Both faces share the video's aspect so the card never changes size mid flip;
   the photo is cropped slightly at the sides by object-fit. */
.flip-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 320 / 568;
  perspective: 1200px;
  /* it is a real <button> so it is keyboard operable; strip the chrome */
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.flip-card:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 6px;
  border-radius: var(--radius);
}
.flip-card:active .flip-card-inner { transform: scale(0.985); }
.flip-card.flipped:active .flip-card-inner { transform: rotateY(180deg) scale(0.985); }
.flip-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.4, 0.05, 0.2, 1);
}
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 16px 38px rgba(46, 42, 51, 0.22);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-back { transform: rotateY(180deg); }

.flip-card-face img,
.flip-card-face video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-overlap {
  position: absolute;
  width: 52%;
  right: -8%;
  bottom: -12%;
  transform: rotate(-3deg);
  border: 4px solid var(--white);
}

/* badges */
.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}
.badges li {
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: var(--grad);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Divider ---------- */
.divider {
  height: clamp(180px, 32vw, 320px);
  overflow: hidden;
  position: relative;
  background: var(--white);
}
.divider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* framed so the tower's shaft just clears the bottom edge without pulling the
     busy terminal and ground into the band */
  object-position: 50% 50%;
  opacity: 0.9;
}
.divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(216,199,240,0.35), rgba(255,201,169,0.25));
}

/* ---------- In Front of the Camera ---------- */
.story-oncam { background: var(--cream); }

.oncam-intro {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.oncam-intro p {
  color: var(--ink-soft);
  font-size: clamp(0.88rem, 2.6vw, 1.02rem);
}
.oncam-intro p + p { margin-top: 0.8rem; }
.oncam-intro .badges { justify-content: center; margin-top: 1.1rem; }

/* Casting profile links: outlined pills so they read as actions, not badges */
.profile-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.profile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--purple);
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.profile-link:hover,
.profile-link:focus-visible {
  background: var(--grad-deep);
  border-color: transparent;
  color: var(--white);
  transform: translateY(-2px);
}
.profile-link:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* Film strip: a full-bleed dark band holding the frames, sitting between the
   two intro paragraphs. The sprocket holes are background gradients with
   background-attachment: local, so they travel with the frames, like film
   through a gate. calc(50% - 50vw) reaches the viewport edges from inside any
   centred container. The frames are duplicated in the markup and script.js
   autoscrolls the strip, wrapping seamlessly at the halfway point; it pauses
   under a finger or pointer and skips reduced motion entirely. */
.filmstrip-wrap {
  position: relative;
  z-index: 1;
  margin: 1.5rem calc(50% - 50vw);
}
.filmstrip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* clicking anywhere on the reel latches it stopped or running */
  cursor: pointer;
  padding: 30px 1.25rem;
  background-color: #262130;
  background-image:
    repeating-linear-gradient(90deg, var(--cream) 0 12px, transparent 12px 30px),
    repeating-linear-gradient(90deg, var(--cream) 0 12px, transparent 12px 30px);
  background-size: auto 9px, auto 9px;
  background-position: 0 11px, 0 calc(100% - 11px);
  background-repeat: repeat-x;
  background-attachment: local, local;
  scrollbar-width: none;
}
.filmstrip::-webkit-scrollbar { display: none; }
.filmstrip:focus-visible { outline: 3px solid var(--purple); outline-offset: -3px; }
.filmstrip img {
  flex: 0 0 auto;
  height: clamp(230px, 52vw, 330px);
  width: auto;
  border-radius: 4px;
}

/* ---------- Socials ---------- */
.socials {
  padding: 4.5rem 1.5rem;
  text-align: center;
  background: var(--cream);
}
.socials .script-accent { margin-bottom: 0.25rem; }

.bubbles {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.75rem;
}
.bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--grad-deep);
  box-shadow: 0 12px 26px rgba(167, 139, 219, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bubble svg { width: 30px; height: 30px; fill: var(--white); }
.bubble:hover, .bubble:focus-visible {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 18px 34px rgba(167, 139, 219, 0.5);
}
.bubble:active { transform: scale(0.92); }
.bubble:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* Each bubble pops in as the section scrolls into view. fill-mode is
   `backwards` so the animation holds the start state during its delay but
   releases the transform once it finishes, leaving hover/active free to work. */
@keyframes bubble-pop {
  0%   { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.js .socials.visible .bubble {
  animation: bubble-pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.js .socials.visible .bubble:nth-child(1) { animation-delay: 140ms; }
.js .socials.visible .bubble:nth-child(2) { animation-delay: 250ms; }
.js .socials.visible .bubble:nth-child(3) { animation-delay: 360ms; }

/* ---------- TikTok embeds (Find Me) ---------- */
/* Horizontal snap row like the film strip: one card per swipe on phones,
   all three centred side by side once they fit. */
.tiktok-row {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  /* keeps a swipe that runs past the last card from chaining into the page and
     dragging the whole layout sideways */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  margin: 2.5rem calc(50% - 50vw) 0;
  padding: 0.5rem 1.25rem;
  scrollbar-width: none;
}
.tiktok-row::-webkit-scrollbar { display: none; }
/* centres the row when it fits without trapping the first card on overflow */
.tiktok-card:first-child { margin-left: auto; }
.tiktok-card:last-child { margin-right: auto; }

.tiktok-card {
  flex: 0 0 auto;
  width: min(325px, 86vw);
  margin: 0;
  scroll-snap-align: center;
}
.tiktok-frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 16px 38px rgba(46, 42, 51, 0.16);
  /* the embed/v2 player is built for a 325 wide column */
  aspect-ratio: 325 / 745;
}
.tiktok-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tiktok-stats {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.tiktok-stats span { display: inline-flex; align-items: center; gap: 0.32rem; }
.tiktok-stats svg { fill: var(--peach-deep); flex-shrink: 0; }
.tiktok-stats span:last-child svg { fill: var(--purple); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Contact ---------- */
.contact { padding: 4.5rem 1.25rem; background: var(--white); }
.contact-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 2.5rem 1.75rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid rgba(167, 139, 219, 0.3);
  box-shadow: 0 20px 50px rgba(255, 158, 122, 0.16);
}
.contact-card p { color: var(--ink-soft); margin-bottom: 1.4rem; }
.contact-btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  max-width: 100%;
  border-radius: 999px;
  background: var(--grad-deep);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 12px 26px rgba(255, 158, 122, 0.35);
}
.contact-btn:hover, .contact-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(255, 158, 122, 0.45);
}
.contact-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* ---------- Footer ---------- */
.footer {
  padding: 2rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  /* --chrome, not --cream: this has to match the html canvas painted below it
     and the theme-color tinting the iOS toolbar, or a seam shows at the very
     bottom of the page. */
  background: var(--chrome);
}
.footer-credit {
  margin-top: 0.5rem;
  font-size: 0.78rem;
}
.footer-credit a {
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(167, 139, 219, 0.45);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--peach-deep);
  border-bottom-color: var(--peach-deep);
}
.footer-credit a:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* ---------- Tiny screens: stack the splits ---------- */
@media (max-width: 359px) {
  .split, .split-flip { flex-direction: column; }
  .split-photo { flex: none; max-width: 82%; }
  .split-text { text-align: center; }
  .badges { justify-content: center; }
}

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .split { gap: 3.5rem; }
  .split-photo { flex-basis: 42%; max-width: 42%; }
  .story { padding: 6.5rem 2rem; }
  .script-accent-big { font-size: clamp(6rem, 12vw, 9rem); }
}