/* ==========================================================================
   Shortnshare bio pages (2026, revision 2).
   The published page is NOT an app screen. It keeps its own token system and
   its six themes; it must never load sns.css. The contract's scales
   (docs/design/design-system.md) are restated here as profile-page tokens:
   spacing on the 4px scale, radii 8/10/14/20/full, the type sizes, the
   near-invisible shadows, and the motion durations.

   Colour literals appear only inside token declarations: the :root defaults,
   the body[data-theme] blocks, and the decoration block that belongs to each
   theme. Nothing else in this file hardcodes a colour, size, radius, shadow
   or spacing value.

   Six themes, six identities. Editorial is warm paper and a serif. Electric
   is deep navy and one lime. Luxe is black, gold and centred. Pop is blush
   with hard shapes and hard shadows. Pastel is sage and quiet. Iridescent is
   white with soft gradient light.
   ========================================================================== */

/* --- Scales, restated from the contract ----------------------------------- */

:root{
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;

  --fs-h2:1.75rem;
  --fs-h3:1.25rem;
  --fs-lg:1.0625rem;
  --fs-base:0.9375rem;
  --fs-sm:0.8125rem;
  --fs-xs:0.75rem;
  --fs-eyebrow:0.6875rem;
  --fs-name:clamp(2.5rem, 9vw, 3.25rem);

  --sh-xs:0 1px 2px rgba(14,16,32,.04);
  --sh-sm:0 1px 3px rgba(14,16,32,.06), 0 1px 2px rgba(14,16,32,.04);
  --sh-md:0 8px 24px rgba(14,16,32,.08);
  --sh-lg:0 24px 60px rgba(14,16,32,.10);

  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;

  --f-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-serif:Georgia,'Iowan Old Style','Times New Roman',serif;

  /* Defaults. Every published body sets a theme; these keep an unthemed
     embed sane rather than unstyled.

     Every token below carries a literal. A declaration like
     `--soc-ink: var(--ink)` would look tidy here and be wrong: a custom
     property is substituted where it is DECLARED, so the alias would freeze
     to this block's --ink and no theme could ever move it. Aliases are used
     only for tokens no theme overrides, such as the radius scale. */
  --page:#FFFFFF; --ink:#111527; --ink-2:#2A3040; --muted:#6B7186;
  --surface:#FFFFFF; --line:rgba(17,21,39,.12); --line-2:rgba(17,21,39,.20);
  --accent:#6560E9; --accent-ink:#FFFFFF; --accent-soft:rgba(101,96,233,.12);
  --num:#6560E9; --row-ink:#111527; --row-icon:#6560E9;
  --row-bg:#FFFFFF; --row-line:rgba(17,21,39,.12); --row-shadow:none;
  --btn-bg:#6560E9; --btn-ink:#FFFFFF; --btn-shadow:none;
  --btn-h:56px; --btn-radius:var(--r-md); --row-radius:var(--r-md);
  --soc-ink:#111527; --soc-line:rgba(17,21,39,.12); --soc-bg:transparent;
  --bar-ink:#111527; --bar-line:rgba(17,21,39,.20);
  --eyebrow-ink:#6B7186;
  --f-head:var(--f-sans); --f-body:var(--f-sans);
  --head-weight:800; --head-spacing:-.025em; --head-leading:.96;
  --bio-style:normal;
  --avatar-display:none;
}

/* ==========================================================================
   Themes. Each block declares only tokens; the structure below is shared.
   ========================================================================== */

/* --- 1 EDITORIAL - warm paper, a serif, terracotta ------------------------ */
body[data-theme="editorial"]{
  --page:#F7F2E7; --ink:#1A1713; --ink-2:#3B352C; --muted:#6B6355;
  --surface:transparent; --line:rgba(26,23,19,.16); --line-2:rgba(26,23,19,.30);
  --accent:#B8442A; --accent-ink:#FFFFFF; --accent-soft:rgba(184,68,42,.10);
  --num:#B8442A; --row-ink:#1A1713; --row-icon:#1A1713;
  --row-bg:transparent; --row-line:transparent; --row-radius:0; --row-shadow:none;
  --btn-bg:#B8442A; --btn-ink:#FFFFFF; --btn-shadow:none;
  --btn-h:58px; --btn-radius:var(--r-md);
  --soc-ink:#1A1713; --soc-line:rgba(26,23,19,.30); --soc-bg:transparent;
  --bar-ink:#1A1713; --bar-line:rgba(26,23,19,.30);
  --eyebrow-ink:#6B6355;
  --f-head:var(--f-serif); --head-weight:700; --head-spacing:-.02em; --head-leading:.92;
  --fs-name:clamp(2.75rem, 11vw, 3.5rem);
  --avatar-display:block;
}

/* --- 2 ELECTRIC - deep navy night, one lime ------------------------------- */
body[data-theme="electric"]{
  --page:#0A1A47; --ink:#FFFFFF; --ink-2:#E4EAFB; --muted:rgba(255,255,255,.62);
  --surface:#0D2153; --line:rgba(122,160,255,.30); --line-2:rgba(122,160,255,.42);
  --accent:#D4FF3D; --accent-ink:#0A1A47; --accent-soft:rgba(212,255,61,.12);
  --num:#6B9BFF; --row-ink:#FFFFFF; --row-icon:#FFFFFF;
  --row-bg:#0D2153; --row-line:rgba(107,155,255,.38);
  --row-radius:var(--r-md); --row-shadow:none;
  --btn-bg:#D4FF3D; --btn-ink:#0A1A47; --btn-shadow:none;
  --soc-ink:#FFFFFF; --soc-line:rgba(122,160,255,.42); --soc-bg:transparent;
  --bar-ink:#FFFFFF; --bar-line:rgba(122,160,255,.42);
  --eyebrow-ink:#D4FF3D;
}

/* --- 3 LUXE - black and gold, a serif, centred ---------------------------- */
body[data-theme="luxe"]{
  --page:#151311; --ink:#F6F1E6; --ink-2:#E8E0D0; --muted:rgba(246,241,230,.55);
  --surface:transparent; --line:rgba(206,173,105,.32); --line-2:rgba(206,173,105,.50);
  --accent:#CEAD69; --accent-ink:#1A1610; --accent-soft:rgba(206,173,105,.12);
  --num:#CEAD69; --row-ink:#F6F1E6; --row-icon:#CEAD69;
  --row-bg:transparent; --row-line:rgba(206,173,105,.30);
  --row-radius:var(--r-sm); --row-shadow:none;
  --btn-bg:linear-gradient(180deg,#EBD4A0 0%,#C9A961 100%);
  --btn-ink:#1A1610; --btn-radius:var(--r-sm); --btn-shadow:none;
  --soc-ink:#CEAD69; --soc-line:rgba(206,173,105,.42); --soc-bg:transparent;
  --bar-ink:#F6F1E6; --bar-line:rgba(206,173,105,.42);
  --eyebrow-ink:rgba(246,241,230,.55);
  --f-head:var(--f-serif); --head-weight:600; --head-spacing:-.01em; --head-leading:1;
  --bio-style:italic;
  --avatar-display:block;
}

/* --- 4 POP - blush paper, hard shapes, hard shadows ----------------------- */
body[data-theme="pop"]{
  --page:#FDECE8; --ink:#111A3D; --ink-2:#2C3557; --muted:#5A6180;
  --surface:#FFFFFF; --line:rgba(17,26,61,.18); --line-2:#111A3D;
  --accent:#FF5A45; --accent-ink:#FFFFFF; --accent-soft:rgba(255,90,69,.12);
  --num:#7C3AED; --row-ink:#111A3D; --row-icon:#7C3AED;
  --row-bg:#FFFFFF; --row-line:#7C3AED;
  --row-radius:var(--r-md); --row-shadow:3px 3px 0 #7C3AED;
  --btn-bg:#FF5A45; --btn-ink:#111A3D; --btn-shadow:3px 3px 0 #111A3D;
  --soc-ink:#111A3D; --soc-line:#111A3D; --soc-bg:#FFFFFF;
  --bar-ink:#111A3D; --bar-line:#111A3D;
  --eyebrow-ink:#5A6180;
  --head-weight:800; --head-spacing:-.035em; --head-leading:.88;
}

/* --- 5 PASTEL - sage paper, leaves, quiet --------------------------------- */
body[data-theme="pastel"]{
  --page:#EEF3EA; --ink:#1E3A2B; --ink-2:#2F4A39; --muted:#5F7365;
  --surface:#FFFFFF; --line:rgba(30,58,43,.14); --line-2:rgba(30,58,43,.24);
  --accent:#1C3628; --accent-ink:#FFFFFF; --accent-soft:rgba(28,54,40,.08);
  --num:#1E3A2B; --row-ink:#1E3A2B; --row-icon:#1E3A2B;
  --row-bg:#FFFFFF; --row-line:rgba(30,58,43,.14);
  --row-radius:var(--r-md); --row-shadow:none;
  --btn-bg:#1C3628; --btn-ink:#FFFFFF; --btn-shadow:none;
  --soc-ink:#1E3A2B; --soc-line:rgba(30,58,43,.16); --soc-bg:#FFFFFF;
  --bar-ink:#1E3A2B; --bar-line:rgba(30,58,43,.24);
  --eyebrow-ink:#5A7263;
  --head-weight:700; --head-spacing:-.025em; --head-leading:.95;
}

/* --- 6 IRIDESCENT - white page, soft gradient light ----------------------- */
body[data-theme="iridescent"]{
  --page:#FDFCFF; --ink:#111527; --ink-2:#2A3040; --muted:#6B7186;
  --surface:#FFFFFF; --line:rgba(17,21,39,.10); --line-2:rgba(123,47,247,.30);
  --accent:#7B2FF7; --accent-ink:#FFFFFF; --accent-soft:rgba(123,47,247,.10);
  --num:#7B2FF7; --row-ink:#111527; --row-icon:#7B2FF7;
  --row-bg:#FFFFFF; --row-line:rgba(123,47,247,.32);
  --row-radius:var(--r-md); --row-shadow:none;
  --btn-bg:#7B2FF7; --btn-ink:#FFFFFF; --btn-shadow:none;
  --soc-ink:#7B2FF7; --soc-line:rgba(123,47,247,.28); --soc-bg:#FFFFFF;
  --bar-ink:#111527; --bar-line:rgba(123,47,247,.30);
  --eyebrow-ink:#6B7186;
  --head-weight:800; --head-spacing:-.03em; --head-leading:.95;
  --bio-style:italic;
}

/* Legacy theme ids keep working by mapping onto the six. */
body[data-theme="neon"],body[data-theme="midnight"]{
  --page:#0A1A47; --ink:#FFFFFF; --ink-2:#E4EAFB; --muted:rgba(255,255,255,.62);
  --surface:#0D2153; --line:rgba(122,160,255,.30); --line-2:rgba(122,160,255,.42);
  --accent:#D4FF3D; --accent-ink:#0A1A47;
  --num:#6B9BFF; --row-icon:#FFFFFF; --row-ink:#FFFFFF;
  --row-bg:#0D2153; --row-line:rgba(107,155,255,.38);
  --soc-ink:#FFFFFF; --soc-line:rgba(122,160,255,.42);
  --bar-ink:#FFFFFF; --bar-line:rgba(122,160,255,.42);
  --btn-bg:#D4FF3D; --btn-ink:#0A1A47;
}
body[data-theme="aurora"]{
  --accent:#0F766E; --accent-ink:#FFFFFF; --num:#0F766E; --row-icon:#0F766E;
  --btn-bg:#0F766E; --btn-ink:#FFFFFF; --soc-ink:#0F766E;
}
body[data-theme="minimal"]{
  --page:#F5F5F5; --accent:#374151; --accent-ink:#FFFFFF;
  --num:#374151; --row-icon:#374151; --btn-bg:#374151; --btn-ink:#FFFFFF;
}

/* ==========================================================================
   Shared structure
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--page);color:var(--ink);font-family:var(--f-body);
  font-size:var(--fs-base);-webkit-font-smoothing:antialiased}
body{min-height:100vh}
.shell{max-width:520px;margin:0 auto;min-height:100vh;position:relative;
  overflow:hidden;isolation:isolate}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The mockup shows no section headings; the structure still needs them. */
.h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Top bar --------------------------------------------------------------- */

.hero{padding:var(--sp-6) var(--sp-6) var(--sp-2);position:relative;z-index:2}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:0 0 var(--sp-8);position:relative;z-index:3}
.brand{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.brand .mark{width:38px;height:38px;border-radius:var(--r-full);display:flex;
  align-items:center;justify-content:center;font-family:var(--f-head);font-weight:600;
  font-size:var(--fs-xs);letter-spacing:.06em;border:1px solid var(--bar-line);
  color:var(--bar-ink);overflow:hidden;flex:0 0 38px}
.brand .mark img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full)}
.brand .bname{font-weight:600;letter-spacing:.18em;font-size:var(--fs-xs);
  color:var(--bar-ink);text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.share{width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;
  justify-content:center;border:1px solid var(--bar-line);color:var(--bar-ink);
  cursor:pointer;background:transparent;flex:0 0 38px;
  transition:background var(--dur-1) var(--ease)}
.share:hover{background:var(--accent-soft)}
.share svg{width:17px;height:17px}

/* --- Hero ------------------------------------------------------------------ */

.hero-inner{position:relative;z-index:2}

.eyebrow{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-4);
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--eyebrow-ink)}
.eyebrow:empty{display:none}

.avatar-wrap{display:var(--avatar-display);margin-bottom:var(--sp-5)}
.avatar{width:170px;height:170px;border-radius:var(--r-full);position:relative}
.avatar .inner{width:100%;height:100%;border-radius:var(--r-full);overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--accent-soft)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .ph{font-family:var(--f-head);font-weight:600;letter-spacing:.06em;
  font-size:var(--fs-h3);color:var(--accent);opacity:1}

.name{font-family:var(--f-head);font-weight:var(--head-weight);
  letter-spacing:var(--head-spacing);font-size:var(--fs-name);
  line-height:var(--head-leading);color:var(--ink);overflow-wrap:break-word}
.role{font-size:var(--fs-lg);margin-top:var(--sp-3);color:var(--ink-2);font-weight:500}
.bio{font-size:var(--fs-base);line-height:1.55;margin-top:var(--sp-2);
  color:var(--muted);font-style:var(--bio-style)}
.bio:empty{display:none}

.cta{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
.cta:empty{margin:0}
.btn{height:var(--btn-h);border-radius:var(--btn-radius);display:flex;align-items:center;
  justify-content:center;gap:var(--sp-3);font-size:var(--fs-lg);font-weight:700;
  font-family:var(--f-body);letter-spacing:-.01em;
  transition:filter var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.btn.primary{background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-shadow)}
.btn.primary:hover{filter:brightness(1.04)}
.btn.ghost{border:1.5px solid var(--accent);color:var(--accent);background:transparent}
.btn.ghost:hover{background:var(--accent-soft)}

/* --- Body, the numbered rows ---------------------------------------------- */

.body{padding:var(--sp-8) var(--sp-6) var(--sp-8);position:relative;z-index:2}
.acc{display:flex;flex-direction:column;gap:var(--sp-3)}
.group{background:var(--row-bg);border:1px solid var(--row-line);
  border-radius:var(--row-radius);overflow:hidden;box-shadow:var(--row-shadow)}
.group-head{display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);cursor:pointer;user-select:none;min-height:62px}
.num{font-family:var(--f-head);font-weight:700;font-size:var(--fs-base);
  color:var(--num);letter-spacing:.02em;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.ic{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;
  justify-content:center;color:var(--row-icon);background:transparent}
.ic svg{width:22px;height:22px}
.group-title{flex:1;font-weight:600;font-size:var(--fs-lg);color:var(--row-ink);
  letter-spacing:-.01em}
.chev{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;
  justify-content:center;color:var(--row-icon);
  transition:transform var(--dur-2) var(--ease)}
.chev svg{width:20px;height:20px}
.group.open .chev{transform:rotate(90deg)}
.group-body{max-height:0;overflow:hidden;transition:max-height var(--dur-3) var(--ease)}
.item{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--row-line);
  transition:background var(--dur-1) var(--ease)}
.item:hover{background:var(--accent-soft)}
.item .txt{flex:1;min-width:0}
.item .t,.item .d{display:block}
.item .t{font-weight:600;font-size:var(--fs-base);color:var(--row-ink)}
.item .d{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.go{width:20px;height:20px;flex:0 0 20px;display:flex;align-items:center;
  justify-content:center;color:var(--row-icon)}
.go svg{width:18px;height:18px}

/* Editorial has no cards: the rows are hairline-ruled instead. */
body[data-theme="editorial"] .acc{gap:0}
body[data-theme="editorial"] .group{border:0;border-top:1px solid var(--line)}
body[data-theme="editorial"] .acc .group:last-child{border-bottom:1px solid var(--line)}
body[data-theme="editorial"] .item{border-top:1px solid var(--line)}

/* --- Featured -------------------------------------------------------------- */

.featured{margin-top:var(--sp-6)}
.feat{display:flex;align-items:center;gap:var(--sp-3);background:var(--row-bg);
  border:1px solid var(--row-line);border-radius:var(--row-radius);
  padding:var(--sp-3);box-shadow:var(--row-shadow)}
.feat .thumb{width:110px;height:78px;border-radius:var(--r-sm);flex:0 0 110px;
  background:var(--accent-soft);background-size:cover;background-position:center}
.feat .ft{flex:1;min-width:0}
.feat .ft strong{display:block;font-size:var(--fs-base);font-weight:600;color:var(--row-ink)}
.feat .ft span{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.feat .view{border:1px solid var(--line-2);color:var(--accent);border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:600;flex:0 0 auto}
.feat .view:hover{background:var(--accent-soft)}

/* --- Socials and footer ---------------------------------------------------- */

.socials{display:flex;justify-content:center;gap:var(--sp-3);
  margin:var(--sp-10) 0 var(--sp-8);flex-wrap:wrap}
.soc{width:42px;height:42px;border-radius:var(--r-full);background:var(--soc-bg);
  border:1px solid var(--soc-line);display:flex;align-items:center;
  justify-content:center;color:var(--soc-ink);
  transition:transform var(--dur-1) var(--ease)}
.soc:hover{transform:translateY(-2px)}
.soc svg{width:19px;height:19px}
.foot{text-align:center;color:var(--muted);font-size:var(--fs-xs);
  padding-bottom:var(--sp-2)}
.foot a{color:var(--muted)}
.powered{text-align:center;font-size:var(--fs-xs);color:var(--muted);
  padding-bottom:var(--sp-6)}
.powered b{color:var(--accent);font-weight:700}
body[data-theme="pop"] .powered b{color:#FF5A45}

/* ==========================================================================
   Per-theme layout and decoration
   ========================================================================== */

/* --- Editorial: the name beside a portrait block, terracotta seal ---------- */
/* A float, not a grid. The bio and the primary button have to run the full
   width once they clear the portrait, and they live inside .hero-text, so
   they are not grid items and could never be made to span. Float gives the
   text the wrap the mockup shows and `clear` gives the button its full
   measure, with no markup change. */
body[data-theme="editorial"] .hero-inner{display:block}
body[data-theme="editorial"] .avatar-wrap{float:right;width:46%;max-width:172px;
  margin:var(--sp-1) 0 var(--sp-4) var(--sp-5);position:relative;display:block}
body[data-theme="editorial"] .avatar{width:100%;max-width:none;aspect-ratio:3/4;
  height:auto;border-radius:var(--r-sm);
  background:linear-gradient(158deg,#EFE7D8 0%,#DED2BD 52%,#CCBFA6 100%)}
body[data-theme="editorial"] .avatar .inner{border-radius:var(--r-sm);
  background:transparent}
body[data-theme="editorial"] .avatar .ph{display:none}
/* The terracotta seal sits over the lower-left corner of the portrait. */
body[data-theme="editorial"] .avatar-wrap::after{content:attr(data-initials);
  position:absolute;left:-14px;top:54%;width:72px;height:72px;
  border-radius:var(--r-full);background:#B8442A;color:#FFF7F0;
  font-family:var(--f-serif);font-weight:600;font-size:var(--fs-h3);
  letter-spacing:.04em;display:flex;align-items:center;justify-content:center}
body[data-theme="editorial"] .role{color:var(--ink-2)}
body[data-theme="editorial"] .role::after{content:"";display:block;width:46px;
  height:2px;background:var(--accent);margin-top:var(--sp-4)}
body[data-theme="editorial"] .bio{margin-top:var(--sp-4)}
body[data-theme="editorial"] .cta{clear:both;margin-top:var(--sp-5)}
@media(max-width:379px){
  body[data-theme="editorial"] .avatar-wrap{float:none;width:100%;max-width:190px;
    margin:var(--sp-5) 0 0}
  body[data-theme="editorial"] .avatar-wrap::after{left:auto;right:-10px}
}

/* --- Electric: one bright blue light in the top-right corner -------------- */
/* The light belongs to the page, not to the 520px column: on a desktop the
   column is narrower than the window, and a glow clipped to it reads as a
   pasted-on rectangle. Anchoring at calc(50% + 190px) keeps it over the
   column's right shoulder at any window width. */
body[data-theme="electric"]{
  background-image:
    radial-gradient(360px 360px at calc(50% + 185px) -70px,
      #4A86FF 0%,#1E52E0 26%,#123BB0 44%,rgba(11,42,143,.45) 60%,rgba(10,26,71,0) 74%),
    radial-gradient(190px 190px at calc(50% + 215px) -40px,
      #9CC4FF 0%,#4A86FF 42%,rgba(10,26,71,0) 70%);
  background-repeat:no-repeat;background-attachment:scroll}

/* --- Luxe: centred, gold rules flanking the seal, two soft dark discs ----- */
body[data-theme="luxe"] .shell::before{content:"";position:absolute;
  top:-70px;right:-90px;width:300px;height:300px;border-radius:var(--r-full);
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 70%),#1C1916;
  z-index:0;pointer-events:none}
body[data-theme="luxe"] .body::after{content:"";position:absolute;
  bottom:-60px;right:-110px;width:250px;height:250px;border-radius:var(--r-full);
  background:#1C1916;z-index:-1;pointer-events:none}
body[data-theme="luxe"] .hero-inner{text-align:center}
body[data-theme="luxe"] .avatar-wrap{display:flex;align-items:center;
  justify-content:center;gap:var(--sp-4);margin-bottom:var(--sp-6)}
body[data-theme="luxe"] .avatar-wrap::before,
body[data-theme="luxe"] .avatar-wrap::after{content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(206,173,105,0),rgba(206,173,105,.55))}
body[data-theme="luxe"] .avatar-wrap::after{
  background:linear-gradient(90deg,rgba(206,173,105,.55),rgba(206,173,105,0))}
body[data-theme="luxe"] .avatar{width:86px;height:86px;flex:0 0 86px;
  border:1px solid var(--accent);background:transparent}
body[data-theme="luxe"] .avatar .inner{background:transparent}
body[data-theme="luxe"] .avatar .ph{font-family:var(--f-serif);color:var(--accent)}
body[data-theme="luxe"] .bio{margin-left:auto;margin-right:auto;max-width:34ch}
body[data-theme="luxe"] .group-head{justify-content:flex-start}

/* --- Pop: hard shapes in the four corners --------------------------------- */
body[data-theme="pop"] .shell::before{content:"";position:absolute;top:0;right:0;
  width:150px;height:150px;background:#FFD84D;border-radius:0 0 0 100%;
  z-index:0;pointer-events:none}
/* z-index:-1 keeps the arc inside .body's stacking context but behind the
   in-flow footer text, which a z-index of 0 would sit on top of. */
body[data-theme="pop"] .body::before{content:"";position:absolute;bottom:0;left:0;
  width:clamp(104px,30vw,146px);height:clamp(104px,30vw,146px);
  background:#FF7A2E;border-radius:0 100% 0 0;
  z-index:-1;pointer-events:none}
/* Two dot grids, drawn as backgrounds rather than as markup. The hero gets a
   little more headroom so the red grid sits above the name, not across it. */
body[data-theme="pop"] .hero-inner{padding-top:var(--sp-6)}
body[data-theme="pop"] .hero::before{content:"";position:absolute;top:70px;left:24px;
  width:54px;height:24px;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,#FF4D3D 2.2px,transparent 2.3px);
  background-size:13px 12px}
body[data-theme="pop"] .body::after{content:"";position:absolute;bottom:86px;right:26px;
  width:54px;height:36px;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,#7C3AED 2.2px,transparent 2.3px);
  background-size:13px 13px}
/* The two orange slashes beside the name. */
body[data-theme="pop"] .name::after{content:"";display:inline-block;
  width:30px;height:30px;margin-left:var(--sp-3);vertical-align:-2px;
  transform:skewX(-16deg);
  background-image:linear-gradient(90deg,#FF7A45 0 7px,transparent 7px 15px,#FF7A45 15px 22px,transparent 22px)}

/* --- Pastel: a soft sage blob and two leaf sprigs -------------------------- */
body[data-theme="pastel"] .shell::before{content:"";position:absolute;
  top:-90px;right:-70px;width:300px;height:300px;border-radius:var(--r-full);
  background:#D8E6D0;opacity:.85;z-index:0;pointer-events:none}
body[data-theme="pastel"] .hero::before{content:"";position:absolute;
  top:80px;right:-4px;width:124px;height:146px;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;background-position:top right;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'><g fill='none' stroke='%232F4A39' stroke-width='2.2' stroke-linecap='round'><path d='M96 6C96 46 78 78 46 100'/><path d='M92 24c-14 2-24 12-26 26 14 2 25-8 26-26z' fill='%233E6B4E' stroke='none'/><path d='M84 54c-15-1-27 7-31 21 14 4 27-4 31-21z' fill='%234B7E5C' stroke='none'/><path d='M70 84c-14-4-28 2-34 15 13 6 28 1 34-15z' fill='%235B9069' stroke='none'/><path d='M100 14c10 6 15 16 13 28-11-3-16-13-13-28z' fill='%233E6B4E' stroke='none'/></g></svg>")}
body[data-theme="pastel"] .body::before{content:"";position:absolute;
  bottom:6px;left:-8px;width:134px;height:150px;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;background-position:bottom left;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'><g fill='none' stroke='%232F4A39' stroke-width='2.2' stroke-linecap='round'><path d='M20 136C20 96 34 62 66 40'/><path d='M26 112c14 3 25 13 27 27-14 2-25-8-27-27z' fill='%233E6B4E' stroke='none'/><path d='M36 82c15 0 27 8 31 22-14 4-27-5-31-22z' fill='%234B7E5C' stroke='none'/><path d='M52 54c14-3 28 3 33 16-13 6-28 0-33-16z' fill='%235B9069' stroke='none'/></g></svg>")}
body[data-theme="pastel"] .eyebrow::after{content:"";display:block;width:46px;
  height:1px;background:var(--line-2);margin-top:var(--sp-3)}

/* --- Iridescent: soft gradient light, top-right and bottom ---------------- */
/* Same reasoning as Electric: the light is the page. */
body[data-theme="iridescent"]{
  background-image:
    radial-gradient(340px 340px at calc(50% + 175px) -30px,
      #E6D2FF 0%,#DCC8FF 20%,#FFD3EC 44%,#D4E6FF 66%,rgba(253,252,255,0) 80%),
    radial-gradient(400px 340px at calc(50% - 185px) calc(100% - 40px),
      #D7EFE3 0%,#DCD6FF 32%,#F3DDFF 56%,rgba(253,252,255,0) 76%);
  background-repeat:no-repeat;background-attachment:scroll}

/* --- Loading and not-found ------------------------------------------------- */

.state{min-height:70vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--sp-3);text-align:center;color:var(--muted);
  padding:0 var(--sp-6)}
.state h2{font-family:var(--f-head);color:var(--ink);font-size:var(--fs-h2)}
.state a{color:var(--accent)}
.state a:hover{text-decoration:underline}
.spin{width:34px;height:34px;border-radius:var(--r-full);border:3px solid var(--line);
  border-top-color:var(--accent);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  /* (0,1,1) specificity: wins over the single-class transition rules above
     without relying on !important. */
  body[data-theme] *,
  body[data-theme] *::before,
  body[data-theme] *::after,
  body:not([data-theme]) *,
  body:not([data-theme]) *::before,
  body:not([data-theme]) *::after{
    transition-duration:0.01ms;
    animation-duration:0.01ms;
  }
}

/* hidden must win: last rule, same specificity as the display classes above */
.hidden{display:none}