/* Demi T, "Neon sign" look (Craig's pick, 10 Nov 2026): her name as a red neon sign on a dark pub wall.
   60-30-10: near-black wall (60), white words and dark cards (30), her red (10) on the neon name (the one key word),
   the main button and links only. */
:root {
  --bg: #0f0b0c;
  --bg2: #171113;
  --card: #221819;
  --line: #3d2c2f;
  --edge: #8b7176;      /* box edges that must be seen: inputs, tool options (3:1 or better) */
  --ink: #f7f1ee;
  --muted: #d4c6c8;
  --acc: #e11d2e;       /* the red: solid on the main button */
  --acc-hi: #c81626;
  --acc-text: #ff5c68;  /* the same red, lifted so links read on black */
  --neon: #ff2a3d;      /* the glow of the neon tube */
  --on-acc: #fff;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .9, .24, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.still { scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2 { font-family: var(--font); font-weight: 900; font-stretch: 78%; text-transform: uppercase; line-height: 1; letter-spacing: 0; margin: 0 0 .45em; text-wrap: balance; }
h2 { font-size: clamp(34px, 6.4vw, 54px); }
p { margin: 0 0 1em; }
.wrap { width: min(1100px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 99; display: inline-flex; align-items: center; min-height: 44px; background: var(--ink); color: var(--bg); padding: 0 16px; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
section[id] { scroll-margin-top: 16px; }
main:focus { outline: none; }

/* The main button: the only solid red. Floats on a soft shadow (front layer). */
/* The main button pops like her neon sign: bigger, a bright red with a lit rim and a red glow, floating on a soft shadow. */
.btn { border: 2px solid #ff7a85; display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 34px; border-radius: 999px;
  background: linear-gradient(180deg, #ee2434 0%, #d0141f 100%); color: var(--on-acc); font: 800 19px var(--font); font-stretch: 105%; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  text-shadow: 0 1px 2px rgba(80, 0, 8, .45);
  box-shadow: 0 0 16px rgba(255, 42, 61, .6), 0 0 40px rgba(255, 42, 61, .3), 0 18px 32px -12px rgba(0, 0, 0, .85);
  transition: box-shadow .2s, transform .2s var(--ease), border-color .2s; }
.btn:hover { border-color: #ffb3ba; transform: translateY(-2px); box-shadow: 0 0 22px rgba(255, 42, 61, .8), 0 0 56px rgba(255, 42, 61, .4), 0 22px 36px -12px rgba(0, 0, 0, .9); }
.btn:active { transform: scale(.98); }
/* WhatsApp: an outlined button (white edge and text, WhatsApp mark), so the red "Ask about your date" stays the one main button */
.btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid rgba(247, 241, 238, .75); color: var(--ink); background: rgba(15, 11, 12, .45); font: 700 17px var(--font); text-decoration: none; transition: border-color .2s, background .2s; }
.btn-wa:hover { border-color: #fff; background: rgba(15, 11, 12, .7); }
button.btn-wa { cursor: pointer; }
.wa-ico { width: 22px; height: 22px; flex: none; }
/* The two hero buttons: stacked on phones (they wrap), side by side with a clear gap and lined up on wider screens */
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
@media (max-width: 759px) { .hero .lede { margin-bottom: 16px; } }
/* Phones held sideways, and very short upright screens (560px or less): no room on screen one, so the WhatsApp button is only in the booking section there */
:where(html.lcomp) .hero .btn-wa, :where(html.tiny) .hero .btn-wa { display: none; }
@media (orientation: portrait) and (max-width: 759px) and (max-height: 560px) { :where(html:not(.hjs)) .hero .btn-wa { display: none; } }
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (max-width: 759px) and (max-height: 600px) { :where(html:not(.hjs)) .hero .btn-wa { display: none; } }
.wa-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--muted); }
.btn-2 { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; border-radius: 999px; background: var(--ink); color: var(--bg); border: 0; font: 800 18px var(--font); cursor: pointer; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .85); transition: background .2s, transform .2s var(--ease); }
.btn-2:hover { background: #fff; transform: translateY(-2px); }
.textlink { display: inline-flex; align-items: center; min-height: 44px; color: var(--acc-text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.textlink:hover { color: var(--ink); }

.motion-bar { border-bottom: 1px solid var(--line); background: var(--bg); }
.motion-bar .wrap { display: flex; justify-content: flex-end; }
.motion { min-height: 44px; background: none; border: 0; color: var(--muted); font: 500 16px var(--font); cursor: pointer; padding: 0 2px; }
.motion:hover { color: var(--ink); }

.top { background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; height: 60px; gap: 8px; }
.brand { margin-right: auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; min-width: 44px; text-decoration: none; }
.brand img { height: 30px; width: auto; }
/* "LIVE SINGER" under her script logo, as real text so it stays readable at header size (in the SVG it would be about 4px tall) */
.brand-tag { color: var(--ink); font: 700 12px/1 var(--font); font-stretch: 100%; text-transform: uppercase; letter-spacing: .16em; margin-right: -.16em; white-space: nowrap; }
.nav { display: flex; gap: 0; }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 9px; text-decoration: none; color: var(--muted); font-size: 16px; font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
@media (min-width: 700px) { .nav { gap: 10px; } .nav a { padding: 0 14px; } }

/* HERO: a pub's back wall at night */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 22px 0 76px; background: var(--bg); }
.hero-back { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* Back layer: the red sparkle from her own poster photo, full-bleed, under the brick wall; Demi herself on top of the wall */
.hero-back .tint { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; opacity: .6; }
/* Demi herself, large, on the wall. Phones: script.js places her so her face sits between the sign and the words
   and her chin ends above them; her top and bottom edges melt into the wall. */
.hero-back .her { position: absolute; z-index: 1; max-width: none; left: var(--her-left, -10%); top: var(--her-top, 90px); width: var(--her-w, 120%); height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 120px), transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 120px), transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
/* Darkens the lower part, from her chin down, so the words read on her black top */
.shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(15, 11, 12, 0) 0, rgba(15, 11, 12, 0) calc(var(--chin, 300px) - 40px), rgba(15, 11, 12, .3) var(--chin, 300px), rgba(15, 11, 12, .74) calc(var(--tt, 360px) - 6px), rgba(15, 11, 12, .8) calc(var(--tt, 360px) + 160px), rgba(15, 11, 12, .94) 100%); }
/* A brick wall (staggered courses) and the warm glow of the sign, over the photo */
.wall { position: absolute; inset: 0; background:
  radial-gradient(80% 42% at 50% 12%, rgba(255, 42, 61, .26), transparent 70%),
  linear-gradient(180deg, rgba(15, 11, 12, .3) 0%, rgba(15, 11, 12, .5) 45%, rgba(15, 11, 12, .9) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='68'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.42' stroke-width='3'%3E%3Cpath d='M0 1.5H144M0 35.5H144M1.5 0V34M73.5 0V34M37.5 34V68M109.5 34V68'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1'%3E%3Cpath d='M0 4H144M0 38H144'/%3E%3C/g%3E%3C/svg%3E"); }
.hero-in { position: relative; display: grid; justify-items: center; text-align: center; }

/* The neon sign: her name, the one key word in red on screen one */
.sign { margin: 0 0 6px; display: grid; justify-items: center; }
.sign-name { display: block; font-size: clamp(64px, 21vw, 96px); line-height: 0; }
/* Her logo as the neon tube. The red glow is drawn inside the SVG (no CSS filter, so iPhone Safari can't turn it into a white box).
   The file has a 70-unit margin for the glow, so it is drawn a little wider and pulled in by that margin. Its size follows the sign size (em). */
.sign-logo { display: block; width: 2.8em; height: auto; max-width: none; margin: -.095em; }
/* Very short phone screens: a slightly smaller sign so the button stays on screen one */
:where(html.tiny) .sign-logo { width: 2.3em; }
@media (orientation: portrait) and (max-width: 759px) and (max-height: 560px) { :where(html:not(.hjs)) .sign-logo { width: 2.3em; } }
/* The one moving thing: the odd flicker of a real pub sign. Lit and readable from the very first frame. */
html:not(.still) .hero.on .sign { animation: flicker 9s linear 1.2s infinite; }
@keyframes flicker {
  0%, 6%, 9%, 12%, 100% { opacity: 1; }
  7% { opacity: .45; }
  10.5% { opacity: .7; }
  11% { opacity: .35; }
}

/* Phones: an empty space between the sign and the words, where her face shows from the back layer */
.hero-photo { width: 46vw; max-width: 280px; aspect-ratio: 1; margin: 14px 0 18px; }
@supports (height: 1svh) { .hero-photo { width: clamp(132px, min(46vw, calc(var(--h0, 100svh) - 500px)), 280px); } }
.eyebrow { font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; color: var(--muted); }
h1 { font-size: clamp(32px, 9.2vw, 42px); margin-bottom: 10px; max-width: 11em; margin-inline: auto; }
.lede { font-size: 18px; max-width: 24em; margin: 0 auto 20px; color: var(--muted); }
/* Shorter phone screens (most phones once the browser bars show): a smaller sign and photo, no eyebrow or supporting line,
   so the button always sits on the first screen */
/* Decided once when the page opens (html.short, set in the <head>), not by a height media query: in-app browsers like
   Messenger change the height as you scroll, which used to flip the layout mid-scroll (Craig, 11 Nov 2026). */
:where(html.short) .hero { padding-top: 12px; }
:where(html.short) .sign-name { font-size: clamp(54px, 17vw, 66px); }
:where(html.short) .hero-photo { width: clamp(96px, calc(var(--h0, 100svh) - 540px), 200px); margin: 10px 0 12px; }
:where(html.short) .eyebrow, :where(html.short) .lede { display: none; }
:where(html.short) h1 { margin-bottom: 16px; }
/* Without JavaScript: the old height rule */
@media (max-height: 820px) and (max-width: 759px), (min-width: 460px) and (max-width: 759px) {
  :where(html:not(.hjs)) .hero { padding-top: 12px; }
  :where(html:not(.hjs)) .sign-name { font-size: clamp(54px, 17vw, 66px); }
  :where(html:not(.hjs)) .hero-photo { width: clamp(96px, calc(var(--h0, 100svh) - 540px), 200px); margin: 10px 0 12px; }
  :where(html:not(.hjs)) .eyebrow, :where(html:not(.hjs)) .lede { display: none; }
  :where(html:not(.hjs)) h1 { margin-bottom: 16px; }
}

/* Phones: the red sparkle from her own poster photo shows clearly behind the sign and the words
   (Demi herself is the photo layer above it) */
@media (max-width: 759px) {
  .wall { background:
    radial-gradient(80% 30% at 28% 8%, rgba(255, 42, 61, .2), transparent 70%),
    linear-gradient(180deg, rgba(15, 11, 12, .45) 0%, rgba(15, 11, 12, .5) 40%, rgba(15, 11, 12, .62) 70%, rgba(15, 11, 12, .9) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='68'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.42' stroke-width='3'%3E%3Cpath d='M0 1.5H144M0 35.5H144M1.5 0V34M73.5 0V34M37.5 34V68M109.5 34V68'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1'%3E%3Cpath d='M0 4H144M0 38H144'/%3E%3C/g%3E%3C/svg%3E"); }
  h1, .lede, .eyebrow { text-shadow: 0 2px 14px rgba(15, 11, 12, .9), 0 0 2px rgba(15, 11, 12, .6); }
  /* Craig (10 Nov): the sign on the left and Demi on the right, like the laptop layout; the words line up on the left with the sign */
  .hero-in, .sign { justify-items: start; }
  .hero-in { text-align: left; }
  .hero h1, .hero .lede { margin-inline: 0; }
}

@media (min-width: 760px), (min-width: 560px) and (orientation: landscape) {
  .hero { padding: 34px 0 96px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sign" "words"; text-align: left; justify-items: start; align-items: center; }
  .hero-words { max-width: 560px; }
  .sign { grid-area: sign; justify-items: start; margin: 0 0 34px; align-self: end; }
  .hero-words { align-self: start; }
  .sign-name { font-size: clamp(84px, 9vw, 120px); }
  .hero-photo { display: none; }
  /* Laptops: Demi large on the right; her photo's own red sparkle runs in under the right end of the words */
  .hero-back .her { left: auto; right: 0; top: 0; width: 58%; height: 100%; object-fit: cover; object-position: 58% 10%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 32%, #000 92%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .hero h1, .hero .lede, .hero .eyebrow { text-shadow: 0 2px 14px rgba(15, 11, 12, .85); }
  .shade { background: linear-gradient(90deg, rgba(15, 11, 12, .55) 0, rgba(15, 11, 12, .45) 34%, rgba(15, 11, 12, .2) 46%, rgba(15, 11, 12, 0) 56%), linear-gradient(180deg, rgba(15, 11, 12, 0) 66%, rgb(15, 11, 12) 100%); }
  .hero-words { grid-area: words; }
  h1 { font-size: clamp(42px, 4.8vw, 58px); margin-inline: 0; max-width: 11.5em; }
  .lede { margin-inline: 0; font-size: 20px; }
  .wall { background:
    radial-gradient(46% 50% at 22% 14%, rgba(255, 42, 61, .24), transparent 70%),
    linear-gradient(180deg, rgba(15, 11, 12, .3) 0%, rgba(15, 11, 12, .55) 50%, rgba(15, 11, 12, .92) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='68'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.42' stroke-width='3'%3E%3Cpath d='M0 1.5H144M0 35.5H144M1.5 0V34M73.5 0V34M37.5 34V68M109.5 34V68'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1'%3E%3Cpath d='M0 4H144M0 38H144'/%3E%3C/g%3E%3C/svg%3E"); }
}
/* Laptops and tablets on short screens: decided once at page open (html.tshort) */
:where(html.tshort) .hero { padding-top: 18px; }
:where(html.tshort) h1 { font-size: clamp(40px, 3.6vw, 48px); }
:where(html.tshort) .lede { margin-bottom: 16px; }
:where(html.tshort) .sign-name { font-size: clamp(68px, 7vw, 88px); }
:where(html.tshort) .sign { margin-bottom: 30px; }
/* Without JavaScript: */
@media (min-width: 760px) and (max-height: 760px) {
  :where(html:not(.hjs)) .hero { padding-top: 18px; }
  :where(html:not(.hjs)) h1 { font-size: clamp(40px, 3.6vw, 48px); }
  :where(html:not(.hjs)) .lede { margin-bottom: 16px; }
  :where(html:not(.hjs)) .sign-name { font-size: clamp(68px, 7vw, 88px); }
  :where(html:not(.hjs)) .sign { margin-bottom: 30px; }
}
/* Short laptop screens: drop the supporting line so the button stays on screen one */
:where(html.ttiny) .hero .lede { display: none; }
@media (min-width: 760px) and (max-height: 640px) { :where(html:not(.hjs)) .hero .lede { display: none; } }
/* Small screens held sideways: Demi on the right half, the words kept to the left half */
@media (min-width: 560px) and (max-width: 759px) and (orientation: landscape) {
  .hero-back .her { width: 50%; }
  .hero h1 { max-width: calc(50vw - 40px); }
}

/* GIG: a white card that hangs up into the hero */
.live { padding: 0 0 8px; }
.gig { position: relative; z-index: 3; margin-top: -44px; display: grid; gap: 16px; padding: 20px; border-radius: 20px; background: var(--ink); color: var(--bg); box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .9); }
.gig h2.gig-tag { margin: 0 0 12px; font-size: 16px; font-weight: 700; font-stretch: 100%; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.gigs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.gig-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.gig-row[hidden], .gig-quote[hidden], .live[hidden], .nav a[hidden] { display: none; }
.gig-date { margin: 0; display: grid; place-items: center; width: 76px; height: 84px; border-radius: 14px; background: var(--bg); color: var(--ink); line-height: 1; }
.gig-date b { font-size: 34px; font-weight: 900; font-stretch: 100%; align-self: end; }
.gig-date span { font-size: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; align-self: start; margin-top: 4px; }
.gig h3 { font-family: var(--font); font-size: 24px; font-weight: 900; font-stretch: 78%; text-transform: uppercase; line-height: 1.02; margin: 0 0 6px; text-wrap: balance; }
@media (max-width: 359px) { .gig h3 { font-size: 21px; } }
.gig-what p { margin: 0; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.gig-quote { margin: 0; padding-top: 14px; border-top: 1px solid rgba(15, 11, 12, .18); font-size: 18px; font-weight: 600; line-height: 1.35; }
.gig-quote span { display: block; margin-top: 6px; font-size: 16px; font-weight: 400; text-wrap: pretty; }
@media (min-width: 860px) {
  .gig { grid-template-columns: 1.6fr 1fr; align-items: center; gap: 28px; padding: 26px 30px; margin-top: -52px; }
  .gig h3 { font-size: 28px; }
  .gig-quote { padding: 0 0 0 28px; border-top: 0; border-left: 1px solid rgba(15, 11, 12, .18); }
}

/* ON STAGE: her gig snaps as black-and-white prints with a white border, pinned at slight angles on her brick wall (the #book wall, no red glow; still, no motion).
   Phones: a swipe strip that peeks the next print; laptops: a row of three */
.stage { padding: 56px 0 64px; background:
  linear-gradient(180deg, rgba(15, 11, 12, .55), rgba(15, 11, 12, .75)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='68'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.42' stroke-width='3'%3E%3Cpath d='M0 1.5H144M0 35.5H144M1.5 0V34M73.5 0V34M37.5 34V68M109.5 34V68'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1'%3E%3Cpath d='M0 4H144M0 38H144'/%3E%3C/g%3E%3C/svg%3E"), #2a1517; }
.stage h2 { margin-bottom: 8px; }
.stage-lede { margin: 0 0 18px; color: var(--muted); }
.stage-strip { list-style: none; margin: 0; padding: 14px 16px 22px; display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
.stage-strip::-webkit-scrollbar { display: none; }
.stage-strip:focus-visible { outline-offset: -3px; }
.stage-strip li { scroll-snap-align: start; padding: 8px 8px 26px; background: var(--ink); border-radius: 4px; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .9); transform: rotate(-1.6deg); }
.stage-strip li:nth-child(2) { transform: rotate(1.4deg); }
.stage-strip li:nth-child(3) { transform: rotate(-.8deg); }
.stage-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 560px) { .stage-strip { grid-auto-columns: 40%; } }
/* Phones held sideways: each print fits the screen height */
:where(html.lcomp) .stage-strip { grid-auto-columns: min(40%, calc((var(--h0, 100svh) - 90px) * .76)); }
@media (orientation: landscape) and (max-height: 500px) { :where(html:not(.hjs)) .stage-strip { grid-auto-columns: min(40%, calc((100svh - 90px) * .76)); } }
@media (min-width: 860px) {
  .stage { padding: 72px 0 80px; }
  .stage-strip { width: min(1100px, 100% - 32px); margin-inline: auto; padding: 14px 0 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: start; overflow: visible; gap: 36px; }
}

/* ABOUT */
.about { padding: 64px 0 56px; }
.about-in { display: grid; gap: 28px; align-items: start; }
.face { width: 172px; height: 172px; border-radius: 50%; object-fit: cover; border: 4px solid var(--card); }
.about p { max-width: 34em; }
.about .quote { max-width: calc(34em * 17 / 20); }
.quote { margin: 22px 0 14px; padding: 18px 20px; background: var(--card); border-radius: 16px; font-size: 20px; font-weight: 600; line-height: 1.35; }
.quote span { display: block; margin-top: 8px; font-size: 16px; font-weight: 400; color: var(--muted); }
/* Quick facts for a booker: label left, answer right; stacks on small phones */
.facts { margin: 0 0 18px; display: grid; gap: 0; max-width: 34em; }
.facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.facts div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 359px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }
.bio { margin: 0 0 10px; color: var(--muted); }
.bio span { display: block; font-size: 16px; }
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin: 0; color: var(--muted); }
.follow span { flex-basis: 100%; margin-top: 4px; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 760px) { .about { padding: 80px 0 72px; } .about-in { grid-template-columns: 220px 1fr; gap: 56px; } .face { width: 220px; height: 220px; } }

/* WATCH */
.watch { background: var(--bg2); padding: 72px 0; }
.watch-in { display: grid; gap: 28px; align-items: center; }
.poster { position: relative; display: block; width: min(360px, 100%); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); transition: transform .25s var(--ease); }
.poster:hover { transform: translateY(-4px); }
.poster img { width: 100%; }
/* Play mark: plain white, so the red stays for the main button */
.play { position: absolute; left: 50%; top: 77%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(247, 241, 238, .95); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.play::after { content: ""; position: absolute; left: 31px; top: 23px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent var(--bg); }
@media (min-width: 760px) { .watch-in { grid-template-columns: 1fr 360px; gap: 64px; } }

/* BOOK: "Ask Demi about your night", the 2-tap message builder */
.book { padding: 80px 0; background:
  linear-gradient(180deg, rgba(15, 11, 12, .55), rgba(15, 11, 12, .75)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='68'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.42' stroke-width='3'%3E%3Cpath d='M0 1.5H144M0 35.5H144M1.5 0V34M73.5 0V34M37.5 34V68M109.5 34V68'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='1'%3E%3Cpath d='M0 4H144M0 38H144'/%3E%3C/g%3E%3C/svg%3E"), #2a1517; }
.book-in { display: grid; gap: 28px; align-items: start; }
.quiz { background: var(--card); border: 1.5px solid var(--edge); border-radius: 20px; padding: 24px 20px 26px; min-height: 330px; }
.quiz noscript a { color: var(--acc-text); }
.q-step { font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.q-title { font-size: 24px; font-weight: 800; line-height: 1.15; margin-bottom: 18px; }
.q-title:focus { outline: none; }
.q-opts { display: grid; gap: 10px; }
.opt { min-height: 58px; padding: 8px 18px; text-align: left; border-radius: 14px; border: 2px solid var(--edge); background: var(--bg); color: var(--ink); font: 700 18px var(--font); cursor: pointer; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.opt:hover { border-color: var(--acc-text); background: var(--bg2); transform: translateY(-1px); }
.q-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 12px; }
.q-back, .again, .copy { min-height: 44px; background: none; border: 0; padding: 0 2px; color: var(--muted); font: 500 16px var(--font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.q-back:hover, .again:hover, .copy:hover { color: var(--ink); }
.msg { margin: 0 0 20px; padding: 16px 18px; background: var(--bg); border-radius: 14px 14px 14px 4px; font-size: 18px; line-height: 1.45; }
.result .btn { width: 100%; }
.or { margin: 16px 0 0; font-size: 16px; color: var(--muted); }
.or a { display: inline-flex; align-items: center; min-height: 44px; color: var(--acc-text); font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 860px) { .book-in { grid-template-columns: 1fr 1.1fr; gap: 64px; } .quiz { padding: 30px 30px 32px; } .result .btn { width: auto; } }

/* ASK: a question that opens in WhatsApp or email */
.ask { background: var(--bg2); padding: 72px 0 80px; }
.ask-in { display: grid; gap: 28px; align-items: start; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--edge); background: var(--bg); color: var(--ink); font: 400 17px var(--font); }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--acc-text); border-width: 2.5px; }
.form-status.err { color: var(--acc-text); }
.form-status a { color: var(--acc-text); }
.form-status { margin: 14px 0 0; min-height: 1.5em; font-size: 16px; }
.form-status.err { font-weight: 700; }
@media (min-width: 860px) { .ask-in { grid-template-columns: 1fr 1.1fr; gap: 64px; } }

.foot { padding: 36px 0 44px; border-top: 1px solid var(--line); font-size: 16px; }
.foot p { margin-bottom: 6px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--acc-text); text-underline-offset: 4px; }
.made a { color: inherit; }
.made { color: var(--muted); margin-top: 10px; }

/* Motion off (the switch, or the phone's own reduce-motion setting): nothing moves, hover included */
html.still *, html.still *::before, html.still *::after { transition: none !important; animation: none !important; }
html.still .btn:hover, html.still .btn:active, html.still .poster:hover { transform: none; }

/* Phones held sideways: a compact first screen so the button fits */
/* Phones held sideways: decided once at page open (html.lcomp, <head> script) so bars hiding while scrolling cannot flip it */
:where(html.lcomp) .hero { padding: 6px 0 70px; }
:where(html.lcomp) .sign { margin: 0 0 12px; }
:where(html.lcomp) .sign-name { font-size: 40px; }
:where(html.lcomp) .brand img { height: 24px; }
:where(html.lcomp) .brand { gap: 2px; }
:where(html.lcomp) .hero .btn { min-height: 48px; }
:where(html.lcomp) .hero .eyebrow, :where(html.lcomp) .hero .lede { display: none; }
:where(html.lcomp) .hero h1 { font-size: 28px; max-width: calc(50vw - 40px); margin-bottom: 12px; }
:where(html.lcomp) .hero-back .her { width: 50%; }
/* Without JavaScript: */
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (max-width: 759px) and (max-height: 600px) {
  :where(html:not(.hjs)) .hero { padding: 6px 0 70px; }
  :where(html:not(.hjs)) .sign { margin: 0 0 12px; }
  :where(html:not(.hjs)) .sign-name { font-size: 40px; }
  :where(html:not(.hjs)) .brand img { height: 24px; }
  :where(html:not(.hjs)) .brand { gap: 2px; }
  :where(html:not(.hjs)) .hero .btn { min-height: 48px; }
  :where(html:not(.hjs)) .hero .eyebrow, :where(html:not(.hjs)) .hero .lede { display: none; }
  :where(html:not(.hjs)) .hero h1 { font-size: 28px; max-width: calc(50vw - 40px); margin-bottom: 12px; }
  :where(html:not(.hjs)) .hero-back .her { width: 50%; }
}
/* Phones held sideways with the browser bars showing (about 320 to 345px tall): slimmer bars, a smaller sign
   and a wider headline, so the button fits on the first screen */
/* Phones held sideways with bars showing: decided once at page open (html.lshort, <head> script) so bars hiding while scrolling cannot flip it */
:where(html.lshort) .top-in { height: 48px; }
:where(html.lshort) .hero { padding-top: 4px; }
:where(html.lshort) .sign { margin-bottom: 8px; }
:where(html.lshort) .sign-name { font-size: 32px; }
:where(html.lshort) .hero h1 { font-size: 26px; max-width: min(360px, calc(58vw - 40px)); margin-bottom: 8px; }
/* Without JavaScript: */
@media (orientation: landscape) and (max-height: 345px) {
  :where(html:not(.hjs)) .top-in { height: 48px; }
  :where(html:not(.hjs)) .hero { padding-top: 4px; }
  :where(html:not(.hjs)) .sign { margin-bottom: 8px; }
  :where(html:not(.hjs)) .sign-name { font-size: 32px; }
  :where(html:not(.hjs)) .hero h1 { font-size: 26px; max-width: min(360px, calc(58vw - 40px)); margin-bottom: 8px; }
}