:root {
    --bg: #fbfbf9;
    --fg: #14161a;
    --muted: #5d636b;
    --pill: #f0f0ec;
    --pill-line: #e2e2dc;
    --card: #ffffff;
    --btn-bg: #0f1114;
    --btn-fg: #ffffff;
    --mist: #e4eadf;
    --lime: #d4e85a;
    --shadow: 0 18px 40px -18px rgba(20, 22, 26, .35);
    --glass: rgba(255, 255, 255, .72);
    --modal-bg: rgba(10, 12, 16, .64);
    --nav-glass: rgba(18, 22, 30, .88);
    --nav-glass-border: rgba(255, 255, 255, .28);
    --nav-icon: rgba(255, 255, 255, .88);
    --nav-active: rgba(255, 255, 255, .22);
    --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0c0e10;
      --fg: #f1f1ec;
      --muted: #9aa1a8;
      --pill: #1a1d20;
      --pill-line: #2a2e33;
      --card: #15181b;
      --btn-bg: #f1f1ec;
      --btn-fg: #0f1114;
      --mist: #17201a;
      --shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
      --glass: rgba(21, 24, 27, .76);
      --modal-bg: rgba(4, 5, 8, .82);
      --nav-glass: rgba(14, 17, 22, .9);
      --nav-glass-border: rgba(255, 255, 255, .18);
      --nav-icon: rgba(255, 255, 255, .9);
      --nav-active: rgba(255, 255, 255, .2);
      color-scheme: dark;
    }
  }

  :root[data-theme="dark"] {
    --bg: #0c0e10;
    --fg: #f1f1ec;
    --muted: #9aa1a8;
    --pill: #1a1d20;
    --pill-line: #2a2e33;
    --card: #15181b;
    --btn-bg: #f1f1ec;
    --btn-fg: #0f1114;
    --mist: #17201a;
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
    --glass: rgba(21, 24, 27, .76);
    --modal-bg: rgba(4, 5, 8, .82);
    --nav-glass: rgba(14, 17, 22, .9);
    --nav-glass-border: rgba(255, 255, 255, .18);
    --nav-icon: rgba(255, 255, 255, .9);
    --nav-active: rgba(255, 255, 255, .2);
    color-scheme: dark;
  }

  :root[data-theme="light"] {
    --bg: #fbfbf9;
    --fg: #14161a;
    --muted: #5d636b;
    --pill: #f0f0ec;
    --pill-line: #e2e2dc;
    --card: #ffffff;
    --btn-bg: #0f1114;
    --btn-fg: #ffffff;
    --mist: #e4eadf;
    --lime: #d4e85a;
    --shadow: 0 18px 40px -18px rgba(20, 22, 26, .35);
    --glass: rgba(255, 255, 255, .72);
    --modal-bg: rgba(10, 12, 16, .64);
    --nav-glass: rgba(250, 250, 248, .94);
    --nav-glass-border: rgba(20, 22, 26, .14);
    --nav-icon: rgba(20, 22, 26, .82);
    --nav-active: rgba(20, 22, 26, .09);
    color-scheme: light;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; background-color: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  
  * { -webkit-tap-highlight-color: transparent; }
  html[data-theme="light"] { color-scheme: light; }
  html[data-theme="dark"] { color-scheme: dark; }
  /* Prevent browser/OS text scaling from subtly resizing the navbar during theme changes. */
  @media (max-width: 768px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } }

  /* ===== 120 FPS FLUID SCROLLING & GPU COMPOSITING (Option A: Lenis Mini-Core) ===== */
  html.lenis, html.lenis body {
    height: auto;
  }
  .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  }
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }
  .lenis.lenis-stopped {
    overflow: hidden;
  }
  .lenis.lenis-scrolling iframe {
    pointer-events: none;
  }

  /* 120 FPS GPU Layer Promotion & Paint Containment */
  .grain {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
  }
  .hero-copy {
    transform: translateZ(0);
    will-change: transform, opacity;
  }
  .nav {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .words-card, .id-phone-card {
    transform: translateZ(0);
    will-change: transform;
  }
  @media (min-width: 900px) {
    #words, #curated, #connect {
      content-visibility: auto;
      contain-intrinsic-size: auto 800px;
    }
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    overflow-x: clip;
    max-width: 100vw;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    transition: background-color .35s ease, color .35s ease;
  }

  body.modal-open { overflow: hidden; }

  img { max-width: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; }
  button, a, .fcard, .nav-pill-btn, .nav-pill-bar a, .theme-btn {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
  }
  :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
  /* Remove the blue native tap flash everywhere; keyboard focus remains visible. */
  *, *::before, *::after { -webkit-tap-highlight-color: transparent; }
  button, a, [role="button"], input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }

  .wrap {
    max-width: 1180px;
    margin-inline: auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  em { font-family: var(--serif); font-style: italic; font-weight: 400; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    min-height: clamp(520px, 72vh, 880px);
    color: #fff;
    overflow: hidden;
    background: #0a0a0a;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    /* brightness(.7) contrast(1.08) is baked into the image: no per-frame GPU filter pass while scrolling */
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.22) 38%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.74) 100%);
    pointer-events: none;
  }
  /* Rounded hero corners that cannot glitch black: the two corner cut-outs are ALSO painted in the page colour by this overlay.
     On Android the GPU sometimes drops the overflow:hidden + border-radius clip of the animated hero image (will-change/filter/scale),
     which let the dark square corners show; with this layer on top the corners stay correct even when that clip fails. */
  .hero { --hr: 0px; isolation: isolate; }
  .hero::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--hr);
    z-index: 3;
    pointer-events: none;
    background:
      radial-gradient(circle at 100% 0, transparent calc(var(--hr) - .5px), var(--bg) calc(var(--hr) + .5px)) left bottom / var(--hr) var(--hr) no-repeat,
      radial-gradient(circle at 0 0, transparent calc(var(--hr) - .5px), var(--bg) calc(var(--hr) + .5px)) right bottom / var(--hr) var(--hr) no-repeat;
  }
  .hero .wrap {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: inherit;
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
  }
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .02em;
    flex-shrink: 0;
    z-index: 41;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 0.5px solid rgba(255, 255, 255, .32) !important;
    outline: none !important;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 41;
  }
  .nav-links .nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.65);
    position: relative;
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease;
    border: none !important;
    outline: none !important;
  }
  .nav-links .nav-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: filter 0.2s ease;
  }
  .nav-links .nav-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1.5px) scale(1.06);
  }
  .nav-links .nav-btn:active {
    transform: scale(0.94);
  }
  .nav-links .nav-btn.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none !important;
  }
  .nav-links .nav-btn.active svg,
  .nav-links .nav-btn:hover svg {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
  }
  .nav-links .nav-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, -4px) scale(0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(14, 16, 22, 0.9);
    border: none !important;
    outline: none !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    z-index: 100;
  }
  .nav-links .nav-btn:hover .nav-tooltip {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  /* Navbar Right Area (Theme Switcher + Mobile Nav Pill) */
  .nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }

  /* Theme Toggle Button */
  .theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0.5px solid rgba(255, 255, 255, .32);
    background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.14));
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: transform .22s cubic-bezier(.22,1,.36,1), background .2s;
    flex-shrink: 0;
    z-index: 42;
  }
  @media (hover: hover) {
  .theme-btn:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, .35);
  }
  }
  .theme-btn:active {
    transform: scale(0.94);
  }

  .theme-icon-sun, .theme-icon-moon {
    display: none;
    pointer-events: none;
  }

  /* Haptic preference control: same glass icon-button language, mobile navbar only. */
  .haptic-toggle { display: none; }
  .haptic-toggle .haptic-off-mark { display: none; }
  .haptic-toggle[aria-pressed="false"] { opacity: .68; }
  .haptic-toggle[aria-pressed="false"] .haptic-off-mark { display: block; }
  .nav-pill-bar .nav-haptic-toggle { cursor: pointer; background: transparent; padding: 0; border: 0; }
  .nav-pill-bar .nav-haptic-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
  .nav-pill-bar .nav-haptic-toggle svg { pointer-events: none; }
  .nav-pill.open .nav-pill-bar .nav-haptic-toggle { display: inline-flex; opacity: 1; transform: translateY(0) scale(1); }
  .nav-pill.open .nav-pill-bar .nav-haptic-toggle { transition-delay: .24s; }
  .nav-pill-bar .nav-haptic-toggle[aria-pressed="false"] { color: var(--muted); background: var(--nav-active); }

  /* Theme icon logic: both icons stacked, cross-fade + soft rotate (opacity/transform only) */
  .theme-btn { position: relative; }
  .theme-icon-sun, .theme-icon-moon {
    display: block !important; position: absolute; inset: 0; margin: auto;
    opacity: 0; transform: rotate(-80deg) scale(.4);
    transition: opacity .38s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  .theme-icon-sun { transform: rotate(80deg) scale(.4); }
  :root[data-theme="dark"] .theme-icon-sun,
  :root[data-theme="light"] .theme-icon-moon,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-icon-sun { opacity: 1; transform: none; }

  /* Mobile pill nav - Fluid VisionOS Capsule */
  .nav-pill {
    display: none;
    position: relative;
    flex-shrink: 0;
    z-index: 70;
  }
  .nav-pill-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3.5px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    border: 0.5px solid rgba(255, 255, 255, .32) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .14)) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease;
  }
  .nav-pill-btn:hover {
    transform: scale(1.06);
    background: rgba(255, 255, 255, .35) !important;
  }
  .nav-pill-btn:active {
    transform: scale(0.94);
  }
  .nav-pill-btn span {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    display: block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
  }
  /* Ultra-clean morphological ✕ transition on open */
  .nav-pill.open .nav-pill-btn {
    background: rgba(255, 255, 255, .38) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28) !important;
  }
  .nav-pill.open .nav-pill-btn span:nth-child(1) {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 1.8px;
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .nav-pill.open .nav-pill-btn span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }
  .nav-pill.open .nav-pill-btn span:nth-child(3) {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 1.8px;
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .nav-pill-bar {
    position: fixed;
    top: max(58px, calc(env(safe-area-inset-top, 0px) + 52px));
    left: 50%;
    transform: translate3d(-50%, -10px, 0) scale(0.92);
    filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: auto;
    padding: 5px 8px;
    border-radius: 999px;
    border: 0.5px solid var(--nav-glass-border) !important;
    background: var(--nav-glass);
    box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.55), 0 4px 14px -2px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), filter 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.38s;
    z-index: 75;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    will-change: transform, opacity, filter;
  }
  .nav-pill-bar .nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 50%;
    color: var(--nav-icon);
    position: relative;
    text-decoration: none;
    opacity: 0;
    transform: translateY(6px) scale(0.85);
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
    border: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    overflow: hidden;
  }
  @media (max-width: 360px) {
    .nav-pill-bar { gap: 3px; padding: 5px 6px; }
    .nav-pill-bar .nav-btn { width: 34px; min-width: 34px; height: 36px; min-height: 36px; }
  }
  .nav-pill-bar .nav-btn svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
    display: block;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
  }
  /* Tooltip text strictly hidden in mobile capsule - Prevents text squishing & horizontal overlap */
  .nav-pill-bar .nav-tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .nav-pill-bar .nav-btn:hover {
    color: var(--fg);
    background: var(--nav-active);
    transform: translateY(-1px) scale(1.05);
  }
  .nav-pill-bar .nav-btn:active {
    transform: scale(0.92);
  }
  .nav-pill-bar .nav-btn.active {
    color: var(--fg);
    background: var(--nav-active);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .nav-pill-bar .nav-btn.active svg,
  .nav-pill-bar .nav-btn:hover svg {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
  }
  .nav-pill.open .nav-pill-bar {
    visibility: visible;
    transition-delay: 0s;
    opacity: 1;
    filter: blur(0px);
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0) scale(1);
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), filter 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }
  .nav-pill.open .nav-pill-bar .nav-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .nav-pill.open .nav-pill-bar .nav-btn:nth-child(1) { transition-delay: 0.03s; }
  .nav-pill.open .nav-pill-bar .nav-btn:nth-child(2) { transition-delay: 0.06s; }
  .nav-pill.open .nav-pill-bar .nav-btn:nth-child(3) { transition-delay: 0.09s; }
  .nav-pill.open .nav-pill-bar .nav-btn:nth-child(4) { transition-delay: 0.12s; }
  .nav-pill.open .nav-pill-bar .nav-btn:nth-child(5) { transition-delay: 0.15s; }
  .nav-pill.open .nav-pill-bar .nav-btn:nth-child(6) { transition-delay: 0.18s; }
  .nav-pill.open .nav-pill-bar .nav-btn:nth-child(7) { transition-delay: 0.21s; }

  .hero-copy {
    text-align: center;
    margin-top: auto;
    margin-bottom: clamp(48px, 12vh, 120px);
    padding: clamp(24px, 5vw, 48px) 12px;
  }
  .hero h1 {
    font-weight: 500;
    font-size: clamp(2.1rem, 7vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -.03em;
  }
  .hero-copy .tagline {
    display: block;
    margin-top: 14px;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.05rem, 2.4vw, 1.55rem);
    line-height: 1.35;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .9);
    max-width: 32ch;
    margin-inline: auto;
  }

  .btn-light, .btn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    gap: 12px;
    padding: 6px 6px 6px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    transition: transform .22s cubic-bezier(.22,1,.36,1), background-color .25s ease, border-color .25s ease;
  }
  .btn-light:hover, .btn-dark:hover { transform: none; }
  .btn-light:active, .btn-dark:active { transform: scale(.98); }
  .btn-light { background: #fff; color: #14161a; margin-top: 22px; }
  .btn-dark { background: var(--btn-bg); color: var(--btn-fg); }
  .btn-lbl {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transform: translateY(-0.5px);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
  .btn-light .ar, .btn-dark .ar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    margin: 0;
    padding: 0;
  }
  .btn-light .ar { background: #14161a; color: #fff; }
  .btn-dark .ar { background: var(--bg); color: var(--fg); }

  /* Hover: Arrow shifts smoothly forward (to the right) when cursor is placed on the button */
  .btn-light .ar svg,
  .btn-dark .ar svg,
  .id-profile-btn .ar svg {
    transition: transform .24s cubic-bezier(.22, 1, .36, 1) !important;
  }
  .btn-light:hover .ar svg,
  .btn-dark:hover .ar svg,
  .id-profile-btn:hover .ar svg,
  .btn-light:focus-visible .ar svg,
  .btn-dark:focus-visible .ar svg,
  .id-profile-btn:focus-visible .ar svg {
    transform: translateX(4.5px) !important;
  }

  /* Dark mode ash / soft dark buttons (no harsh white in dark mode) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-dark,
    :root:not([data-theme="light"]) .id-profile-btn {
      background: #23272d !important;
      border: 1px solid rgba(255, 255, 255, 0.14) !important;
      color: #f1f1ec !important;
    }
    :root:not([data-theme="light"]) .btn-dark .ar,
    :root:not([data-theme="light"]) .id-profile-btn .ar {
      background: #343a42 !important;
      color: #ffffff !important;
    }
  }

  :root[data-theme="dark"] .btn-dark,
  :root[data-theme="dark"] .id-profile-btn {
    background: #23272d !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #f1f1ec !important;
  }
  :root[data-theme="dark"] .btn-dark .ar,
  :root[data-theme="dark"] .id-profile-btn .ar {
    background: #343a42 !important;
    color: #ffffff !important;
  }

  /* ---------- Section heads ---------- */
  .section { padding-block: clamp(48px, 7vw, 96px) 0; text-align: center; }
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--pill);
    border: 1px solid var(--pill-line);
    font-size: 11.5px;
    color: var(--fg);
  }
  .tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg); display: block; }
  .section h2 {
    margin-top: 20px;
    font-weight: 500;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -.02em;
  }
  .section h2 em { font-size: 1.1em; letter-spacing: -.01em; }
  .lede { max-width: 520px; margin: 14px auto 0; color: var(--muted); font-size: clamp(12.5px, 1.1vw, 14.5px); }

  /* ---------- Fanned cards ---------- */
  .fan {
    --cw: clamp(92px, 17vw, 200px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: calc(var(--cw) * .32) calc(var(--cw) * .38);
    width: 100%;
    max-width: 100%;
    padding-inline: max(8px, calc(var(--cw) * .12));
    box-sizing: border-box;
  }
  .fcard {
    width: var(--cw);
    aspect-ratio: 5 / 7;
    margin-inline: calc(var(--cw) * -.07);
    border-radius: calc(var(--cw) * .1);
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex: none;
    position: relative;
    cursor: pointer;
    background: #fff;
    border: 0;
    outline: 0;
    box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.22), 0 8px 20px -6px rgba(0, 0, 0, 0.12);
    will-change: transform;
    transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .32s cubic-bezier(.2,.85,.25,1), background-color .28s ease;
  }
  .fcard.c { width: calc(var(--cw) * 1.2); z-index: 3; }
  .fcard:nth-child(1) { transform: rotate(-9deg) translateY(calc(var(--cw) * .18)); }
  .fcard:nth-child(2) { transform: rotate(-5deg) translateY(calc(var(--cw) * .05)); z-index: 2; }
  .fcard:nth-child(3) { transform: translateY(calc(var(--cw) * -.1)); }
  .fcard:nth-child(4) { transform: rotate(5deg) translateY(calc(var(--cw) * .05)); z-index: 2; }
  .fcard:nth-child(5) { transform: rotate(9deg) translateY(calc(var(--cw) * .18)); }

  @media (hover: hover) {
    .fcard:hover {
      /* Hover feedback stays visual-only; card depth order is never promoted. */
      box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.28), 0 8px 22px -6px rgba(0, 0, 0, 0.14);
    }
  }

  /* ---------- Frame cards: sharp photo that melts into neutral frosted glass ----------
     Top ~56% = the untouched photo. Below that the photo's own alpha fades (11-stop eased mask)
     into a translucent grey-white glass layer (the card background). A very light blur
     (--cw * .035) is confined to the last ~26% via ::after. */
  :root {
    --fg-glass: linear-gradient(to bottom,
      rgba(247, 247, 248, .72) 0%, rgba(245, 245, 246, .74) 45%, rgba(238, 238, 240, .78) 62%,
      rgba(216, 217, 220, .84) 74%, rgba(186, 188, 192, .9) 86%, rgba(154, 156, 161, .94) 100%);
    --fg-ph: linear-gradient(155deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 46%),
      linear-gradient(to bottom, #dcdddf 0%, #d1d2d5 52%, rgba(209, 210, 213, 0) 84%);
    --fg-border: rgba(255, 255, 255, .7);
    --fg-tx: 0 1px 12px rgba(28, 30, 36, .42), 0 0 3px rgba(28, 30, 36, .3);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fg-glass: linear-gradient(to bottom,
        rgba(34, 37, 46, .6) 0%, rgba(30, 33, 42, .64) 45%, rgba(26, 29, 37, .7) 62%,
        rgba(22, 24, 31, .78) 76%, rgba(18, 20, 26, .86) 88%, rgba(14, 16, 21, .92) 100%);
      --fg-ph: linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 46%),
        linear-gradient(to bottom, #20242d 0%, #1b1e26 52%, rgba(27, 30, 38, 0) 84%);
      --fg-border: rgba(255, 255, 255, .22);
      --fg-tx: 0 1px 12px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .3);
    }
  }
  :root[data-theme="dark"] {
    --fg-glass: linear-gradient(to bottom,
      rgba(34, 37, 46, .6) 0%, rgba(30, 33, 42, .64) 45%, rgba(26, 29, 37, .7) 62%,
      rgba(22, 24, 31, .78) 76%, rgba(18, 20, 26, .86) 88%, rgba(14, 16, 21, .92) 100%);
    --fg-ph: linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 46%),
      linear-gradient(to bottom, #20242d 0%, #1b1e26 52%, rgba(27, 30, 38, 0) 84%);
    --fg-border: rgba(255, 255, 255, .22);
    --fg-tx: 0 1px 12px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .3);
  }
  .fcard {
    background: var(--fg-glass);
    border: 1.5px solid var(--fg-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  :is(.fcard, .fly-ov) {
    --ft: clamp(10px, calc(var(--cw) * .095), 17px);
    --fs: clamp(8px, calc(var(--cw) * .055), 13px);
    --flh: 1.2;
    --fl: 0;
  }
  .fimg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--fg-ph);
  }
  .fimg img, .words-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,0.991) 60.3%, rgba(0,0,0,0.942) 64.6%, rgba(0,0,0,0.837) 68.9%, rgba(0,0,0,0.683) 73.2%, rgba(0,0,0,0.5) 77.5%, rgba(0,0,0,0.317) 81.8%, rgba(0,0,0,0.163) 86.1%, rgba(0,0,0,0.058) 90.4%, rgba(0,0,0,0.009) 94.7%, transparent 99%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,0.991) 60.3%, rgba(0,0,0,0.942) 64.6%, rgba(0,0,0,0.837) 68.9%, rgba(0,0,0,0.683) 73.2%, rgba(0,0,0,0.5) 77.5%, rgba(0,0,0,0.317) 81.8%, rgba(0,0,0,0.163) 86.1%, rgba(0,0,0,0.058) 90.4%, rgba(0,0,0,0.009) 94.7%, transparent 99%, transparent 100%);
  }
  .fimg.miss img { visibility: hidden; }
  .fimg::after, .words-card-img::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 26%;
    pointer-events: none;
    -webkit-backdrop-filter: blur(calc(var(--cw) * .035));
    backdrop-filter: blur(calc(var(--cw) * .035));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.007) 10%, rgba(0,0,0,0.046) 20%, rgba(0,0,0,0.13) 30%, rgba(0,0,0,0.254) 40%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.546) 60%, rgba(0,0,0,0.67) 70%, rgba(0,0,0,0.754) 80%, rgba(0,0,0,0.793) 90%, rgba(0,0,0,0.8) 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.007) 10%, rgba(0,0,0,0.046) 20%, rgba(0,0,0,0.13) 30%, rgba(0,0,0,0.254) 40%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.546) 60%, rgba(0,0,0,0.67) 70%, rgba(0,0,0,0.754) 80%, rgba(0,0,0,0.793) 90%, rgba(0,0,0,0.8) 100%);
  }
  .ftxt {
    position: absolute;
    left: 0; right: 0;
    top: min(80%, calc(100% - (var(--ft) * var(--flh) + var(--fs) * 1.3 * var(--fl) + 2px + var(--cw) * .06)));
    padding: 0 calc(var(--cw) * .05);
    text-align: center;
    z-index: 2;
    pointer-events: none;
  }
  .ftxt h3 {
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--ft);
    line-height: var(--flh);
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .92);
    text-shadow: var(--fg-tx);
  }
  .fcard .ftxt p, .fly-ov .ftxt p { display: none; }   /* frame previews show the title only */
  .ftxt p {
    margin-top: 2px;
    font-family: var(--sans);
    font-size: var(--fs);
    line-height: 1.3;
    font-weight: 400;
    color: rgba(255, 255, 255, .88);
    text-shadow: var(--fg-tx);
  }
  .center-cta { display: flex; justify-content: center; padding-top: 10px; }

  /* ---------- SECTION 2: WORDS (OCEAN BLUE SILKY FADE) ---------- */
  .panel {
    margin-top: clamp(48px, 6vw, 80px);
    border-radius: 0 0 28px 28px;
    padding: clamp(36px, 5vw, 64px) clamp(14px, 3vw, 36px) clamp(28px, 4vw, 56px);
    background:
      radial-gradient(ellipse 60% 40% at 72% 62%, rgba(95, 195, 235, .36), transparent 70%),
      linear-gradient(180deg, var(--bg) 0%, rgba(120, 175, 205, .22) 16%, #729ebc 40%, #30658a 64%, #143752 100%);
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .panel {
      background:
        radial-gradient(ellipse 60% 40% at 72% 62%, rgba(55, 145, 200, .32), transparent 70%),
        linear-gradient(180deg, var(--bg) 0%, rgba(20, 48, 70, .5) 16%, #1a3c58 40%, #122c42 64%, #0a1926 100%);
    }
  }

  :root[data-theme="dark"] .panel {
    background:
      radial-gradient(ellipse 60% 40% at 72% 62%, rgba(55, 145, 200, .32), transparent 70%),
      linear-gradient(180deg, var(--bg) 0%, rgba(20, 48, 70, .5) 16%, #1a3c58 40%, #122c42 64%, #0a1926 100%);
  }
  .panel .section { padding-block: 0; }

  .words-section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: clamp(32px, 5vw, 54px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .words-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 5.2;
    border-radius: clamp(24px, 5vw, 32px);
    overflow: hidden;
    --cw: 220px;
    --fg-glass: linear-gradient(to bottom, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .15) 72%, rgba(255, 255, 255, .24) 100%);
    background: var(--fg-glass);
    box-shadow: var(--shadow);
    border: 1px solid var(--pill-line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    box-sizing: border-box;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
  }

  @media (max-width: 760px) {
    .words-card {
      max-width: 420px;
    }
    .id-phone-card {
      max-width: 420px;
    }
    #connect .lede {
      display: none !important;
    }
  }

  .words-card-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: none;
    transform: translateZ(0);
  }

  .words-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
    display: block;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .words-card { --fg-glass: linear-gradient(to bottom, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .09) 72%, rgba(255, 255, 255, .15) 100%); }
  }
  :root[data-theme="dark"] .words-card { --fg-glass: linear-gradient(to bottom, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .09) 72%, rgba(255, 255, 255, .15) 100%); }
  .words-card-txt {
    margin-top: auto;
    padding: 24px 20px 22px;
    position: relative;
    z-index: 2;
    text-align: center;
  }

  .words-card-txt h3 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, .94);
    text-shadow: var(--fg-tx);
  }

  .words-free-prose {
    margin: clamp(24px, 4vw, 36px) auto 0;
    max-width: 56ch;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 14px;
    text-align: center;
    font-family: var(--sans);
    font-size: clamp(12.5px, 2.8vw, 15px);
    line-height: 1.8;
    color: rgba(255, 255, 255, .94);
    font-weight: 350;
    letter-spacing: -.005em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  }

  .words-cta {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }

  /* ---------- SECTION 3: IDENTITY ---------- */
  .identity-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(28px, 4vw, 44px);
    width: 100%;
  }
  .id-phone-card {
    width: 100%;
    max-width: 420px;
    border-radius: 36px;
    border: 6px solid var(--card);
    box-shadow: 0 24px 50px -12px rgba(20, 22, 40, .24);
    background: #0d0e11;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: transform .3s cubic-bezier(.2,.85,.25,1), box-shadow .3s;
  }
  @media (hover: hover) {
  .id-phone-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -14px rgba(20, 22, 40, .3);
  }
  }
  html.pf-open .id-phone-card,
  html.pf-closing .id-phone-card,
  html.pf-settle .id-phone-card {
    pointer-events: none !important;
  }
  @media (min-width: 769px) {
    html.pf-open .id-photo-box img,
    html.pf-closing .id-photo-box img,
    html.pf-settle .id-photo-box img {
      transform: scale(1.04) !important;
    }
  }
  .id-photo-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.05;
    background: transparent;
    overflow: hidden;
  }
  .id-photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  }
  .id-sheet {
    background: var(--card);
    border-radius: 28px 28px 0 0;
    margin-top: -24px;
    position: relative;
    z-index: 2;
    padding: 18px 24px 28px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
    border: none !important;
    text-align: center;
  }
  .id-handle {
    width: 32px;
    height: 3.5px;
    border-radius: 999px;
    background: var(--pill-line);
    margin: 0 auto 14px;
  }
  .id-name {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 4.5vw, 1.8rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--fg);
  }

  .id-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    gap: 8px;
    padding: 4px 4px 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: none;
    margin-top: 10px;
    margin-bottom: 14px;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .2s, background-color .25s ease;
  }
  .id-profile-btn:hover {
    transform: none;
    opacity: 0.96;
  }
  .id-profile-btn:active {
    transform: scale(0.97);
  }
  .id-profile-btn .ar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--bg);
    color: var(--fg);
  }
  .id-profile-btn .ar svg {
    width: 10px;
    height: 10px;
  }

  .id-bio {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 32ch;
    margin-inline: auto;
  }
  .id-footer-text {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--pill-line);
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--fg);
    opacity: 0.85;
  }

  /* ---------- SECTION 4: CURATED (FLAWLESS SILKY SCRIM FADE & MOBILE OPTIMIZED) ---------- */
  .curated-panel {
    position: relative;
    margin-top: clamp(40px, 6vw, 76px);
    padding-top: clamp(64px, 9vw, 110px);
    padding-bottom: clamp(64px, 9vw, 110px);
    background: var(--bg);
    border-radius: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
  }

  /* Scrim Mask: Mathematically dissolves from 0% opacity at top edge to 100% in center, then to 0% at bottom edge */
  .curated-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 880px 580px at 0% 62%, rgba(8, 14, 45, .45), transparent 85%),
      radial-gradient(ellipse 600px 500px at 80% 10%, rgba(150, 140, 200, .55), transparent 70%),
      linear-gradient(180deg, #7a72a8 0%, #625f99 28%, #403d7a 55%, #322f68 80%, #2e2b63 100%);
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.008) 2.5%,
      rgba(0, 0, 0, 0.035) 6%,
      rgba(0, 0, 0, 0.095) 10.5%,
      rgba(0, 0, 0, 0.195) 15.5%,
      rgba(0, 0, 0, 0.340) 21%,
      rgba(0, 0, 0, 0.525) 26.5%,
      rgba(0, 0, 0, 0.730) 32%,
      rgba(0, 0, 0, 0.905) 36.5%,
      rgba(0, 0, 0, 0.985) 40%,
      #000 42%,
      #000 58%,
      rgba(0, 0, 0, 0.988) 62.5%,
      rgba(0, 0, 0, 0.950) 67%,
      rgba(0, 0, 0, 0.875) 72%,
      rgba(0, 0, 0, 0.760) 77%,
      rgba(0, 0, 0, 0.615) 82%,
      rgba(0, 0, 0, 0.455) 86.5%,
      rgba(0, 0, 0, 0.300) 90.8%,
      rgba(0, 0, 0, 0.170) 94.2%,
      rgba(0, 0, 0, 0.075) 96.8%,
      rgba(0, 0, 0, 0.020) 98.7%,
      rgba(0, 0, 0, 0.002) 99.7%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.008) 2.5%,
      rgba(0, 0, 0, 0.035) 6%,
      rgba(0, 0, 0, 0.095) 10.5%,
      rgba(0, 0, 0, 0.195) 15.5%,
      rgba(0, 0, 0, 0.340) 21%,
      rgba(0, 0, 0, 0.525) 26.5%,
      rgba(0, 0, 0, 0.730) 32%,
      rgba(0, 0, 0, 0.905) 36.5%,
      rgba(0, 0, 0, 0.985) 40%,
      #000 42%,
      #000 58%,
      rgba(0, 0, 0, 0.988) 62.5%,
      rgba(0, 0, 0, 0.950) 67%,
      rgba(0, 0, 0, 0.875) 72%,
      rgba(0, 0, 0, 0.760) 77%,
      rgba(0, 0, 0, 0.615) 82%,
      rgba(0, 0, 0, 0.455) 86.5%,
      rgba(0, 0, 0, 0.300) 90.8%,
      rgba(0, 0, 0, 0.170) 94.2%,
      rgba(0, 0, 0, 0.075) 96.8%,
      rgba(0, 0, 0, 0.020) 98.7%,
      rgba(0, 0, 0, 0.002) 99.7%,
      transparent 100%
    );
  }

  .curated-panel .wrap {
    position: relative;
    z-index: 2;
  }

  .curated-panel .section {
    padding-block: 0;
    color: #fff;
  }
  .curated-panel .section h2 {
    color: #fff;
  }
  .curated-panel .section .lede {
    color: rgba(255, 255, 255, 0.84);
  }
  .curated-panel .tag {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .curated-panel .tag i {
    background: #fff;
  }

  .curated-stage-wrap {
    position: relative;
    width: 100%;
    max-width: 736px;
    height: 472px;
    margin: clamp(24px, 4vw, 42px) auto 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    box-sizing: border-box;
  }

  .curated-stage {
    position: relative;
    width: 736px;
    height: 472px;
    flex: none;
    transform-origin: top center;
    color: #fff;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  .curated-stage .abs {
    position: absolute;
  }

  #car {
    left: 0;
    top: 0;
    width: 736px;
    height: 330px;
    perspective: 1000px;
  }

  .card {
    position: absolute;
    left: 257px;
    top: 20px;
    width: 215px;
    height: 273px;
    border-radius: 22px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(190, 190, 215, .42), rgba(150, 150, 185, .38));
    border: 1.5px solid rgba(255, 255, 255, .38);
    box-shadow: 0 10px 30px rgba(20, 15, 60, .25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .55s, opacity .55s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }

  .card .art {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 205px;
    height: 205px;
    border-radius: 17px;
    overflow: hidden;
    background: #141620;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .card .art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .card .n {
    position: absolute;
    left: 0;
    right: 0;
    top: 218px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    font-family: var(--sans);
  }

  .card .s {
    position: absolute;
    left: 0;
    right: 0;
    top: 238px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, .6);
    font-family: var(--sans);
  }

  .card * {
    pointer-events: none;
    -webkit-user-drag: none;
  }

  #cap {
    left: 0;
    width: 736px;
    top: 320px;
    text-align: center;
    font-size: 15.5px;
    color: rgba(255, 255, 255, .86);
    font-family: var(--sans);
  }

  #bar {
    left: 44px;
    top: 364px;
    width: 648px;
    height: 70px;
    border-radius: 35px;
    background: linear-gradient(180deg, rgba(185, 185, 215, .34), rgba(140, 140, 180, .26));
    border: none !important;
    outline: none !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 12px;
    box-sizing: border-box;
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .35);
    z-index: 12;
  }

  .cur-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 190px;
    flex-shrink: 0;
  }

  .cur-bar-th {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    overflow: hidden;
    background: #141620;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .cur-bar-th img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .cur-bar-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
    text-align: left;
  }

  .cur-bar-title {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cur-bar-artist {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cur-bar-pill-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
    padding-left: 12px;
  }

  .cur-bar-note-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 4px 0 18px;
    border-radius: 999px;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    max-width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .cur-bar-quote-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.65);
  }

  .cur-bar-note {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 450;
    font-style: italic;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    letter-spacing: 0.01em;
    max-width: 320px;
  }

  .cur-spotify-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    margin-right: 2px;
    transition: transform 0.2s cubic-bezier(.2, 0, 0, 1), filter 0.2s ease;
    flex-shrink: 0;
  }

  .cur-spotify-btn:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(29, 185, 84, 0.75));
  }

  .cur-spotify-btn:active {
    transform: scale(0.94);
  }

  .cur-spotify-svg {
    width: 38px;
    height: 38px;
    display: block;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }

  /* ---------- MOBILE SPECIFIC OVERRIDES (DYNAMIC RESPONSIVE FOR ALL PHONES & TABLETS) ---------- */
  @media (max-width: 768px) {
    .nav-links { display: none !important; }
    .nav-pill { display: block !important; }

    /* Compact Navbar Buttons on phone with matching symmetrical circular 34px geometry */
    .nav-pill-bar .haptic-toggle { display: inline-flex !important; }
    .theme-btn, .nav-pill-btn, .haptic-toggle {
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      min-height: 34px !important;
      max-width: 34px !important;
      max-height: 34px !important;
      border-radius: 50% !important;
      box-sizing: border-box !important;
    }

    /* Unified action button sizing & matching 36px height for all phone action buttons (Text size preserved at full 13px) */
    .btn-dark:not(.connect-submit-btn), .btn-light, .id-profile-btn {
      height: 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      padding: 0 5px 0 15px !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      letter-spacing: -.01em !important;
      gap: 8px !important;
      border-radius: 999px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      vertical-align: middle !important;
      box-sizing: border-box !important;
    }
    .btn-lbl:not(.connect-btn-lbl), .btn-dark:not(.connect-submit-btn) span:not(.ar), .btn-light span:not(.ar), .id-profile-btn span:not(.ar) {
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      letter-spacing: -.01em !important;
      display: inline-flex !important;
      align-items: center !important;
      transform: translateY(-0.5px) !important;
    }
    .btn-dark:not(.connect-submit-btn) .ar, .btn-light .ar, .id-profile-btn .ar {
      width: 26px !important;
      height: 26px !important;
      border-radius: 50% !important;
      display: grid !important;
      place-items: center !important;
      flex: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .btn-dark:not(.connect-submit-btn) .ar svg, .btn-light .ar svg, .id-profile-btn .ar svg {
      width: 10.5px !important;
      height: 10.5px !important;
      display: block !important;
    }

    /* Refined slightly smaller section title pill on phone */
    .tag {
      padding: 3.5px 11px !important;
      font-size: 10.5px !important;
      gap: 6px !important;
    }
    .tag i {
      width: 4.5px !important;
      height: 4.5px !important;
    }

    /* Mobile Frames: Exactly 3 frames (Enlarged & Prominent) */
    .fan {
      --cw: clamp(98px, 30vw, 160px);
      padding-block: calc(var(--cw) * .28) calc(var(--cw) * .34);
      padding-inline: 4px;
    }
    .fcard:nth-child(1),
    .fcard:nth-child(5) {
      display: none !important;
    }
    .fcard:nth-child(2) {
      transform: rotate(-6deg) translateY(calc(var(--cw) * .08)) !important;
      z-index: 1 !important;
    }
    .fcard:nth-child(3) {
      transform: translateY(calc(var(--cw) * -.08)) !important;
      z-index: 3 !important;
    }
    .fcard:nth-child(4) {
      transform: rotate(6deg) translateY(calc(var(--cw) * .08)) !important;
      z-index: 1 !important;
    }
    /* mobile hover transforms removed to preserve quiet luxury feel */
    :is(.fcard, .fly-ov) {
      --ft: clamp(12px, calc(var(--cw) * .105), 16px);
      --fs: clamp(10px, calc(var(--cw) * .075), 12.5px);
      --flh: 1.25;
    }

    /* Hide the 2 requested text lines on phone */
    .curated-panel .lede {
      display: none !important;
    }
    #cap {
      display: none !important;
    }

    /* Prevent clipping on mobile stage */
    .curated-stage-wrap {
      overflow: visible !important;
    }

    /* Dynamic compact curated bar centered in stage (736px stage -> left: 148px, width: 440px) */
    #bar {
      left: 148px !important;
      width: 440px !important;
      height: 64px !important;
      top: 342px !important;
      border-radius: 32px !important;
      border: 0 !important;
      outline: 0 !important;
      padding: 0 8px 0 10px !important;
    }
    .cur-bar-left {
      max-width: 120px !important;
      gap: 8px !important;
    }
    .cur-bar-th {
      width: 40px !important;
      height: 40px !important;
      border-radius: 10px !important;
    }
    .cur-bar-title {
      font-size: 12px !important;
    }
    .cur-bar-artist {
      font-size: 10px !important;
    }
    .cur-bar-pill-wrap {
      padding-left: 6px !important;
    }
    .cur-bar-note-pill {
      height: 42px !important;
      padding: 0 2px 0 12px !important;
      gap: 6px !important;
      max-width: 295px !important;
    }
    .cur-bar-note {
      font-size: 11px !important;
      max-width: 220px !important;
    }
    .cur-spotify-btn {
      width: 36px !important;
      height: 36px !important;
      margin-right: 1px !important;
    }
    .cur-spotify-svg {
      width: 36px !important;
      height: 36px !important;
    }
  }

  @media (max-width: 440px) {
    .nav-pill-bar {
      gap: 3px;
      padding: 4px 6px;
    }
  }

  @media (max-width: 360px) {
    .wrap {
      padding-left: 12px;
      padding-right: 12px;
    }
  }

  /* ---------- ULTRA SMOOTH MODAL VIEWER (Cover Album Engine) ---------- */
  #vw {
    position: fixed;
    inset: 0;
    visibility: hidden;
    touch-action: none;
    z-index: 3500;
    user-select: none;
    -webkit-user-select: none;
  }
  #vw.vis { visibility: visible; }
  
  #bd {
    position: absolute;
    inset: 0;
    background: var(--modal-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    transition: opacity 540ms cubic-bezier(.4,0,.12,1);
  }
  #vw.open #bd { opacity: 1; }

  #trk {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    will-change: transform;
  }
  .sl {
    width: 100vw;   /* one frame per screen: neighbours stay off-screen */
    height: 100%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: clamp(60px, 15svh, 110px);
    box-sizing: border-box;
  }
  .fr {
    width: min(80vw, 46svh, 420px);
    aspect-ratio: 5 / 7;
    border-radius: 26px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 32px 64px -18px rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .3);
    position: relative;
  }
  .fr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fly {
    position: fixed;
    margin: 0;
    z-index: 1005;
    pointer-events: none;
  }

  #cp {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(4svh + env(safe-area-inset-bottom, 0px));
    text-align: center;
    color: #fff;
    transition: opacity .35s;
    pointer-events: none;
  }
  #ct {
    transition: opacity .16s ease, transform .16s ease;
  }
  #ct.sw {
    opacity: 0;
    transform: translateY(4px);
  }
  #t {
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
  }
  #s {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin-top: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
  }
  #dots {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-top: 16px;
  }
  .dt {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .3);
    transition: width .35s cubic-bezier(.2,.85,.25,1), background .35s;
    display: inline-block;
  }
  .dt.on {
    width: 18px;
    background: #fff;
  }
  .fr .fg-actions,
  .modal-frame-actions {
    position: absolute;
    right: clamp(14px, 2.5vw, 18px);
    bottom: clamp(14px, 2.5vw, 18px);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    pointer-events: auto;
  }

  #x {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity .35s, transform .2s;
    z-index: 1010;
  }
  #x:hover { transform: scale(1.06); background: rgba(255, 255, 255, .25); }
  #vw.open #x { opacity: 1; }

  /* ---------- SECTION 5: CONNECT (WRITE ME TEXTBAR & CHIPS) ---------- */
  .connect-wrap {
    max-width: 440px;
    width: 100%;
    margin: clamp(28px, 4.5vw, 40px) auto 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 12px;
  }

  .connect-bar {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--pill-line);
    border-radius: 999px;
    padding: 0;
    height: 52px;
    box-shadow: 0 12px 30px -12px rgba(20, 22, 40, .09);
    transition: border-color .24s ease, box-shadow .24s ease, background-color .28s ease;
    box-sizing: border-box;
    overflow: hidden;
  }
  .connect-bar:focus-within {
    border-color: rgba(140, 150, 175, .45);
    box-shadow: 0 16px 38px -10px rgba(20, 22, 40, .14);
  }

  @keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
  }
  .connect-bar.shake {
    animation: inputShake 0.4s ease;
    border-color: rgba(220, 80, 80, 0.45) !important;
  }

  /* ---- Send Button: perfectly centered vertically inside the bar ---- */
  .connect-submit-btn {
    position: absolute !important;
    left: 5px;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    width: auto;
    margin: 0 !important;
    z-index: 5;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 6px 0 20px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap;
    box-sizing: border-box !important;
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  /* ---- Rolling text: Send → Sent ---- */
  .connect-btn-lbl {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    height: 14px;
    line-height: 1;
    transform: translateY(-0.5px);
    flex: none;
  }
  .lbl-send,
  .lbl-sent {
    display: inline-block;
    line-height: 1;
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), opacity .22s ease;
  }
  .lbl-send {
    transform: translateY(0);
    opacity: 1;
  }
  .lbl-sent {
    position: absolute;
    left: 0; top: 0;
    transform: translateY(120%);
    opacity: 0;
  }
  .connect-submit-btn.is-sent .lbl-send {
    transform: translateY(-120%);
    opacity: 0;
  }
  .connect-submit-btn.is-sent .lbl-sent {
    transform: translateY(0);
    opacity: 1;
  }

  /* ---- Arrow → Tick morph inside the white .ar ball ---- */
  .connect-submit-btn .ar {
    position: relative;
    overflow: hidden;
    flex: none;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .connect-icon-arrow,
  .connect-icon-check {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .25s ease, transform .32s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .connect-icon-arrow {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .connect-icon-check {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-20deg);
    color: #10b981;
  }
  :root[data-theme="dark"] .connect-icon-check { color: #34d399; }

  .connect-submit-btn.is-sent .connect-icon-arrow {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(20deg);
  }
  .connect-submit-btn.is-sent .connect-icon-check {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  /* Hover: Connect send button arrow shifts forward */
  .connect-submit-btn .connect-icon-arrow {
    transition: opacity .25s ease, transform .24s cubic-bezier(.22, 1, .36, 1) !important;
  }
  .connect-submit-btn:not(.is-sent):not(.is-animating):hover .connect-icon-arrow,
  .connect-submit-btn:not(.is-sent):not(.is-animating):focus-visible .connect-icon-arrow {
    transform: translate(calc(-50% + 4.5px), -50%) scale(1) !important;
  }

  /* ---- Text input: fills the bar, left-padded to clear button ---- */
  .connect-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--fg);
    padding: 0 20px 0 118px;
    box-sizing: border-box;
    border-radius: 999px;
    transition: opacity .2s ease;
  }
  .connect-input::placeholder {
    color: var(--muted);
    opacity: 0.8;
  }
  .connect-input.fade-out {
    opacity: 0;
    pointer-events: none;
  }

  .connect-feedback {
    min-height: 20px;
    margin-top: 10px;
    font-size: 12px;
    font-family: var(--sans);
    color: var(--muted);
    opacity: 0;
    transition: opacity .35s ease;
  }
  .connect-feedback.visible {
    opacity: 1;
    color: #10b981;
  }
  :root[data-theme="dark"] .connect-feedback.visible {
    color: #34d399;
  }

  .connect-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .connect-chip {
    display: inline-flex;
    align-items: center;
    gap: 6.5px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--pill);
    border: 1px solid var(--pill-line);
    font-size: 11.5px;
    font-weight: 450;
    color: var(--muted);
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .connect-chip svg {
    flex: none;
    opacity: 0.75;
    transition: opacity .2s ease;
  }
  .connect-chip:hover {
    color: var(--fg);
    border-color: rgba(160, 160, 160, .35);
    transform: translateY(-1px);
  }
  .connect-chip:hover svg {
    opacity: 1;
  }

  @media (max-width: 640px) {
    #connect .lede {
      display: none !important;
    }
    #connect .connect-wrap {
      margin-top: clamp(20px, 4vw, 28px);
      max-width: 380px;
    }
    .connect-bar {
      padding: 0 !important;
      height: 44px !important;
    }
    .connect-submit-btn {
      left: 4px;
      top: 50% !important;
      transform: translateY(-50%) !important;
      height: 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      padding: 0 5px 0 15px !important;
      gap: 8px !important;
    }
    .connect-submit-btn .ar {
      width: 26px !important;
      height: 26px !important;
    }
    .connect-input {
      font-size: 13px !important;
      padding: 0 14px 0 100px !important;
    }
    .connect-links {
      gap: 7px !important;
      margin-top: 14px !important;
    }
    .connect-chip {
      padding: 4px 11px !important;
      font-size: 11px !important;
    }
  }

  footer { padding-block: 56px 40px; text-align: center; font-size: 12px; color: var(--muted); }

  @media (prefers-reduced-motion: reduce) {
    .fcard, .btn-light, .btn-dark, #bd, #cp, #ct { transition: none !important; animation: none !important; }
  }

  /* ---------- Fixes (no visual change) ---------- */
  html { scrollbar-gutter: stable; }
  .fcard:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
  .fcard { transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .32s cubic-bezier(.2,.85,.25,1), background-color .28s ease, scale .22s cubic-bezier(.2,.85,.25,1), opacity 1.2s cubic-bezier(.16,1,.3,1) var(--d, 0s), translate 1.5s cubic-bezier(.16,1,.3,1) var(--d, 0s); }
  @media (hover: none) { .fcard:active { scale: .97; } }
  /* light mode: keep the Curated heading legible while the scrim is still fading in */
  :root[data-theme="light"] .curated-panel .section :is(h2, .lede, .tag) { text-shadow: 0 1px 2px rgba(35,30,80,.32), 0 0 20px rgba(60,50,120,.32); }
  /* ---------- Connect: transform-only send animation + phone input ---------- */
  .connect-submit-btn .cs-p { position: absolute; display: none; background: var(--btn-bg); z-index: 0; pointer-events: none; will-change: transform; }
  :root[data-theme="dark"] .connect-submit-btn .cs-p { background: #23272d; border: 1px solid rgba(255, 255, 255, .14); }
  :root[data-theme="dark"] .connect-submit-btn .cs-m { border-left: 0; border-right: 0; }
  .connect-submit-btn .btn-lbl, .connect-submit-btn .ar { position: relative; z-index: 1; }
  :root[data-theme] .connect-submit-btn.is-animating { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
  .connect-submit-btn.is-animating .cs-p { display: block; }
  /* 16px real font-size stops iOS zoom-on-focus; scaled down so it looks exactly the same */
  @media (pointer: coarse) {
    .connect-input { --is: .84375; position: absolute !important; inset: auto !important; left: 0 !important; top: 50% !important;
      width: calc(100% / var(--is)) !important; height: calc(100% / var(--is)) !important; font-size: 16px !important;
      padding: 0 calc(20px / var(--is)) 0 calc(118px / var(--is)) !important;
      transform: translateY(-50%) scale(var(--is)); transform-origin: left center; }
  }
  @media (pointer: coarse) and (max-width: 640px) {
    .connect-input { --is: .8125; padding: 0 calc(14px / var(--is)) 0 calc(100px / var(--is)) !important; }
  }
  .card .dim { position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; }
  .connect-submit-btn { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
  .connect-submit-btn.is-sent { box-shadow: 0 6px 18px -3px rgba(16, 185, 129, 0.35); }
  .fly-ov { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; overflow: hidden; pointer-events: none; text-align: left; }
  .fly-ov { background: var(--fg-glass), var(--bg); }

  .fly { background-clip: padding-box; will-change: transform, opacity; }
  .fly-ov { will-change: opacity; }
  .fly-ov .fimg::after { display: none; }   /* no backdrop-filter inside the animating overlay (the blur is nearly invisible at that size) */
  #bd { will-change: opacity; }
  @media (max-width: 640px) { #bd { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } }
  #vw:not(.vis) #trk { will-change: auto; }
  #vw.vis .sl .fr { will-change: transform, opacity; backface-visibility: hidden; }
  /* modal open/close: the flyer's shadow lives on its own compositor-only plate so it can cross-dissolve with the card's / slide's shadow (no pop, no doubled shadow) */
  .fly-sh { position: fixed; margin: 0; z-index: 1004; pointer-events: none; border-radius: 26px; box-shadow: 0 32px 64px -18px rgba(0, 0, 0, .55); will-change: transform, opacity; }
  .fr.fly.fly-pl { box-shadow: none; }

  /* ---------- Cinematic scroll (rest state identical) ---------- */
  @keyframes heroSettle { from { scale: 1.07; } }
  @keyframes cineRise { from { opacity: 0; translate: 0 22px; } }
  @keyframes cineFade { from { opacity: 0; } }
  .hero-bg { will-change: transform; backface-visibility: hidden; contain: paint; transform: translate3d(0, calc(var(--hp, 0) * 8%), 0) scale(calc(1 + var(--hp, 0) * .1)); animation: heroSettle 2.4s cubic-bezier(.16,1,.3,1) both; }
  .hero-copy { translate: 0 calc(var(--hp, 0) * -36px); opacity: calc(1 - var(--hp, 0) * 1.25); }
  .hero .nav { animation: cineFade 1.4s ease .1s both; }
  .hero h1 { animation: cineRise 1.6s cubic-bezier(.16,1,.3,1) .25s both; }
  .hero .tagline { animation: cineRise 1.7s cubic-bezier(.16,1,.3,1) .5s both; }
  html.js :is(.section .tag, .section h2, .section .lede, .center-cta, .words-section-wrapper > .words-free-prose, .words-cta, .identity-wrap, .connect-wrap) { opacity: 0; translate: 0 26px; transition: opacity 1.25s cubic-bezier(.16,1,.3,1) var(--d, 0s), translate 1.5s cubic-bezier(.16,1,.3,1) var(--d, 0s); }
  html.js :is(.section .tag, .section h2, .section .lede, .center-cta, .words-section-wrapper > .words-free-prose, .words-cta, .identity-wrap, .connect-wrap).in { opacity: 1; translate: 0 0; }
  html.js .words-card { opacity: 0; scale: .965; transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, opacity 1.3s cubic-bezier(.16,1,.3,1), scale 1.7s cubic-bezier(.16,1,.3,1); }
  html.js .words-card.in { opacity: 1; scale: 1; }
  html.js .fan .fcard { opacity: 0; translate: 0 34px; }
  html.js .fan .fcard.in { opacity: 1; translate: 0 0; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-bg, .hero .nav, .hero h1, .hero .tagline { animation: none; }
    .hero-bg { transform: none; }
    .hero-copy { translate: none; opacity: 1; }
  }

  /* ---------- Frames: swipeable fan carousel (card look unchanged; only positions are driven by JS) ---------- */
  /* ---------- Words card: no border, bottom melts into dark frosted glass ---------- */
  html .words-card {
    border: 0;
    background: linear-gradient(to bottom,
      rgba(9, 13, 19, 0) 0%, rgba(9, 13, 19, 0) 50%, rgba(9, 13, 19, .06) 58%, rgba(9, 13, 19, .17) 66%,
      rgba(9, 13, 19, .33) 74%, rgba(8, 12, 18, .5) 82%, rgba(8, 12, 18, .65) 91%, rgba(7, 10, 16, .74) 100%);
  }
  .words-card-img::after {
    height: 46%;
    background: linear-gradient(to bottom, rgba(9, 13, 19, 0) 0%, rgba(9, 13, 19, .14) 40%, rgba(8, 12, 18, .34) 75%, rgba(7, 10, 16, .46) 100%);
    -webkit-backdrop-filter: blur(11px) saturate(1.08);
    backdrop-filter: blur(11px) saturate(1.08);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.02) 10%, rgba(0,0,0,.08) 20%, rgba(0,0,0,.19) 30%, rgba(0,0,0,.34) 40%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.66) 60%, rgba(0,0,0,.81) 70%, rgba(0,0,0,.92) 80%, rgba(0,0,0,.98) 90%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.02) 10%, rgba(0,0,0,.08) 20%, rgba(0,0,0,.19) 30%, rgba(0,0,0,.34) 40%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.66) 60%, rgba(0,0,0,.81) 70%, rgba(0,0,0,.92) 80%, rgba(0,0,0,.98) 90%, #000 100%);
  }
  #frames > .wrap { overflow-x: clip; }   /* parked (invisible) cards must never widen the page on phones */
  @property --hv { syntax: "<length>"; inherits: false; initial-value: 0px; }
  .fan.fx { position: relative; display: block; height: calc(var(--cw) * 2.38); --cy: calc(var(--cw) * 1.16); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
  /* Fan Photoholder: Ultra-quiet Luxury Hover & Smooth 120 FPS Drag */
  #fanTrack {
    cursor: grab;
  }
  #fanTrack.moving,
  #fanTrack:active {
    cursor: grabbing;
  }
  html .fan.fx .fcard {
    display: flex !important;
    position: absolute;
    left: 50%;
    top: var(--cy);
    margin: 0 !important;
    width: var(--cw) !important;
    z-index: var(--z, 1) !important;
    transform: translate3d(calc(-50% + var(--x, 0) * var(--cw)), calc(-50% + var(--y, 0) * var(--cw)), 0) rotate(calc(var(--r, 0) * 1deg)) scale(var(--w, 1)) !important;
    transform-origin: 50% 50% !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: box-shadow .38s cubic-bezier(.16, 1, .3, 1), opacity 1.2s cubic-bezier(.16,1,.3,1) var(--d, 0s), translate 1.5s cubic-bezier(.16,1,.3,1) var(--d, 0s);
    cursor: pointer;
  }
  html .fan.fx.moving .fcard,
  html .fan.fx.live.moving .fcard {
    transition: none !important;
  }
  html .fan.fx .fcard .fimg {
    will-change: transform !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  }
  html.js .fan.fx .fcard,
  html.js .fan.fx .fcard.in { opacity: var(--o, 1) !important; translate: 0 0 !important; visibility: visible !important; }
  html:not(.js) .fan.fx .fcard { opacity: var(--o, 1); }
  @media (hover: hover) {
    html .fan.fx:not(.moving) .fcard:hover {
      /* Preserve the carousel's computed depth order on hover; only the existing shadow responds. */
      z-index: var(--z, 1) !important;
      box-shadow: 0 30px 75px -14px rgba(0, 0, 0, 0.35), 0 12px 28px -6px rgba(0, 0, 0, 0.16) !important;
    }
    html .fan.fx:not(.moving) .fcard:hover .fimg {
      transform: translateZ(0) scale(1.028) !important;
    }
    html .fan.fx:not(.moving) .fcard:hover .ftxt h3 {
      color: #ffffff !important;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7) !important;
      transition: color .35s ease, text-shadow .35s ease;
    }
    html .fan.fx.moving .fcard:hover {
      z-index: var(--z, 1) !important;
      box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.22), 0 8px 20px -6px rgba(0, 0, 0, 0.12) !important;
    }
  }
  @media (max-width: 640px) {
    .fan.fx { height: calc(var(--cw) * 2.3); --cy: calc(var(--cw) * 1.12); }
  }

  /* ---------- No borders on photos / frames / albums (only change) ---------- */
  .fcard, .fly-ov,
  .words-card, .id-phone-card,
  #car .card, .card,
  .fr, #trk .fr, .fimg, .words-card-img, .id-photo-box {
    border: 0 !important;
    outline: 0 !important;
  }
  .fcard:focus-visible { outline: 0 !important; }

  /* ---------- Phone: slightly larger frame previews ---------- */
  /* ---------- Subtle thin border on nav matching theme switcher (0.5px rgba(255,255,255,0.32)) ---------- */
  .nav-links, .nav-pill-bar, .nav-pill-btn {
    border: 0.5px solid rgba(255, 255, 255, .32) !important;
  }

  /* ---------- Phone: frames sizing + even gutters / section rhythm ---------- */
  @media (max-width: 640px) {
    .wrap {
      padding-left: max(20px, env(safe-area-inset-left, 0px));
      padding-right: max(20px, env(safe-area-inset-right, 0px));
    }
    .fan { --cw: clamp(100px, 32vw, 165px); }
    .fan.fx { --cy: calc(var(--cw) * 1.2); }
    .section { padding-top: 52px; }
    .panel { margin-top: 52px; padding-left: 0; padding-right: 0; }
    .curated-panel { margin-top: 52px; }
  }

  /* ---------- Phone: hero rounded bottom corners + title placement ---------- */
  @media (max-width: 640px) {
    .hero { --hr: 28px; border-radius: 0 0 var(--hr) var(--hr); }
    .hero-copy { margin-bottom: 34px; }
    .hero h1 { white-space: nowrap; }
    .hero-copy .tagline { display: block; max-width: 22ch; margin-inline: auto; text-wrap: balance; }
  }

  /* ---------- Curated Bar Borderless ---------- */
  #bar {
    border: 0 !important;
    outline: 0 !important;
  }

/* Phase 4 accessibility: visible keyboard focus without changing resting appearance. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #8b7cff);
  outline-offset: 3px;
}
/* Phase 4 accessibility: respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Phase 5 compatibility guard: avoid document-level horizontal overflow on narrow viewports. */
html, body { max-width: 100%; }
body { overflow-x: clip; }
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}
img, video, canvas, svg { max-width: 100%; }


/* ===== NEW WORDS SECTION (from words-more-topics preview 5) ===== */
/* ===== additions ===== */
@property --rev{syntax:"<percentage>";inherits:false;initial-value:0%}
#words.panel{background:var(--bg);position:relative;z-index:0;transition:background-color .35s ease}
section#words .btn-dark{background:#23272d!important;border:1px solid rgba(255,255,255,.14)!important;color:#f1f1ec!important}
section#words .btn-dark .ar{background:#343a42!important;color:#fff!important}
.words-section-wrapper{margin-top:clamp(44px,7vw,64px)}
.ro{display:grid;transition:transform .6s cubic-bezier(.16,1,.3,1);transform:rotate(90deg)}
.cta-wrap{display:grid;grid-template-rows:1fr;width:100%;position:relative;z-index:2;transition:grid-template-rows .9s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.cta-wrap.gone{grid-template-rows:0fr;opacity:0}
.cta-in{min-height:0;overflow:hidden}
.cta-in .words-cta{padding:0 4px 4px}
.more{display:grid;grid-template-rows:0fr;width:100%;position:relative;z-index:1;transition:grid-template-rows 1.1s cubic-bezier(.16,1,.3,1)}
.more.open{grid-template-rows:1fr}
.more-in{min-height:0;overflow:hidden;width:100%;display:flex;flex-direction:column;align-items:center}

.topic{width:100%;display:flex;flex-direction:column;align-items:center}
.more .topic{padding-top:clamp(28px,5vw,48px)}
/* image block: full-bleed on phones, 560px on larger screens */
.t-head{position:relative;width:min(100%,560px)}
@media (max-width:560px){.t-head{width:100vw}}
.t-fig{position:relative;width:100%;aspect-ratio:1/1;margin:0;-webkit-mask-image:linear-gradient(to bottom,#000 50.0%,rgba(0,0,0,0.995) 54.2%,rgba(0,0,0,0.965) 58.3%,rgba(0,0,0,0.896) 62.5%,rgba(0,0,0,0.790) 66.7%,rgba(0,0,0,0.653) 70.8%,rgba(0,0,0,0.500) 75.0%,rgba(0,0,0,0.347) 79.2%,rgba(0,0,0,0.210) 83.3%,rgba(0,0,0,0.104) 87.5%,rgba(0,0,0,0.035) 91.7%,rgba(0,0,0,0.005) 95.8%,rgba(0,0,0,0.000) 100.0%);mask-image:linear-gradient(to bottom,#000 50.0%,rgba(0,0,0,0.995) 54.2%,rgba(0,0,0,0.965) 58.3%,rgba(0,0,0,0.896) 62.5%,rgba(0,0,0,0.790) 66.7%,rgba(0,0,0,0.653) 70.8%,rgba(0,0,0,0.500) 75.0%,rgba(0,0,0,0.347) 79.2%,rgba(0,0,0,0.210) 83.3%,rgba(0,0,0,0.104) 87.5%,rgba(0,0,0,0.035) 91.7%,rgba(0,0,0,0.005) 95.8%,rgba(0,0,0,0.000) 100.0%);}
.t-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 44%,rgba(0,0,0,0.965) 47.0%,rgba(0,0,0,0.790) 50.0%,rgba(0,0,0,0.500) 53.0%,rgba(0,0,0,0.210) 56.0%,rgba(0,0,0,0.035) 59.0%,rgba(0,0,0,0.000) 62.0%),linear-gradient(to right,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.035) 2.7%,rgba(0,0,0,0.210) 5.3%,rgba(0,0,0,0.500) 8.0%,rgba(0,0,0,0.790) 10.7%,rgba(0,0,0,0.965) 13.3%,rgba(0,0,0,1.000) 16.0%,rgba(0,0,0,1.000) 84.0%,rgba(0,0,0,0.965) 86.7%,rgba(0,0,0,0.790) 89.3%,rgba(0,0,0,0.500) 92.0%,rgba(0,0,0,0.210) 94.7%,rgba(0,0,0,0.035) 97.3%,rgba(0,0,0,0.000) 100.0%);mask-image:linear-gradient(to bottom,#000 0,#000 44%,rgba(0,0,0,0.965) 47.0%,rgba(0,0,0,0.790) 50.0%,rgba(0,0,0,0.500) 53.0%,rgba(0,0,0,0.210) 56.0%,rgba(0,0,0,0.035) 59.0%,rgba(0,0,0,0.000) 62.0%),linear-gradient(to right,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.035) 2.7%,rgba(0,0,0,0.210) 5.3%,rgba(0,0,0,0.500) 8.0%,rgba(0,0,0,0.790) 10.7%,rgba(0,0,0,0.965) 13.3%,rgba(0,0,0,1.000) 16.0%,rgba(0,0,0,1.000) 84.0%,rgba(0,0,0,0.965) 86.7%,rgba(0,0,0,0.790) 89.3%,rgba(0,0,0,0.500) 92.0%,rgba(0,0,0,0.210) 94.7%,rgba(0,0,0,0.035) 97.3%,rgba(0,0,0,0.000) 100.0%);-webkit-mask-composite:source-over;mask-composite:add;
  opacity:0;filter:brightness(.2);transform:scale(1.09);
  transition:opacity 1.8s ease .1s,filter 2.4s ease .1s,transform 2.6s cubic-bezier(.16,1,.3,1) .1s}
@media (max-width:560px){.t-fig img{-webkit-mask-image:none;mask-image:none}}
.grain{position:absolute;left:0;right:0;top:48%;bottom:0;pointer-events:none;opacity:.018;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 60%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 60%,transparent)}
.t-title{position:absolute;left:0;right:0;bottom:2%;padding-inline:20px;text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.1rem,6.4vw,3.2rem);line-height:1.08;letter-spacing:-.02em;color:rgba(255,255,255,.96);text-shadow:0 1px 14px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px);transition:opacity 1.2s ease .6s,transform 1.4s cubic-bezier(.16,1,.3,1) .6s}
.t-body{width:100%;padding-inline:22px;display:flex;flex-direction:column;align-items:center}
.t-txt{max-width:46ch;margin-top:24px;text-align:center;font-size:clamp(14.5px,3.2vw,16.5px);line-height:1.85;font-weight:350;color:rgba(255,255,255,.88);text-wrap:pretty}
.t-q{max-width:24ch;margin-top:30px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,4.8vw,2.05rem);line-height:1.22;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.tw{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(6px);
  transition:opacity .9s ease,filter 1.1s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*34ms + 900ms)}
.topic.seen .t-fig img{opacity:1;filter:none;transform:none}
.topic.seen .t-title{opacity:1;transform:none}
.topic.seen .tw{opacity:1;filter:none;transform:none}

/* page colour until the middle of the image, then a smooth melt to black that stays black (first topic) */
.lead .t-head::before,.lead .t-head::after{content:"";position:absolute;left:50%;width:100vw;margin-left:-50vw;z-index:-1;pointer-events:none}
.lead .t-head::before{top:50%;height:24%;background:linear-gradient(to bottom,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.005) 8.3%,rgba(0,0,0,0.035) 16.7%,rgba(0,0,0,0.104) 25.0%,rgba(0,0,0,0.210) 33.3%,rgba(0,0,0,0.347) 41.7%,rgba(0,0,0,0.500) 50.0%,rgba(0,0,0,0.653) 58.3%,rgba(0,0,0,0.790) 66.7%,rgba(0,0,0,0.896) 75.0%,rgba(0,0,0,0.965) 83.3%,rgba(0,0,0,0.995) 91.7%,rgba(0,0,0,1.000) 100.0%)}
.lead .t-head::after{top:73%;height:100000px;background:#000}

/* second topic: lowers itself out of the dark; soft top edge, a veil sliding down */
.curtain .t-fig{--rev:0%;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.058) 3.2%,rgba(0,0,0,0.317) 6.4%,rgba(0,0,0,0.683) 9.6%,rgba(0,0,0,0.942) 12.8%,rgba(0,0,0,1.000) 16.0%,#000 50.0%,rgba(0,0,0,0.995) 54.2%,rgba(0,0,0,0.965) 58.3%,rgba(0,0,0,0.896) 62.5%,rgba(0,0,0,0.790) 66.7%,rgba(0,0,0,0.653) 70.8%,rgba(0,0,0,0.500) 75.0%,rgba(0,0,0,0.347) 79.2%,rgba(0,0,0,0.210) 83.3%,rgba(0,0,0,0.104) 87.5%,rgba(0,0,0,0.035) 91.7%,rgba(0,0,0,0.005) 95.8%,rgba(0,0,0,0.000) 100.0%),linear-gradient(to bottom,#000 calc(var(--rev) - 35%),transparent var(--rev));mask-image:linear-gradient(to bottom,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.058) 3.2%,rgba(0,0,0,0.317) 6.4%,rgba(0,0,0,0.683) 9.6%,rgba(0,0,0,0.942) 12.8%,rgba(0,0,0,1.000) 16.0%,#000 50.0%,rgba(0,0,0,0.995) 54.2%,rgba(0,0,0,0.965) 58.3%,rgba(0,0,0,0.896) 62.5%,rgba(0,0,0,0.790) 66.7%,rgba(0,0,0,0.653) 70.8%,rgba(0,0,0,0.500) 75.0%,rgba(0,0,0,0.347) 79.2%,rgba(0,0,0,0.210) 83.3%,rgba(0,0,0,0.104) 87.5%,rgba(0,0,0,0.035) 91.7%,rgba(0,0,0,0.005) 95.8%,rgba(0,0,0,0.000) 100.0%),linear-gradient(to bottom,#000 calc(var(--rev) - 35%),transparent var(--rev));-webkit-mask-composite:source-in;mask-composite:intersect;transition:--rev 2.4s cubic-bezier(.3,.1,.2,1)}
.curtain.seen .t-fig{--rev:150%}
.curtain .t-fig img{object-position:center 48%;opacity:1;filter:brightness(.3);transform:translateY(-46px) scale(1.04);transition:transform 2.6s cubic-bezier(.16,1,.3,1),filter 2.6s ease}
.cta-end{margin-top:48px;padding-bottom:6px}

/* ===== Words: short preview, and "More" opens the rest with the site's own reveal (fade + rise, same easing) ===== */
.t-more{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows 1.1s cubic-bezier(.16,1,.3,1)}
.t-more.open{grid-template-rows:1fr}
.t-more-in{min-height:0;overflow:hidden;width:100%;display:flex;flex-direction:column;align-items:center}
.t-more .t-cont{margin-top:0}
/* the unfolded words fade in one by one only when opened, then fold away quickly */
.t-more:not(.open) .tw{opacity:0;filter:blur(7px);transform:translateY(6px);transition-delay:0s;transition-duration:.35s}
.t-more.open .tw{transition-delay:calc(var(--i)*30ms + 260ms)}
/* second topic: same entrance as every other block on the site (fade + 26px rise), no veil */
.more .topic.curtain{opacity:0;translate:0 26px;transition:opacity 1.25s cubic-bezier(.16,1,.3,1) .15s,translate 1.5s cubic-bezier(.16,1,.3,1) .15s}
.more .topic.curtain.seen{opacity:1;translate:0 0}
.curtain .t-fig{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.058) 3.2%,rgba(0,0,0,0.317) 6.4%,rgba(0,0,0,0.683) 9.6%,rgba(0,0,0,0.942) 12.8%,rgba(0,0,0,1.000) 16.0%,#000 50.0%,rgba(0,0,0,0.995) 54.2%,rgba(0,0,0,0.965) 58.3%,rgba(0,0,0,0.896) 62.5%,rgba(0,0,0,0.790) 66.7%,rgba(0,0,0,0.653) 70.8%,rgba(0,0,0,0.500) 75.0%,rgba(0,0,0,0.347) 79.2%,rgba(0,0,0,0.210) 83.3%,rgba(0,0,0,0.104) 87.5%,rgba(0,0,0,0.035) 91.7%,rgba(0,0,0,0.005) 95.8%,rgba(0,0,0,0.000) 100.0%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.058) 3.2%,rgba(0,0,0,0.317) 6.4%,rgba(0,0,0,0.683) 9.6%,rgba(0,0,0,0.942) 12.8%,rgba(0,0,0,1.000) 16.0%,#000 50.0%,rgba(0,0,0,0.995) 54.2%,rgba(0,0,0,0.965) 58.3%,rgba(0,0,0,0.896) 62.5%,rgba(0,0,0,0.790) 66.7%,rgba(0,0,0,0.653) 70.8%,rgba(0,0,0,0.500) 75.0%,rgba(0,0,0,0.347) 79.2%,rgba(0,0,0,0.210) 83.3%,rgba(0,0,0,0.104) 87.5%,rgba(0,0,0,0.035) 91.7%,rgba(0,0,0,0.005) 95.8%,rgba(0,0,0,0.000) 100.0%);-webkit-mask-composite:source-over;mask-composite:add;transition:none}
.curtain .t-fig img{opacity:0;filter:brightness(.2);transform:scale(1.09);transition:opacity 1.8s ease .1s,filter 2.4s ease .1s,transform 2.6s cubic-bezier(.16,1,.3,1) .1s}
@media (prefers-reduced-motion:reduce){
  .t-more,.more{transition:none}
  .more .topic.curtain{transition:none;translate:0 0}
}

/* ===== Words: arrow (instead of the "More" button), "More topics", and the Words page ===== */
.t-arrow-wrap{display:flex;justify-content:center;width:100%;margin-top:22px;opacity:0;transition:opacity 1.2s ease 2.2s}
.topic.lead.seen ~ .t-arrow-wrap{opacity:1}
.t-arrow{background:none;border:0;padding:10px 18px;border-radius:999px;color:rgba(255,255,255,.72);cursor:pointer;display:grid;place-items:center;transition:color .3s ease}
.t-arrow svg{display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.t-arrow[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .t-arrow:hover{color:#fff}
  .t-arrow[aria-expanded="false"]:hover svg{transform:translateY(3px)}
}
.t-cta{display:flex;justify-content:center;margin-top:34px;padding:0 4px 4px}

html.wp-open,html.wp-open body,html.fg-open,html.fg-open body{overflow:hidden}
#wp-root,#fg-root{position:fixed;inset:0;z-index:2800;background:#000;color:#fff;opacity:0;visibility:hidden;transform:translateY(28px);
  transition:opacity .55s ease,transform .8s cubic-bezier(.16,1,.3,1),visibility 0s linear .8s}
#wp-root.open,#fg-root.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.wp-scroll,.pg-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wp-list{display:flex;flex-direction:column;align-items:center;gap:clamp(80px,14vh,160px)!important;padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))!important}
.wp-list .topic{padding-top:clamp(20px,4vw,40px)}
.topic-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
  width: 100%;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .topic-actions {
    justify-content: flex-end;
    width: 100%;
    padding-right: 6px;
  }
  :root[data-theme="light"] #wp-root .topic-actions .fg-action-btn,
  :root[data-theme="light"] #words .topic-actions .fg-action-btn {
    color: rgba(20, 22, 26, 0.85) !important;
  }
  :root[data-theme="light"] #wp-root .topic-actions .fg-action-btn:hover,
  :root[data-theme="light"] #words .topic-actions .fg-action-btn:hover {
    color: #000000 !important;
  }
  :root[data-theme="light"] #wp-root .topic-actions .fg-love-btn.liked,
  :root[data-theme="light"] #words .topic-actions .fg-love-btn.liked {
    color: #ff334b !important;
  }
}
@media (min-width: 901px) {
  .topic-actions {
    justify-content: flex-end;
    width: 100%;
  }
  .topic-actions .fg-action-btn,
  :root[data-theme="light"] .topic .topic-actions .fg-action-btn,
  :root[data-theme="light"] #wp-root .topic-actions .fg-action-btn,
  :root[data-theme="light"] #words .topic-actions .fg-action-btn {
    color: rgba(255, 255, 255, 0.88) !important;
  }
  .topic-actions .fg-action-btn:hover,
  :root[data-theme="light"] .topic .topic-actions .fg-action-btn:hover,
  :root[data-theme="light"] #wp-root .topic-actions .fg-action-btn:hover,
  :root[data-theme="light"] #words .topic-actions .fg-action-btn:hover {
    color: #ffffff !important;
  }
  .topic-actions .fg-love-btn.liked,
  :root[data-theme="light"] .topic .topic-actions .fg-love-btn.liked,
  :root[data-theme="light"] #wp-root .topic-actions .fg-love-btn.liked,
  :root[data-theme="light"] #words .topic-actions .fg-love-btn.liked {
    color: #ff334b !important;
  }
}
.wp-list .topic.curtain{opacity:0;translate:0 26px;transition:opacity 1.25s cubic-bezier(.16,1,.3,1) .15s,translate 1.5s cubic-bezier(.16,1,.3,1) .15s}
.wp-list .topic.curtain.seen{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  #wp-root,#fg-root{transition:none;transform:none}
  .pg-head,.fg-item,.fg-img img{transition:none}
  .wp-list .topic.curtain{transition:none;translate:0 0}
  .t-arrow-wrap,.t-arrow svg{transition:none}
}

/* ===== Shared page chrome (Words + Frames): back arrow left, theme switcher right, title block ===== */
#fg-root{background:var(--bg);color:var(--fg)}
:root[data-theme="light"] #wp-root{background:var(--bg);color:var(--fg)}
.pg-scroll{scrollbar-width:none}
.pg-scroll::-webkit-scrollbar{display:none}
.pg{--pg-btn:rgba(255,255,255,.72);--pg-bd:rgba(255,255,255,.45);--pg-sh:0 10px 24px -6px rgba(20,22,26,.14)}
:root[data-theme="dark"] .pg{--pg-btn:rgba(26,29,33,.75);--pg-bd:rgba(255,255,255,.14);--pg-sh:0 10px 24px -6px rgba(0,0,0,.65)}
.pg-btn{position:absolute;top:max(16px,env(safe-area-inset-top,0px));z-index:6;width:38px;height:38px;border-radius:50%;
  border:.5px solid var(--pg-bd);background:var(--pg-btn);color:var(--fg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--pg-sh);
  display:grid;place-items:center;cursor:pointer;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.pg-btn:active{transform:scale(.92)}
.pg-left{left:max(16px,env(safe-area-inset-left,0px))}
.pg-right{right:max(16px,env(safe-area-inset-right,0px))}
.pg-head{text-align:center;padding:calc(env(safe-area-inset-top,0px) + 84px) 24px 30px;
  opacity:0;translate:0 14px;transition:opacity .9s ease .2s,translate 1.1s cubic-bezier(.16,1,.3,1) .2s}
.pg.open .pg-head{opacity:1;translate:0 0}
.pg-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,8vw,4.6rem);line-height:1;letter-spacing:-.02em;color:var(--fg)}
.pg-sub{margin-top:12px;font-size:14px;letter-spacing:.01em;color:var(--muted)}
@media (min-width:1024px){
  .pg-btn{top:28px;width:40px;height:40px}
  .pg-left{left:32px} .pg-right{right:32px}
  .pg-head{padding-top:calc(env(safe-area-inset-top,0px) + 112px);padding-bottom:44px}
}

/* Words page in light theme (its cinematic text is white by default) */
:root[data-theme="light"] #wp-root .t-title{color:var(--fg);text-shadow:none}
:root[data-theme="light"] #wp-root .t-txt{color:rgba(20,22,26,.78)}
:root[data-theme="light"] #wp-root .t-q{color:var(--fg)}

/* Frames gallery */
.fg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 20px calc(96px + env(safe-area-inset-bottom, 0px));
}
.fg-item {
  margin: 0;
  opacity: 0;
  translate: 0 26px;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1), translate 1.3s cubic-bezier(.16, 1, .3, 1), transform 0.35s cubic-bezier(.2, .85, .25, 1);
}
.fg-item.seen {
  opacity: 1;
  translate: 0 0;
}
.fg-img {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: var(--pill);
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.28), 0 8px 20px -6px rgba(0, 0, 0, 0.16);
  transition: transform 0.4s cubic-bezier(.2, .85, .25, 1), box-shadow 0.4s cubic-bezier(.2, .85, .25, 1);
}
.fg-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(.16, 1, .3, 1);
}
/* Silky smooth bottom gradient fade */
.fg-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 42%,
    rgba(0, 0, 0, 0.22) 64%,
    rgba(0, 0, 0, 0.65) 82%,
    rgba(0, 0, 0, 0.9) 100%
  );
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.35s ease;
}
/* Title & Caption sitting directly on the bottom fade area */
.fg-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(18px, 3.5vw, 26px);
  padding-right: 90px;
  z-index: 3;
  pointer-events: none;
  text-align: left;
}
.fg-tt {
  margin: 0;
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.fg-ts {
  margin: 6px 0 0;
  display: block;
  font-family: var(--sans);
  font-size: clamp(12.5px, 1.1vw, 14.5px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* Bottom Right Corner Action Buttons (Share & Love) */
.fg-actions {
  position: absolute;
  right: clamp(16px, 3.2vw, 24px);
  bottom: clamp(16px, 3.2vw, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 4;
  pointer-events: auto;
}
.fg-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 0;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(255, 255, 255, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  box-shadow: none !important;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, opacity 0.2s ease;
}
.fg-action-btn:hover {
  background: transparent !important;
  color: #ffffff;
  transform: scale(1.15);
}
.fg-action-btn:active {
  transform: scale(0.92);
}
.fg-action-btn svg {
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), fill 0.2s ease, stroke 0.2s ease, filter 0.2s ease;
}
/* Love button active / liked state (Red heart) */
.fg-love-btn.liked {
  color: #ff334b !important;
  background: transparent !important;
  box-shadow: none !important;
}
.fg-love-btn.liked svg {
  fill: #ff334b !important;
  stroke: #ff334b !important;
  filter: drop-shadow(0 2px 6px rgba(255, 51, 75, 0.65)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
  animation: heartPop 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes heartPop {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Share feedback tooltip badge */
.fg-share-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -4px);
  background: rgba(14, 16, 22, 0.92);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 10;
}
.fg-share-tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (min-width: 900px) {
  .fg-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 1040px;
    gap: 72px 56px;
    padding: 8px 32px calc(190px + env(safe-area-inset-bottom, 0px));
  }
  .fg-item:nth-child(even) {
    transform: translateY(96px);
  }
  .fg-item:nth-child(even):hover {
    transform: translateY(90px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .fg-item:hover .fg-img {
    box-shadow: 0 26px 60px -14px rgba(0, 0, 0, 0.38), 0 12px 28px -6px rgba(0, 0, 0, 0.22);
  }
  .fg-item:hover .fg-img img {
    transform: scale(1.045);
  }
  .fg-item:hover .fg-scrim {
    opacity: 0.95;
  }
}
.fg-item:active {
  transform: scale(0.985);
}
@media (min-width: 900px) {
  .fg-item:nth-child(even):active {
    transform: translateY(96px) scale(0.985);
  }
}

  /* Default: Desktop-only showcase element is hidden on all devices by default */
  .words-desktop-showcase {
    display: none !important;
  }

  /* =========================================================================
     DESKTOP ENHANCEMENT LAYER (Mobile 100% UNTOUCHED via min-width: 769px)
     ========================================================================= */

  @media (min-width: 769px) {
    /* Full-Screen Immersive Cinematic Hero */
    .hero {
      position: relative;
      min-height: calc(100vh - 48px);
      min-height: calc(100svh - 48px);
      height: calc(100vh - 48px);
      height: calc(100svh - 48px);
      display: flex;
      flex-direction: column;
      --hr: 36px;
      border-radius: 0 0 var(--hr) var(--hr);
      overflow: hidden;
    }
    .hero-bg,
    .hero::after {
      border-radius: 0 0 36px 36px;
    }
    /* Edge-to-edge full width layout for Hero Navigation */
    .hero .wrap {
      max-width: 100% !important;
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin: 0 !important;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 100%;
      flex: 1;
      position: relative;
      box-sizing: border-box;
    }

    /* Edge-to-Edge Luxury Desktop Navbar Strip */
    .nav {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: clamp(20px, 3vh, 32px) clamp(28px, 4vw, 64px);
      box-sizing: border-box;
      z-index: 60;
    }

    /* Far-Left Corner: Logo */
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: #fff;
      z-index: 62;
      flex-shrink: 0;
    }
    .logo:hover {
      opacity: 0.88;
    }

    /* Dead-Center: Floating Frosted-Glass Pill (VisionOS Style Icon Capsule) */
    .nav-links {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex !important;
      align-items: center;
      gap: 14px !important;
      padding: 6px 22px !important;
      background: rgba(255, 255, 255, 0.12) !important;
      border: 0.5px solid rgba(255, 255, 255, .32) !important;
      outline: none !important;
      border-radius: 999px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      z-index: 61;
      pointer-events: auto;
    }

    /* Far-Right Corner: Theme Switch Button */
    .nav-right {
      display: flex !important;
      align-items: center;
      margin-left: auto;
      z-index: 62;
      flex-shrink: 0;
    }
    .nav-right .theme-btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 0.5px solid rgba(255, 255, 255, .32);
      background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.14));
      box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: #fff;
      cursor: pointer;
      transition: transform .22s cubic-bezier(.22,1,.36,1), background .2s;
    }
    .nav-right .theme-btn:hover {
      transform: scale(1.08);
      background: rgba(255, 255, 255, .35);
    }
    .nav-right .theme-btn:active {
      transform: scale(0.94);
    }
    .nav-right .nav-pill {
      display: none !important;
    }

    /* Hero Text Placement: Lowered to keep mountain peaks completely visible */
    .hero-copy {
      max-width: 960px;
      margin-top: auto;
      margin-bottom: clamp(48px, 10vh, 100px);
      margin-inline: auto;
      transform: none;
      text-align: center;
      padding-inline: 24px;
      box-sizing: border-box;
      width: 100%;
    }
    .hero h1 {
      font-size: clamp(3rem, 5.2vw, 4.8rem);
      letter-spacing: -0.035em;
      line-height: 1.06;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
    }
    .hero-copy .tagline {
      font-size: clamp(1.2rem, 1.7vw, 1.55rem);
      max-width: 44ch;
      margin-top: 18px;
      margin-inline: auto;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    }

    /* Section Spacing & Headings */
    #frames .wrap,
    #words .wrap {
      max-width: 1260px;
      padding-left: 36px;
      padding-right: 36px;
    }
    #frames.section,
    #words .section {
      padding-block: clamp(72px, 8vw, 112px) 0;
    }
    #frames.section h2,
    #words .section h2 {
      font-size: clamp(2.2rem, 3.6vw, 3.2rem);
    }
    #frames .lede,
    #words .lede {
      max-width: 600px;
      font-size: 15.5px;
      margin-top: 16px;
    }

    /* Frames Section Desktop (Slightly larger card holder + lifted button) */
    #frames .fan {
      --cw: clamp(160px, 16vw, 232px);
    }
    #frames .fcard {
      box-shadow: 0 22px 60px -16px rgba(0, 0, 0, 0.24), 0 8px 24px -6px rgba(0, 0, 0, 0.14) !important;
    }
    @media (hover: hover) {
      #frames .fcard:hover {
        box-shadow: 0 28px 75px -14px rgba(0, 0, 0, 0.32), 0 10px 28px -6px rgba(0, 0, 0, 0.18) !important;
      }
    }
    #frames .center-cta {
      margin-top: -22px;
      position: relative;
      z-index: 5;
    }

    /* =========================================================================
       WORDS SECTION DESKTOP (Floating Dark Card - Solipsistic Mind + More Topics)
       ========================================================================= */
    #words > .wrap {
      max-width: 1200px;
      padding-left: clamp(24px, 4vw, 48px);
      padding-right: clamp(24px, 4vw, 48px);
    }

    /* Outer Wrapper: Clean Flex Column (Mobile 100% Untouched via min-width) */
    .words-section-wrapper {
      margin-top: clamp(40px, 5vh, 64px) !important;
      width: 100% !important;
      max-width: 1020px !important;
      margin-inline: auto !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      position: relative !important;
      z-index: 1 !important;
    }
    .words-section-wrapper::before,
    .words-section-wrapper::after {
      display: none !important;
    }

    /* Suppress mobile fold toggle & mobile button on desktop */
    .words-fold-toggle,
    .words-mobile-more-wrap,
    .t-arrow-wrap,
    #arrowWrap {
      display: none !important;
    }

    /* Suppress mobile full-bleed black pseudo sheets on desktop */
    .lead .t-head::before,
    .lead .t-head::after {
      display: none !important;
    }

    /* THE FLOATING DARK CARD (Desktop Black Card: Pure Black #000000, Zero Shadow) */
    .topic {
      width: 100% !important;
      max-width: 1020px !important;
      min-height: 480px !important;
      background: #000000 !important;
      border: none !important;
      border-radius: clamp(26px, 2.8vw, 38px) !important;
      box-shadow: none !important;
      padding: clamp(38px, 4.2vw, 54px) clamp(36px, 4.2vw, 60px) !important;
      box-sizing: border-box !important;
      position: relative !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: clamp(36px, 4.5vw, 64px) !important;
      margin-inline: auto !important;
      overflow: hidden !important;
      z-index: 1 !important;
    }
    :root[data-theme="light"] .topic {
      background: radial-gradient(130% 115% at 50% 0%, #151821 0%, #11131b 28%, #0d0f14 56%, #090a0d 82%, #08090c 100%) !important;
      box-shadow: 0 32px 85px -20px rgba(0, 0, 0, 0.55) !important;
    }

    /* Ambient soft internal glow inside the card (Suppressed in Dark Mode for pure black; preserved in Light Mode) */
    :root:not([data-theme="light"]) .topic::before {
      display: none !important;
    }
    :root[data-theme="light"] .topic::before {
      content: "";
      position: absolute;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      top: 0 !important;
      left: 0 !important;
      background: radial-gradient(110% 75% at 50% 0%, rgba(140, 165, 210, 0.055) 0%, rgba(140, 165, 210, 0.03) 28%, rgba(140, 165, 210, 0.01) 56%, transparent 85%) !important;
      pointer-events: none;
      z-index: 0;
    }

    /* Words Page Modal Overlay (#wp-root) desktop continuity: match Home canvas var(--bg) */
    #wp-root {
      background: var(--bg) !important;
    }

    /* Left Column: Artwork (Generous portrait proportions) */
    .t-head {
      width: 42% !important;
      flex: 0 0 42% !important;
      max-width: 400px !important;
      aspect-ratio: 1 / 1.18 !important;
      position: relative !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      display: block !important;
      margin: 0 !important;
      overflow: visible !important;
      z-index: 1 !important;
    }
    .t-head::after,
    .lead .t-head::after,
    .lead .t-head::before {
      display: none !important;
    }
    .grain {
      position: absolute !important;
      inset: 0 !important;
      z-index: 2 !important;
      opacity: .03 !important;
      pointer-events: none !important;
      border-radius: 22px !important;
    }
    .t-fig {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      aspect-ratio: auto !important;
      margin: 0 !important;
      border-radius: 22px !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0,0,0,0.85) 62%, rgba(0,0,0,0.45) 76%, rgba(0,0,0,0.12) 88%, transparent 100%) !important;
      mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0,0,0,0.85) 62%, rgba(0,0,0,0.45) 76%, rgba(0,0,0,0.12) 88%, transparent 100%) !important;
    }
    .t-fig img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center top !important;
      border: none !important;
      box-shadow: none !important;
      border-radius: 22px !important;
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
      transition: transform .5s cubic-bezier(.16, 1, .3, 1) !important;
    }
    @media (hover: hover) {
      .topic:hover .t-fig img {
        transform: scale(1.03) !important;
      }
    }

    /* Titles placed INSIDE the image at the bottom */
    .t-title {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 3.5% !important;
      z-index: 3 !important;
      padding-inline: 16px !important;
      text-align: center !important;
      font-family: var(--serif) !important;
      font-style: italic !important;
      font-weight: 400 !important;
      font-size: clamp(2rem, 2.5vw, 2.75rem) !important;
      line-height: 1.1 !important;
      letter-spacing: -0.02em !important;
      color: rgba(255, 255, 255, 0.98) !important;
      text-shadow: 0 4px 28px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.8) !important;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: none;
    }

    /* Right Column: Body Prose & Quotes */
    .t-body {
      width: 58% !important;
      flex: 1 1 0 !important;
      padding-inline: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
      z-index: 1 !important;
    }
    .t-txt {
      text-align: left !important;
      margin-top: 0 !important;
      font-size: clamp(14.5px, 1.05vw, 16px) !important;
      line-height: 1.85 !important;
      font-weight: 350 !important;
      color: rgba(255, 255, 255, 0.78) !important;
      max-width: 48ch !important;
      letter-spacing: -0.005em !important;
    }
    /* Opening Hook Text ("What if the only reality...") */
    .t-body > .t-txt:first-child {
      font-family: var(--serif) !important;
      font-style: italic !important;
      font-weight: 400 !important;
      font-size: clamp(1.42rem, 1.8vw, 1.88rem) !important;
      line-height: 1.38 !important;
      color: rgba(255, 255, 255, 0.98) !important;
      letter-spacing: -0.01em !important;
      max-width: 44ch !important;
      margin-bottom: 14px !important;
    }
    .lead .t-more .t-cont {
      margin-top: 14px !important;
    }
    /* Philosophical Highlight Quote */
    .t-q {
      text-align: left !important;
      margin-top: 22px !important;
      padding: 8px 0 !important;
      border-left: none !important;
      font-family: var(--serif) !important;
      font-style: italic !important;
      font-size: clamp(1.35rem, 1.75vw, 1.75rem) !important;
      line-height: 1.34 !important;
      letter-spacing: -0.01em !important;
      color: #ffffff !important;
      max-width: 40ch !important;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
    }



    /* Fully unfold Topic 1's thought on desktop */
    .lead .t-more {
      grid-template-rows: 1fr !important;
      width: 100% !important;
    }
    .lead .t-more-in {
      min-height: 0 !important;
      overflow: visible !important;
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
    }
    .topic.seen .tw,
    .lead .tw {
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
    }

    /* -------------------------------------------------------------------------
       DESKTOP "MORE TOPICS" BUTTON (OUTSIDE THE BOX, UNDERNEATH IT)
       ------------------------------------------------------------------------- */
    .words-desktop-cta,
    #topicsWrap,
    .cta-wrap {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      position: relative !important;
      z-index: 2 !important;
      margin-top: clamp(28px, 3.5vh, 42px) !important;
      opacity: 1 !important;
      grid-template-rows: 1fr !important;
      pointer-events: auto !important;
    }
    #topicsWrap.gone {
      grid-template-rows: 1fr !important;
      opacity: 1 !important;
    }
    .cta-in {
      min-height: auto !important;
      overflow: visible !important;
    }
    .t-arrow-wrap,
    #arrowWrap {
      display: none !important;
    }
    .words-desktop-cta .open-topics-btn,
    #topicsWrap .t-cta {
      margin: 0 !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }

    /* Frosted Dark Pill Buttons on Desktop: Rock solid alignment & smooth hover */
    #words .btn-dark,
    .topics-overlay .btn-dark {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      height: 42px !important;
      padding: 0 6px 0 20px !important;
      border-radius: 999px !important;
      background: #181b22 !important;
      border: 1px solid rgba(255, 255, 255, 0.16) !important;
      color: #f3f3ee !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
      transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease !important;
      cursor: pointer !important;
      transform: none !important;
    }
    #words .btn-dark:hover,
    .topics-overlay .btn-dark:hover {
      background: #222731 !important;
      border-color: rgba(255, 255, 255, 0.28) !important;
      transform: none !important;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5) !important;
    }
    #words .btn-dark .ar,
    .topics-overlay .btn-dark .ar {
      width: 26px !important;
      height: 26px !important;
      border-radius: 50% !important;
      display: grid !important;
      place-items: center !important;
      flex: none !important;
      margin: 0 !important;
      padding: 0 !important;
      background: rgba(255, 255, 255, 0.14) !important;
      color: #ffffff !important;
      transition: background-color .24s ease !important;
    }
    #words .btn-dark:hover .ar,
    .topics-overlay .btn-dark:hover .ar {
      background: rgba(255, 255, 255, 0.24) !important;
    }
    #words .btn-dark .ar svg,
    .topics-overlay .btn-dark .ar svg {
      width: 10.5px !important;
      height: 10.5px !important;
      display: block !important;
      transition: transform .24s cubic-bezier(.22, 1, .36, 1) !important;
    }
    #words .btn-dark:hover .ar svg,
    .topics-overlay .btn-dark:hover .ar svg {
      transform: translateX(4.5px) !important;
    }

    /* =========================================================================
       IDENTITY SECTION DESKTOP (Architectural Split: Left Photo + Right Clean Dossier)
       ========================================================================= */
    #identity > .wrap {
      max-width: 1120px;
      padding-left: clamp(24px, 4vw, 48px);
      padding-right: clamp(24px, 4vw, 48px);
    }
    .identity-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: clamp(36px, 5vh, 60px);
      width: 100%;
    }
    .id-phone-card {
      position: relative !important;
      width: 100% !important;
      max-width: clamp(880px, 74vw, 1040px) !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: clamp(48px, 6vw, 84px) !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      overflow: visible !important;
      text-align: left !important;
    }
    .id-photo-box {
      width: clamp(340px, 28vw, 420px) !important;
      aspect-ratio: 1 / 1.25 !important;
      min-height: 0 !important;
      height: auto !important;
      flex: 0 0 clamp(340px, 28vw, 420px) !important;
      position: relative !important;
      z-index: 1 !important;
      overflow: hidden !important;
      background: transparent !important;
      border-radius: 28px !important;
      border: 1px solid var(--pill-line) !important;
      box-shadow: 0 28px 70px -15px rgba(0, 0, 0, 0.45) !important;
      margin: 0 !important;
    }
    .id-photo-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transform: scale(1.04);
      transform-origin: center 20%;
      transition: transform .5s cubic-bezier(.2,.8,.2,1);
    }
    @media (hover: hover) {
      .id-photo-box:hover img {
        transform: scale(1.09);
      }
    }
    .id-photo-box::after {
      display: none !important;
    }
    .id-photo-name {
      display: none !important;
    }
    .id-sheet {
      position: relative !important;
      flex: 1 1 auto !important;
      max-width: 500px !important;
      width: auto !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }
    .id-handle {
      display: none !important;
    }
    /* 1. Name */
    .id-sheet .id-name {
      display: block !important;
      order: 1 !important;
      position: static !important;
      font-family: var(--serif) !important;
      font-size: clamp(2.8rem, 4.2vw, 4.0rem) !important;
      font-weight: 400 !important;
      line-height: 1.05 !important;
      letter-spacing: -0.01em !important;
      color: var(--fg) !important;
      margin: 0 !important;
      text-shadow: none !important;
    }
    /* 2. Subtitle Philosophy */
    .id-footer-text {
      order: 2 !important;
      font-family: var(--serif) !important;
      font-style: italic !important;
      font-size: clamp(1.2rem, 1.5vw, 1.45rem) !important;
      line-height: 1.35 !important;
      color: var(--fg) !important;
      opacity: 0.85 !important;
      margin: 10px 0 0 0 !important;
      padding: 0 !important;
      border-top: none !important;
      text-align: left !important;
    }
    /* Subtle Divider Line */
    .id-sheet::before {
      content: "" !important;
      order: 3 !important;
      display: block !important;
      width: 44px !important;
      height: 1.5px !important;
      background: var(--pill-line) !important;
      margin: 22px 0 20px 0 !important;
    }
    /* 3. Bio Prose */
    .id-bio {
      order: 4 !important;
      font-size: clamp(15px, 1.1vw, 16.5px) !important;
      line-height: 1.7 !important;
      color: var(--muted) !important;
      max-width: 44ch !important;
      margin: 0 !important;
      text-align: left !important;
    }
    /* 4. Action Button Wrap */
    .id-sheet > div:has(.id-profile-btn),
    .id-name + div {
      order: 5 !important;
      display: inline-flex !important;
      margin: 28px 0 0 0 !important;
    }
    .id-sheet .id-profile-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      height: 38px !important;
      padding: 0 5px 0 15px !important;
      font-size: 13px !important;
      transition: transform .25s ease, box-shadow .25s ease !important;
    }
    @media (hover: hover) {
      .id-sheet .id-profile-btn:hover {
        transform: none !important;
      }
    }
    .id-sheet .id-profile-btn:hover .ar svg {
      transform: translateX(4.5px) !important;
    }
    .id-sheet .id-profile-btn .ar {
      width: 26px !important;
      height: 26px !important;
    }
  }

  /* Accessibility: preserve the existing look at rest; show a clear focus ring for keyboard users. */
  .nav-links .nav-btn:focus-visible,
  .nav-pill-bar .nav-btn:focus-visible,
  .fcard:focus-visible {
    outline: 2px solid var(--lime) !important;
    outline-offset: 3px !important;
  }
  
/* Only controls' hairline treatment and theme transition; existing layout remains intact. */
.pg .pg-btn { border: .5px solid rgba(255,255,255,.32); }
:root[data-theme="light"] .pg .pg-btn { border-color:rgba(20,22,26,.18); }
:root[data-theme="dark"] .pg .pg-btn { border-color:rgba(255,255,255,.24); }
/* ===== Theme switch: pure compositor cross-fade (opacity only, no masks, no JS animation) ===== */
::view-transition-group(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .5s; animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: both; mix-blend-mode: normal; backface-visibility: hidden;
}
html.auralis-theme-reveal, html.auralis-theme-reveal body { pointer-events: none; }
html.auralis-theme-reveal *, html.auralis-theme-reveal *::before, html.auralis-theme-reveal *::after { transition: none !important; }
html.auralis-theme-reveal .theme-btn .theme-icon-sun, html.auralis-theme-reveal .theme-btn .theme-icon-moon {
  transition: opacity .38s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.22,1,.36,1) !important;
}
/* Fallback (no View Transitions API): soft colour fade on the whole page */
html.auralis-theme-fade *, html.auralis-theme-fade *::before, html.auralis-theme-fade *::after {
  transition: background-color .45s cubic-bezier(.4,0,.2,1), color .45s cubic-bezier(.4,0,.2,1), border-color .45s cubic-bezier(.4,0,.2,1), fill .45s cubic-bezier(.4,0,.2,1), stroke .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1) !important;
}
/* Preserve the original Sun/Moon icon rotation during Samsung's colour-fade fallback.
   The blanket fallback transition above otherwise overrides transform/opacity. */
html.auralis-theme-fade .theme-icon-sun,
html.auralis-theme-fade .theme-icon-moon {
  transition: opacity .38s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.22,1,.36,1) !important;
}
/* Samsung-only synchronized theme interpolation. Avoid a root snapshot,
   and do not override transform/opacity on the theme icons or moving cards.
   Non-Samsung browsers never receive this class. */
html.auralis-samsung-theme,
html.auralis-samsung-theme body,
html.auralis-samsung-theme .hero,
html.auralis-samsung-theme .panel,
html.auralis-samsung-theme .words-card,
html.auralis-samsung-theme .id-phone-card,
html.auralis-samsung-theme .fcard,
html.auralis-samsung-theme .card,
html.auralis-samsung-theme .nav-pill-bar,
html.auralis-samsung-theme .theme-btn,
html.auralis-samsung-theme .artifact-card,
html.auralis-samsung-theme #artifact-details,
html.auralis-samsung-theme .connect-bar {
  transition-property: background-color, color, border-color, box-shadow !important;
  transition-duration: .5s !important;
  transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
}
/* Keep the original 550ms rotation and 380ms cross-fade on both icons. */
html.auralis-samsung-theme .theme-icon-sun,
html.auralis-samsung-theme .theme-icon-moon {
  transition: opacity .38s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.22,1,.36,1) !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

:is(#artifacts,#artifact-details){--bg:#fbfbf9;--fg:#14161a;--muted:#5d636b;--card:#fff;--pill:#f0f0ec;--pill-line:#e2e2dc;--lime:#d4e85a;--glass:rgba(255,255,255,.72);--sans:"Inter Tight",system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;--aurora-a:rgba(182,202,176,.52);--aurora-b:rgba(208,221,200,.64);--aurora-c:rgba(224,232,217,.9);--aurora-d:rgba(245,246,240,.95);--rim:rgba(75,95,73,.24);--button:rgba(255,255,255,.43);--button-border:rgba(85,101,86,.28);--shadow:rgba(40,57,41,.10);color-scheme:light}
html[data-theme="dark"] :is(#artifacts,#artifact-details){--bg:#0c0e10;--fg:#f1f1ec;--muted:#9aa1a8;--card:#15181b;--pill:#1a1d20;--pill-line:#2a2e33;--glass:rgba(21,24,27,.76);--aurora-a:rgba(85,111,83,.40);--aurora-b:rgba(65,86,71,.58);--aurora-c:rgba(36,55,43,.88);--aurora-d:rgba(20,25,23,.98);--rim:rgba(203,225,199,.25);--button:rgba(255,255,255,.075);--button-border:rgba(232,244,230,.25);--shadow:rgba(0,0,0,.35);color-scheme:dark}
#artifacts .eyebrow{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin:0 0 18px 2px}
#artifacts .artifact-card{position:relative;width:100%;min-height:470px;border-radius:28px;background:var(--bg);overflow:hidden;isolation:isolate;backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:0 24px 65px -28px var(--shadow);border:1px solid var(--pill-line)}
#artifacts .aurora{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--frost-top) 0%,var(--frost-top) 37%,var(--frost-mid) 58%,transparent 78%),radial-gradient(190px 185px at 96% 68%,rgba(25,114,255,var(--glow-alpha)) 0%,rgba(28,102,248,var(--glow-mid)) 48%,rgba(28,92,232,0) 100%),radial-gradient(210px 190px at 88% 96%,rgba(35,115,255,var(--glow-alpha)) 0%,rgba(48,95,245,var(--glow-mid)) 55%,rgba(48,95,245,0) 100%),radial-gradient(210px 195px at 14% 92%,rgba(128,69,224,var(--glow-alpha)) 0%,rgba(112,58,204,var(--glow-mid)) 50%,rgba(80,42,160,0) 100%),radial-gradient(260px 235px at 52% 84%,rgba(78,72,240,var(--glow-alpha)) 0%,rgba(67,63,219,var(--glow-mid)) 46%,rgba(32,34,118,.25) 78%,rgba(14,18,28,0) 100%),transparent}
#artifacts .aurora-softener{position:absolute;left:-20px;right:-20px;bottom:-30px;height:295px;pointer-events:none;background:radial-gradient(circle at 20% 82%,rgba(138,76,235,.45) 0%,transparent 55%),radial-gradient(circle at 52% 68%,rgba(76,74,245,.5) 0%,transparent 58%),radial-gradient(circle at 88% 58%,rgba(25,118,255,.55) 0%,transparent 56%);filter:blur(26px);opacity:.9}
#artifacts .sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(153deg,rgba(255,255,255,.20),transparent 38%,rgba(255,255,255,.045) 74%,transparent);opacity:.7}
#artifacts .rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid transparent;background:linear-gradient(165deg,rgba(255,255,255,.36),transparent 44%,var(--rim) 100%) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude}
#artifacts .sphere{position:absolute;top:30px;left:30px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#ffffff 0%,#e8e8e8 7%,#b8b8b8 19%,#7c7c7c 38%,#3e3e3e 62%,#141414 82%,#070707 96%,#050505 100%);box-shadow:inset -2px -3px 6px rgba(0,0,0,.85),0 6px 16px rgba(0,0,0,.45);z-index:2}
#artifacts .content{position:relative;z-index:1;padding:122px 30px 100px}
#artifacts .kicker{display:none;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
#artifacts .heading{overflow-wrap:normal;color:var(--card-text);font-size:24px;line-height:1.16;letter-spacing:-.045em;font-weight:600;margin:0 0 15px;max-width:280px}
#artifacts .heading em{font-family:var(--sans);font-style:normal;font-weight:600;letter-spacing:inherit}
#artifacts .description{font-size:14px;line-height:1.55;letter-spacing:-.005em;color:var(--card-subtext);max-width:300px;margin:0}
#artifacts .actions{position:absolute;z-index:2;bottom:29px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center}
#artifacts .pill{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:6px 6px 6px 20px;min-height:42px;border-radius:999px;border:0;background:#f1f1ec;color:#14161a;font:500 13px var(--sans);text-decoration:none;cursor:pointer;transition:transform .22s cubic-bezier(.22,1,.36,1),background-color .25s ease}
#artifacts .pill:active{transform:scale(.98)}
#artifacts .pill:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
#artifacts .pill .ar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#14161a;color:#fff;flex:none}
#artifacts .pill .ar svg{transition:transform .24s cubic-bezier(.22,1,.36,1)}
#artifacts .pill:hover .ar svg{transform:translateX(2px)}
#artifacts .read-btn{padding:6px 20px;min-width:83px}
#artifacts .artifact-tag{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:8px;padding:5px 14px;border-radius:999px;background:var(--pill);border:1px solid var(--pill-line);font-size:11.5px;color:var(--fg);margin:0 0 20px}
#artifacts .artifact-tag i{width:6px;height:6px;border-radius:50%;background:var(--fg);display:block}
#artifacts .rim{background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.06) 42%,rgba(155,165,245,.22) 68%,rgba(210,210,255,.62) 92%,rgba(230,232,255,.78) 100%) border-box}
#artifacts .sheen{opacity:var(--sheen-opacity)}
#artifact-details{width:min(420px,calc(100vw - 36px));border:1px solid var(--pill-line);border-radius:22px;background:var(--card);color:var(--fg);padding:28px;box-shadow:0 20px 80px rgba(0,0,0,.18);font-family:var(--sans)}
#artifact-details::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(5px)}
#artifact-details h2{font-size:24px;letter-spacing:-.04em;margin:0 0 12px}
#artifact-details p{font-size:14px;line-height:1.6;color:var(--muted)}
#artifact-details .pill{margin-top:12px}
@media (max-width:380px){#artifacts .heading{font-size:22px}
#artifacts .description{font-size:13.5px}
#artifacts .actions{bottom:25px}
#artifacts .pill{min-height:42px}
#artifacts .artifact-card{min-height:450px}
#artifacts .content{padding-left:25px;padding-right:25px}
#artifacts .sphere{left:25px}
#artifacts .actions{left:25px;right:25px}}
@media (prefers-reduced-motion:reduce){#artifacts *::before,#artifacts *::after{transition:none!important;animation:none!important}}
:is(#artifacts,#artifact-details){--frost-top:rgba(251,251,249,.77);--frost-mid:rgba(248,247,253,.45);--glow-alpha:.76;--glow-mid:.56;--card-text:#181b24;--card-subtext:#454858;--sheen-opacity:.38}
html[data-theme="dark"] :is(#artifacts,#artifact-details){--frost-top:rgba(14,16,26,.76);--frost-mid:rgba(17,18,37,.42);--glow-alpha:.94;--glow-mid:.73;--card-text:#f3f5f8;--card-subtext:#c0c7db;--sheen-opacity:.18}
#artifacts .artifact-card{background:var(--bg);transition:background-color .42s ease,border-color .42s ease,box-shadow .42s ease}
#artifacts .aurora{transition:opacity .42s ease}
#artifacts .aurora-softener{opacity:.72}
html[data-theme="dark"] #artifacts .aurora-softener{opacity:.9}
#artifacts .artifact-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 48%,rgba(255,255,255,.04));}
#artifacts .content,#artifacts .actions,#artifacts .sphere{z-index:2}
@media (prefers-reduced-motion:reduce){#artifacts .artifact-card,#artifacts .aurora{transition:none}}
:is(#artifacts,#artifact-details){--artifact-hairline:rgba(20,22,26,.14);--artifact-button-glass:rgba(255,255,255,.23);--artifact-button-ink:#171923;--artifact-button-rim:rgba(20,22,26,.20);--artifact-orb-edge:rgba(255,255,255,.12)}
html[data-theme="dark"] :is(#artifacts,#artifact-details){--artifact-hairline:rgba(255,255,255,.18);--artifact-button-glass:rgba(17,20,33,.24);--artifact-button-ink:#f7f8ff;--artifact-button-rim:rgba(255,255,255,.35);--artifact-orb-edge:rgba(255,255,255,.08)}
#artifacts .artifact-card{border:1px solid var(--artifact-hairline);box-shadow:0 18px 42px -24px var(--shadow);}
#artifacts .artifact-card .rim{inset:0;border:1px solid transparent;background:linear-gradient(160deg,rgba(255,255,255,.23),transparent 47%,rgba(208,217,255,.28)) border-box;opacity:.50;}
html[data-theme="dark"] #artifacts .artifact-card .rim{opacity:.38}
#artifacts .artifact-tag{border:1px solid var(--pill-line);box-shadow:none}
#artifacts .actions .pill{min-height:42px;border:1px solid var(--artifact-button-rim);background:var(--artifact-button-glass);color:var(--artifact-button-ink);-webkit-backdrop-filter:blur(14px) saturate(145%);backdrop-filter:blur(14px) saturate(145%);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 3px 14px rgba(9,12,30,.06);transition:background .25s ease,border-color .25s ease,transform .22s cubic-bezier(.22,1,.36,1);}
#artifacts .actions .pill:hover{background:rgba(255,255,255,.32);border-color:rgba(255,255,255,.55)}
html[data-theme="dark"] #artifacts .actions .pill:hover{background:rgba(255,255,255,.16)}
#artifacts .actions .pill .ar{background:rgba(14,17,27,.82);color:#fff;border:1px solid rgba(255,255,255,.19);}
html[data-theme="dark"] #artifacts .actions .pill .ar{background:rgba(255,255,255,.88);color:#15181d;border-color:rgba(255,255,255,.25)}
#artifacts .sphere{box-shadow:inset -2px -3px 7px rgba(0,0,0,.78),inset 1px 1px 1px var(--artifact-orb-edge),0 7px 17px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.18);}
@media (max-width:380px){#artifacts .actions .pill{min-height:42px}}
:is(#artifacts,#artifact-details){--artifact-surface:rgba(251,251,249,.25);--artifact-ink:#181b24;--artifact-secondary:#41475c;--artifact-edge:rgba(20,22,26,.14);--artifact-btn:rgba(255,255,255,.20);--artifact-btn-border:rgba(24,29,45,.18);--artifact-btn-ink:#1a2032;--artifact-arrow-bg:rgba(19,22,33,.85);--artifact-arrow-fg:#fff;--frost-top:rgba(251,251,249,.56);--frost-mid:rgba(248,247,253,.28);--glow-alpha:.78;--glow-mid:.58;--sheen-opacity:.25}
html[data-theme="dark"] :is(#artifacts,#artifact-details){--artifact-surface:rgba(12,14,16,.22);--artifact-ink:#f3f5f8;--artifact-secondary:#cbd0df;--artifact-edge:rgba(255,255,255,.15);--artifact-btn:rgba(16,19,36,.21);--artifact-btn-border:rgba(242,244,255,.27);--artifact-btn-ink:#f7f8ff;--artifact-arrow-bg:rgba(247,247,251,.9);--artifact-arrow-fg:#161923;--frost-top:rgba(13,15,24,.60);--frost-mid:rgba(17,18,37,.30);--glow-alpha:.94;--glow-mid:.72;--sheen-opacity:.14}
#artifacts .artifact-card{background:var(--artifact-surface);border:.5px solid var(--artifact-edge);box-shadow:0 22px 55px -34px rgba(18,19,37,.28);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);transition:background .4s,border-color .4s,box-shadow .4s}
html[data-theme="dark"] #artifacts .artifact-card{box-shadow:0 24px 62px -34px rgba(0,0,0,.60)}
#artifacts .artifact-card .rim{display:none}
#artifacts .artifact-card .aurora-softener{opacity:.63}
html[data-theme="dark"] #artifacts .artifact-card .aurora-softener{opacity:.82}
#artifacts .heading,#artifacts .heading em{font-family:var(--sans);font-style:normal;font-weight:600;letter-spacing:-.037em;color:var(--artifact-ink)}
#artifacts .heading{font-size:23px;line-height:1.19;margin-bottom:14px}
#artifacts .description{color:var(--artifact-secondary);line-height:1.55;font-size:14px;max-width:296px}
#artifacts .artifact-tag{padding:5px 14px;gap:8px;background:var(--pill);border:.5px solid var(--pill-line);border-radius:999px;font-weight:400;letter-spacing:0;box-shadow:none}
#artifacts .artifact-tag i{width:6px;height:6px}
#artifacts .actions .pill{min-height:41px;background:var(--artifact-btn);border:.5px solid var(--artifact-btn-border);color:var(--artifact-btn-ink);box-shadow:inset 0 .5px 0 rgba(255,255,255,.15);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);font-weight:500;transition:background .22s,border-color .22s,transform .22s}
#artifacts .actions .pill:hover{background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.38)}
html[data-theme="dark"] #artifacts .actions .pill:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.42)}
#artifacts .actions .pill .ar,html[data-theme="dark"] #artifacts .actions .pill .ar{background:var(--artifact-arrow-bg);color:var(--artifact-arrow-fg);border:.5px solid var(--artifact-btn-border);width:29px;height:29px}
#artifacts .sphere{background:radial-gradient(circle at 38% 35%,#ffffff 0%,#e8e8e8 7%,#b8b8b8 19%,#7c7c7c 38%,#3e3e3e 62%,#141414 82%,#070707 96%,#050505 100%);box-shadow:inset -2px -3px 7px rgba(0,0,0,.78),0 7px 17px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.15)}
@media (max-width:380px){#artifacts .heading{font-size:22px}
#artifacts .artifact-card{min-height:450px}}
@media (prefers-reduced-motion:reduce){#artifacts .artifact-card,#artifacts .actions .pill{transition:none}}
:is(#artifacts,#artifact-details){--modal-surface:rgba(250,250,248,.93);--modal-border:rgba(22,25,32,.15);--modal-chip:rgba(20,24,32,.045);--modal-rule:rgba(22,25,32,.10)}
html[data-theme="dark"] :is(#artifacts,#artifact-details){--modal-surface:rgba(21,23,28,.94);--modal-border:rgba(255,255,255,.16);--modal-chip:rgba(255,255,255,.07);--modal-rule:rgba(255,255,255,.13)}
#artifacts button,#artifacts a{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}
#artifacts button:focus:not(:focus-visible),#artifacts a:focus:not(:focus-visible){outline:none}
#artifact-details{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:min(85dvh,700px);overflow-y:auto;padding:25px 27px 28px;border:.5px solid var(--modal-border);border-radius:23px;background:var(--modal-surface);color:var(--fg);box-shadow:0 28px 95px rgba(0,0,0,.20);backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);overscroll-behavior:contain}
#artifact-details::backdrop{background:rgba(0,0,0,.46);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#artifact-details .modal-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px}
#artifact-details .modal-label{font-size:10px;font-weight:500;letter-spacing:.15em;color:var(--muted)}
#artifact-details .modal-close{width:31px;height:31px;display:grid;place-items:center;flex:none;border:.5px solid var(--modal-border);border-radius:50%;background:var(--modal-chip);color:var(--fg);cursor:pointer;transition:background .2s,transform .2s}
#artifact-details .modal-close:hover{background:var(--pill)}
#artifact-details .modal-close:active{transform:scale(.95)}
#artifact-details .modal-close:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
#artifact-details h2{font-size:23px;line-height:1.15;letter-spacing:-.035em;font-weight:600;margin:0 0 12px}
#artifact-details p{font-size:13px;line-height:1.62;color:var(--muted);margin:0 0 15px}
#artifact-details .modal-intro{margin-bottom:0}
#artifact-details .modal-rule{height:.5px;background:var(--modal-rule);margin:19px 0}
#artifact-details h3{font-size:12px;font-weight:600;letter-spacing:-.005em;margin:0 0 8px}
#artifact-details .tech-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
#artifact-details .tech-list span{font-size:11px;line-height:1.4;padding:6px 10px;border:.5px solid var(--modal-border);border-radius:999px;background:var(--modal-chip);color:var(--fg)}
@media (max-width:420px){#artifact-details{padding:21px 20px 23px;border-radius:20px}
#artifact-details h2{font-size:21px}
#artifact-details p{font-size:12.5px}}
#artifact-details .modal-layout{display:block}
#artifact-details .modal-summary,#artifact-details .modal-build{min-width:0}
@media (min-width:760px) and (min-height:480px){#artifact-details{width:min(760px,calc(100vw - 64px));max-height:min(82dvh,680px);padding:30px 34px 32px;border-radius:24px}
#artifact-details .modal-top{margin-bottom:23px}
#artifact-details .modal-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:34px;align-items:start}
#artifact-details .modal-summary{padding-right:29px;border-right:.5px solid var(--modal-rule)}
#artifact-details .modal-summary h2{font-size:27px;line-height:1.14;margin-bottom:16px}
#artifact-details .modal-build .modal-rule{display:none}
#artifact-details .modal-build h3:first-of-type{margin-top:1px}
#artifact-details .modal-build p{margin-bottom:20px}}
@media (max-width:420px){#artifact-details{max-height:calc(100dvh - 36px);width:calc(100vw - 28px);padding:21px 20px 23px}
#artifact-details .modal-top{margin-bottom:15px}
#artifact-details .modal-rule{margin:17px 0}
#artifact-details .tech-list{gap:6px}}
@media (prefers-reduced-motion:reduce){#artifact-details .modal-close{transition:none}}
/* Site-native integration: no global component overrides */
#artifacts{padding-top:clamp(76px,10vw,145px);padding-bottom:clamp(76px,10vw,145px);background:transparent;}
#artifacts .artifact-inner{display:flex;align-items:center;flex-direction:column;width:100%;}
#artifacts .artifact-tag{margin-bottom:24px;}
#artifacts .artifact-card{width:min(100%,374px);}
#artifacts .heading{font-family:var(--sans);}
#artifacts .artifact-card button,#artifacts .artifact-card a,#artifact-details button{-webkit-tap-highlight-color:transparent;}
#artifact-details{margin:auto;position:fixed;overscroll-behavior:contain;opacity:0;transform:translateY(12px) scale(.985);transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),display .32s allow-discrete,overlay .32s allow-discrete;}
#artifact-details[open]{opacity:1;transform:translateY(0) scale(1);}
@starting-style{#artifact-details[open]{opacity:0;transform:translateY(12px) scale(.985)}}
#artifact-details::backdrop{transition:background-color .3s ease,backdrop-filter .3s ease;}
#artifact-details button:focus-visible,#artifacts button:focus-visible,#artifacts a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media(prefers-reduced-motion:reduce){#artifact-details{transition:none;transform:none}}

@media(prefers-color-scheme:dark){html:not([data-theme="light"]) :is(#artifacts,#artifact-details){--artifact-surface:rgba(12,14,16,.22);--artifact-ink:#f3f5f8;--artifact-secondary:#cbd0df;--artifact-edge:rgba(255,255,255,.15);--artifact-btn:rgba(16,19,36,.21);--artifact-btn-border:rgba(242,244,255,.27);--artifact-btn-ink:#f7f8ff;--artifact-arrow-bg:rgba(247,247,251,.9);--artifact-arrow-fg:#161923;--frost-top:rgba(13,15,24,.60);--frost-mid:rgba(17,18,37,.30);--glow-alpha:.94;--glow-mid:.72;--sheen-opacity:.14;--card-text:#f3f5f8;--card-subtext:#c0c7db;--modal-surface:rgba(21,23,28,.94);--modal-border:rgba(255,255,255,.16);--modal-chip:rgba(255,255,255,.07);--modal-rule:rgba(255,255,255,.13);}}

/* v9.8 — Artifacts-only deep ember frosted palette; other sections untouched. */
#artifacts {
  --ember-deep: rgba(75, 27, 15, .84);
  --ember-mid: rgba(153, 53, 22, .58);
  --ember-glow: rgba(223, 94, 35, .43);
  --ember-soft: rgba(244, 151, 79, .25);
}
#artifacts .artifact-card {
  background: rgba(34, 23, 21, .16);
  border: .5px solid rgba(153, 100, 79, .27);
  box-shadow: 0 16px 40px -26px rgba(59, 30, 19, .26),
              0 38px 82px -52px rgba(105, 48, 25, .18),
              inset 0 .5px 0 rgba(255,255,255,.12);
}
html[data-theme="dark"] #artifacts .artifact-card {
  background: rgba(19, 17, 17, .32);
  border-color: rgba(241, 163, 119, .18);
  box-shadow: 0 20px 48px -30px rgba(0,0,0,.70),
              0 36px 82px -52px rgba(131, 48, 20, .24),
              inset 0 .5px 0 rgba(255,255,255,.07);
}
#artifacts .aurora {
  background:
    linear-gradient(180deg, rgba(251,248,244,.72) 0%, rgba(243,230,217,.47) 35%, rgba(80,37,24,.09) 66%, transparent 84%),
    radial-gradient(230px 220px at 93% 91%, var(--ember-glow) 0%, transparent 79%),
    radial-gradient(220px 225px at 13% 91%, var(--ember-mid) 0%, transparent 78%),
    radial-gradient(250px 245px at 54% 88%, var(--ember-deep) 0%, transparent 86%),
    radial-gradient(220px 160px at 74% 67%, var(--ember-soft) 0%, transparent 87%);
}
html[data-theme="dark"] #artifacts .aurora {
  background:
    linear-gradient(180deg, rgba(17,18,19,.92) 0%, rgba(23,20,20,.85) 36%, rgba(34,23,21,.25) 68%, transparent 85%),
    radial-gradient(230px 220px at 93% 91%, rgba(221,87,29,.55) 0%, transparent 79%),
    radial-gradient(220px 225px at 13% 91%, rgba(137,45,23,.62) 0%, transparent 78%),
    radial-gradient(250px 245px at 54% 88%, rgba(100,37,22,.86) 0%, transparent 86%),
    radial-gradient(220px 160px at 74% 67%, rgba(248,139,66,.26) 0%, transparent 87%);
}
#artifacts .aurora-softener {
  background:
    radial-gradient(circle at 20% 82%, rgba(146,53,27,.31), transparent 57%),
    radial-gradient(circle at 52% 68%, rgba(174,65,28,.27), transparent 60%),
    radial-gradient(circle at 88% 58%, rgba(236,127,60,.31), transparent 58%);
  opacity: .62;
}
html[data-theme="dark"] #artifacts .aurora-softener { opacity: .76; }
#artifacts .heading, #artifacts .heading em { color: #24201e; }
#artifacts .description { color: #514640; }
html[data-theme="dark"] #artifacts .heading,
html[data-theme="dark"] #artifacts .heading em { color: #f6f1eb; }
html[data-theme="dark"] #artifacts .description { color: #d1c3bb; }
#artifacts .actions .pill {
  background: rgba(255,248,242,.28);
  border-color: rgba(93,59,44,.20);
  color: #2b2521;
}
html[data-theme="dark"] #artifacts .actions .pill {
  background: rgba(28,22,20,.30);
  border-color: rgba(255,219,194,.26);
  color: #f7f0ea;
}
#artifacts .actions .pill:hover { background: rgba(255,250,245,.42); }
html[data-theme="dark"] #artifacts .actions .pill:hover { background: rgba(255,235,217,.14); }
/* Preserve original monochrome sphere and all section/layout/modal logic. */

/* v9.11: final isolated material override. No glass, aurora, blur, or colored glow. */
#artifacts {
  --matte-surface: #eeeee9;
  --matte-ink: #191b1b;
  --matte-muted: #626562;
  --matte-border: rgba(23,27,25,.105);
  --matte-button: #e1e2dc;
  --matte-button-hover: #d7d9d2;
  --matte-arrow: #232725;
  --matte-arrow-ink: #f7f7f4;
  --matte-shadow: 0 25px 52px -38px rgba(30,32,29,.28), 0 7px 19px -15px rgba(30,32,29,.14);
}
html[data-theme="dark"] #artifacts {
  --matte-surface: #202325;
  --matte-ink: #f2f2ef;
  --matte-muted: #b4b7b4;
  --matte-border: rgba(255,255,255,.095);
  --matte-button: #34383a;
  --matte-button-hover: #42474a;
  --matte-arrow: #eceeeb;
  --matte-arrow-ink: #202325;
  --matte-shadow: 0 28px 55px -35px rgba(0,0,0,.62), 0 8px 22px -17px rgba(0,0,0,.42);
}
@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) #artifacts {
    --matte-surface:#202325;--matte-ink:#f2f2ef;--matte-muted:#b4b7b4;
    --matte-border:rgba(255,255,255,.095);--matte-button:#34383a;
    --matte-button-hover:#42474a;--matte-arrow:#eceeeb;
    --matte-arrow-ink:#202325;
    --matte-shadow:0 28px 55px -35px rgba(0,0,0,.62),0 8px 22px -17px rgba(0,0,0,.42);
  }
}
#artifacts .artifact-card,
#artifacts .artifact-feature .artifact-card {
  background: var(--matte-surface) !important;
  background-image: none !important;
  color: var(--matte-ink);
  border: .5px solid var(--matte-border) !important;
  box-shadow: var(--matte-shadow) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none;
  isolation: isolate;
  transition: background-color .35s ease,border-color .35s ease,box-shadow .35s ease;
}
#artifacts .artifact-card .aurora,
#artifacts .artifact-card .aurora-softener,
#artifacts .artifact-card .sheen,
#artifacts .artifact-card .rim,
#artifacts .artifact-card::before,
#artifacts .artifact-card::after {display:none !important;content:none !important;}
#artifacts .artifact-card .heading,
#artifacts .artifact-card .heading em {color:var(--matte-ink) !important;}
#artifacts .artifact-card .description {color:var(--matte-muted) !important;}
#artifacts .artifact-card .actions .pill {
  background:var(--matte-button) !important;
  color:var(--matte-ink) !important;
  border:.5px solid var(--matte-border) !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  transition:background-color .22s ease,transform .22s cubic-bezier(.22,1,.36,1);
}
#artifacts .artifact-card .actions .pill:hover {background:var(--matte-button-hover) !important;}
#artifacts .artifact-card .actions .pill .ar,
html[data-theme="dark"] #artifacts .artifact-card .actions .pill .ar {
  background:var(--matte-arrow) !important;
  color:var(--matte-arrow-ink) !important;
  border:0 !important;
  box-shadow:none !important;
}
/* Modal follows the main site's theme without a glass material. */
#artifact-details {
  background:var(--card) !important;
  background-image:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:0 24px 70px rgba(0,0,0,.16) !important;
}
html[data-theme="dark"] #artifact-details {box-shadow:0 24px 70px rgba(0,0,0,.46) !important;}
#artifact-details::backdrop {
  background:rgba(0,0,0,.43) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
}
#artifact-details .modal-close,
#artifact-details .modal-chip,
#artifact-details .tech-chip {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
#artifacts button,#artifacts a,#artifact-details button {-webkit-tap-highlight-color:transparent;}
@media(prefers-reduced-motion:reduce){
  #artifacts .artifact-card,#artifacts .actions .pill{transition:none !important;}
}

/* v9.12: strictly scoped Artifacts geometry + sphere material refinement.
   No changes to site navigation, other sections, Lenis, or Read modal logic. */
#artifacts .artifact-card .sphere {
  /* Spherical charcoal surface: one continuous circular silhouette, no flattened highlight. */
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%,
    #b4b4b4 0%, #858585 8%, #565656 22%, #323232 42%,
    #191919 64%, #0b0b0b 83%, #050505 100%) !important;
  box-shadow: inset -3px -5px 9px rgba(0,0,0,.40),
              inset 1px 1px 2px rgba(255,255,255,.13),
              0 7px 13px -7px rgba(0,0,0,.40) !important;
  transform: none;
  flex: none;
}
/* Keep original card design on desktop. */
@media (max-width: 760px) {
  #artifacts .artifact-feature {width:100%;max-width:374px;margin-inline:auto;}
  #artifacts .artifact-feature .artifact-card {
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:1 / 1;
    border-radius:clamp(20px,6vw,26px);
    position:relative;
  }
  #artifacts .artifact-card .sphere {
    top:clamp(21px,6%,27px) !important;
    left:50% !important;
    width:clamp(44px,13vw,52px);
    height:clamp(44px,13vw,52px);
    transform:translateX(-50%) !important;
  }
  #artifacts .artifact-card .content {
    position:absolute;
    top:auto !important;
    bottom:clamp(87px,24%,104px);
    left:0;
    right:0;
    padding:0 clamp(20px,7.5%,28px) !important;
    margin:0;
    text-align:left;
    z-index:2;
  }
  #artifacts .artifact-card .heading {
    font-size:clamp(19px,5.5vw,23px);
    line-height:1.15;
    margin-bottom:clamp(7px,2.1vw,11px);
  }
  #artifacts .artifact-card .description {
    font-size:clamp(11px,3.15vw,13px);
    line-height:1.4;
    max-width:310px;
    margin:0;
  }
  #artifacts .artifact-card .actions {
    bottom:clamp(18px,6.3%,25px) !important;
    left:clamp(20px,7.5%,28px) !important;
    right:clamp(20px,7.5%,28px) !important;
    gap:10px;
  }
  #artifacts .artifact-card .actions .pill {min-height:38px;}
}
@media (max-width: 350px) {
  #artifacts .artifact-card .sphere {top:17px !important;width:42px;height:42px;}
  #artifacts .artifact-card .content {bottom:79px;padding-inline:18px !important;}
  #artifacts .artifact-card .heading {font-size:18px;}
  #artifacts .artifact-card .description {font-size:11px;line-height:1.32;}
  #artifacts .artifact-card .actions {bottom:16px !important;left:18px !important;right:18px !important;}
  #artifacts .artifact-card .actions .pill {min-height:34px;}
}

/* v9.14: Pure CSS sphere only. No raster images, no bright outer stroke.
   Card layout, text, buttons, modal and other site code are unchanged. */
#artifacts .artifact-card .sphere {
  width: 124px !important;
  height: 124px !important;
  aspect-ratio: 1 / 1;
  top: 48px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse 90% 86% at 31% 25%,
      rgba(250,250,248,.85) 0%,
      rgba(204,205,202,.72) 7%,
      rgba(121,123,121,.76) 19%,
      #4a4b4a 34%,
      #282a2a 53%,
      #131515 75%,
      #090a0a 91%,
      #080909 100%) !important;
  box-shadow:
      inset -9px -12px 17px -11px rgba(0,0,0,.60),
      inset 5px 6px 14px -11px rgba(255,255,255,.11),
      0 14px 15px -13px rgba(0,0,0,.22) !important;
  background-clip: padding-box !important;
  filter: none !important;
  isolation: isolate;
}
/* Soft grounded elliptical cast shadow; never adds a rim to the sphere. */
#artifacts .artifact-card .sphere::after {
  content: "";
  position: absolute;
  width: 112%;
  height: 15%;
  left: -6%;
  top: 99%;
  border-radius: 50%;
  background: rgba(0,0,0,.26);
  filter: blur(8px);
  transform: translateY(-12%);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 760px) {
  #artifacts .artifact-card .sphere {
    width: clamp(100px, 31vw, 124px) !important;
    height: clamp(100px, 31vw, 124px) !important;
    top: clamp(30px, 10%, 46px) !important;
  }
}
@media (max-width: 350px) {
  #artifacts .artifact-card .sphere {
    width: 94px !important;
    height: 94px !important;
    top: 27px !important;
  }
}

/* v9.16: Artifacts sphere only. Glossy charcoal sphere + floor shadow, gradient layers fitted numerically to the reference render.
   Same element as v9.15; smaller and set back, with a lighter floor shadow. Pure CSS, no images. */
#artifacts .artifact-card .sphere {
  position: absolute !important;
  top: 40px !important;
  left: 50% !important;
  width: 104px !important;
  height: 104px !important;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%) !important;
  border: none !important;
  outline: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  isolation: auto !important;
  pointer-events: none;
}
/* Body: gradient layers fitted to the reference render (lit from upper left, tilted specular, dark core, floor bounce). */
#artifacts .artifact-card .sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  border-radius: 50%;
  filter: none;
  transform: none;
  opacity: 1;
  background:
    radial-gradient(ellipse 78.1% 33.1% at 64.0% 101.7%, rgba(0,0,0,0.817) 0%, rgba(0,0,0,0.761) 12%, rgba(0,0,0,0.616) 25%, rgba(0,0,0,0.434) 38%, rgba(0,0,0,0.265) 50%, rgba(0,0,0,0.141) 62%, rgba(0,0,0,0.065) 75%, rgba(0,0,0,0.026) 88%, rgba(0,0,0,0.000) 100%),
    radial-gradient(ellipse 63.8% 35.8% at 64.8% 49.0%, rgba(14,14,14,0.995) 0%, rgba(14,14,14,0.927) 12%, rgba(14,14,14,0.751) 25%, rgba(14,14,14,0.528) 38%, rgba(14,14,14,0.323) 50%, rgba(14,14,14,0.172) 62%, rgba(14,14,14,0.079) 75%, rgba(14,14,14,0.032) 88%, rgba(14,14,14,0.000) 100%),
    radial-gradient(ellipse 33.0% 27.9% at 70.9% 61.7%, rgba(255,255,255,0.121) 0%, rgba(255,255,255,0.113) 12%, rgba(255,255,255,0.091) 25%, rgba(255,255,255,0.064) 38%, rgba(255,255,255,0.039) 50%, rgba(255,255,255,0.021) 62%, rgba(255,255,255,0.010) 75%, rgba(255,255,255,0.004) 88%, rgba(255,255,255,0.000) 100%),
    radial-gradient(ellipse 40.0% 240.0% at 112.4% -7.6%, rgba(255,255,255,1.000) 0%, rgba(255,255,255,0.932) 12%, rgba(255,255,255,0.755) 25%, rgba(255,255,255,0.531) 38%, rgba(255,255,255,0.325) 50%, rgba(255,255,255,0.172) 62%, rgba(255,255,255,0.080) 75%, rgba(255,255,255,0.032) 88%, rgba(255,255,255,0.000) 100%),
    radial-gradient(ellipse 107.7% 37.0% at 20.0% 92.1%, rgba(67,67,67,1.000) 0%, rgba(67,67,67,0.932) 12%, rgba(67,67,67,0.755) 25%, rgba(67,67,67,0.531) 38%, rgba(67,67,67,0.325) 50%, rgba(67,67,67,0.172) 62%, rgba(67,67,67,0.080) 75%, rgba(67,67,67,0.032) 88%, rgba(67,67,67,0.000) 100%),
    radial-gradient(ellipse 127.5% 88.1% at -7.7% 47.1%, rgba(255,255,255,0.312) 0%, rgba(255,255,255,0.290) 12%, rgba(255,255,255,0.235) 25%, rgba(255,255,255,0.166) 38%, rgba(255,255,255,0.101) 50%, rgba(255,255,255,0.054) 62%, rgba(255,255,255,0.025) 75%, rgba(255,255,255,0.010) 88%, rgba(255,255,255,0.000) 100%),
    radial-gradient(ellipse 153.9% 51.6% at 115.0% -15.0%, rgba(255,255,255,0.893) 0%, rgba(255,255,255,0.832) 12%, rgba(255,255,255,0.674) 25%, rgba(255,255,255,0.474) 38%, rgba(255,255,255,0.290) 50%, rgba(255,255,255,0.154) 62%, rgba(255,255,255,0.071) 75%, rgba(255,255,255,0.028) 88%, rgba(255,255,255,0.000) 100%),
    radial-gradient(ellipse 22.8% 27.2% at 24.9% 29.7%, rgba(255,255,255,1.000) 0%, rgba(255,255,255,0.932) 12%, rgba(255,255,255,0.755) 25%, rgba(255,255,255,0.531) 38%, rgba(255,255,255,0.325) 50%, rgba(255,255,255,0.172) 62%, rgba(255,255,255,0.080) 75%, rgba(255,255,255,0.032) 88%, rgba(255,255,255,0.000) 100%),
    radial-gradient(ellipse 25.7% 26.3% at 33.6% 20.9%, rgba(242,242,242,0.694) 0%, rgba(242,242,242,0.647) 12%, rgba(242,242,242,0.524) 25%, rgba(242,242,242,0.368) 38%, rgba(242,242,242,0.225) 50%, rgba(242,242,242,0.120) 62%, rgba(242,242,242,0.055) 75%, rgba(242,242,242,0.022) 88%, rgba(242,242,242,0.000) 100%),
    rgb(0,0,0);
}
/* Floor shadow fitted to the reference: dense at the contact point, trailing to the right. */
#artifacts .artifact-card .sphere::after {
  content: "";
  position: absolute;
  z-index: 0;
  /* reset leftovers from the v9.14 block, which styled this same pseudo-element */
  border-radius: 0;
  filter: none;
  transform: none;
  background-clip: border-box;
  opacity: 1;
  left: -60.0%;
  top: 40.0%;
  width: 265.0%;
  height: 107.5%;
  background:
    radial-gradient(ellipse 21.2% 16.5% at 45.0% 56.7%, rgba(0,0,0,0.602) 0%, rgba(0,0,0,0.531) 17%, rgba(0,0,0,0.365) 33%, rgba(0,0,0,0.196) 50%, rgba(0,0,0,0.082) 67%, rgba(0,0,0,0.026) 83%, rgba(0,0,0,0.000) 100%),
    radial-gradient(ellipse 47.0% 45.5% at 49.8% 53.1%, rgba(0,0,0,0.103) 0%, rgba(0,0,0,0.091) 17%, rgba(0,0,0,0.063) 33%, rgba(0,0,0,0.034) 50%, rgba(0,0,0,0.014) 67%, rgba(0,0,0,0.005) 83%, rgba(0,0,0,0.000) 100%),
    radial-gradient(ellipse 27.1% 22.5% at 56.6% 53.9%, rgba(0,0,0,0.293) 0%, rgba(0,0,0,0.259) 17%, rgba(0,0,0,0.178) 33%, rgba(0,0,0,0.095) 50%, rgba(0,0,0,0.040) 67%, rgba(0,0,0,0.013) 83%, rgba(0,0,0,0.000) 100%),
    radial-gradient(ellipse 13.4% 9.0% at 40.4% 54.5%, rgba(0,0,0,0.850) 0%, rgba(0,0,0,0.750) 17%, rgba(0,0,0,0.516) 33%, rgba(0,0,0,0.276) 50%, rgba(0,0,0,0.115) 67%, rgba(0,0,0,0.037) 83%, rgba(0,0,0,0.000) 100%);
  pointer-events: none;
}
@media (max-width:760px) {
  #artifacts .artifact-card .sphere {
    width: clamp(84px,25vw,104px) !important;
    height: clamp(84px,25vw,104px) !important;
    top: clamp(26px,8.5%,40px) !important;
  }
}
@media (max-width:350px) {
  #artifacts .artifact-card .sphere {
    width: 80px !important;
    height: 80px !important;
    top: 22px !important;
  }
}

/* Artifacts action placement: Details on the left, Visit on the right. */
#artifacts .artifact-card .actions {
  flex-direction: row !important;
}
#artifacts .artifact-card .actions button.pill,
#artifacts .artifact-card .actions a.pill {
  --btn-bg: #14161a;
  --btn-ink: #f4f4f0;
  --btn-dot: #f4f4f0;
  --btn-dot-ink: #14161a;
  box-sizing: border-box;
  min-height: 32px !important;
  height: 32px;
  min-width: 0 !important;
  padding: 4px 4px 4px 14px !important;
  gap: 9px !important;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.005em;
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  border: .5px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-theme="dark"] #artifacts .artifact-card .actions button.pill,
html[data-theme="dark"] #artifacts .artifact-card .actions a.pill {
  --btn-bg: #0b0c0e;
  border-color: rgba(255,255,255,.16) !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #artifacts .artifact-card .actions button.pill,
  html:not([data-theme="light"]) #artifacts .artifact-card .actions a.pill {
    --btn-bg: #0b0c0e;
    border-color: rgba(255,255,255,.16) !important;
  }
}
#artifacts .artifact-card .actions button.pill:hover,
#artifacts .artifact-card .actions a.pill:hover {
  background: #23262b !important;
}
html[data-theme="dark"] #artifacts .artifact-card .actions button.pill:hover,
html[data-theme="dark"] #artifacts .artifact-card .actions a.pill:hover {
  background: #17191d !important;
}
/* Visit: existing arrow circle, resized and recoloured */
#artifacts .artifact-card .actions a.pill .ar,
html[data-theme="dark"] #artifacts .artifact-card .actions a.pill .ar {
  width: 24px !important;
  height: 24px !important;
  background: var(--btn-dot) !important;
  color: var(--btn-dot-ink) !important;
  border: 0 !important;
}
#artifacts .artifact-card .actions a.pill .ar svg {
  width: 11px;
  height: 11px;
}
/* Read: same circle drawn with a pseudo-element, so the button markup stays as it was */
#artifacts .artifact-card .actions button.pill.read-btn::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--btn-dot) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7m0 0L6 2.5M9.5 6 6 9.5' stroke='%2314161a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 11px 11px no-repeat;
  transition: transform .24s cubic-bezier(.22,1,.36,1);
}
#artifacts .artifact-card .actions button.pill.read-btn:hover::after {
  transform: translateX(2px);
}
@media (max-width: 760px) {
  #artifacts .artifact-card .actions button.pill,
  #artifacts .artifact-card .actions a.pill {min-height: 32px !important;}
}
@media (max-width: 350px) {
  #artifacts .artifact-card .actions button.pill,
  #artifacts .artifact-card .actions a.pill {
    min-height: 30px !important;
    height: 30px;
    padding-left: 12px !important;
    font-size: 11.5px !important;
  }
  #artifacts .artifact-card .actions a.pill .ar,
  #artifacts .artifact-card .actions button.pill.read-btn::after {width: 22px !important; height: 22px !important;}
}
/* Artifacts heading alignment: follow the shared section-heading rhythm. */
#artifacts .artifact-intro {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#artifacts .artifact-intro .artifact-tag { align-self: center; margin: 0; }
#artifacts .artifact-intro .artifact-section-title {
  width: 100%;
  margin: 20px 0 0;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  opacity: 1;
  text-align: center;
}
#artifacts .artifact-intro .artifact-section-title em { font-size: 1.1em; letter-spacing: -.01em; }
#artifacts .artifact-intro .artifact-section-lede {
  width: 100%;
  max-width: 520px;
  margin: 14px auto 0;
  font-size: clamp(12.5px, 1.1vw, 14.5px);
  text-align: center;
}

/* Match the established section heading system without affecting any other section. */
#artifacts .artifact-intro .artifact-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;margin-bottom:0;border:1px solid var(--pill-line);border-radius:999px;font-size:11.5px;font-weight:400;line-height:1.5;letter-spacing:normal;box-shadow:none;}
#artifacts .artifact-intro h2{margin-top:20px;font-weight:500;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.02em;}
#artifacts .artifact-intro h2 em{font-size:1.1em;letter-spacing:-.01em;}
#artifacts .artifact-intro .lede{max-width:520px;margin:14px auto 0;font-size:clamp(12.5px,1.1vw,14.5px);}
/* Details is a text action, not a pill; Visit remains on the right. */
#artifacts .artifact-card .actions .artifact-details-link{appearance:none;border:0;background:transparent;box-shadow:none;padding:8px 0;margin:0;color:var(--artifact-ink);font:500 13px/1.3 var(--sans);letter-spacing:0;cursor:pointer;transition:opacity .2s ease,transform .25s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent;}
#artifacts .artifact-card .actions .artifact-details-link:hover{opacity:.68;transform:translateX(2px);}
#artifacts .artifact-card .actions .artifact-details-link:focus-visible{outline:2px solid var(--lime);outline-offset:5px;border-radius:2px;}
#artifacts .artifact-card .actions a.pill{margin-left:auto;}
/* Opening and closing: opacity and transform only, with an explicit close phase. */
#artifact-details{opacity:0;transform:translate3d(0,15px,0) scale(.975);transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1),display .38s allow-discrete,overlay .38s allow-discrete;will-change:opacity,transform;}
#artifact-details[open]:not(.artifact-is-closing){opacity:1;transform:translate3d(0,0,0) scale(1);}
#artifact-details.artifact-is-closing{opacity:0;transform:translate3d(0,10px,0) scale(.985);pointer-events:none;}
@starting-style{#artifact-details[open]:not(.artifact-is-closing){opacity:0;transform:translate3d(0,15px,0) scale(.975);}}
#artifact-details::backdrop{opacity:0;transition:opacity .32s ease;}
#artifact-details[open]:not(.artifact-is-closing)::backdrop{opacity:1;}
#artifact-details.artifact-is-closing::backdrop{opacity:0;}
@starting-style{#artifact-details[open]::backdrop{opacity:0;}}
@media(prefers-reduced-motion:reduce){#artifact-details,#artifact-details::backdrop,#artifacts .artifact-card .actions .artifact-details-link{transition:none!important;}}

/* Desktop-only layout: mobile markup, behavior, and original CSS are preserved. */
.artifact-desktop-details{display:none}
@media (min-width:1024px){
 #artifacts .artifact-inner{display:grid!important;grid-template-columns:minmax(0,1fr) 420px!important;gap:clamp(32px,4vw,52px) 0!important;align-items:center!important;max-width:960px!important;width:100%!important;margin-inline:auto!important}
 #artifacts .artifact-intro{grid-column:1/-1!important;grid-row:1!important;max-width:700px!important;width:100%!important;justify-self:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important}
 #artifacts .artifact-intro .artifact-tag{margin:0!important}
 #artifacts .artifact-intro .artifact-section-title{width:100%!important;margin:20px 0 0!important;text-align:center!important;font-size:clamp(1.6rem,3vw,2.5rem)!important;opacity:1!important}
 #artifacts .artifact-intro .artifact-section-lede{width:100%!important;max-width:520px!important;margin:14px auto 0!important;text-align:center!important}
 #artifacts .artifact-desktop-details{box-sizing:border-box!important;display:flex!important;grid-column:1!important;grid-row:2!important;align-items:center!important;position:relative!important;z-index:1!important;width:calc(100% + 88px)!important;min-width:0!important;min-height:386px!important;height:386px!important;margin:0!important;border:1px solid var(--modal-border)!important;border-radius:28px!important;background:var(--modal-surface)!important;color:var(--fg)!important;box-shadow:0 22px 60px -35px rgba(0,0,0,.23)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden!important}
 #artifacts .artifact-desktop-details-inner{box-sizing:border-box!important;width:100%!important;max-width:none!important;padding:22px 119px 22px 30px!important;text-align:left!important}
 #artifacts .artifact-desktop-label{display:block;color:var(--muted);font:500 10px/1.4 var(--sans);letter-spacing:.15em;margin-bottom:10px}
 #artifacts .artifact-desktop-details h3{font:600 21px/1.18 var(--sans);letter-spacing:-.035em;margin:0 0 10px}
 #artifacts .artifact-desktop-details h4{font:600 11.5px/1.4 var(--sans);margin:0 0 6px}
 #artifacts .artifact-desktop-details p{font:400 11.8px/1.52 var(--sans);color:var(--muted);margin:0 0 10px}
 #artifacts .artifact-desktop-rule{height:1px;background:var(--modal-rule);margin:11px 0}
 #artifacts .artifact-desktop-tech{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
 #artifacts .artifact-desktop-tech span{font:400 9.5px/1.35 var(--sans);padding:4px 8px;border:.5px solid var(--modal-border);border-radius:999px;background:var(--modal-chip);color:var(--fg)}
 #artifacts .artifact-feature{grid-column:2!important;grid-row:2!important;position:relative!important;z-index:3!important;width:420px!important;max-width:420px!important;min-width:0!important;margin:0!important;justify-self:end!important;align-self:center!important;transform:none!important}
 #artifacts .artifact-feature .artifact-card{position:relative!important;display:block!important;width:420px!important;max-width:420px!important;min-height:0!important;height:420px!important;aspect-ratio:auto!important;margin:0!important;border-radius:28px!important}
 #artifacts .artifact-feature .artifact-card .sphere{top:62px!important;left:50%!important;transform:translateX(-50%)!important}
 #artifacts .artifact-feature .content{visibility:visible!important;opacity:1!important;display:block!important;position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:86px!important;padding:0 30px!important;text-align:left!important;z-index:3!important}
 #artifacts .artifact-feature .heading{font-size:23px!important;line-height:1.15!important;margin-bottom:10px!important}
 #artifacts .artifact-feature .description{font-size:13px!important;line-height:1.4!important;max-width:340px!important}
 #artifacts .artifact-feature .actions .artifact-details-link{display:none!important}
 #artifacts .artifact-feature .actions{justify-content:flex-end!important;bottom:22px!important}
}
@media (min-width:1024px) and (max-width:1100px){
 #artifacts .artifact-inner{max-width:900px!important;grid-template-columns:minmax(0,1fr) 390px!important}
 #artifacts .artifact-feature{width:390px!important;max-width:390px!important}
 #artifacts .artifact-feature .artifact-card{width:390px!important;max-width:390px!important;height:400px!important}
 #artifacts .artifact-desktop-details{min-height:370px!important;height:370px!important;width:calc(100% + 78px)!important}
 #artifacts .artifact-desktop-details-inner{padding:17px 105px 17px 25px!important}
 #artifacts .artifact-desktop-details p{font-size:11.4px!important;line-height:1.48!important}
 #artifacts .artifact-feature .content{bottom:78px!important}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){#artifacts .artifact-feature .artifact-card{transition:none!important}}

/* Mobile-only: move the existing sphere and its attached shadow down 6px; retain all other styling. */
@media (max-width:760px){
  #artifacts .artifact-card .sphere{top:calc(clamp(26px, 8.5%, 40px) + 6px)!important}
}
@media (max-width:350px){
  #artifacts .artifact-card .sphere{top:28px!important}
}

/* AURALIS v9.10.1: Quiet Cinematic Sphere Interaction
   Surgically scoped to Artifacts sphere. Zero layout reflow, pure transform scaling. */
#artifacts .artifact-card button.sphere,
#artifacts .artifact-card .sphere {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  pointer-events: auto !important;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateX(-50%) scale(1) !important;
  transform-origin: center center;
  transition: transform 480ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  #artifacts .artifact-card button.sphere:hover,
  #artifacts .artifact-card .sphere:hover {
    transform: translateX(-50%) scale(1.065) !important;
    transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
  }
}
#artifacts .artifact-card button.sphere.sphere-is-active,
#artifacts .artifact-card .sphere.sphere-is-active {
  transform: translateX(-50%) scale(1.065) !important;
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
}
#artifacts .artifact-card button.sphere:focus {
  outline: none;
}
#artifacts .artifact-card button.sphere:focus-visible {
  outline: 2px solid var(--lime, #d4e85a);
  outline-offset: 6px;
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  #artifacts .artifact-card button.sphere,
  #artifacts .artifact-card .sphere {
    transition: none !important;
  }
}

/* AURALIS v9.10.1: Inter-Section & Intra-Section Spacing Harmony
   1. Inter-Section Margin:
      Aligns #artifacts with .panel (#words) and .curated-panel (#curated),
      restoring the website's signature 52px (mobile) / 80px (desktop) inter-section breathing room.
   2. Intra-Section Heading Spacing:
      Maintains comfortable, elegant vertical separation between the section title
      ("Things I've built.") and the top of the Artifact card on mobile (< 1024px).
   3. Section Vertical Rhythm:
      Harmonizes vertical padding with surrounding content chapters across all viewports.
   4. Desktop Layout Preservation:
      Desktop 2-column grid and layered card geometry (>= 1024px) remain 100% untouched. */
#artifacts {
  margin-top: clamp(52px, 6vw, 80px) !important;
}
@media (max-width: 1023px) {
  #artifacts {
    padding-top: clamp(48px, 6vw, 64px) !important;
    padding-bottom: clamp(48px, 6vw, 64px) !important;
  }
  #artifacts .artifact-intro {
    margin-bottom: clamp(36px, 7vw, 48px) !important;
  }
}

  /* Profile overlay (isolated; invisible and layout-free until the Profile button is used) */
  html { scrollbar-gutter: stable; }
  #pf-dim {
    position: fixed;
    inset: 0;
    z-index: 2999;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: opacity;
    transform: translateZ(0);
  }
  #pf-root { 
    position: fixed;
    inset: 0;
    z-index: 3000;
    visibility: hidden;
    pointer-events: none;
    background: var(--bg);
    overflow: hidden;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  #pf-root.pf-on { visibility: visible; pointer-events: auto; opacity: 1; }
  #pf-root iframe { 
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--bg);
    transform: translateZ(0);
    scrollbar-width: none;
    -ms-overflow-style: none;
   }
  #pf-root iframe::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* Hover stability during transition */
  html.pf-open .id-phone-card { pointer-events: none; }