/* ═══ /sites/ · the hand of cards, carried over from joshwolf.net/sites as it stands, re-housed on the Stories surface.
   The CSP allows no inline styles, so every per-card value lives here as a class. ═══ */

/* unicornfactory.dev · /sites/ · the Stories surface. The hand of cards is carried over from joshwolf.net/sites as it stands; only the house around it changes. */
@keyframes sf{from{background-position:0% 0}to{background-position:200% 0}}
.foil{background-image:var(--foil-loop);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sf 6.5s linear infinite}
@media(prefers-reduced-motion:reduce){.foil{animation:none!important}}
/* ── the hand of cards, as carried over ── */


.nw {
  --nw-display: Fraunces, Georgia, serif;
  --nw-quiet: color-mix(in oklab, currentColor 56%, transparent);
  --nw-hair: color-mix(in oklab, currentColor 13%, transparent);
  /* Cards overlap, so they must be opaque. Point this at your site's background token,
     e.g. hsl(var(--background)) on older shadcn themes or var(--background) on newer ones. */
  --nw-paper: var(--panel);
  color-scheme: light dark;
  --nw-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px -12px rgb(0 0 0 / .22);
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.1rem, 4vw, 3.5rem) 6rem;
  overflow-x: clip;
}
.nw a { color: inherit; }
.nw__head h1 {
  font-family: var(--nw-display);
  font-weight: 600;
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 6rem);
  line-height: .92;
  letter-spacing: -.035em;
}
.nw__work { -webkit-background-clip: text; background-clip: text; color: transparent; }
.nw__head p { margin: 1.5rem 0 0; font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.5; color: var(--nw-quiet); max-width: 42ch; }
.nw__root { margin: clamp(2.25rem, 5vw, 3.5rem) 0 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--nw-hair); }
.nw__root h2 { font-family: var(--nw-display); margin: 0; font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
.nw__root h2 a { text-decoration: none; }
.nw__root p { margin: .35rem 0 0; font-size: .875rem; color: var(--nw-quiet); }

.tray { padding: clamp(2rem, 5vw, 3.25rem) 0; border-bottom: 1px solid var(--nw-hair); }
.tray__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.1rem; margin-bottom: 1.5rem; }
.tray__head h2 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--sig); }
.tray__head h2 a { text-decoration: none; }
.tray__head h2 a:hover { text-decoration: underline; text-underline-offset: .2em; }
.tray__domain, .tray__count { margin: 0; font-size: .75rem; color: var(--nw-quiet); }
.tray__line { margin: 0; font-size: .875rem; color: var(--nw-quiet); flex-basis: 100%; max-width: 52ch; }
.tray__rack {
  --card-w: 15rem;
  container-type: inline-size;
  display: flex;
  align-items: stretch;
  /* room for the tilted edges and the parting, so nothing leaves the page */
  padding: 2.5rem clamp(2rem, 5vw, 4rem) 3rem;
}
/* Overlap is whatever it takes for the whole hand to fit the tray, and never less than a sliver. */
.card {
  --gap: calc((100cqw - var(--card-w)) / max(var(--n) - 1, 1));
  --overlap: max(2.75rem, calc(var(--card-w) - var(--gap)));
  --shift: 0rem;
  --lift: 0px;
  position: relative;
  flex: 0 0 var(--card-w);
  margin-left: calc(var(--overlap) * -1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--nw-paper);
  border: 1px solid var(--nw-hair);
  border-top: 3px solid var(--sig);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--nw-shadow);
  transform-origin: 50% 115%;
  transform: translate(var(--shift), calc(var(--dy) + var(--lift))) rotate(var(--rot));
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease;
}
.card:first-child { margin-left: 0; }

/* Lift: the card straightens and rises; the hand parts around it. */
.card:hover, .card:focus-visible {
  --lift: -2.25rem;
  z-index: 20;
  transform: translate(var(--shift), var(--lift)) rotate(0deg) scale(1.045);
  box-shadow: 0 4px 8px rgb(0 0 0 / .1), 0 28px 48px -20px rgb(0 0 0 / .55);
}
.card:hover ~ .card, .card:focus-visible ~ .card { --shift: calc(var(--overlap) * .42); }
.card:has(~ .card:hover), .card:has(~ .card:focus-visible) { --shift: calc(var(--overlap) * -.42); }
.card:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; }

.card--care { border-style: dashed; border-top-style: solid; }
.card--sub { border-left: 2px dashed var(--sig); }
.card__face { margin: 0; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--nw-hair); }
.card__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__blank { width: 100%; height: 100%; display: grid; place-items: center; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sig); }
.card__body { padding: .9rem 1rem 1.05rem; display: flex; flex-direction: column; flex: 1; }
.card__name { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.card:hover .card__name, .card:focus-visible .card__name { color: var(--sig); }
.card__under { margin: .25rem 0 0; font-size: .7rem; color: var(--nw-quiet); }
.card__does { margin: .4rem 0 0; font-size: .875rem; line-height: 1.45; }
.card__meta { margin: auto 0 0; padding-top: .7rem; display: flex; flex-wrap: wrap; gap: .2rem .75rem; font-size: .7rem; color: var(--nw-quiet); }
.card__standing { color: var(--sig); }

/* On a phone a full hand won't fit, so it becomes one you slide through. */
@media (max-width: 640px) {
  .tray__rack {
    --card-w: 72vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.6rem;
    margin-inline: calc(clamp(1.1rem, 4vw, 3.5rem) * -1);
    padding-inline: 1.6rem;
    scrollbar-width: none;
  }
  .tray__rack::-webkit-scrollbar { display: none; }
  /* per-card arc values are inline, so the phone uses its own tilt variable */
  .card { --overlap: 1.25rem; --mrot: 1.1deg; scroll-snap-align: start; transform: translate(0, var(--lift)) rotate(var(--mrot)); }
  .card:nth-child(odd) { --mrot: -1.1deg; }
  .card:hover ~ .card, .card:focus-visible ~ .card,
  .card:has(~ .card:hover), .card:has(~ .card:focus-visible) { --shift: 0rem; }
  .card:hover, .card:focus-visible { --lift: -.75rem; transform: translate(0, var(--lift)) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-visible { transform: translate(var(--shift), var(--dy)) rotate(var(--rot)); }
}

.nw__foot { margin-top: 3rem; display: grid; gap: .8rem; max-width: 60ch; font-size: .8rem; color: var(--nw-quiet); }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
}

.nw{--nw-paper:var(--panel);padding-top:clamp(2rem,5vw,3.5rem)}

.nw{--nw-display:var(--f-d)}
.nw__head h1{color:var(--bone);font-weight:400;letter-spacing:-.036em;line-height:.9;padding-bottom:.24em;margin-bottom:-.19em;filter:drop-shadow(0 0 40px rgba(255,61,154,.22))}
.nw__head p{font-family:var(--f-s);color:var(--dusk)}
.nw__sub{text-align:left;margin-top:14px}
.nw__root h2{font-weight:400}
.tray__head h2{font-weight:600}
.tray__domain,.tray__count,.tray__line{font-family:var(--f-s)}
.tray__line{color:var(--bone)}
.tray__count{font-family:var(--f-m);letter-spacing:.14em;text-transform:uppercase}
.card{color:var(--bone)}
.card__name{font-weight:600}
.card__meta{font-family:var(--f-m);letter-spacing:.06em}

/* per-tray and per-card values */
.nw__work{background-image:linear-gradient(100deg,#52b788,#35e4f4,#2e7de0,#ff3d9a)}
.tray.t1{--sig:#35e4f4}
.t1 .card.c1{--sig:#c9a227;--n:9;--rot:-7.0deg;--dy:16.0px}
.t1 .card.c2{--sig:#c08327;--n:9;--rot:-5.25deg;--dy:9.0px}
.t1 .card.c3{--sig:#e5612c;--n:9;--rot:-3.5deg;--dy:4.0px}
.t1 .card.c4{--sig:#e5612c;--n:9;--rot:-1.75deg;--dy:1.0px}
.t1 .card.c5{--sig:#e5612c;--n:9;--rot:0.0deg;--dy:0.0px}
.t1 .card.c6{--sig:#e5612c;--n:9;--rot:1.75deg;--dy:1.0px}
.t1 .card.c7{--sig:#ff3d9a;--n:9;--rot:3.5deg;--dy:4.0px}
.t1 .card.c8{--sig:#b04318;--n:9;--rot:5.25deg;--dy:9.0px}
.t1 .card.c9{--sig:#35e4f4;--n:9;--rot:7.0deg;--dy:16.0px}
.tray.t2{--sig:#52b788}
.t2 .card.c1{--sig:#86BFB1;--n:11;--rot:-7.00deg;--dy:16.0px}
.t2 .card.c2{--sig:#86BFB1;--n:11;--rot:-5.60deg;--dy:10.2px}
.t2 .card.c3{--sig:#d4a373;--n:11;--rot:-4.20deg;--dy:5.8px}
.t2 .card.c4{--sig:#c79321;--n:11;--rot:-2.80deg;--dy:2.6px}
.t2 .card.c5{--sig:#c79321;--n:11;--rot:-1.40deg;--dy:0.6px}
.t2 .card.c6{--sig:#52b788;--n:11;--rot:0.00deg;--dy:0.0px}
.t2 .card.c7{--sig:#52b788;--n:11;--rot:1.40deg;--dy:0.6px}
.t2 .card.c8{--sig:#c8282b;--n:11;--rot:2.80deg;--dy:2.6px}
.t2 .card.c9{--sig:#c8282b;--n:11;--rot:4.20deg;--dy:5.8px}
.t2 .card.c10{--sig:#c93828;--n:11;--rot:5.60deg;--dy:10.2px}
.t2 .card.c11{--sig:#c93828;--n:11;--rot:7.00deg;--dy:16.0px}
.tray.t3{--sig:#2e7de0}
.t3 .card.c1{--sig:#2e7de0;--n:5;--rot:-7.00deg;--dy:16.0px}
.t3 .card.c2{--sig:#495ed4;--n:5;--rot:-3.50deg;--dy:4.0px}
.t3 .card.c3{--sig:#e0b12e;--n:5;--rot:0.00deg;--dy:0.0px}
.t3 .card.c4{--sig:#921935;--n:5;--rot:3.50deg;--dy:4.0px}
.t3 .card.c5{--sig:#173a26;--n:5;--rot:7.00deg;--dy:16.0px}
.tray.t4{--sig:#ff3d9a}
.t4 .card.c1{--sig:#ff3d9a;--n:4;--rot:-7.00deg;--dy:16.0px}
.t4 .card.c2{--sig:#FFC94D;--n:4;--rot:-2.33deg;--dy:1.8px}
.t4 .card.c3{--sig:#35E4F4;--n:4;--rot:2.33deg;--dy:1.8px}
.t4 .card.c4{--sig:#B36BFF;--n:4;--rot:7.00deg;--dy:16.0px}
.f-lora{font-family:'Lora',var(--nw-display)}
.f-inter{font-family:'Inter',var(--nw-display)}
.f-bricolage-grotesque{font-family:'Bricolage Grotesque',var(--nw-display)}
.f-abril-fatface{font-family:'Abril Fatface',var(--nw-display)}
.f-recursive{font-family:'Recursive',var(--nw-display)}
.f-newsreader{font-family:'Newsreader',var(--nw-display)}
.f-barlow{font-family:'Barlow',var(--nw-display)}
.f-atkinson-hyperlegible{font-family:'Atkinson Hyperlegible',var(--nw-display)}
.f-fraunces{font-family:'Fraunces',var(--nw-display)}
.f-bebas-neue{font-family:'Bebas Neue',var(--nw-display)}
.f-playfair-display{font-family:'Playfair Display',var(--nw-display)}