/* =====================================================================
   joy.css · everything that is specific to the Linen Folio look.

   Loaded after styles.css, which holds the shared template and her
   eggshell + burgundy theme. Nothing in here is needed by the template.

   1. Collaborations     4. Portrait aura      7. Second page
   2. Dahlia emblem      5. Hero phones        8. Look choices
   3. Her name + email   6. Photo strips
   ===================================================================== */


/* ---------- 1. Collaborations ----------------------------------------------
   The brand row is a small trophy shelf: a centred heading, one labelled line of
   logos per group (Travel, Product), and one quiet link that opens the full list
   (which also names the work that has no logo). Built by js/campaigns-render.js. */
.campaign-nav.campaign-nav--logos { display: flex; flex-wrap: wrap !important; justify-content: center; align-items: center; gap: 22px clamp(20px, 3.4vw, 44px) !important;
  width: 100%; max-width: 100%; margin-inline: 0 !important; padding: 22px clamp(12px, 3vw, 32px) 18px !important; overflow: visible !important; -webkit-mask: none !important; mask: none !important; }
.campaign-nav--logos::before, .campaign-nav--logos::after { display: none !important; }

.campaign-nav--logos .cn-label { flex: 0 0 100%; align-items: center; margin: 0 !important; padding: 0 0 4px !important; border: 0 !important; text-align: center; }
.campaign-nav--logos .cn-label b { font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .28em; }
.campaign-nav--logos .cn-break { flex: 0 0 100%; height: 0; }
.campaign-nav--logos .cn-group { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: -8px; color: var(--muted); font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.campaign-nav--logos .cn-group::before, .campaign-nav--logos .cn-group::after { content: ""; width: clamp(28px, 6vw, 72px); height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.campaign-nav--logos .cn-group::after { scale: -1 1; }
.campaign-nav--logos > a { flex: 0 0 auto; }

.campaign-nav--logos img.cn-logo.cn-logo--wide { width: auto; max-width: clamp(110px, 15vw, 170px); height: clamp(26px, 3vw, 36px); aspect-ratio: auto; border-radius: 0; object-fit: contain; }
.campaign-nav--logos img.cn-logo:not(.cn-logo--wide) { width: clamp(42px, 4.6vw, 54px); height: clamp(42px, 4.6vw, 54px); padding: 0; border-radius: 13px; object-fit: contain; }

.cn-all { flex: 0 0 100%; text-align: center; }
.cn-all summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; color: var(--purple); font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; list-style: none; cursor: pointer; }
.cn-all summary::-webkit-details-marker { display: none; }
.cn-all summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; transition: rotate .3s ease, margin .3s ease; }
.cn-all[open] summary::after { margin-top: 3px; rotate: 225deg; }
.cn-all summary:hover, .cn-all summary:focus-visible { text-decoration: underline; text-underline-offset: 4px; outline: none; }
.cn-all ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 12px auto 2px; padding: 0; list-style: none; }
.cn-all li > * { display: block; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-hi); color: var(--white); font-family: var(--body); font-size: 12.5px; text-decoration: none; }
.cn-all li > a:hover, .cn-all li > a:focus-visible { border-color: var(--glow-hover-edge); color: var(--purple); outline: none; }
.cn-all li > a::after { display: none !important; }   /* no logo tooltip on the names */

/* brand cards sit in centred rows, so a last row with one or two cards stays balanced */
.campaign-list { --cols: 5; --gap: 26px; display: flex !important; flex-wrap: wrap; justify-content: center; gap: var(--gap) !important; }
.campaign-list > .campaign { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (max-width: 1150px) { .campaign-list { --cols: 4; } }
@media (max-width: 900px)  { .campaign-list { --cols: 3; } }
@media (max-width: 640px)  { .campaign-list { --cols: 2; --gap: 20px; } }

/* brand cards: a wordmark logo stands in for the brand name, and every header is the same height so the videos line up */
.campaign-head { align-content: flex-start; min-height: 86px; }
.campaign-head img.brand-logo { width: auto; max-width: 150px; height: 28px; border-radius: 4px; object-fit: contain; background: none; }
.campaign-head img.brand-logo.brand-logo--wide { max-width: min(170px, 100%); height: 26px; }
.campaign-brand--wordmark { min-width: 0; }
.campaign-brand--wordmark h3 { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* ---------- 2. Dahlia emblem ----------------------------------------------
   js/petals.js draws the flower and drives its turn, lean, spin and colour
   drift, so the template's plain CSS rotation steps aside. */
.duo-orb .bloom.bloom-live { animation: none; will-change: transform, filter; }
.duo-orb.bloom-spin .bloom.bloom-live { animation: bloom-flick .9s cubic-bezier(.2, .7, .2, 1); }


/* ---------- 3. Her name ---------------------------------------------------
   Allura, a clear and elegant cursive, hosted with the site. Each letter takes
   its own colour from js/hero.js (deep wine through to rose), and is lifted off
   the page: a light top edge, a darker edge of its own colour underneath, then
   a soft falling shadow. */
@font-face { font-family: "Allura"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/allura.woff2") format("woff2"); }

.wordmark.wordmark--script,
.wordmark.wordmark--script .wm-layer,
.wordmark.wordmark--script .c { font-family: "Allura", "Snell Roundhand", "Apple Chancery", cursive !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; }

.brand-lockup { align-items: center; }
.brand-lockup .wordmark.wordmark--script { padding: .06em .12em 0; font-size: clamp(64px, 9.5vw, 96px) !important; line-height: 1.05 !important; white-space: nowrap; }
.brand-lockup .wordmark.wordmark--script .wm-alt { left: 50%; font-size: .6em; transform: translate(-50%, -50%); }
.site-footer .wordmark.wordmark--script { font-size: 34px !important; }

/* !important: the template paints the name with a single colour and a glow from several places; her name always wears these instead */
.wordmark.wordmark--script .wm-real .c {
  --ink: var(--tc, #8a1b37);
  color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important;
  text-shadow:
    0 -1px 0 rgba(255, 251, 242, .95),
    0 1px 0 color-mix(in srgb, var(--ink) 62%, #2a0710),
    0 2px 0 color-mix(in srgb, var(--ink) 46%, #2a0710),
    0 3px 2px rgba(42, 7, 16, .34),
    0 7px 9px rgba(74, 13, 28, .22),
    0 18px 28px rgba(74, 13, 28, .17) !important;
}
.site-footer .wordmark.wordmark--script .wm-real .c { text-shadow: 0 -1px 0 rgba(255, 251, 242, .9), 0 1px 0 color-mix(in srgb, var(--ink) 55%, #2a0710), 0 3px 5px rgba(74, 13, 28, .22) !important; }


/* her call to action, centred under her name: a burgundy button with her email beneath.
   The whole thing can be nudged and springs back (js/hero-mail.js, js/spring.js) */
.hero-mail { display: inline-flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 22px; color: var(--muted); text-decoration: none; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
  transition: transform .62s cubic-bezier(.18, 1.45, .4, 1); }
.hero-mail-pill { display: inline-flex; align-items: center; gap: 11px; padding: 13px 26px 13px 22px; border-radius: 999px; color: #fff8ee;
  background: linear-gradient(135deg, #8e2040 0%, #76162e 48%, #4a0d1c 100%);
  font-family: var(--body); font-size: clamp(13px, 1.5vw, 14.5px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 240, 236, .28), inset 0 -1px 0 rgba(43, 8, 16, .4), 0 12px 22px -12px rgba(74, 13, 28, .65), 0 3px 6px -3px rgba(74, 13, 28, .4);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, filter .3s ease; }
.hero-mail-icon { flex: none; width: 18px; height: 18px; opacity: .92; }
.hero-mail-text { font-family: var(--body); font-size: 12.5px; letter-spacing: .06em; color: var(--muted); transition: color .3s ease; }
.hero-mail:hover .hero-mail-pill, .hero-mail:focus-visible .hero-mail-pill { transform: translateY(-3px); filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 240, 236, .34), inset 0 -1px 0 rgba(43, 8, 16, .4), 0 20px 30px -14px rgba(74, 13, 28, .7), 0 0 0 5px rgba(142, 32, 64, .12), 0 0 34px rgba(142, 32, 64, .38); }
.hero-mail:hover .hero-mail-text, .hero-mail:focus-visible .hero-mail-text { color: #76162e; }
.hero-mail:focus-visible { outline: none; } .hero-mail:focus-visible .hero-mail-pill { outline: 2px solid #76162e; outline-offset: 4px; }
.hero-mail.is-dragging { cursor: grabbing; transition: none; }

/* what she creates, in the contact card, right where a brand decides to write */
.contact-card .contact-kicker { margin: 16px 0 8px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.contact-card .format-pills { margin-bottom: 18px; }
.contact-card .format-pills span { padding: 7px 12px; font-size: 12px; }


/* ---------- 4. Portrait aura ----------------------------------------------
   A halo of rose, plum and candle-gold turns slowly behind her portrait, a fine
   gold ring breathes around it like a moon halo, and a few glints twinkle. */
.joy-aura { position: absolute; left: 50%; top: 47%; z-index: 1; width: min(470px, 128%); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.joy-aura::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(222, 128, 158, .62), rgba(236, 200, 146, .56), rgba(150, 62, 118, .5), rgba(248, 216, 224, .66), rgba(196, 62, 98, .5), rgba(236, 200, 146, .5), rgba(222, 128, 158, .62));
  -webkit-mask: radial-gradient(closest-side, transparent 34%, #000 60%, transparent 98%); mask: radial-gradient(closest-side, transparent 34%, #000 60%, transparent 98%);
  filter: blur(26px) hue-rotate(calc(var(--tone, 0) * 10deg)); animation: aura-turn 28s linear infinite, aura-breathe 7s ease-in-out infinite; }
.joy-aura::after { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(206, 164, 96, .7); border-radius: 50%;
  box-shadow: 0 0 14px rgba(236, 200, 146, .55), inset 0 0 20px rgba(244, 196, 210, .4);
  -webkit-mask: conic-gradient(from 0deg, #000 0 22%, transparent 36% 52%, #000 66% 80%, transparent 92%); mask: conic-gradient(from 0deg, #000 0 22%, transparent 36% 52%, #000 66% 80%, transparent 92%);
  animation: aura-turn 46s linear infinite reverse; }
.joy-aura b { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 226, .75), rgba(246, 206, 216, .35) 60%, transparent); filter: blur(10px); animation: aura-breathe 5.5s ease-in-out infinite reverse; }
.joy-aura i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; opacity: 0;
  background: radial-gradient(closest-side, #fff8e6, rgba(236, 200, 146, .9) 45%, transparent 70%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)) scale(var(--s, 1));
  animation: aura-glint var(--d, 5s) ease-in-out var(--w, 0s) infinite; }
.joy-aura i:nth-of-type(1) { --a: 18deg;  --r: 205px; --d: 5.2s; --w: 0s; }
.joy-aura i:nth-of-type(2) { --a: 64deg;  --r: 188px; --d: 6.4s; --w: 1.7s; --s: .7; }
.joy-aura i:nth-of-type(3) { --a: 118deg; --r: 212px; --d: 7.1s; --w: 3.1s; --s: 1.2; }
.joy-aura i:nth-of-type(4) { --a: 171deg; --r: 180px; --d: 5.8s; --w: .9s;  --s: .6; }
.joy-aura i:nth-of-type(5) { --a: 228deg; --r: 208px; --d: 6.9s; --w: 2.4s; }
.joy-aura i:nth-of-type(6) { --a: 284deg; --r: 192px; --d: 5.5s; --w: 4s;   --s: .8; }
.joy-aura i:nth-of-type(7) { --a: 332deg; --r: 214px; --d: 7.6s; --w: 1.2s; --s: 1.1; }

@keyframes aura-turn    { to { rotate: 360deg; } }
@keyframes aura-breathe { 0%, 100% { opacity: .78; scale: .97; } 50% { opacity: 1; scale: 1.04; } }
@keyframes aura-glint   { 0%, 62%, 100% { opacity: 0; } 74% { opacity: .95; } 86% { opacity: .25; } }

@media (max-width: 640px) {
  .joy-aura { width: 330px; }
  .joy-aura i { --r: 140px !important; }
}


/* ---------- 5. Hero phones ------------------------------------------------
   Joy is the centrepiece. Four pieces of her work stand beside her as phones,
   two on each side, each playing in its true 9:16 shape. js/hero-cards.js lets
   a visitor nudge a phone around; it springs back when released. */
.hero { position: relative; isolation: isolate; }

.joy-cards { --w: clamp(70px, 20.5vw, 128px); --half: 108px; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.joy-card { position: absolute; display: block; width: var(--w); container-type: inline-size; color: var(--purple); text-decoration: none; outline: none;
  pointer-events: auto; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
  transition: transform .62s cubic-bezier(.18, 1.45, .4, 1); }
.joy-card.is-dragging { z-index: 6; cursor: grabbing; transition: none; }

.joy-card.jc-1 { left:  max(6px,  calc(50% - var(--half) - var(--w) + 2px)); top: 26px; rotate: -3.5deg; }
.joy-card.jc-2 { left:  max(10px, calc(50% - var(--half) - var(--w) + 8px)); top: calc(26px + var(--w) * 1.78 + 44px); rotate: 2.5deg; }
.joy-card.jc-3 { right: max(6px,  calc(50% - var(--half) - var(--w) + 2px)); top: 26px; rotate: 3.5deg; }
.joy-card.jc-4 { right: max(10px, calc(50% - var(--half) - var(--w) + 8px)); top: calc(26px + var(--w) * 1.78 + 44px); rotate: -2.5deg; }

/* the phone: dark metal body, thin black bezel, camera pill, side buttons, a faint glass reflection */
.jc-frame { position: relative; display: block; padding: 4.2cqw; border-radius: 17cqw;
  background: linear-gradient(140deg, #5a5053 0%, #2a2427 22%, #151216 55%, #3a3336 100%);
  box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .16), inset 0 0 0 1.5cqw #0a080b, 0 16px 30px -12px rgba(40, 8, 18, .55), 0 5px 10px -5px rgba(40, 8, 18, .35);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.jc-screen { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 13cqw; background: #050406; }
.jc-screen > video, .jc-screen > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; }
.jc-screen > img { animation: jc-drift 11s ease-in-out infinite alternate; }
.jc-screen::before { content: ""; position: absolute; z-index: 2; top: 3.2cqw; left: 50%; width: 27cqw; height: 7.4cqw; translate: -50% 0; border-radius: 999px; background: #050406; box-shadow: inset 0 0 0 .4cqw rgba(255, 255, 255, .05); }
.jc-screen::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .06) 20%, rgba(255, 255, 255, 0) 38%); }
.jc-btns { position: absolute; inset: 0; pointer-events: none; }
.jc-btns::before { content: ""; position: absolute; right: -1.6cqw; top: 30%; width: 1.8cqw; height: 15%; border-radius: 0 1cqw 1cqw 0; background: linear-gradient(90deg, #1b171a, #4a4245); }
.jc-btns::after  { content: ""; position: absolute; left: -1.6cqw;  top: 21%; width: 1.8cqw; height: 7%;  border-radius: 1cqw 0 0 1cqw; background: linear-gradient(270deg, #1b171a, #4a4245); box-shadow: 0 12cqw 0 0 #332c2f, 0 27cqw 0 0 #332c2f; }

.joy-card:hover .jc-frame, .joy-card:focus-visible .jc-frame, .joy-card.is-dragging .jc-frame { transform: translateY(-4px) scale(1.03);
  box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .2), inset 0 0 0 1.5cqw #0a080b, 0 26px 44px -14px rgba(40, 8, 18, .62), 0 0 0 1px var(--glow-hover-edge); }

.jc-label { display: block; margin-top: 6px; font-family: var(--body); font-size: 7.5px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-align: center; text-transform: uppercase; text-wrap: balance; }
.jc-label i { display: block; margin-top: 1px; font-size: 1.12em; font-style: normal; font-weight: 500; letter-spacing: .03em; text-transform: none; color: var(--muted); }

@keyframes jc-drift { from { scale: 1; translate: 0 0; } to { scale: 1.09; translate: 0 -2%; } }

@media (min-width: 641px) {
  .joy-cards { --half: 176px; }
}
@media (max-width: 1239px) {
  .hero > .hero-side { margin-bottom: clamp(30px, 7vw, 64px) !important; }   /* room for the lower phones' labels above her name */
}
@media (min-width: 1240px) {
  .joy-card { top: 43% !important; translate: 0 -50%; }
  .joy-card.jc-1 { left:  calc(50% - 262px - 166px - 26px - 146px); width: 146px; top: 49% !important; rotate: -3deg; }
  .joy-card.jc-2 { left:  calc(50% - 262px - 166px); right: auto; width: 166px; rotate: -1.5deg; }
  .joy-card.jc-3 { right: calc(50% - 262px - 166px); left: auto;  width: 166px; rotate: 1.5deg; }
  .joy-card.jc-4 { right: calc(50% - 262px - 166px - 26px - 146px); width: 146px; top: 49% !important; rotate: 3deg; }
  .jc-label { margin-top: 9px; font-size: 10px; letter-spacing: .14em; }
}


/* ---------- 6. Photo strips -----------------------------------------------
   Photos are shown whole, in their own shape: portraits stay portrait and
   landscapes stay landscape. No haze, no faded edges, no repeated caption. */
.live-row { -webkit-mask-image: none !important; mask-image: none !important; }
.live-row .live-shot { flex: 0 0 auto !important; width: auto !important; height: clamp(260px, 62vw, 380px) !important; aspect-ratio: auto !important; overflow: hidden;
  border-radius: 14px !important; background: transparent !important; box-shadow: 0 12px 26px -16px rgba(74, 13, 28, .4); }
.live-row .live-shot img { display: block; width: auto !important; max-width: none !important; height: 100% !important; object-fit: contain !important; }
.live-row .live-shot::after { background: none !important; box-shadow: none !important; }
.live-row .live-shot figcaption { display: none !important; }


/* ---------- 7. Second page ------------------------------------------------
   "Petals & Passports" is a long name, so it scales with the screen and always fits. */
.sub-brand .brand-lockup .wordmark.wordmark--script,
.page-music .brand-lockup .wordmark.wordmark--script { max-width: 100%; font-size: clamp(30px, 12.4vw, 84px) !important; }


/* ---------- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .joy-aura::before, .joy-aura::after, .joy-aura b, .joy-aura i { animation: none; }
  .joy-aura i { opacity: .5; }
  .joy-card, .jc-frame, .hero-mail, .hero-mail-pill { transition: none; }
  .jc-screen > img { animation: none; }
}


/* ---------- 8. Look choices -----------------------------------------------
   Set on the "Edit my site" page and applied by js/config-live.js as
   <html data-profile="…" data-cards="…">. The layout never changes; only how
   the portrait is presented and where the phones sit.

   data-cards:    beside (default, section 5) · row · fan
   data-profile:  halo (default) · frame · circle */

/* phones in a row, or a fan, under her name */
html[data-cards="row"] .joy-cards,
html[data-cards="fan"] .joy-cards { --w: clamp(68px, 19.5vw, 150px); position: static; inset: auto; grid-row: 3; display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 2.4vw, 24px); width: min(760px, 100%); margin-top: 18px; pointer-events: auto; }
html[data-cards="row"] .joy-card,
html[data-cards="fan"] .joy-card { position: relative !important; inset: auto !important; flex: 0 1 var(--w); width: var(--w) !important; translate: none; rotate: none; }
html[data-cards="row"] .hero > .hero-side,
html[data-cards="fan"] .hero > .hero-side { margin-bottom: 0 !important; }

html[data-cards="fan"] .joy-cards { gap: 0; margin-top: 26px; }
html[data-cards="fan"] .joy-card { margin-inline: calc(var(--w) * -.07); }
html[data-cards="fan"] .joy-card.jc-1 { rotate: -10deg; translate: 0 16px; }
html[data-cards="fan"] .joy-card.jc-2 { rotate: -3.5deg; z-index: 1; }
html[data-cards="fan"] .joy-card.jc-3 { rotate: 3.5deg; z-index: 1; }
html[data-cards="fan"] .joy-card.jc-4 { rotate: 10deg; translate: 0 16px; }

/* the portrait as a clean framed card, or a circle: no mist, no cut-out layer */
html[data-profile="frame"] .hero-portrait-wrap :is(.pm-mist, .pm-veil, .pm-sheen, .pm-scan, .hero-cutout, .pm-wall, .pm-net),
html[data-profile="circle"] .hero-portrait-wrap :is(.pm-mist, .pm-veil, .pm-sheen, .pm-scan, .hero-cutout, .pm-wall, .pm-net) { display: none !important; }

html[data-profile="frame"] .portrait-card,
html[data-profile="circle"] .portrait-card { display: block; overflow: hidden !important; border: 1px solid rgba(255, 253, 246, .92); border-radius: 24px !important; background: var(--card) !important;
  -webkit-mask: none !important; mask: none !important; filter: none !important;
  box-shadow: 0 1px 0 rgba(255, 253, 246, .9), 0 26px 48px -20px rgba(74, 13, 28, .5), 0 8px 16px -10px rgba(74, 13, 28, .28) !important; }
html[data-profile="frame"] .hero-portrait,
html[data-profile="circle"] .hero-portrait { display: block; width: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; transform: none !important; -webkit-mask: none !important; mask: none !important; }

html[data-profile="circle"] .portrait-card { aspect-ratio: 1; border-radius: 50% !important; }
html[data-profile="circle"] .hero-portrait { height: 100% !important; aspect-ratio: 1 !important; object-fit: cover; object-position: 50% 20%; }

/* ==========================================================================
   9 · Device shells
   Every featured-video card is drawn as a phone, and the two larger cards
   under them (About, Contact) as tablets. A shell is: a bezel (the border), a
   metal edge and optional case (box-shadow rings), a camera (::before) and
   side buttons (::after, painted with gradients so it needs no extra markup).
   Six phone finishes repeat down the list; change one by editing its variables.
   --dv-shell bezel · --dv-edge metal rim · --dv-case colour · --dv-case-w thickness (0 = no case)
   ========================================================================== */
.campaign-list > .campaign, .about-block, .contact-card {
  --dv-shell: #1c1b1f; --dv-edge: #55525a; --dv-case: transparent; --dv-case-w: 0px; --dv-btn: var(--dv-edge); --dv-bezel: 8px;
  position: relative; border: var(--dv-bezel) solid var(--dv-shell) !important;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .5), 0 0 0 1.5px var(--dv-edge), 0 0 0 calc(1.5px + var(--dv-case-w)) var(--dv-case),
              0 calc(1px + var(--dv-case-w)) 0 calc(1.5px + var(--dv-case-w)) rgba(0, 0, 0, .18),
              0 34px 44px -26px rgba(43, 20, 25, .5), 0 12px 18px -12px rgba(43, 20, 25, .3) !important;
}
.campaign-list > .campaign::before, .about-block::before, .contact-card::before { content: ""; position: absolute; z-index: 2; left: 50%; translate: -50% 0; background: #08080a; pointer-events: none; }
.campaign-list > .campaign::after, .about-block::after, .contact-card::after { content: ""; position: absolute; pointer-events: none; --dv-out: calc(var(--dv-bezel) + 3.5px + var(--dv-case-w)); }

/* phones */
.campaign-list > .campaign { padding: 36px 11px 20px !important; border-radius: 40px !important;
  background: linear-gradient(rgba(43, 20, 25, .28), rgba(43, 20, 25, .28)) center calc(100% - 7px) / 36% 4px no-repeat, var(--card) !important; }
.campaign-list > .campaign::before { top: 9px; width: 30%; max-width: 64px; height: 17px; border-radius: 999px; box-shadow: inset -6px 0 0 -3px #1d2233; }   /* camera island */
.campaign-list > .campaign::after { inset: 0 calc(var(--dv-out) * -1);
  background: linear-gradient(var(--dv-btn), var(--dv-btn)) right 104px / 3px 58px no-repeat,
              linear-gradient(var(--dv-btn), var(--dv-btn)) left 84px / 3px 22px no-repeat,
              linear-gradient(var(--dv-btn), var(--dv-btn)) left 122px / 3px 40px no-repeat,
              linear-gradient(var(--dv-btn), var(--dv-btn)) left 170px / 3px 40px no-repeat; }
.campaign-list > .campaign .campaign-head { min-height: 78px; }
.campaign-list > .campaign .campaign-handle { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.campaign-list > .campaign:nth-child(6n+2) { --dv-case: #7a1d36; --dv-case-w: 5px; --dv-btn: #5c1428; }                                  /* burgundy case */
.campaign-list > .campaign:nth-child(6n+3) { --dv-shell: #e9e5dc; --dv-edge: #b9b3a6; }                                              /* starlight, bare */
.campaign-list > .campaign:nth-child(6n+4) { --dv-case: #8c9a78; --dv-case-w: 5px; --dv-btn: #6f7c5d; }                                  /* sage case */
.campaign-list > .campaign:nth-child(6n+5) { --dv-shell: #f0d6cc; --dv-edge: #c9a093; }                                              /* rose gold, bare */
.campaign-list > .campaign:nth-child(6n+6) { --dv-shell: #23283a; --dv-edge: #5a6078; --dv-case: rgba(255, 253, 246, .6); --dv-case-w: 4px; --dv-btn: #c9c3b6; }   /* midnight in a clear case */
.campaign-list > .campaign:nth-child(6n+3), .campaign-list > .campaign:nth-child(6n+5) { box-shadow: inset 0 0 0 1.5px rgba(43, 20, 25, .22), 0 0 0 1.5px var(--dv-edge), 0 34px 44px -26px rgba(43, 20, 25, .5), 0 12px 18px -12px rgba(43, 20, 25, .3) !important; }
.campaign-list > .campaign:nth-child(3n)::before { top: 11px; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 3px #08080a, inset 0 0 0 6px #1d2233; }   /* punch-hole camera */
.campaign-list > .campaign:nth-child(6n+4)::before { top: -1px; width: 44%; max-width: 92px; height: 19px; border-radius: 0 0 13px 13px; box-shadow: none; }                    /* notch */

/* tablets */
.about-block, .contact-card { --dv-bezel: 13px; border-radius: 34px !important; }
.about-block::before, .contact-card::before { top: -9px; width: 6px; height: 6px; border-radius: 50%; background: #3b3a42; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }   /* camera in the bezel */
.about-block::after, .contact-card::after { inset: calc(var(--dv-out) * -1) 0 0;
  background: linear-gradient(var(--dv-btn), var(--dv-btn)) calc(100% - 46px) 0 / 44px 3px no-repeat,
              linear-gradient(var(--dv-btn), var(--dv-btn)) calc(100% - 104px) 0 / 28px 3px no-repeat; }
.contact-card { --dv-shell: #ebe7de; --dv-edge: #b9b3a6; --dv-case: #7a1d36; --dv-case-w: 6px; --dv-btn: #5c1428; }                             /* starlight tablet in a burgundy case */
.contact-card::before { background: #9a958b; }

@media (max-width: 640px) {
  .campaign-list > .campaign { --dv-bezel: 6px; padding: 30px 8px 18px !important; border-radius: 30px !important; }
  .campaign-list > .campaign::before { top: 7px; height: 14px; }
  .campaign-list > .campaign:nth-child(3n)::before { top: 8px; width: 11px; height: 11px; }
  .campaign-list > .campaign:nth-child(6n+2), .campaign-list > .campaign:nth-child(6n+4) { --dv-case-w: 4px; }
  .about-block, .contact-card { --dv-bezel: 10px; border-radius: 28px !important; }
}

/* ==========================================================================
   10 · Header close to the portrait
   About and Contact sit just above her photo instead of far up the page:
   near enough to read as part of the hero, with clear air around the aura.
   ========================================================================== */
.hero.wrap { padding-top: clamp(14px, 2.4vw, 30px) !important; }