@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Geist:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

  :root{
    color-scheme: light;
    --ink:#11100e; --ink-rgb:17,16,14;
    --muted: rgba(var(--ink-rgb),.68);
    --muted-2: rgba(var(--ink-rgb),.5);
    --paper:#f7f2e8;
    --surface-fill: rgba(255,255,255,.3);
    --surface-fill-strong: rgba(255,255,255,.5);
    --surface-border: rgba(255,255,255,.48);
    --glass-fill: rgba(255,255,255,.3);
    --glass-stroke: rgba(255,255,255,.58);
    --hi-light: rgba(255,255,255,.92);
    --hi-edge: rgba(0,0,0,.16);
    --accent:#a85a2c; --accent-rgb:168,90,44;
    --moss:#2f5c40;
    --backdrop: rgba(17,16,14,.6);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --ink:#f2ede6; --ink-rgb:242,237,230;
      --muted: rgba(var(--ink-rgb),.72); --muted-2: rgba(var(--ink-rgb),.52);
      --paper:#15130f;
      --surface-fill: rgba(255,255,255,.06); --surface-fill-strong: rgba(255,255,255,.1);
      --surface-border: rgba(255,255,255,.14);
      --glass-fill: rgba(255,255,255,.06); --glass-stroke: rgba(255,255,255,.14);
      --hi-light: rgba(255,255,255,.32); --hi-edge: rgba(0,0,0,.45);
      --accent:#d98a52; --accent-rgb:217,138,82;
      --moss:#5ba57c;
      --backdrop: rgba(0,0,0,.72);
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --ink:#f2ede6; --ink-rgb:242,237,230;
    --muted: rgba(var(--ink-rgb),.72); --muted-2: rgba(var(--ink-rgb),.52);
    --paper:#15130f;
    --surface-fill: rgba(255,255,255,.06); --surface-fill-strong: rgba(255,255,255,.1);
    --surface-border: rgba(255,255,255,.14);
    --glass-fill: rgba(255,255,255,.06); --glass-stroke: rgba(255,255,255,.14);
    --hi-light: rgba(255,255,255,.32); --hi-edge: rgba(0,0,0,.45);
    --accent:#d98a52; --accent-rgb:217,138,82;
    --moss:#5ba57c;
    --backdrop: rgba(0,0,0,.72);
  }

  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow-x:hidden;
  }
  h1,h2,h3,.disp{ font-family:"Archivo Black",Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:0; text-wrap:balance; margin:0; }
  .mono{ font-family:"IBM Plex Mono","SF Mono",monospace; font-variant-numeric:tabular-nums; }
  p{margin:0;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;}

  .glass{
    border:1px solid var(--glass-stroke);
    background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.06) 48%, rgba(255,255,255,.01)), var(--glass-fill);
    box-shadow:
      0 18px 44px rgba(24,21,18,.16),
      inset 0 1px 0 var(--hi-light),
      inset 0 0 18px rgba(255,255,255,.16),
      inset 0 -1.5px 0 var(--hi-edge);
    backdrop-filter: blur(26px) saturate(1.7) contrast(1.05);
    -webkit-backdrop-filter: blur(26px) saturate(1.7) contrast(1.05);
  }
  .glass-soft{
    border:1px solid var(--glass-stroke);
    background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.04) 55%, rgba(255,255,255,.01)), var(--glass-fill);
    box-shadow:
      0 10px 24px rgba(24,21,18,.1),
      inset 0 1px 0 var(--hi-light),
      inset 0 0 12px rgba(255,255,255,.12),
      inset 0 -1px 0 var(--hi-edge);
    backdrop-filter: blur(16px) saturate(1.55) contrast(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.55) contrast(1.04);
  }
  /* Flat, crisp tint for surfaces nested INSIDE the already-glass lightbox — no backdrop-filter, avoids stacking/muddying blur */
  .panel-tint{
    border:1px solid var(--surface-border);
    background:var(--surface-fill);
    box-shadow: inset 0 1px 0 var(--hi-light), inset 0 -1px 0 var(--hi-edge);
  }

  .eyebrow{ font-size:clamp(.78rem,1vw,.88rem); font-weight:700; text-transform:uppercase; letter-spacing:.09em; color: rgba(var(--accent-rgb),.92); }

  .wrap{ max-width:1440px; margin:0 auto; padding-inline:clamp(20px,6vw,88px); padding-block:clamp(14px,2vw,22px) 100px; }

  .rock-page-lede{
    margin:0 auto 28px; text-align:center;
    color:var(--muted); font-size:1.02rem; line-height:1.55;
    white-space:nowrap;
  }
  @media (max-width:640px){ .rock-page-lede{ white-space:normal; max-width:40ch; } }

  .rock-page-hero{
    position:relative; overflow:hidden; isolation:isolate;
    min-height:clamp(560px,58vw,780px);
    background:var(--paper);
  }
  .rock-page-hero-sky{
    position:absolute; inset:0; z-index:-2;
    background:linear-gradient(180deg, #bfe0ef 0%, #d8ecf4 100%);
    -webkit-mask-image:url(/assets/rock-collection-hero-sky-mask.png?v=2);
    mask-image:url(/assets/rock-collection-hero-sky-mask.png?v=2);
    -webkit-mask-mode:alpha; mask-mode:alpha;
    -webkit-mask-size:cover; mask-size:cover;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:50% 0%; mask-position:50% 0%;
  }
  .rock-page-hero-art{ position:absolute; inset:0; z-index:-1; }
  .rock-page-hero-art img{
    width:100%; height:100%; object-fit:cover; object-position:50% 0%;
  }
  .rock-hero-inner{
    position:absolute; left:50%; top:58%; transform:translateX(-50%);
    width:min(760px,calc(100% - clamp(40px,12vw,120px)));
    text-align:center;
  }
  .rock-hero-inner .eyebrow{
    margin:0 0 14px; color:var(--accent);
    font-size:clamp(1.05rem,2.2vw,1.4rem);
    text-shadow:0 1px 3px rgba(247,242,232,.85), 0 2px 10px rgba(247,242,232,.7);
  }
  .rock-hero-heading{
    max-width:none; margin:0 auto;
    color:var(--ink);
    font-size:clamp(2rem,4.8vw,3.8rem);
    line-height:1.12;
    text-align:center;
    text-shadow:0 1px 3px rgba(247,242,232,.85), 0 3px 12px rgba(247,242,232,.75), 0 0 22px rgba(247,242,232,.6);
  }
  /* The halo above is tuned to blend into the light --paper page background
     behind the hero text (light mode). In dark mode --paper is near-black,
     so that same cream halo glows harshly instead of blending -- swap to a
     dark, much lighter halo that does the same job of separating the text
     from the fixed-color mountain art without the heavy glow. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .rock-hero-inner .eyebrow,
    :root:not([data-theme="light"]) .rock-hero-heading{
      text-shadow:0 1px 3px rgba(21,19,15,.7), 0 2px 8px rgba(21,19,15,.55);
    }
  }
  :root[data-theme="dark"] .rock-hero-inner .eyebrow,
  :root[data-theme="dark"] .rock-hero-heading{
    text-shadow:0 1px 3px rgba(21,19,15,.7), 0 2px 8px rgba(21,19,15,.55);
  }

  /* ============ BROWSE SECTION (visual separator, own backdrop) ============ */
  .rock-browse{
    position:relative; isolation:isolate;
    min-height:90svh;
    /* align-content:start (not center) deliberately -- centering would
       re-center this whole block, eyebrow/title/tabs included, every time
       the active view-panel's height changes (e.g. the short Wishlist grid
       vs. the tall Color spectrum). scrollY doesn't move when that happens,
       but everything above the panel visibly jumps on screen, which reads
       exactly like an unwanted scroll. Top-aligning means a height change
       only ever affects empty space below the content. */
    display:grid; grid-template-columns:minmax(0,1fr); align-content:start;
    padding:clamp(56px,8vw,96px) 0 clamp(40px,5vw,64px);
    background:var(--surface-fill-strong);
    border-top:1px solid rgba(var(--ink-rgb),.08);
  }
  .rock-browse > .wrap{ width:100%; padding-bottom:0; }
  .rock-browse-head{ text-align:center; margin-bottom:clamp(28px,4vw,44px); }
  .rock-browse-head .eyebrow{ margin:0 0 10px; }
  .rock-browse-title{
    margin:0; color:var(--ink);
    font-size:clamp(1.8rem,3.4vw,2.6rem);
    line-height:1.1;
  }

  .view-controls{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin-bottom:14px; }
  .view-switcher{ display:flex; flex-wrap:wrap; gap:8px; }
  .view-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 18px;
    border:1px solid rgba(var(--ink-rgb),.14);
    border-radius:999px;
    color:var(--ink);
    background:var(--paper);
    font-family:"Geist",sans-serif; font-size:.88rem; font-weight:600;
    cursor:pointer;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .view-btn svg{ width:13px;height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
  .view-btn[data-view="wishlist"] svg{ width:16px; height:16px; fill:currentColor; stroke:none; }
  .view-btn[data-view="color"] svg{ fill:currentColor; stroke:none; }
  .view-btn:hover, .view-btn:focus-visible{ border-color:rgba(var(--ink-rgb),.26); outline:none; }
  .view-btn.is-active{ color:var(--paper); border-color:var(--ink); background:var(--ink); }

  .search-wrap{ display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:999px; flex:1; min-width:200px; max-width:340px; color:var(--muted); }
  .search-wrap input{ border:none; background:none; outline:none; font-family:"Geist",sans-serif; font-size:.88rem; color:var(--ink); flex:1; min-width:0; }
  .search-wrap input::placeholder{ color:var(--muted-2); }
  .clear-search{ display:flex; color:var(--muted-2); background:none; border:none; cursor:pointer; padding:2px; }
  .clear-search:hover{ color:var(--ink); }

  .surprise-btn{
    display:flex; align-items:center; gap:8px;
    font-family:"Geist",sans-serif; font-size:.84rem; font-weight:600; color:var(--ink);
    border:none; border-radius:999px; padding:11px 18px; cursor:pointer;
    transition: transform .15s ease;
  }
  .surprise-btn svg{ flex:0 0 auto; }
  .surprise-btn:hover{ transform:translateY(-2px); }
  .surprise-btn:active{ transform:translateY(0) scale(.97); }


  .empty-state{ text-align:center; padding:40px 20px; color:var(--muted); font-size:.92rem; }

  /* ============ Multi-select pill filters (shared by Gallery + List) ============ */
  .rc-filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
  .select-chevron{ width:14px;height:14px; pointer-events:none; flex:0 0 auto; }
  .select-chevron path{ fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  .filter-ms{ position:relative; }
  .filter-ms-btn{
    appearance:none; -webkit-appearance:none;
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 14px;
    border:1px solid rgba(var(--ink-rgb),.14);
    border-radius:999px;
    color:var(--ink);
    background:var(--surface-fill-strong);
    font-family:inherit; font-size:.88rem; font-weight:600;
    cursor:pointer;
    transition:background-color 180ms ease, border-color 180ms ease;
  }
  .filter-ms-btn:hover, .filter-ms-btn:focus-visible{ border-color:rgba(var(--ink-rgb),.26); outline:none; }
  .filter-ms.is-open .filter-ms-btn{ border-color:rgba(var(--ink-rgb),.4); }
  .filter-ms-count{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    background:var(--ink); color:var(--paper);
    font-size:.68rem; font-weight:700;
  }
  .filter-ms-panel{
    position:absolute; top:calc(100% + 8px); left:0; z-index:12;
    min-width:200px; max-height:280px; overflow-y:auto;
    padding:8px; border-radius:16px;
    border:1px solid var(--glass-stroke);
    background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.06) 48%, rgba(255,255,255,.01)), var(--glass-fill);
    box-shadow:0 18px 44px rgba(24,21,18,.2);
    backdrop-filter: blur(26px) saturate(1.7) contrast(1.05);
    -webkit-backdrop-filter: blur(26px) saturate(1.7) contrast(1.05);
  }
  .filter-ms-panel[hidden]{ display:none; }
  .filter-ms-option{
    display:flex; align-items:center; gap:9px;
    padding:7px 8px; border-radius:10px;
    font-size:.86rem; font-weight:500; color:var(--ink);
    cursor:pointer; user-select:none;
  }
  .filter-ms-option:hover{ background:rgba(var(--ink-rgb),.06); }
  .filter-ms-option input{ margin:0; accent-color:var(--ink); width:15px;height:15px; flex:0 0 auto; }
  .filter-ms-option .swatch-dot{ width:12px;height:12px;border-radius:50%; flex:0 0 auto; border:1px solid rgba(var(--ink-rgb),.2); }
  .filter-ms-clearall{
    appearance:none; border:none; background:none; cursor:pointer;
    color:var(--accent); font-family:inherit; font-size:.82rem; font-weight:700;
    padding:9px 4px;
  }
  .filter-ms-clearall[hidden]{ display:none; }
  .filter-ms-columns{ margin-left:auto; }

  /* ============ GALLERY / LIST ============ */
  .gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
  .gallery-card{
    display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:18px;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .gallery-card.is-clickable{ cursor:pointer; }
  .gallery-card.is-clickable:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(24,21,18,.14); }
  .gallery-thumb{ aspect-ratio:1; border-radius:12px; overflow:hidden; }
  .gallery-thumb img{ width:100%;height:100%;object-fit:cover; }
  .gallery-thumb.is-swatch{ display:flex; align-items:center; justify-content:center; }
  .gallery-card .gname{ font-size:.86rem; font-weight:600; }
  .gallery-card .ghue{ font-size:.7rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; }
  .gallery-card .gmeta{ margin-top:-4px; font-size:.74rem; color:var(--muted); }
  .gallery-card.is-ghost{ opacity:.68; }

  /* ============ WISHLIST ============ */
  .wishlist-card{
    border:1.5px dashed rgba(var(--ink-rgb),.22);
    background:transparent;
    position:relative;
  }
  .wishlist-card .gallery-thumb.is-swatch{ opacity:.88; }

  .wishlist-suggest-card{
    align-items:center; justify-content:center; text-align:center; gap:6px;
    min-height:148px;
    border:1.5px dashed rgba(var(--ink-rgb),.22);
    background:transparent;
  }
  .wishlist-suggest-card:hover{ border-color:rgba(var(--ink-rgb),.4); }
  .wishlist-suggest-plus{ font-size:1.8rem; line-height:1; color:var(--muted-2); }
  .wishlist-suggest-label{ font-size:.82rem; font-weight:600; color:var(--muted); }

  .wishlist-suggested-card .wishlist-suggested-badge{
    font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--accent);
  }
  .wishlist-suggested-card .wishlist-suggested-details{
    margin:-2px 0 0; font-size:.78rem; color:var(--muted);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* Base .connect-dialog/.dialog-glass (styles.css) cap out at 520x680 --
     sized for Keep in Touch's 2 fields. This form has 4 fields plus a
     textarea and a checkbox, so at that cap it scrolled internally on
     anything but a tall viewport. Wider + taller gives it room to fit
     without scrolling on typical viewports; overflow-y:auto on
     .dialog-glass (inherited from the base rule) still catches genuinely
     short viewports as a fallback. */
  .suggest-rock-dialog{
    width:min(600px, calc(100vw - 30px));
    max-height:min(820px, calc(100svh - 32px));
  }
  .suggest-rock-dialog .dialog-glass{
    max-height:min(820px, calc(100svh - 32px));
  }

  .table-shell{ position:relative; }
  .table-wrap{ overflow-x:auto; border-radius:20px; border:1px solid var(--surface-border); background:var(--paper); }
  /* Gradient masks over the scroll edges -- shown/hidden via JS as the table
     is scrolled, so a hard content cutoff always reads as "more to scroll"
     rather than looking like the row simply ends. */
  .table-fade{
    position:absolute; top:0; bottom:0; width:44px;
    pointer-events:none; z-index:5; border-radius:20px;
    opacity:0; transition:opacity .18s ease;
  }
  .table-fade-left{ left:0; background:linear-gradient(90deg, var(--paper), rgba(var(--ink-rgb),0) 100%); }
  .table-fade-right{ right:0; background:linear-gradient(270deg, var(--paper), rgba(var(--ink-rgb),0) 100%); }
  .table-fade.is-visible{ opacity:1; }
  .specimen-table{ width:max-content; min-width:100%; border-collapse:collapse; font-size:.86rem; }
  .specimen-table thead th{
    text-align:left; padding:13px 16px;
    font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2);
    cursor:pointer; user-select:none; white-space:nowrap;
    border-bottom:1px solid var(--surface-border);
    background:var(--surface-fill);
    transition:color .15s ease;
  }
  /* Columns default to a comfortable width instead of squishing to fit --
     the wrapper scrolls horizontally once the visible columns outgrow it. */
  .specimen-table th[data-sort="name"], .specimen-table td:first-child{ min-width:200px; }
  .specimen-table th, .specimen-table td{ min-width:130px; }
  .specimen-table th[data-col="geoNote"], .specimen-table td[data-col="geoNote"],
  .specimen-table th[data-col="care"], .specimen-table td[data-col="care"],
  .specimen-table th[data-col="cleanseNote"], .specimen-table td[data-col="cleanseNote"],
  .specimen-table th[data-col="lore"], .specimen-table td[data-col="lore"],
  .specimen-table th[data-col="personal"], .specimen-table td[data-col="personal"],
  .specimen-table th[data-col="traitsPositive"], .specimen-table td[data-col="traitsPositive"],
  .specimen-table th[data-col="traitsNegative"], .specimen-table td[data-col="traitsNegative"]{
    min-width:260px;
  }
  .specimen-table td[data-col="geoNote"], .specimen-table td[data-col="care"],
  .specimen-table td[data-col="cleanseNote"], .specimen-table td[data-col="lore"],
  .specimen-table td[data-col="personal"]{ white-space:normal; line-height:1.4; }
  .specimen-table thead th:hover{ color:var(--ink); }
  .specimen-table .sort-arrow{ display:inline-block; margin-left:4px; opacity:.25; transition:opacity .15s ease, transform .15s ease; }
  .specimen-table th.is-sorted .sort-arrow{ opacity:1; }
  .specimen-table th.is-sorted.is-desc .sort-arrow{ transform:rotate(180deg); }
  .specimen-table tbody tr{ border-bottom:1px solid var(--surface-border); transition:background .15s ease; }
  .specimen-table tbody tr:last-child{ border-bottom:none; }
  .specimen-table tbody tr.is-clickable{ cursor:pointer; }
  .specimen-table tbody tr.is-clickable:hover{ background:rgba(var(--ink-rgb),.08); }
  .specimen-table tbody tr.is-ghost{ color:var(--muted); }
  .specimen-table td{ padding:11px 16px; vertical-align:middle; }
  .spec-name-cell{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); }
  .spec-name-cell .sdot{ width:22px;height:22px;border-radius:50%; overflow:hidden; flex:0 0 auto; }
  .spec-name-cell .sdot img{ width:100%;height:100%;object-fit:cover; }
  .spec-dash{ color:var(--muted-2); }

  /* ============ SPECTRUM ============ */
  .spectrum-shell{ position:relative; padding-top:4px; padding-bottom:36px; overflow-x:clip; /* hover labels sit past the right edge on phones and made the whole page scroll sideways */ }
  .spectrum-track{ position:relative; }
  .spectrum-bar{
    position:relative;
    width:100%;
    height:clamp(46px,6vw,64px);
    border-radius:999px;
    overflow:hidden;
    cursor:crosshair;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.15);
    background: linear-gradient(90deg,
      #101010 0%, #f2efe8 14%, #b23a2f 28%, #cf7a2b 42%,
      #d9b93f 57%, #2f7a49 71%, #2f5fa0 86%, #7c4f9e 100%);
  }
  .spectrum-bar::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.35) 48%, transparent 56%);
    background-size:220% 100%; background-position:120% 0;
    animation: spectrumSheen 7s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){ .spectrum-bar::after{ animation:none; display:none; } }
  @keyframes spectrumSheen{ 0%,60%{ background-position:120% 0; } 100%{ background-position:-40% 0; } }
  .spectrum-cursor{
    position:absolute; top:-14px; bottom:-14px; width:2px;
    background: rgba(var(--ink-rgb),.5);
    transform:translateX(-1px);
    opacity:0; pointer-events:none; transition:opacity .15s ease;
  }
  .spectrum-readout{
    /* Used to float above the bar, back when the swarm sat below it -- now
       the swarm sits above, so popping up there collided with circle name
       labels in the bottom row. Sits below the bar instead now. */
    position:absolute; top:calc(100% + 14px); transform:translateX(-50%);
    padding:7px 12px; border-radius:12px;
    display:flex; align-items:center; gap:8px;
    font-size:.78rem; font-weight:600; white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .15s ease;
  }
  .spectrum-readout .dot{ width:10px;height:10px;border-radius:50%; border:1px solid rgba(0,0,0,.15); }
  .spectrum-shell.is-hover .spectrum-cursor,
  .spectrum-shell.is-hover .spectrum-readout{ opacity:1; }



  /* True beeswarm: a physics simulation (see rock-collection.js) packs every
     specimen into this fixed-height zone with zero overlap at rest -- not a
     hover trick, the actual resting layout. Fixed height is reserved up
     front so nothing here ever resizes or pushes the rest of the page down. */
  /* aspect-ratio (not a fixed height) matching the virtual canvas W:H in
     the JS exactly, so the field's real height always tracks its real
     width in lockstep -- a single scale factor then both fills the full
     width (matching the bar above it) and never distorts x vs y. */
  .swarm-field{ position:relative; aspect-ratio:1000/290; margin-bottom:18px; }
  .swarm-node{
    position:absolute; border-radius:50%; cursor:default; transform:translate(-50%,-50%);
    transition:width .1s ease-out, height .1s ease-out;
    box-shadow:0 2px 6px rgba(24,21,18,.18);
  }
  .swarm-node.is-clickable{ cursor:pointer; }
  .swarm-node.is-search-dim{ opacity:.15; }
  .swarm-node-inner{ width:100%; height:100%; border-radius:50%; overflow:hidden; }
  .swarm-node img{ width:100%; height:100%; object-fit:cover; display:block; transform-origin:center; }
  .swarm-label{
    position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:6px;
    font-size:.74rem; font-weight:600; color:var(--ink); background:var(--paper);
    border:1px solid var(--surface-border); padding:2px 9px; border-radius:8px;
    white-space:nowrap; opacity:0; transition:opacity .15s ease; pointer-events:none; z-index:50;
  }
  .swarm-label.show{ opacity:1; }


  .spectrum-note{ margin-top:34px; font-size:.82rem; color:var(--muted-2); max-width:60ch; }

  /* ============ LIGHTBOX ============ */
  .lightbox-backdrop{
    position:fixed; inset:0; background:var(--backdrop);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:clamp(12px,3vw,40px);
    z-index:50;
    opacity:0; pointer-events:none;
    transition:opacity .28s ease;
  }
  .lightbox-backdrop.is-open{ opacity:1; pointer-events:auto; }
  .lightbox{
    position:relative;
    width:min(1080px,100%);
    height:min(880px,92vh);
    border-radius:28px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    background:
      linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 40%), var(--paper);
    border:1px solid var(--glass-stroke);
    box-shadow:
      0 40px 90px rgba(0,0,0,.4),
      inset 0 1px 0 var(--hi-light),
      inset 0 -1.5px 0 var(--hi-edge);
    backdrop-filter: blur(40px) saturate(1.6) contrast(1.05);
    -webkit-backdrop-filter: blur(40px) saturate(1.6) contrast(1.05);
    transform:translateY(18px) scale(.98); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .lightbox-backdrop.is-open .lightbox{ transform:translateY(0) scale(1); }
  @media (max-width:860px){
    /* grid-template-rows wasn't set, so both rows defaulted to auto --
       sized to their own content instead of splitting the lightbox's fixed
       height. .lb-media-stage's flat 320px min-height (below) was taller
       than .lb-media's 260px here, so the media row got pulled past its
       own min-height to fit its child, and .lb-info (tall: stat tiles,
       tabs, facts) added its full natural height on top -- the two rows'
       combined height routinely exceeded the lightbox's fixed height,
       which is what let the media box visually spill past the frame.
       minmax(0,1fr) on the info row makes it take only the space left
       over after media, relying on its own overflow-y:auto (already set)
       instead of adding to the total. */
    .lightbox{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); height:94vh; }
    .lb-media{ min-height:260px; }
    .lb-media-stage{ min-height:260px; }
  }
  /* Landscape phones are wide enough to land above the 640px breakpoint
     but short enough that the base .lb-media-stage 320px min-height (sized
     for portrait/desktop) eats most of the available height, squeezing
     .lb-info's row to almost nothing and leaving only a sliver of
     background visible around the contained image. */
  @media (orientation:landscape) and (max-height:500px){
    .lightbox{ grid-template-rows:auto minmax(0,1fr); height:94vh; }
    .lb-media{ min-height:160px; }
    .lb-media-stage{ min-height:160px; }
  }
  /* True full-bleed mobile takeover (matches The Practice/Travel Photos'
     dialog pattern) -- a floating centered card with vh-based height is
     the actual bug this replaces: 100vh is the browser's LARGEST possible
     viewport (address bar hidden), not what's actually visible. When the
     address bar is showing, a 94vh box is taller than the real visible
     area; centered in a fixed, non-scrolling backdrop, the excess height
     pushes the top of the card -- where the close button lives -- above
     the fold with no way to scroll back up to it. 100svh is the small/
     guaranteed-visible viewport height, so a full-bleed box sized to it
     can never exceed what's actually on screen. */
  @media (max-width:640px){
    .lightbox-backdrop{ padding:0; }
    .lightbox{
      width:100vw; height:100svh; max-height:none;
      border-radius:0; border:none;
      transform:translateY(0) scale(1);
    }
    .lb-media{ min-height:220px; }
    .lb-media-stage{ min-height:220px; }
  }

  .lb-close{
    position:absolute; top:16px; right:16px; z-index:5;
    width:38px;height:38px;border-radius:50%; border:1px solid var(--glass-stroke);
    background:rgba(255,255,255,.85); color:var(--ink);
    display:flex;align-items:center;justify-content:center; cursor:pointer;
  }
  :root[data-theme="dark"] .lb-close, @media (prefers-color-scheme:dark){ .lb-close{ background:rgba(20,18,15,.7); color:var(--ink); } }

  .lb-media{ position:relative; background:#0c0b09; min-height:0; overflow:hidden; }
  .lb-media-stage{ position:relative; height:100%; min-height:320px; overflow:hidden; touch-action:none; }
  .lb-media-stage img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    transform-origin:center; opacity:0; transition:opacity .35s ease;
  }
  .lb-media-stage img.is-active{ opacity:1; }
  .lb-media-stage.is-zoomed img.is-active{ cursor:grab; transition:opacity .35s ease; }
  .lb-media-stage.is-zoomed.is-dragging img.is-active{ cursor:grabbing; }
  .lb-swatch-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; }
  .lb-swatch-placeholder span{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:rgba(255,255,255,.85); color:#171513; padding:6px 12px; border-radius:999px; }
  /* No photo yet -- the zoom controls, drag reticle, and prev/next image
     arrows all operate on a photo carousel that doesn't exist for a
     swatch-only specimen, so hide them rather than leave dead controls. */
  .lb-media.is-no-photo .lb-zoom,
  .lb-media.is-no-photo .reticle,
  .lb-media.is-no-photo .lb-arrow{ display:none; }

  .lb-zoom{
    position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:4;
    display:flex; flex-direction:row; gap:2px;
    padding:3px; border-radius:999px;
    background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.14);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .lb-media:hover .lb-zoom{ opacity:1; pointer-events:auto; }
  .lb-zoom button{
    width:26px;height:26px; border-radius:999px; border:none; background:none; color:rgba(255,255,255,.8);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .15s ease;
  }
  .lb-zoom button:hover{ background:rgba(255,255,255,.15); }
  .lb-zoom button:disabled{ opacity:.35; cursor:default; }
  .lb-zoom button:disabled:hover{ background:none; }
  .lb-zoom svg{ width:13px;height:13px; }
  .lb-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35); color:#fff;
    display:flex;align-items:center;justify-content:center; cursor:pointer; z-index:3;
  }
  .lb-arrow.prev{ left:14px; } .lb-arrow.next{ right:14px; }
  .lb-dots{ position:absolute; bottom:14px; left:0;right:0; display:flex; justify-content:center; gap:6px; z-index:3; }
  .lb-dots span{ width:6px;height:6px;border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; }
  .lb-dots span.is-active{ background:#fff; width:16px; border-radius:4px; }
  .lb-thumbs{ position:absolute; left:0; right:0; bottom:38px; display:flex; justify-content:center; gap:6px; z-index:3; }
  .lb-thumbs img{ width:36px;height:36px;object-fit:cover;border-radius:8px; border:2px solid rgba(255,255,255,.25); cursor:pointer; opacity:.7; }
  .lb-thumbs img.is-active{ opacity:1; border-color:#fff; }

  .reticle{ position:absolute; inset:18px; pointer-events:none; z-index:2; }
  .reticle i{ position:absolute; width:20px;height:20px; border-color:rgba(255,255,255,.55); border-style:solid; border-width:0; }
  .reticle i.tl{ top:0;left:0; border-top-width:2px; border-left-width:2px; border-top-left-radius:4px; }
  .reticle i.tr{ top:0;right:0; border-top-width:2px; border-right-width:2px; border-top-right-radius:4px; }
  .reticle i.bl{ bottom:0;left:0; border-bottom-width:2px; border-left-width:2px; border-bottom-left-radius:4px; }
  .reticle i.br{ bottom:0;right:0; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:4px; }
  .scan-tag{
    position:absolute; top:14px; left:14px; z-index:3;
    display:flex; align-items:center; gap:7px;
    font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:rgba(255,255,255,.85); background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2);
    padding:5px 10px; border-radius:999px;
  }
  .scan-tag .dot{ width:6px;height:6px;border-radius:50%; background:#6fe08a; box-shadow:0 0 6px #6fe08a; animation:blink 1.6s ease-in-out infinite; }
  @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

  .lb-info{ min-height:0; padding:clamp(22px,2.6vw,34px); overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:20px; }

  .lb-tabs{ display:flex; gap:4px; padding:4px; border-radius:14px; }
  .lb-tab{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    font-family:"Geist",sans-serif; font-size:.82rem; font-weight:600; color:var(--muted);
    background:none; border:none; border-radius:11px; padding:10px 10px; cursor:pointer;
    transition:background .18s ease, color .18s ease, transform .18s ease;
  }
  .lb-tab svg{ width:14px;height:14px; flex:0 0 auto; }
  .lb-tab:hover{ color:var(--ink); }
  .lb-tab.is-active{ background:var(--ink); color:var(--paper); box-shadow:0 8px 18px rgba(24,21,18,.22); transform:translateY(-1px); }
  .lb-tabpanel{ display:flex; flex-direction:column; gap:20px; animation:tabIn .18s ease; }
  @keyframes tabIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:translateY(0);} }
  .lb-info-head .no{ font-family:"IBM Plex Mono",monospace; font-size:.72rem;font-weight:600;letter-spacing:.05em;color:var(--muted-2); text-transform:uppercase; }
  .lb-info-head h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin-top:6px; }

  .lb-stats{ display:grid; grid-template-columns:auto 1fr; gap:14px 16px; }
  .lb-stat{ display:contents; }
  .lb-stat .ic{ width:30px;height:30px;border-radius:9px; background:var(--surface-fill); border:1px solid var(--surface-border); display:flex;align-items:center;justify-content:center; color:var(--ink); }
  .lb-stat .ic svg{ width:16px;height:16px; }
  .lb-stat .tx{ display:flex; flex-direction:column; gap:2px; padding-top:2px; }
  .lb-stat .tx b{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); font-weight:700; }
  .lb-stat .tx span{ font-family:"IBM Plex Mono",monospace; font-size:.86rem; }

  .stat-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .stat-tile{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:14px 8px; border-radius:16px; text-align:center;
  }
  .tile-ring{ width:36px;height:36px; color:var(--muted-2); }
  .tile-val{ font-size:1.05rem; font-weight:600; }
  .tile-lab{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }

  .lb-geo{ display:flex; flex-direction:column; gap:8px; }
  .lb-geo .eyebrow{ margin:0; }
  .lb-geo p{ font-size:.88rem; color:var(--muted); line-height:1.55; }

  .lb-fact{ display:flex; flex-direction:column; gap:10px; padding:16px 18px; border-radius:18px; }
  .fact-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .fact-head .eyebrow{ margin:0; }
  .fact-shuffle{
    display:flex; align-items:center; gap:6px;
    font-size:.76rem; font-weight:600; color:var(--ink);
    background:var(--surface-fill-strong); border:1px solid var(--surface-border);
    border-radius:999px; padding:6px 12px; cursor:pointer;
    transition: transform .15s ease, background .15s ease;
  }
  .fact-shuffle:hover{ background:var(--surface-fill); }
  .fact-shuffle:active svg{ transform:rotate(180deg); }
  .fact-shuffle svg{ transition:transform .35s ease; }
  .fact-text{ font-size:.9rem; color:var(--ink); line-height:1.55; min-height:2.7em; opacity:1; transition:opacity .18s ease; }
  .fact-text.is-swapping{ opacity:0; }

  .lb-meaning{ display:flex; flex-direction:column; gap:14px; }
  .meaning-tags{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .meaning-tags span{
    font-size:.76rem; font-weight:600; padding:6px 12px; border-radius:999px; color:var(--ink);
    background:var(--surface-fill-strong); border:1px solid rgba(var(--ink-rgb),.14);
  }
  .meaning-tags .zodiac-chip{ color:var(--muted); font-weight:500; }

  .meaning-card{ display:flex; flex-direction:column; gap:8px; padding:16px 18px; border-radius:14px; }
  .meaning-card[hidden]{ display:none; }
  .meaning-card .eyebrow{ margin:0; }
  .meaning-card p{ font-size:.9rem; color:var(--muted); line-height:1.55; }
  .meaning-card small{ display:block; margin-top:2px; font-size:.7rem; color:var(--muted-2); }
  .meaning-card .quote-text{ font-style:italic; color:var(--ink); }

  .chakra-row{ display:flex; align-items:center; gap:14px; margin-top:2px; }
  .chakra-dots{ display:flex; gap:6px; }
  .chakra-dots span{ width:11px;height:11px;border-radius:50%; opacity:.35; transition:transform .2s ease, opacity .2s ease; }
  .chakra-dots span.is-active{ opacity:1; transform:scale(1.35); box-shadow:0 0 0 3px rgba(var(--ink-rgb),.08); }
  .chakra-label{ font-size:.86rem; color:var(--ink); }

  .trait-strip{ display:flex; gap:6px; flex-wrap:wrap; }
  .trait-strip span{ font-size:.72rem; font-weight:600; padding:5px 11px; border-radius:999px; }
  .trait-strip span.t-pos, .trait-strip span.t-neg{
    background:var(--surface-fill-strong); border:1px solid rgba(var(--ink-rgb),.14); color:var(--ink);
  }
  .trait-strip span.t-neg{ color:var(--muted); }

  .care-row{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; }
  .care-row .ic{ width:28px;height:28px;flex:0 0 auto;border-radius:8px; background:var(--surface-fill-strong); display:flex;align-items:center;justify-content:center; }
  .care-row .ic svg{ width:15px;height:15px; }
  .care-row p{ font-size:.86rem; color:var(--muted); line-height:1.5; }

  .cleanse-row{ padding:16px 18px; border-radius:14px; display:flex; flex-direction:column; gap:10px; }
  .cleanse-row .eyebrow{ margin:0; }
  .cleanse-methods{ display:flex; gap:8px; flex-wrap:wrap; }
  .cleanse-methods span{
    display:flex; align-items:center; gap:5px; font-size:.76rem; font-weight:600;
    padding:6px 12px; border-radius:999px;
    background:var(--surface-fill-strong); border:1px solid var(--surface-border);
  }
  .cleanse-methods svg{ width:13px;height:13px; }
  .cleanse-row p:last-child{ font-size:.86rem; color:var(--muted); line-height:1.5; }

  .variant-switcher{ display:flex; flex-direction:column; gap:8px; }
  .variant-switcher .eyebrow{ margin:0; }
  .variant-pills{ display:flex; gap:8px; flex-wrap:wrap; }
  .variant-pill{ display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; background:var(--surface-fill-strong); border:1px solid rgba(var(--ink-rgb),.14); cursor:pointer; font-size:.8rem; font-weight:600; color:var(--ink); }
  .variant-pill .variant-thumb{ width:24px;height:24px;border-radius:50%;overflow:hidden;flex:0 0 auto; background:var(--surface-border); }
  .variant-pill .variant-thumb img{ width:100%;height:100%;object-fit:cover; }
  .variant-pill.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .variant-pill.is-not-photographed{ opacity:.75; }

  .same-mineral{ display:flex; flex-direction:column; gap:8px; }
  .same-mineral .eyebrow{ margin:0; }
  .same-mineral-chips{ display:flex; gap:8px; flex-wrap:wrap; }

  .pairs-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .pair-chip{ display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--surface-fill-strong); border:1px solid rgba(var(--ink-rgb),.14); cursor:pointer; font-size:.8rem; font-weight:600; }
  .pair-chip .pair-thumb{ width:24px;height:24px;border-radius:50%;overflow:hidden;flex:0 0 auto; }
  .pair-chip .pair-thumb img{ width:100%;height:100%;object-fit:cover; }
  .pair-chip.is-ghost{ cursor:default; opacity:.6; padding-left:12px; font-weight:500; }

  .lb-specnav{ display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; border-top:1px solid var(--surface-border); }
  .specnav-btn{
    display:flex; align-items:center; gap:10px;
    background:none; border:none; cursor:pointer; padding:6px; border-radius:14px;
    color:var(--muted); transition:background .15s ease, color .15s ease;
    max-width:48%;
  }
  .specnav-btn:hover{ color:var(--ink); background:var(--surface-fill); }
  .specnav-btn svg{ width:14px;height:14px; flex:0 0 auto; }
  .specnav-thumb{ width:34px;height:34px;border-radius:50%; overflow:hidden; flex:0 0 auto; border:1px solid var(--surface-border); }
  .specnav-thumb img{ width:100%;height:100%;object-fit:cover; }
  .specnav-text{ display:flex; flex-direction:column; gap:1px; text-align:left; min-width:0; }
  .specnav-btn.is-next .specnav-text{ text-align:right; }
  .specnav-text b{ font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
  .specnav-text span{ font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  footer.close{ max-width:1440px;margin:0 auto; padding-block:24px 70px; text-align:center; }
  footer.close p{ color:var(--muted); font-size:.9rem; }

  /* ============ HOMEPAGE PROJECTS-GRID DEMO (real site classes/values) ============ */
  .homepage-demo{ max-width:1120px; margin:0 auto; padding-block:20px 60px; border-top:1px solid var(--surface-border); }
  .homepage-demo .demo-h2{ font-size:clamp(1.8rem,3.5vw,2.6rem); margin-top:8px; }
  .homepage-demo .demo-lede{ max-width:60ch; color:var(--muted); font-size:.96rem; line-height:1.55; margin-top:12px; }

  .demo-photo-bg{
    margin-top:28px; border-radius:32px; overflow:hidden;
    background: linear-gradient(135deg,#e8ddc7,#cfb896);
    padding:clamp(24px,4vw,48px);
  }

  .project-grid{
    position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    overflow:hidden; isolation:isolate;
    border:1px solid var(--surface-border); border-radius:28px;
    background:var(--surface-fill);
    box-shadow:0 26px 80px rgba(24,21,18,.16), inset 0 1px 0 var(--hi-light), inset 0 -1.5px 0 var(--hi-edge);
    backdrop-filter: blur(18px) saturate(1.5) contrast(1.04);
    -webkit-backdrop-filter: blur(18px) saturate(1.5) contrast(1.04);
  }
  .project-card{
    position:relative; overflow:hidden; display:flex; min-height:230px;
    flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:14px; padding:22px;
    color:#11100e; text-shadow:0 1px 3px rgba(247,242,232,.85), 0 3px 16px rgba(247,242,232,.7);
    border-right:1px solid rgba(var(--ink-rgb),.1); border-bottom:1px solid rgba(var(--ink-rgb),.1);
    text-decoration:none;
    background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16)), var(--surface-fill);
    transition:background-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
  }
  .project-card:hover{
    z-index:1;
    background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.22)), var(--surface-fill-strong);
    box-shadow: inset 0 -3px 0 rgba(var(--ink-rgb),.24);
    transform:translateY(-3px);
  }
  .project-card > span:not(.project-icon){ font-family:"Archivo Black",Impact,sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(1.38rem,2.25vw,2.2rem); line-height:.96; }
  .project-card small{ max-width:24ch; font-size:.86rem; }
  .project-icon{
    position:relative; z-index:1; display:grid; width:56px; height:56px; place-items:center;
    align-self:start; margin-bottom:auto; overflow:hidden;
    border:1px solid rgba(255,255,255,.12); border-radius:15px; background:#11100e;
  }
  .project-icon-rock{ background:var(--moss); }
  @media (min-width:621px){
    .project-grid > .project-card-half{
      display:grid; min-height:auto; padding:24px 28px; grid-column:span 2;
      grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto;
      align-items:center; column-gap:18px; row-gap:4px;
    }
    .project-grid > .project-card-half .project-icon{ align-self:center; margin-bottom:0; grid-row:1 / span 2; }
    .project-grid > .project-card-half > span:not(.project-icon){ align-self:end; grid-column:2; }
    .project-grid > .project-card-half > small{ max-width:none; align-self:start; grid-column:2; }
    .project-grid > .project-card-wide{
      grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:flex-start;
      min-height:auto; padding:22px 28px; gap:18px;
    }
    .project-grid > .project-card-wide .project-icon{ flex-shrink:0; }
    .project-grid > .project-card-wide small{ max-width:none; }
  }
  @media (max-width:620px){ .project-grid{ grid-template-columns:1fr; } }