/* Inter (SIL Open Font License, assets/fonts/Inter-LICENSE.txt), self-hosted: latin + latin-ext, variable weight. */
/* inter-latin-ext-wght-normal */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-extra-cbf681891c5a.woff2) format('woff2-variations');
  unicode-range: U+0103,U+0105,U+0107,U+010D,U+0117,U+0130,U+0131,U+0142,U+0144,U+014D,U+015B,U+0161,U+016B;
}
/* inter-latin-wght-normal */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*
 * Design tokens. Dark is the default theme; light is an override.
 *
 * Structure (scale, spacing, radii, grid, motion curves) is derived from an
 * analysis of 60fps.design — see docs/design-system.md. Colour, type pairing,
 * accent and header treatment are our own.
 */

:root {
  color-scheme: dark;

  /* ---------- Colour: dark-first neutral ramp ---------- */
  --c-canvas: #0b0b0c;          /* page */
  --c-shell: #121214;           /* card shells, chips */
  --c-surface: #18181b;         /* media tiles, raised panels */
  --c-surface-2: #202024;       /* hover fills, secondary buttons */
  --c-line: rgb(255 255 255 / 0.07);      /* hairlines */
  --c-line-strong: rgb(255 255 255 / 0.16); /* hover border */
  --c-text-faint: #94949c;      /* readable metadata on dark surfaces */
  --c-text: #a1a1a8;            /* primary UI text */
  --c-text-strong: #ededef;     /* hover, headings, active */
  --c-accent: #ff5b29;          /* signal orange: primary action, live state, focus */
  --c-accent-soft: rgb(255 91 41 / 0.14);
  --c-on-accent: #0b0b0c;
  --c-scrim: rgb(11 11 12 / 0.72);
  --c-media-control: rgb(20 20 22 / 0.6);
  --tile-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 40%);

  /* ---------- Type: Inter throughout; tabular figures for data ---------- */
  --font-sans: "Inter", -apple-system, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* placeholder code/film art only */
  --fs-meta: 13px;   --lh-meta: 18px;     /* IDs, counts, dates, labels */
  --fs-body: 14px;   --lh-body: 1.4;      /* almost everything */
  --fs-title: 20px;  --lh-title: 28px;    /* page statement, section heads, detail H1 */
  --fw-regular: 500;
  --fw-strong: 600;

  /* ---------- Space ---------- */
  --s-1: 4px;  --s-2: 6px;  --s-3: 10px;  --s-4: 16px;  --s-5: 20px;  --s-6: 30px;  --s-8: 60px;

  /* ---------- Layout ---------- */
  --content-max: 1088px;  /* 3 × 360 + 2 × 4 */
  --card-w: 360px;
  --nav-h: 60px;

  /* ---------- Radius: concentric ---------- */
  --r-xs: 4px;  --r-sm: 10px;  --r-md: 20px;  --r-lg: 40px;  --r-pill: 999px;

  /* ---------- Elevation: borders do the work on dark ---------- */
  --shadow-float: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 24px 60px -12px rgb(0 0 0 / 0.6);
  --shadow-hover: 0 12px 30px -12px rgb(0 0 0 / 0.7);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
  --dur-fade: 500ms;
}

[data-theme="light"] {
  color-scheme: light;
  --c-canvas: #f5f5f5;
  --c-shell: #fafafa;
  --c-surface: #ffffff;
  --c-surface-2: #eaeaea;
  --c-line: #eaeaea;
  --c-line-strong: #d6d6d6;
  --c-text-faint: #666666;
  --c-text: #5c5c5c;
  --c-text-strong: #111111;
  --c-accent: #e8481a;
  --c-accent-soft: rgb(232 72 26 / 0.1);
  --c-on-accent: #ffffff;
  --c-scrim: rgb(245 245 245 / 0.8);
  --c-media-control: rgb(0 0 0 / 0.45);
  --tile-sheen: none;
  --shadow-float: 0 10px 30px -4px rgb(0 0 0 / 0.12);
  --shadow-hover: 0 0.6px 0.6px -1.25px rgb(0 0 0 / 0.18), 0 2.3px 2.3px -2.5px rgb(0 0 0 / 0.16), 0 10px 10px -3.75px rgb(0 0 0 / 0.06);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-fade: 0ms; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
/* <picture> only picks the file (scripts/images.mjs): the <img> inside is laid out and styled as if it stood alone. */
picture { display: contents; }
picture > source { display: none; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: var(--r-sm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(var(--content-max), 100% - 28px); margin-inline: auto; }

/* Metadata layer: numbers, ranks, dates and labels. Same family as the UI;
   set apart by size and colour, with tabular figures so columns line up. */
.fine, .count, .card__id, .stat__value, .kbd, .card__type, .meta__label, .eyebrow {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv11";
}
.card__type, .meta__label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

.faint { color: var(--c-text-faint); }
.strong { color: var(--c-text-strong); }

/* ---------------------------------------------------------------------------
   Header: 60px sticky bar. Translucent canvas + blur, hairline bottom.
--------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--c-canvas) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--c-line);
}
.nav { height: var(--nav-h); display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text-strong); }
.mark {
  width: 28px; height: 28px; flex: none;
  color: var(--c-text-strong);
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.brand:hover .mark { transform: rotate(-6deg) scale(1.06); }
.brand:active .mark { transform: scale(0.92); }
.nav__links { display: flex; align-items: center; gap: 22px; }
.nav__link { display: inline-flex; align-items: flex-start; gap: 3px; transition: color var(--dur-base) var(--ease-standard); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--c-text-strong); }
.nav__link .count { font-size: 10px; line-height: 12px; color: var(--c-text-faint); transform: translateY(-4px); }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.search-trigger {
  height: 32px; padding: 0 8px 0 10px; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-shell);
  color: var(--c-text-faint); min-width: 200px;
  transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.search-trigger:hover { border-color: var(--c-line-strong); color: var(--c-text); }
.kbd { margin-left: auto; padding: 1px 6px; border-radius: 5px; background: var(--c-surface-2); color: var(--c-text-faint); font-size: 11px; }
@media (max-width: 1199.98px) { .search-trigger { min-width: 0; } .search-trigger .label, .search-trigger .kbd { display: none; } }
@media (max-width: 809.98px) {
  .nav { height: auto; flex-wrap: wrap; gap: 10px 12px; padding: 10px 0 0; }

  .nav__links { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; height: 40px; gap: 18px; padding-right: 32px; mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .nav__link { flex: none; }
  .toolbar > .fine { display: none; }
}

/* Buttons: concentric-friendly, 32 and 40 heights */
.btn {
  height: 32px; padding: 0 12px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: var(--fw-strong); white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) linear, color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.btn:active { transform: scale(0.96); }
.btn--lg { height: 40px; padding: 0 16px; }
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: color-mix(in srgb, var(--c-accent) 88%, white); }
.btn--secondary { background: var(--c-surface-2); color: var(--c-text-strong); }
.btn--secondary:hover { background: color-mix(in srgb, var(--c-surface-2) 80%, white); }

.btn[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   Intro: page statement + live collection status (replaces a hero)
--------------------------------------------------------------------------- */
.intro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 56px 0 28px; }
.intro h1 { margin: 0; max-width: 560px; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-regular); color: var(--c-text-strong); text-wrap: balance; }
.intro h1 span { color: var(--c-text-faint); }


@media (max-width: 809.98px) { .intro { grid-template-columns: 1fr; } }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.section-head h2 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.section-head a { color: var(--c-text-faint); transition: color var(--dur-base) var(--ease-standard); }
.section-head a:hover { color: var(--c-text-strong); }
.section-head--spaced { margin-top: 60px; }

/* ---------------------------------------------------------------------------
   Ranked strip: horizontally scrolling creator tiles (rank, avatar, name, Δ)
--------------------------------------------------------------------------- */
.ranked {
  display: flex; gap: var(--s-1); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  margin-bottom: 40px;
}
.ranked::-webkit-scrollbar { display: none; }
.rtile {
  flex: 0 0 200px; padding: 12px; scroll-snap-align: start;
  display: grid; gap: 12px;
  background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
}
.rtile:hover { border-color: var(--c-line-strong); }
.rtile:active { transform: scale(0.97); }
.rtile__top { display: flex; justify-content: space-between; align-items: center; }

.avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10px; color: var(--c-canvas); font-weight: 600; }
.avatar--studio { border-radius: 7px; }
.avatar--lg { width: 80px; height: 80px; font-size: 22px; border-radius: 50%; }
.avatar--lg.avatar--studio { border-radius: var(--r-md); }

/* ---------------------------------------------------------------------------
   Chips (filters, tags)
--------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chip {
  height: 32px; padding: 0 12px; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.chip:hover { color: var(--c-text-strong); border-color: var(--c-line-strong); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--c-text-strong); color: var(--c-canvas); border-color: transparent; }
.chip .count { color: inherit; opacity: 0.6; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* ---------------------------------------------------------------------------
   Work feed: fixed 360px cards, 4px gutter, 3 / 2 / 1 columns
--------------------------------------------------------------------------- */
.feed { display: grid; grid-template-columns: repeat(3, var(--card-w)); gap: var(--s-1); justify-content: center; }
@media (max-width: 1199.98px) { .feed { grid-template-columns: repeat(2, var(--card-w)); } }
@media (max-width: 809.98px)  { .feed { grid-template-columns: 1fr; } }

.lead { grid-column: 1 / -1; display: flex; flex-direction: column; }
.lead > .card { flex: 1; }
.lead .card__media { aspect-ratio: 16 / 9; }
@media (max-width: 809.98px) { .lead { grid-column: auto; grid-row: auto; gap: var(--s-1); } }

.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-3);
  background: var(--c-shell);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.card:hover, .card:focus-within { border-color: var(--c-line-strong); box-shadow: var(--shadow-hover); }
.card__head, .card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-inline: var(--s-3); min-height: 24px; }
.card__id { color: var(--c-text-faint); }
.credit { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; transition: color var(--dur-base) var(--ease-standard); }
.credit:hover { color: var(--c-text-strong); }

.card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--tile-sheen), var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--c-line);
  display: grid; place-items: center;
}
.card__title { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--c-text); transition: color var(--dur-base) var(--ease-standard); }
.card__title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card:hover .card__title { color: var(--c-text-strong); }
.card__title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the hit area */
.card__arrow { width: 16px; height: 16px; flex: none; color: var(--c-accent); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-out); }
.card:hover .card__arrow, .card:focus-within .card__arrow { opacity: 1; transform: none; }
.card__type { color: var(--c-text-faint); text-transform: uppercase; flex: none; }
.card .play { z-index: 1; }

.play {
  position: absolute; right: 12px; bottom: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-media-control); color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
}
.play:active { transform: scale(0.92); }

/* ---------------------------------------------------------------------------
   Leaderboard
--------------------------------------------------------------------------- */
.board { display: grid; gap: var(--s-1); }
.row {
  position: relative;
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 52px minmax(200px, 1.3fr) 1fr 72px 104px 92px;
  padding: 10px 10px 10px 20px;
  background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.row:hover { border-color: var(--c-line-strong); }

.row__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row__who .avatar { width: 40px; height: 40px; font-size: 12px; }
.row__who .avatar--studio { border-radius: var(--r-sm); }
.row__name { display: grid; min-width: 0; }
.row__name a { color: var(--c-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.row__name span { color: var(--c-text-faint); }
.row__tags { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.row__tags span { flex: none; }
.row__tags span.is-active { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 40%, transparent); }
.row__tags span { padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--c-line); color: var(--c-text-faint); font-size: 12px; }

.row .btn { position: relative; z-index: 1; }
.board__head { display: grid; grid-template-columns: 52px minmax(200px, 1.3fr) 1fr 72px 104px 92px; gap: 16px; padding: 0 10px 8px 20px; }
@media (max-width: 1199.98px) {
  .row, .board__head { grid-template-columns: 48px 1fr 96px 92px; }
  .row__tags, .row__trend, .board__head .hide-md { display: none; }
}
@media (max-width: 809.98px) {
  .row, .board__head { grid-template-columns: 40px 1fr 72px; padding-left: 14px; }
  .row .btn { display: none; }
}

/* ---------------------------------------------------------------------------
   Profile
--------------------------------------------------------------------------- */
.profile { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 56px 0 32px; }
.profile h1 { margin: 0 0 2px; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.profile p { margin: 0; color: var(--c-text-faint); }
.profile__actions { display: flex; gap: 6px; }
@media (max-width: 809.98px) { .profile { grid-template-columns: auto 1fr; } .profile__actions { grid-column: 1 / -1; } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); margin-bottom: 40px; }
.stat { padding: 14px 16px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md); display: grid; gap: 4px; }
.stat__value { font-size: 20px; line-height: 28px; color: var(--c-text-strong); letter-spacing: -0.01em; font-weight: var(--fw-regular); }
.stat__label { color: var(--c-text-faint); }
@media (max-width: 809.98px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.network { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.peer { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-pill); transition: border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.peer:hover { border-color: var(--c-line-strong); color: var(--c-text-strong); }

/* Project detail: an artwork viewer, followed by the people and provenance. */
.detail { padding-top: 24px; }
.project-browse, .project-browse > div { display: flex; align-items: center; gap: 20px; }
.project-browse { justify-content: space-between; font-size: 13px; }
.project-browse a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.project-browse a:hover { color: var(--c-text-strong); }
.project-back { color: var(--c-text-strong); }
.project-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 32px 0; }
.project-heading > div { min-width: 0; }
.project-kicker { margin: 0 0 12px; color: var(--c-text-faint); font-size: 13px; }
.project-kicker > span { padding-inline: 6px; color: var(--c-line-strong); }
.project-heading h1 { margin: 0; max-width: 800px; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -.045em; font-weight: 500; color: var(--c-text-strong); overflow-wrap: anywhere; text-wrap: balance; }
.project-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; font-size: 13px; }
.project-byline a { display: inline-flex; align-items: center; gap: 8px; }
.project-byline a:first-child { color: var(--c-text-strong); }
.project-byline a:hover { text-decoration: underline; text-underline-offset: 4px; }
.project-byline__divider { color: var(--c-text-faint); }
.project-visit { flex: none; height: 44px; padding-inline: 18px; color: var(--c-canvas); background: var(--c-text-strong); border-radius: 12px; }
.project-visit:hover { opacity: .86; }
.viewer-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 740px; overflow: hidden; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: 20px; }
.viewer-slide { position: absolute; inset: 0; }
.viewer-art { position: relative; display: grid; place-items: center; width: 100%; height: 100%; cursor: zoom-in; }
.viewer-art .project-image { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.viewer-expand { position: absolute; top: 16px; right: 16px; padding: 8px 12px; border: 1px solid rgb(255 255 255 / .15); border-radius: 9px; background: rgb(0 0 0 / .65); color: #fff; font-size: 12px; backdrop-filter: blur(8px); transition: opacity var(--dur-base); }
@media (hover: hover) { .viewer-expand { opacity: 0; } .viewer-art:hover .viewer-expand, .viewer-art:focus-visible .viewer-expand { opacity: 1; } }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; }
.viewer-bar p { margin: 0; color: var(--c-text-strong); }
.viewer-bar p span { color: var(--c-text-faint); margin-left: 14px; }
.viewer-controls { display: flex; gap: 6px; }
.viewer-controls button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--c-line); background: var(--c-shell); color: var(--c-text-strong); }
.viewer-controls button:not(:disabled):hover { background: var(--c-surface-2); }
.viewer-controls button:disabled, .image-modal__nav:disabled { opacity: .3; cursor: default; }
.viewer-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 2px; scrollbar-width: thin; }
.viewer-thumb { position: relative; flex: 0 0 112px; height: 76px; padding: 3px; border: 1px solid transparent; border-radius: 10px; opacity: .5; transition: opacity var(--dur-base), border-color var(--dur-base); }
.viewer-thumb img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; background: var(--c-surface); }
.viewer-thumb:hover { opacity: .85; }
.viewer-thumb[aria-pressed="true"] { border-color: var(--c-text-strong); opacity: 1; }
.viewer-thumb__label { position: absolute; inset: auto 7px 7px; padding: 3px 6px; border-radius: 4px; background: rgb(0 0 0 / .72); color: #fff; font-size: 10px; line-height: 16px; text-align: left; }
.project-information { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--c-line); }
.project-information h2 { margin: 0; font-size: 15px; font-weight: 500; color: var(--c-text-strong); }
.project-facts dl { margin: 24px 0 32px; display: grid; gap: 14px; font-size: 13px; }
.project-facts dl > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
.project-facts dt { color: var(--c-text-faint); }
.project-facts dd { margin: 0; color: var(--c-text-strong); overflow-wrap: anywhere; }
.project-source { padding-top: 20px; border-top: 1px solid var(--c-line); }
.project-source > span { color: var(--c-text-faint); }
.project-source__link { display: block; margin-top: 8px; color: var(--c-text-strong); overflow-wrap: anywhere; }
.project-source__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.project-source p { max-width: 28ch; margin: 12px 0 0; color: var(--c-text-faint); font-size: 12px; }
.project-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; }
.project-section-title > span { flex: none; color: var(--c-text-faint); font-size: 12px; }
.project-contributors { scroll-margin-top: 88px; }
.project-credit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.project-credit { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 18px 0; min-width: 0; border-bottom: 1px solid var(--c-line); }
.project-credit .avatar { width: 36px; height: 36px; font-size: 11px; }
.project-credit > div { min-width: 0; }
.project-credit a.strong { font-size: 13px; }
.project-credit a.strong::after { content: ''; position: absolute; inset: 0; }
.project-credit .source-link { position: relative; z-index: 1; display: inline-block; margin-top: 6px; }
.project-credit p { margin: 3px 0 0; color: var(--c-text-faint); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.project-credit__arrow { margin-left: auto; color: var(--c-text-strong); opacity: 0; transition: opacity var(--dur-base); }
.project-credit:hover .project-credit__arrow, .project-credit:focus-within .project-credit__arrow { opacity: 1; }
.credits-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin-top: 16px; padding: 10px 16px; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-text-strong); font-size: 13px; }
.credits-toggle:hover { background: var(--c-shell); border-color: var(--c-line-strong); }
.credits-origin { margin: 20px 0 0; color: var(--c-text-faint); font-size: 12px; }
.credits-origin a:hover { color: var(--c-text-strong); text-decoration: underline; text-underline-offset: 3px; }
.publisher-profile { display: flex; align-items: center; gap: 18px; padding: 24px; margin-top: 24px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: 16px; }
.publisher-profile:hover { border-color: var(--c-line-strong); }
.publisher-profile .avatar { width: 56px; height: 56px; font-size: 18px; }
.publisher-profile > span { display: grid; gap: 6px; min-width: 0; }
.publisher-profile strong { font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -.03em; color: var(--c-text-strong); overflow-wrap: anywhere; }
.project-related { margin-top: 72px; }
.project-related .section-head { margin-bottom: 20px; }
.project-related h2 { font-size: 20px; letter-spacing: -.02em; }
@media (max-width: 1199.98px) { .project-information { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; } .project-credit-grid { column-gap: 20px; } }
@media (max-width: 809.98px) {
  .detail { padding-top: 16px; }
  .project-browse, .project-browse > div { gap: 16px; font-size: 12px; }
  .project-heading { align-items: flex-start; flex-direction: column; gap: 24px; padding: 24px 0; }
  .project-heading h1 { font-size: 34px; }
  .project-kicker { font-size: 12px; }
  .project-byline { margin-top: 16px; }
  .project-visit { height: 40px; }
  .viewer-stage { aspect-ratio: 4 / 3; border-radius: 14px; }
  .viewer-expand { top: 10px; right: 10px; padding: 6px 9px; }
  .viewer-thumb { flex-basis: 88px; height: 64px; }
  .viewer-controls button { width: 40px; height: 40px; }
  .project-information { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 32px; padding-top: 28px; }
  .project-facts dl { margin-top: 20px; margin-bottom: 24px; }
  .project-source p { max-width: none; }
  .project-credit-grid { grid-template-columns: minmax(0, 1fr); }
  .project-contributors { scroll-margin-top: 110px; }
  .project-credit__arrow { opacity: 1; }
  .project-related { margin-top: 48px; }
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.footer { margin-top: 120px; border-top: 1px solid var(--c-line); padding: 48px 0 40px; }
.index { display: grid; grid-template-columns: 2fr 3fr; gap: 24px; }
@media (max-width: 809.98px) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .index > :first-child { grid-column: 1 / -1; } }
.index h2 { margin: 0 0 14px; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.index ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 48px; }
.index a { transition: color var(--dur-base) var(--ease-standard); }
.index a:hover { color: var(--c-text-strong); }
.index p { margin: 0 0 16px; max-width: 300px; color: var(--c-text-faint); }
@media (max-width: 809.98px) { .index ul { grid-template-columns: 1fr; } }
.footer__meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; color: var(--c-text-faint); }

/* ---------------------------------------------------------------------------
   Search: command palette over a dimmed canvas
--------------------------------------------------------------------------- */

.search__panel { width: min(560px, 100% - 28px); background: var(--c-shell); border: 1px solid var(--c-line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-float); overflow: hidden; transform: translateY(-8px) scale(0.98); transition: transform var(--dur-slow) var(--ease-out); }

.search__field { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--c-line); }

/* ---------------------------------------------------------------------------
   Rankings layout: sticky field/specialism index + board
--------------------------------------------------------------------------- */
.board-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.fields { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 2px; max-height: calc(100vh - var(--nav-h) - 40px); overflow: auto; scrollbar-width: none; }
.fields__item, .fields__spec {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 34px; padding: 0 12px; border-radius: var(--r-sm);
  transition: color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.fields__item:hover, .fields__spec:hover { color: var(--c-text-strong); background: var(--c-shell); }
.fields__item[aria-current="true"], .fields__spec[aria-current="true"] { color: var(--c-text-strong); background: var(--c-surface-2); }
.fields__specs { display: grid; gap: 2px; margin: 2px 0 8px 10px; padding-left: 8px; border-left: 1px solid var(--c-line); }
.fields__spec { height: 30px; color: var(--c-text-faint); }
.fields__spec[aria-current="true"] { color: var(--c-accent); background: var(--c-accent-soft); }
.fields .count { transform: none; font-size: 11px; }
@media (max-width: 1199.98px) {
  .board-layout { grid-template-columns: 1fr; }
  .fields { position: static; display: flex; overflow-x: auto; max-height: none; }
  .fields__item, .fields__spec { flex: none; border: 1px solid var(--c-line); border-radius: var(--r-pill); }
  .fields__specs { display: contents; }
}

/* Field tiles on home */

.credit__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.card--featured .credit__name { max-width: none; }

.index h2 a:hover { color: var(--c-accent); }
.footer__meta a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Polish pass
--------------------------------------------------------------------------- */
/* Field tiles: top-three list */
.rtile { flex-basis: 248px; padding: 14px; gap: 14px; align-content: start; }
.rtile > .fine { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.podium li { display: grid; grid-template-columns: 24px 22px 1fr auto; align-items: center; gap: 8px; }
.podium .avatar { width: 22px; height: 22px; }
.podium b { font-weight: var(--fw-regular); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium li:first-child b { color: var(--c-text-strong); }

.rtile:hover .podium b { color: var(--c-text-strong); }

/* Avatars carry no text now; add a soft inner edge so gradients sit on dark */
.avatar { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }

/* Leaderboard: top three and trend */

/* Sort control */
.sort { height: 32px; gap: 6px; font-weight: var(--fw-regular); color: var(--c-text-faint); flex: none; }

/* Rank badge embed */

/* Entrance: fade up once, staggered by JS */

/* Cross-document view transitions (Chromium); header stays put */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Brand: hand-drawn trumpet and hand-lettered italic wordmark (pen and ink) */
.wordmark { display: inline-flex; color: var(--c-text-strong); }
.wordmark__art { display: block; height: 22px; width: auto; transform: translateY(1px); }
.mark { width: 30px; height: 30px; }
.brand { gap: 9px; }
.footer__brand { display: flex; align-items: center; gap: 9px; }

/* Mobile overrides that must follow component rules */
.board-layout > *, .toolbar > * { min-width: 0; }
@media (max-width: 809.98px) {

  .toolbar { flex-direction: column; align-items: stretch; }
  .row__name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Collected records: source-backed names and credits, before artwork import. */
.skip-link { position: fixed; top: -80px; left: 14px; z-index: 100; padding: 12px; background: var(--c-text-strong); color: var(--c-canvas); border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }
.avatar--initials { background: var(--c-surface-2); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.podium--collected li { grid-template-columns: 22px minmax(0, 1fr); }
.podium--collected li:only-child.fine { display: block; }
.record-cover { width: 100%; height: 100%; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; background: var(--c-surface); }
.record-cover .eyebrow { color: var(--c-text); text-transform: uppercase; letter-spacing: .06em; }
.record-cover__title { max-width: 18ch; font-size: 30px; line-height: 1.12; letter-spacing: -.04em; color: var(--c-text-strong); text-wrap: balance; }

.card--featured .record-cover { padding: 40px; }
.card--featured .record-cover__title { font-size: clamp(36px, 4.5vw, 64px); }
.sort-label { display: flex; align-items: center; gap: 8px; flex: none; }
.sort-label select { max-width: 100%; font: inherit; color: var(--c-text-strong); background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-sm); min-height: 32px; padding: 4px 8px; }
.row--collected, .board__head--collected { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 60px; }
.row--collected .row__name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row--collected .row__tags span, .row--collected .row__name span { color: var(--c-text); }
.project-count { text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; color: var(--c-text-strong); }
.empty-state { grid-column: 1 / -1; border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); padding: 32px 24px; }
.empty-state h2 { margin: 0; font-size: 18px; font-weight: var(--fw-regular); color: var(--c-text-strong); }
.empty-state p { margin: 8px 0 0; }
.empty-state + .btn { margin-top: 16px; }
.loading-state { padding: 56px 0; }

.evidence-list { display: grid; gap: 4px; }
.evidence-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-shell); }
.evidence-row p { margin: 4px 0 0; font-size: 12px; }
.evidence-row > div > a { color: var(--c-text-strong); }
.source-link { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.source-link:hover { color: var(--c-text-strong); }

.profile p, .stat__label { color: var(--c-text); }
.search-modal { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 10vh 0 24px; background: transparent; color: var(--c-text); overflow: hidden; }
.search-modal[open] { display: grid; justify-items: center; align-content: start; }
.search-modal::backdrop { background: var(--c-scrim); backdrop-filter: blur(6px); }
.search-modal[open]::backdrop { animation: search-fade var(--dur-slow) var(--ease-standard); }
.search-modal .search__panel { width: min(640px, 100% - 28px); max-height: min(620px, 80vh); display: flex; flex-direction: column; transform: none; animation: search-in var(--dur-slow) var(--ease-out); }
@keyframes search-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }
@keyframes search-fade { from { opacity: 0; } }
.search-modal .search__field { flex: none; gap: 10px; padding: 0 12px 0 18px; color: var(--c-text-faint); }
.search-modal .search__field:focus-within { color: var(--c-text-strong); }
.search-modal input { min-width: 0; flex: 1; height: 100%; border: 0; background: none; font: inherit; font-size: 16px; color: var(--c-text-strong); caret-color: var(--c-accent); }
.search-modal input:focus-visible { outline: none; }
.search-modal input::placeholder { color: var(--c-text-faint); }
.search-clear { flex: none; height: 28px; padding: 0 8px; border-radius: var(--r-sm); color: var(--c-text-faint); font-size: var(--fs-meta); }
.search-clear:hover { color: var(--c-text-strong); background: var(--c-surface-2); }
.search-close { flex: none; height: 28px; padding: 0 4px; border-radius: var(--r-sm); display: inline-flex; align-items: center; }
.search-close .kbd { margin: 0; }
.search-close:hover .kbd { color: var(--c-text-strong); }
.search-close__text { display: none; }
.search-tabs { flex: none; gap: 6px; padding: 10px 14px 2px; }
.search-tabs .chip { flex: none; height: 28px; gap: 6px; }
.search-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 8px 8px; scroll-padding: 34px 0 8px; }
.search-section + .search-section, .search-try + .search-section, .search-section + .search-try { margin-top: 6px; }
.search-section__head { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; padding: 4px 10px 0; background: var(--c-shell); }
.search-section__head .eyebrow { color: var(--c-text-faint); }
.search-section__action { color: var(--c-text-faint); border-radius: var(--r-xs); }
.search-section__action:hover { color: var(--c-text-strong); }
.search-result { display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--c-text); }
.search-result[aria-selected="true"] { background: var(--c-surface-2); color: var(--c-text-strong); }
.search-result:focus-visible { outline-offset: -2px; }
.search-result__text { min-width: 0; flex: 1; display: grid; gap: 1px; }
.search-result__name, .search-result__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result__name { color: var(--c-text-strong); }
.search-result__name mark { background: none; color: inherit; font-weight: 700; }
.search-result__sub { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-faint); }
.search-result__go { flex: none; width: 16px; height: 16px; color: var(--c-text-faint); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.search-result__go svg { width: 16px; height: 16px; display: block; }
.search-result[aria-selected="true"] .search-result__go { opacity: 1; transform: none; }
.search-thumb { flex: none; width: 36px; height: 36px; border-radius: var(--r-xs); overflow: hidden; display: grid; place-items: center; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); font-size: 11px; font-weight: var(--fw-strong); color: var(--c-text-faint); letter-spacing: 0.02em; }
.search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-thumb--person { border-radius: 50%; }
.search-thumb--person img { object-position: center 25%; }
.search-thumb--studio { border-radius: var(--r-sm); }
.search-thumb--studio img { object-fit: contain; padding: 3px; background: #fff; }
.search-thumb--place, .search-thumb--field { border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.search-try { display: grid; gap: 8px; padding: 8px 10px 6px; }
.search-try .eyebrow { color: var(--c-text-faint); }
.search-try .chip { height: 30px; }
.search-none { padding: 16px 10px 4px; display: grid; gap: 4px; }
.search-none p { margin: 0; }
.search-none p:first-child { color: var(--c-text-strong); }
.search-note { padding: 16px 10px; color: var(--c-text-faint); }
.search-foot { flex: none; display: flex; gap: 16px; padding: 9px 18px; border-top: 1px solid var(--c-line); color: var(--c-text-faint); }
.search-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.search-foot .kbd { margin: 0; min-width: 18px; text-align: center; }
@media (max-width: 809.98px) {
  .search-modal { padding: 0; }
  .search-modal .search__panel { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; animation-name: search-up; }
  @keyframes search-up { from { opacity: 0; transform: translateY(12px); } }
  .search-modal .search__field { padding-right: 6px; }
  .search-close { padding: 0 10px; color: var(--c-text-strong); }
  .search-close .kbd { display: none; }
  .search-close__text { display: inline; }
  .search-foot { display: none; }
  .search-body { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (hover: none) { .search-foot { display: none; } }
.avatar--photo { object-fit: cover; object-position: center 25%; }
.avatar--photo.avatar--studio { object-fit: contain; object-position: center; background: #fff; }
.discovery { margin: 4px 0 40px; }
.discovery__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 248px); gap: 4px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 8px; }
.discovery__item { min-width: 0; display: grid; gap: 6px; padding: 10px; border-radius: var(--r-md); background: var(--c-shell); border: 1px solid var(--c-line); }
.discovery__item:hover { border-color: var(--c-line-strong); }
.discovery__item img, .discovery__item .record-cover { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.discovery__item > span { padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed > *, .card, .card__foot { min-width: 0; }
.project-image { width: 100%; height: 100%; object-fit: cover; }
.card__media .project-image { position: absolute; inset: 0; object-fit: contain; }
.card-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.card.is-previewing .card-preview { opacity: 1; }
.card.is-previewing .project-image { opacity: 0; }
.card .play { z-index: 2; font-size: 14px; }
.home-toolbar { flex-direction: row; align-items: center; }
.home-toolbar > :first-child { flex: 1; min-width: 0; }
.motion-toggle { flex: none; cursor: pointer; }
.home-secondary { margin-top: 56px; }
.home-fields { margin-top: 40px; }
.media-label { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--r-pill); background: rgb(0 0 0 / .72); color: #fff; }
.film-player .project-image { object-fit: contain; }
.film-player { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.film-player .project-image, .project-video, .film-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; }
.film-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 4px 32px rgb(0 0 0 / .3); }
.film-play:active { transform: translate(-50%, -50%) scale(.96); }
.preview-label { position: absolute; top: 12px; left: 12px; padding: 4px 8px; border-radius: var(--r-pill); color: #fff; background: rgb(0 0 0 / .72); pointer-events: none; }
html.is-viewing-image { overflow: hidden; }
.image-modal { width: min(1320px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 16px; border: 1px solid var(--c-line-strong); border-radius: 18px; background: var(--c-shell); color: var(--c-text); }
.image-modal::backdrop { background: rgb(0 0 0 / .92); backdrop-filter: blur(10px); }
.image-modal__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.image-modal__toolbar > div { display: flex; gap: 6px; align-items: center; }
.image-modal__toolbar .btn { margin-left: 8px; height: 40px; }
.image-modal__nav { width: 40px; height: 40px; border: 1px solid var(--c-line); border-radius: 10px; }
.image-modal__nav:not(:disabled):hover { background: var(--c-surface-2); }
.image-modal > img { width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; }
.image-modal__caption { margin: 14px 0 0; color: var(--c-text-faint); font-size: 12px; }
@media (max-width: 1199.98px) {
  .row--collected, .board__head--collected { grid-template-columns: minmax(0, 1fr) 60px; }
}
@media (max-width: 809.98px) {
  .feed { grid-template-columns: minmax(0, 1fr); }
  .sort-label { justify-content: flex-end; }
  .card--featured .record-cover { padding: 28px; }
  .card--featured .record-cover__title { font-size: 36px; }

  .profile { gap: 16px; }
  .profile > div { min-width: 0; }
  .profile h1 { overflow-wrap: anywhere; }
  .profile .avatar--lg { width: 60px; height: 60px; }
  .section-head { flex-wrap: wrap; gap: 6px; }
  .peer { max-width: 100%; height: auto; min-height: 40px; padding-block: 8px; }
  .evidence-row { padding: 14px; }
  .evidence-row > .source-link { flex: none; }
}


/* Pen marks. Words stay in Inter; small marks are drawn with the same pen as the wordmark.
   Underline and rule use SVG masks so they take the surrounding text colour. */
.pen-arrow, .pen-back { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.24em; transition: transform var(--dur-fast) var(--ease-spring); }
.pen-arrow { margin-left: 0.05em; }
.pen-back { margin-right: 0.2em; }
a:hover > .pen-arrow, button:hover > .pen-arrow { transform: translateX(2px); }
a:hover > .pen-back, button:hover > .pen-back { transform: translateX(-2px); }

/* Underline drawn in from the left: current nav page, and section links on hover */
.nav__link, .section-head a { position: relative; }
.nav__link::after, .section-head a::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -6px; height: 6px; pointer-events: none;
  background: currentColor; opacity: 0.9;
  -webkit-mask: url("/assets/brand/pen-underline.svg") center / 100% 100% no-repeat;
  mask: url("/assets/brand/pen-underline.svg") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path 360ms var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .section-head a:hover::after { clip-path: inset(0 0 0 0); }

/* Hand-drawn rule above the footer */
.footer { border-top: 0; position: relative; }
.footer::before {
  content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: min(var(--content-max), calc(100% - 40px)); height: 8px; background: var(--c-line-strong);
  -webkit-mask: url("/assets/brand/pen-rule.svg") center / 100% 100% no-repeat;
  mask: url("/assets/brand/pen-rule.svg") center / 100% 100% no-repeat;
}

/* Paper: a barely-there grain on the page itself. Cards and media sit on top, untouched. */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .nav__link::after, .section-head a::after { transition: none; } }

/* === features: countries, answer line, share kit === */
/* Breadcrumbs above a place title (ancestors only; the title is the current page). */
.crumbs { margin: 0 0 10px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-faint); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--c-line-strong); }
.crumbs a { transition: color var(--dur-base) var(--ease-standard); }
.crumbs a:hover { color: var(--c-text-strong); }
/* Country page: its cities. A city without a page of its own is a plain chip, not a link. */
.place-list { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.place-list .count { margin-left: 2px; }
.chip--static, .chip--static:hover { color: var(--c-text-faint); border-color: var(--c-line); }
/* Footer: About sits with the copyright, outside the brand section. */
.footer__links { display: inline-flex; flex-wrap: wrap; gap: 16px; }

/* Project page: the "who made it" line under the title, from the credits only. */
.project-answer { margin: 16px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--c-text); text-wrap: pretty; }
.project-answer__title { color: var(--c-text-strong); }
.project-answer a { color: var(--c-text-strong); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; transition: text-decoration-color var(--dur-base) var(--ease-standard); }
.project-answer a:hover { text-decoration-color: currentColor; }
.project-answer + .project-byline { margin-top: 16px; }
@media (max-width: 809.98px) { .project-answer { font-size: 14px; } }

/* Share kit on profiles and studios: link, share intents, and the "Featured on Vasari" badge. */
.share-kit { margin: 0 0 40px; }
.share-kit__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
@media (max-width: 809.98px) { .share-kit__actions .btn { flex: 1 1 auto; } }

/* Badge kit (scripts/badge-kit.js): a stage where the badge sits under the pointer, and the
   controls beside it. The stage is a drafting table: a dot grid on the media-tile surface. */
/* Laid out by its own width, so it fits a profile page or the narrower account card alike. */
.badge-kit { container-type: inline-size; margin-top: 12px; }
.badge-kit__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-1); }
.badge-kit__stage {
  --dot: var(--c-line-strong);
  position: relative; display: grid; place-items: center; min-height: 360px; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--r-md); perspective: 800px;
  background: radial-gradient(circle, var(--dot) 1px, transparent 1.25px) center / 18px 18px, var(--c-surface);
  transition: background-color var(--dur-slow) var(--ease-standard);
}
.badge-kit__stage[data-ground="light"] { --dot: rgb(0 0 0 / 0.09); background-color: #f5f5f5; }
.badge-kit__stage[data-ground="dark"] { --dot: rgb(255 255 255 / 0.08); background-color: #0b0b0c; }
.badge-kit__stage[data-ground="light"] .badge-kit__caption { color: #6b6b70; }
.badge-kit__caption { position: absolute; left: 18px; bottom: 14px; margin: 0; color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.badge-kit__piece {
  display: block; line-height: 0; cursor: pointer; border-radius: 18px;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.2)) drop-shadow(0 16px 24px rgb(0 0 0 / 0.28));
}
/* Shown at one and a half times its size so the drawing can be read; the copy is 1x. */
.badge-kit__piece svg { display: block; width: auto; height: 81px; max-width: calc(100cqw - 48px); }
.badge-kit__stage { container-type: inline-size; }
.badge-kit__piece .vb-mark { transform-box: fill-box; transform-origin: 30% 80%; }
.badge-kit__piece.is-entering .vb-mark, .badge-kit__piece.is-tooting .vb-mark { animation: badge-toot 0.8s var(--ease-spring) both; }
.badge-kit__piece.is-entering { animation: badge-in 0.45s var(--ease-out) both; }
@keyframes badge-in { from { opacity: 0; translate: 0 6px; } }
@keyframes badge-toot { 40% { transform: rotate(-8deg) scale(1.05); } }

.badge-kit__panel { display: grid; align-content: start; gap: 20px; padding: 20px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.badge-kit__title { margin: 0 0 4px; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.badge-kit__panel p { margin: 0; }
.badge-kit__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.badge-kit__row legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; }
.badge-kit__swatch input { position: absolute; opacity: 0; pointer-events: none; }
.badge-kit__formats .chip[aria-selected="true"] { background: var(--c-text-strong); color: var(--c-canvas); border-color: transparent; }
.badge-kit__swatch:has(input:focus-visible) span[aria-hidden] { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.badge-kit__swatches { display: flex; gap: 8px; }
.badge-kit__swatch { position: relative; cursor: pointer; }
.badge-kit__swatch span[aria-hidden] {
  display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--swatch);
  box-shadow: inset 0 0 0 1px var(--c-line-strong), 0 0 0 2px var(--c-shell), 0 0 0 3px transparent;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
}
.badge-kit__swatch:hover span[aria-hidden] { transform: scale(1.06); }
.badge-kit__swatch:has(input:checked) span[aria-hidden] { box-shadow: inset 0 0 0 1px var(--c-line-strong), 0 0 0 2px var(--c-shell), 0 0 0 3px var(--c-text-strong); }
.badge-kit__check { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--c-text); cursor: pointer; }
.badge-kit__check input { accent-color: var(--c-accent); margin: 0; }
.badge-kit__code { display: grid; gap: 10px; }
.badge-kit__formats .chip { height: 28px; cursor: pointer; }
.badge-kit__code textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; font: inherit; font-size: 12px; line-height: 1.5; color: var(--c-text-strong); background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.badge-kit__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
@container (max-width: 759.98px) {
  .badge-kit__layout { grid-template-columns: minmax(0, 1fr); }
  .badge-kit__stage { min-height: 220px; }
  .badge-kit__piece svg { height: 64px; }
}
@container (max-width: 419.98px) { .badge-kit__check { margin-left: 0; } .badge-kit__panel { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .badge-kit__piece, .badge-kit__piece * { animation: none !important; } }

/* Plain pages (About, the collector note, removal, 404): one readable column in Inter. */
.prose { max-width: 680px; }
.prose p, .prose li { color: var(--c-text); line-height: 1.6; }
.prose p { margin: 0 0 16px; }
.prose .prose-lead { margin: 0 0 24px; font-size: var(--fs-title); line-height: var(--lh-title); color: var(--c-text-strong); text-wrap: balance; }
.prose h2 { margin: 40px 0 12px; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.prose ul { display: grid; gap: 8px; margin: 0 0 16px; padding-left: 20px; }
.prose a { color: var(--c-text-strong); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose code { padding: 1px 5px; border-radius: var(--r-xs); background: var(--c-surface-2); color: var(--c-text-strong); font: inherit; }
.prose-back { margin: 48px 0 0; }
.prose-back a { color: var(--c-text-faint); transition: color var(--dur-base) var(--ease-standard); }
.prose-back a:hover { color: var(--c-text-strong); }

/* === home feed pager === */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 40px 0 8px; flex-wrap: wrap; }
.pager__links { display: flex; gap: 8px; }
.board__more { margin-top: 12px; }

/* === credits generator (/tools/credits/) === */
.credits-tool { display: grid; gap: 16px; margin: 24px 0 32px; }
.credits-tool label { display: grid; gap: 6px; font-size: var(--text-sm, 14px); }
.credits-tool .input, .credits-tool__code { width: 100%; font: inherit; color: inherit; background: var(--surface-2, #161618); border: 1px solid var(--border, #2a2a2e); border-radius: 8px; padding: 10px 12px; }
.credits-tool textarea, .credits-tool__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; resize: vertical; }
.credits-tool__check { display: flex !important; align-items: center; gap: 8px; }
.credits-tool__preview { border: 1px solid var(--border, #2a2a2e); border-radius: 8px; padding: 16px 20px; margin-bottom: 24px; }
.credits-tool__preview dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.credits-tool__preview dt { color: var(--text-muted, #9a9aa0); }
.credits-tool__preview dd { margin: 0; }
.credits-tool__code { margin: 8px 0 12px; }

/* === place directory === */
/* City and country pages: one sentence from the data under the title, then every studio with an
   office there. A studio with curated work links to its profile; any other links to its own site,
   marked by the pen arrow turned up and out. Crafts sit in their own column, under the name on phones. */
.place-intro { margin: 12px 0 0; max-width: 62ch; color: var(--c-text); text-wrap: pretty; }
.place-studios { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.place-studio {
  display: grid; grid-template-columns: 32px minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 6px 14px;
  min-height: 60px; padding: 10px 18px 10px 12px;
  background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.place-studio:hover { border-color: var(--c-line-strong); }
.place-studio .avatar { grid-column: 1; width: 32px; height: 32px; font-size: 11px; }
.place-studio__main { grid-column: 2; min-width: 0; }
.place-studio__name { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; color: var(--c-text-strong); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-base) var(--ease-standard); }
.place-studio__name:hover { text-decoration-color: var(--c-line-strong); }
.place-studio__out { display: inline-grid; flex: none; color: var(--c-text-faint); transform: rotate(-45deg); transition: color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); }
.place-studio__name:hover .place-studio__out { color: var(--c-text-strong); transform: translate(1px, -1px) rotate(-45deg); }
.place-studio__out .pen-arrow { width: 15px; height: 15px; margin: 0; vertical-align: 0; }
.place-studio__meta { margin: 2px 0 0; color: var(--c-text-faint); overflow-wrap: anywhere; }
.place-studio__meta a, .place-studio__source { text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; transition: color var(--dur-base) var(--ease-standard); }
.place-studio__meta a:hover, .place-studio__source:hover { color: var(--c-text-strong); }
.place-studio__crafts { grid-column: 3; display: flex; flex-wrap: wrap; gap: 4px; }
.place-studio__crafts span { padding: 2px 8px; border: 1px solid var(--c-line); border-radius: var(--r-pill); color: var(--c-text); font-size: 12px; }
.place-studio__source { grid-column: 4; color: var(--c-text-faint); }
@media (max-width: 809.98px) {
  .place-studio { grid-template-columns: 32px minmax(0, 1fr) auto; padding-right: 14px; }
  .place-studio .avatar, .place-studio__main, .place-studio__source { grid-row: 1; }
  .place-studio__source { grid-column: 3; }
  .place-studio__crafts { grid-column: 2 / -1; grid-row: 2; }
  .place-studio__crafts:empty { display: none; }
}

/* === account (scripts/account-shell.mjs + account-page.js) === */
.auth-page { min-height: 100dvh; }
.auth { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); min-height: 100dvh; }
.auth-side { display: flex; flex-direction: column; gap: 32px; padding: 24px clamp(20px, 5vw, 64px) 24px; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; }
.auth-back, .auth-foot a { color: var(--c-text-faint); transition: color var(--dur-base) var(--ease-standard); }
.auth-back:hover, .auth-foot a:hover { color: var(--c-text-strong); }
.auth-main { flex: 1; display: grid; align-content: center; }
.auth-card { width: min(400px, 100%); display: grid; gap: 12px; }
.auth-card--in > * { animation: auth-in var(--dur-slow) var(--ease-out) both; }
.auth-card--in > *:nth-child(2) { animation-delay: 30ms; } .auth-card--in > *:nth-child(3) { animation-delay: 60ms; } .auth-card--in > *:nth-child(n+4) { animation-delay: 90ms; }
@keyframes auth-in { from { opacity: 0; transform: translateY(6px); } }
.auth-card.is-loading { opacity: 0.55; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard); }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: var(--c-text-faint); }

.auth-eyebrow { margin: 0; font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-faint); }
.auth-title { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-strong); color: var(--c-text-strong); letter-spacing: -0.01em; text-wrap: balance; }
.auth-subtitle { margin: 12px 0 0; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.auth-lead { margin: 0; color: var(--c-text); line-height: 1.5; text-wrap: pretty; }
.auth-lead strong, .auth-fine strong { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.auth-fine { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-faint); text-wrap: pretty; }
.auth-form { display: grid; gap: 8px; margin-top: 12px; }
.auth-label { font-size: var(--fs-meta); color: var(--c-text); }
.auth-input { width: 100%; height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--c-text-strong); background: var(--c-shell); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.auth-input::placeholder { color: var(--c-text-faint); }
.auth-input:hover { border-color: color-mix(in srgb, var(--c-line-strong) 60%, var(--c-text-faint)); }
.auth-input:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.auth-error { margin: 0; min-height: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-accent); }
.auth-error:empty { display: none; }
.auth-submit { width: 100%; height: 48px; margin-top: 4px; gap: 8px; font-size: var(--fs-body); }
.auth-submit svg { transition: transform var(--dur-fast) var(--ease-spring); }
.auth-submit:hover svg { transform: translateX(3px); }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy svg { opacity: 0; }
.btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-on-accent); border-right-color: transparent; animation: auth-spin 0.7s linear infinite; }
.btn--secondary.is-busy::after { border-color: var(--c-text-strong); border-right-color: transparent; }
@keyframes auth-spin { to { transform: rotate(1turn); } }
.auth-textbtn { color: var(--c-text-strong); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; transition: text-decoration-color var(--dur-base) var(--ease-standard); }
.auth-textbtn:hover { text-decoration-color: currentColor; }
.auth-textbtn:disabled { color: var(--c-text-faint); text-decoration: none; cursor: default; }
.auth-backlink { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--c-text-faint); font-size: var(--fs-meta); }
.auth-backlink:hover { color: var(--c-text-strong); }
.auth-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-shell); border: 1px solid var(--c-line); color: var(--c-text-strong); margin-bottom: 4px; }
.auth-perks { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--c-line); display: grid; gap: 14px; }
.auth-perks li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; color: var(--c-text-faint); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.auth-perks strong { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.auth-perks svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; border: 1px solid var(--c-line-strong); color: var(--c-text-strong); }

/* One real input over six boxes: paste, autofill and screen readers see a normal field. */
.otp { position: relative; }
.otp__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; caret-color: transparent; z-index: 1; cursor: text; }
.otp__boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.otp__box { height: 56px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-shell); border: 1px solid var(--c-line-strong); font-size: 22px; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; color: var(--c-text-strong); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); }
.otp__box.is-filled { transform: scale(1.02); }
.otp__box.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.otp__box.is-active:empty::after { content: ""; width: 1.5px; height: 22px; background: var(--c-accent); animation: auth-caret 1s steps(1) infinite; }
@keyframes auth-caret { 50% { opacity: 0; } }
.is-wrong .otp__boxes { animation: auth-shake 0.32s var(--ease-standard); }
.is-wrong .otp__box { border-color: var(--c-accent); }
@keyframes auth-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.auth-who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 12px 6px 6px; width: fit-content; max-width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-shell); font-size: var(--fs-meta); }
.auth-who__avatar { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface-2); color: var(--c-text-strong); font-weight: var(--fw-strong); font-size: 12px; }
.auth-who__email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-strong); }
.auth-toast { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--c-shell); border: 1px solid var(--c-line-strong); color: var(--c-text-strong); }
.auth-toast svg { flex: none; }
.auth-studio { display: grid; gap: 16px; margin-top: 4px; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-shell); }
.auth-studio--open { grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 12px 12px 12px; }
.auth-studio__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.auth-studio__tile { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-text-strong); font-weight: var(--fw-strong); font-size: 13px; letter-spacing: 0.02em; }
.auth-studio__name { color: var(--c-text-strong); font-weight: var(--fw-strong); }
.auth-studio__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-studio__meta { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-faint); }
.auth-studio__view { height: 32px; }
.auth-studio__remove { justify-self: start; font-size: var(--fs-meta); color: var(--c-text-faint); }
.auth-badge { display: grid; }
.auth-card--wide { width: min(520px, 100%); }
.auth-callout { display: grid; gap: 6px; padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--c-line-strong); background: var(--c-shell); }
.auth-callout p { margin: 0; }
.auth-callout a { color: var(--c-text-strong); text-decoration: underline; text-underline-offset: 3px; }
.auth-callout .auth-textbtn { justify-self: start; font-size: var(--fs-meta); }
.auth-skeleton { display: grid; gap: 12px; }
.auth-skeleton span { height: 14px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--c-shell), var(--c-surface-2), var(--c-shell)); background-size: 200% 100%; animation: auth-shimmer 1.2s linear infinite; }
.auth-skeleton span:nth-child(1) { width: 40%; } .auth-skeleton span:nth-child(2) { height: 28px; width: 85%; } .auth-skeleton span:nth-child(3) { height: 48px; }
@keyframes auth-shimmer { to { background-position: -200% 0; } }

/* A claimed studio on its public page: the verified mark and "From <studio>" (app.js ownerSection). */
.verified { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px 1px 5px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-text-strong); font-size: 12px; vertical-align: 1px; cursor: help; }
.verified svg { color: var(--c-text-strong); flex: none; }
.owner { display: grid; gap: 14px; max-width: 760px; margin: 24px 0 8px; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-shell); }
.owner__label { margin: 0; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; color: var(--c-text-faint); }
.owner__bio { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-text-strong); text-wrap: pretty; white-space: pre-line; }
.owner__facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; }
.owner__facts div { display: grid; gap: 2px; }
.owner__facts dd { margin: 0; color: var(--c-text-strong); }
.owner__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.owner__links a { color: var(--c-text); }
.owner__links a:hover { color: var(--c-text-strong); }

/* Studio workspace (scripts/account-workspace.js): with a studio to manage, /account/ becomes an
   app: full width, no cover wall, a header from the studio's own covers, a side menu and panels. */
.auth--app { grid-template-columns: minmax(0, 1fr); }
.auth--app .auth-wall, .auth--app .auth-foot { display: none; }
.auth--app .auth-side { width: min(1200px, 100%); margin-inline: auto; padding: 16px 24px 96px; gap: 8px; }
.auth--app .auth-main { align-content: start; }
.auth--app .auth-card { width: 100%; }
.ws { display: grid; gap: 16px; }
.ws-fine { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-faint); text-wrap: pretty; }
.ws-fine strong { color: var(--c-text-strong); font-weight: var(--fw-regular); }

/* The sign-in page floats its top bar over the cover band on phones; the workspace doesn't. */
.auth--app .auth-top { position: static; }
.auth--app .auth-back { padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--c-text-faint); }
/* Top row: studio switcher and the account menu */
.ws-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.ws-top__title { margin: 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-faint); }
.ws-switch select { height: 36px; padding: 0 34px 0 12px; font: inherit; color: var(--c-text-strong); background: var(--c-shell); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-faint) 50%), linear-gradient(135deg, var(--c-text-faint) 50%, transparent 50%); background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
.ws-account { position: relative; }
.ws-account__button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px 0 4px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-shell); color: var(--c-text-strong); transition: border-color var(--dur-base) var(--ease-standard); }
.ws-account__button:hover, .ws-account__button[aria-expanded="true"] { border-color: var(--c-line-strong); }
.ws-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface-2); font-size: 12px; font-weight: var(--fw-strong); }
.ws-account__email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-meta); }
.ws-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 240px; display: grid; gap: 2px; padding: 6px; border-radius: var(--r-sm); background: var(--c-shell); border: 1px solid var(--c-line-strong); box-shadow: var(--shadow-float); animation: auth-in var(--dur-fast) var(--ease-out); }
.ws-menu__who { margin: 0; padding: 8px 10px 10px; border-bottom: 1px solid var(--c-line); margin-bottom: 4px; }
.ws-menu__who strong { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.ws-menu__item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-xs); color: var(--c-text-strong); text-align: left; }
.ws-menu__item:hover, .ws-menu__item:focus-visible { background: var(--c-surface-2); }

/* Header: the studio's covers behind a bar with logo, name, verified mark and stats */
.ws-hero { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-shell); }
.ws-hero__covers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 4px; height: 172px; overflow: hidden; opacity: 0.85; mask-image: linear-gradient(180deg, #000 30%, transparent); }
.ws-hero__covers img { width: 100%; height: 100%; object-fit: cover; }
.ws-hero__covers:empty { height: 72px; background: radial-gradient(120% 140% at 0% 0%, var(--c-surface-2), transparent 60%); mask-image: none; }
.ws-hero__bar { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: end; gap: 20px; padding: 0 24px 22px; margin-top: -44px; }
.ws-logo { width: 88px; height: 88px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-md); background: #fff; color: #111; font-weight: var(--fw-strong); font-size: 22px; box-shadow: 0 0 0 4px var(--c-shell), 0 10px 30px -10px rgb(0 0 0 / 0.6); }
.ws-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.ws-hero__name { margin: 0; font-size: 28px; line-height: 34px; font-weight: var(--fw-strong); letter-spacing: -0.015em; color: var(--c-text-strong); }
.ws-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; }
.ws-hero__meta .verified { margin-left: 0; }
.ws-stats { display: flex; gap: 28px; margin: 0; }
.ws-stats div { display: grid; gap: 2px; }
.ws-stats dt { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-faint); }
.ws-stats dd { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-variant-numeric: tabular-nums; color: var(--c-text-strong); }
.ws-hero__view { gap: 6px; height: 36px; }

/* Body: side menu and panel */
.ws-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
.ws-nav { position: sticky; top: 16px; display: grid; gap: 2px; }
.ws-nav__item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--r-sm); color: var(--c-text); text-align: left; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.ws-nav__item:hover { color: var(--c-text-strong); background: var(--c-shell); }
.ws-nav__item[aria-selected="true"] { color: var(--c-text-strong); background: var(--c-surface-2); }
.ws-nav__item svg { flex: none; opacity: 0.8; }
.ws-nav__count { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--c-text-faint); }
.ws-nav__remove { justify-self: start; margin: 16px 12px 0; font-size: var(--fs-meta); color: var(--c-text-faint); }
.ws-nav__remove:hover { color: var(--c-text-strong); text-decoration: underline; text-underline-offset: 3px; }
.ws-panel { min-width: 0; display: grid; gap: 16px; outline: none; }
.ws-panel--in { animation: auth-in var(--dur-slow) var(--ease-out); }
.ws-loading { display: grid; gap: 12px; } .ws-loading span { height: 120px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--c-shell), var(--c-surface-2), var(--c-shell)); background-size: 200% 100%; animation: auth-shimmer 1.2s linear infinite; } .ws-loading span:first-child { height: 220px; }

/* Cards */
.ws-card { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-shell); }
.ws-card--flush { padding: 0; overflow: hidden; }
.ws-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ws-card__kicker { margin: 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-faint); }
.ws-card__title { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--c-text-strong); }
.ws-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.ws-card__actions .btn { height: 36px; gap: 6px; }
.ws-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.ws-section-head__title { margin: 0 0 4px; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-strong); color: var(--c-text-strong); }
.ws-section-head .btn { gap: 6px; height: 40px; }
.ws-link { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-strong); font-size: var(--fs-meta); }
.ws-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ws-link:disabled { color: var(--c-text-faint); text-decoration: none; cursor: default; }
.ws-link--quiet { color: var(--c-text-faint); justify-self: start; }
.ws-icon-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--c-text-faint); }
.ws-icon-btn:hover { color: var(--c-text-strong); background: var(--c-surface-2); }

/* Overview */
.ws-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ws-card--progress { grid-row: span 2; }
.ws-progress { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.ws-progress p { margin: 0; } .ws-progress .ws-card__title { margin: 2px 0 4px; font-size: var(--fs-title); line-height: var(--lh-title); }
.ws-ring { transform: rotate(-90deg); }
.ws-ring circle { fill: none; stroke-width: 6; }
.ws-ring__track { stroke: var(--c-surface-2); }
.ws-ring__fill { stroke: var(--c-text-strong); stroke-linecap: round; transition: stroke-dashoffset var(--dur-fade) var(--ease-out); }
.ws-checklist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.ws-checklist li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; min-height: 44px; border-top: 1px solid var(--c-line); color: var(--c-text-strong); }
.ws-checklist li.is-done { color: var(--c-text-faint); }
.ws-checklist__mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed var(--c-line-strong); }
.is-done .ws-checklist__mark { border: 0; background: var(--c-text-strong); color: var(--c-canvas); }
.ws-activity { list-style: none; margin: 0; padding: 0; display: grid; }
.ws-activity li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--c-line); }
.ws-activity li:first-child { border-top: 0; padding-top: 2px; }
.ws-activity__main { min-width: 0; display: grid; gap: 2px; }
.ws-activity__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-strong); }
a.ws-activity__label:hover { text-decoration: underline; text-underline-offset: 3px; }
.ws-badge-teaser { display: grid; place-items: center; min-height: 92px; border-radius: var(--r-sm); background: radial-gradient(circle at 1px 1px, var(--c-line-strong) 1px, transparent 0) 0 0 / 14px 14px, var(--c-canvas); }
.ws-badge-teaser svg { max-width: 100%; height: auto; }
.ws-pill { flex: none; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); font-size: 12px; white-space: nowrap; color: var(--c-text); background: var(--c-surface-2); }
.ws-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.ws-pill--in-review, .ws-pill--collected { color: var(--c-text-strong); }
.ws-pill--picked { color: var(--c-canvas); background: var(--c-text-strong); }
.ws-pill--not-picked { color: var(--c-text-faint); background: none; box-shadow: inset 0 0 0 1px var(--c-line-strong); }

/* Your page: form beside a live preview */
.ws-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 20px; align-items: start; }
.ws-form { display: grid; gap: 16px; min-width: 0; }
.ws-field { display: grid; gap: 6px; }
.ws-field__head { display: flex; justify-content: space-between; align-items: baseline; }
.ws-label { font-size: var(--fs-meta); color: var(--c-text); }
.ws-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--c-text-faint); }
.ws-count.is-good { color: var(--c-text-strong); }
.ws-input { width: 100%; height: 44px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--c-text-strong); background: var(--c-canvas); border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.ws-input::placeholder { color: var(--c-text-faint); }
.ws-input:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.ws-input--year { width: 110px; font-variant-numeric: tabular-nums; }
.ws-textarea { height: auto; padding: 12px; line-height: 1.55; resize: vertical; }
.ws-textarea--mono { font-family: var(--font-mono); font-size: 13px; }
.ws-drop { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: var(--r-sm); border: 1.5px dashed var(--c-line-strong); background: var(--c-canvas); cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); }
.ws-drop:hover, .ws-drop.is-over { border-color: var(--c-text-faint); background: var(--c-surface); }
.ws-drop:focus-within { border-color: var(--c-accent); border-style: solid; }
.ws-drop.is-busy { opacity: 0.6; pointer-events: none; }
.ws-drop__logo { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-text-faint); }
.ws-drop__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; }
.ws-drop__text { display: grid; gap: 4px; } .ws-drop__text strong { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.ws-facts { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: end; }
.ws-segment { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: var(--r-sm); background: var(--c-canvas); border: 1px solid var(--c-line-strong); outline: none; }
.ws-segment__item { height: 36px; padding: 0 12px; border-radius: 7px; color: var(--c-text); font-variant-numeric: tabular-nums; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.ws-segment__item:hover { color: var(--c-text-strong); }
.ws-segment__item[aria-checked="true"] { background: var(--c-text-strong); color: var(--c-canvas); }
.ws-services { display: grid; gap: 10px; outline: none; }
.ws-services__group { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: start; }
.ws-services__group .ws-fine { padding-top: 7px; }
.ws-services .chip { height: 30px; }
.ws-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px; border-radius: var(--r-sm); background: var(--c-canvas); border: 1px solid var(--c-line-strong); cursor: text; }
.ws-tags:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.ws-tags > span { display: contents; }
.ws-tag { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 10px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-text-strong); }
.ws-tag button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--c-text-faint); }
.ws-tag button:hover { color: var(--c-text-strong); background: var(--c-line-strong); }
.ws-tags__input { flex: 1; min-width: 160px; height: 30px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--c-text-strong); outline: none; }
.ws-tags__input::placeholder { color: var(--c-text-faint); }
.ws-links { display: grid; gap: 8px; }
.ws-links__empty { outline: none; }
.ws-linkrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ws-linkrow__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-meta); color: var(--c-text-strong); }
.ws-preview { position: sticky; top: 16px; display: grid; gap: 10px; }
.ws-preview__bar { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-sm) var(--r-sm) 0 0; border: 1px solid var(--c-line); border-bottom: 0; background: var(--c-surface); overflow: hidden; white-space: nowrap; }
.ws-preview__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c-line-strong); box-shadow: 12px 0 0 var(--c-line-strong), 24px 0 0 var(--c-line-strong); margin-right: 24px; }
.ws-preview__page { display: grid; gap: 14px; margin-top: -10px; padding: 18px; border: 1px solid var(--c-line); border-radius: 0 0 var(--r-md) var(--r-md); background: var(--c-canvas); max-height: calc(100vh - 140px); overflow: auto; }
.ws-preview__head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.ws-preview__logo { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-sm); background: #fff; color: #111; font-weight: var(--fw-strong); }
.ws-preview__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ws-preview__name { margin: 2px 0 0; font-size: var(--fs-title); line-height: var(--lh-title); color: var(--c-text-strong); }
.ws-preview .verified { margin-left: 4px; font-size: 11px; }
.ws-preview .owner { margin: 0; padding: 16px; }
.ws-preview .owner__bio { font-size: 14px; }
.ws-preview__empty { margin: 0; padding: 16px; border-radius: var(--r-sm); border: 1px dashed var(--c-line-strong); text-align: center; }
.ws-savebar { position: fixed; left: 50%; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-line-strong); box-shadow: var(--shadow-float); transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base) var(--ease-standard); }
.ws-savebar.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ws-savebar__text { margin-right: 8px; color: var(--c-text-strong); white-space: nowrap; }
.ws-savebar__text::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--c-accent); vertical-align: 1px; }
.ws-savebar .btn { height: 36px; border-radius: var(--r-pill); min-width: 80px; }

/* Projects */
.ws-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ws-work { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-shell); transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); }
.ws-work:hover { border-color: var(--c-line-strong); }
.ws-work__cover { position: relative; display: block; aspect-ratio: 4 / 3; margin: 6px 6px 0; overflow: hidden; border-radius: 14px; background: var(--c-surface); }
.ws-work__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-fade) var(--ease-out); }
.ws-work:hover .ws-work__cover img { transform: scale(1.03); }
.ws-work__cover .ws-pill { position: absolute; left: 8px; top: 8px; background: color-mix(in srgb, var(--c-canvas) 78%, transparent); backdrop-filter: blur(8px); color: var(--c-text-strong); }
.ws-work__body { display: grid; gap: 4px; align-content: start; padding: 12px 14px 4px; }
.ws-work__title { color: var(--c-text-strong); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-work__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.ws-work__action { margin: 8px 14px 14px; height: 34px; }
.ws-empty { display: grid; justify-items: center; gap: 12px; padding: 48px 20px; border-radius: var(--r-md); border: 1px dashed var(--c-line-strong); text-align: center; }
.ws-empty p { margin: 0; color: var(--c-text); }

/* Dialogs and toast */
.ws-dialog { width: min(560px, 100% - 28px); max-height: min(86vh, 760px); margin: auto; padding: 0; border: 0; background: none; color: var(--c-text); overflow: visible; }
.ws-dialog::backdrop { background: var(--c-scrim); backdrop-filter: blur(6px); animation: search-fade var(--dur-slow) var(--ease-standard); }
.ws-dialog[open] .ws-dialog__panel { animation: search-in var(--dur-slow) var(--ease-out); }
.ws-dialog__panel { position: relative; display: grid; gap: 12px; max-height: min(86vh, 760px); overflow: auto; padding: 24px; border-radius: var(--r-md); border: 1px solid var(--c-line-strong); background: var(--c-shell); box-shadow: var(--shadow-float); }
.ws-dialog__close { position: absolute; top: 14px; right: 14px; }
.ws-dialog__title { margin: 0; padding-right: 32px; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-strong); color: var(--c-text-strong); }
.ws-dialog__form { display: grid; gap: 12px; margin-top: 4px; }
.ws-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ws-dialog__actions .btn { height: 40px; min-width: 96px; }
.ws-dialog__work { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding-right: 32px; }
.ws-dialog__work img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
.ws-dialog__work p { margin: 0; }
.ws-parsed { padding: 12px 14px; border-radius: var(--r-sm); background: var(--c-canvas); border: 1px solid var(--c-line); max-height: 220px; overflow: auto; }
.ws-parsed__sum { margin: 0 0 8px; font-size: 12px; color: var(--c-text-faint); }
.ws-parsed dl { margin: 0; display: grid; gap: 4px; }
.ws-parsed dl div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.ws-parsed dt { color: var(--c-text-faint); } .ws-parsed dd { margin: 0; color: var(--c-text-strong); }
.ws-toast { position: fixed; left: 24px; bottom: 24px; z-index: 40; display: flex; align-items: center; gap: 10px; max-width: min(420px, 100% - 48px); padding: 12px 16px; border-radius: var(--r-sm); background: var(--c-text-strong); color: var(--c-canvas); box-shadow: var(--shadow-float); transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base) var(--ease-standard); }
.ws-toast.is-on { transform: none; opacity: 1; }
.ws-toast svg { flex: none; }

@media (max-width: 1099.98px) { .ws-edit { grid-template-columns: minmax(0, 1fr); } .ws-preview { position: static; } .ws-preview__page { max-height: none; } }
@media (max-width: 899.98px) {
  .ws-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ws-nav { position: sticky; top: 0; z-index: 5; display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 8px 24px; background: color-mix(in srgb, var(--c-canvas) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-line); }
  .ws-nav__item { flex: none; height: 36px; }
  .ws-nav__remove { display: none; }
  .ws-hero__bar { grid-template-columns: auto minmax(0, 1fr); }
  .ws-stats { grid-column: 1 / -1; } .ws-hero__view { grid-column: 1 / -1; justify-self: start; }
  .ws-overview { grid-template-columns: minmax(0, 1fr); } .ws-card--progress { grid-row: auto; }
}
@media (max-width: 559.98px) {
  .auth--app .auth-side { padding-inline: 14px; }
  .ws-nav { margin: 0 -14px; padding-inline: 14px; }
  .ws-hero__covers { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 130px; }
  .ws-hero__bar { padding: 0 16px 18px; gap: 14px; margin-top: -36px; }
  .ws-logo { width: 72px; height: 72px; }
  .ws-hero__name { font-size: 22px; line-height: 28px; }
  .ws-account__email { display: none; }
  .ws-account__button { padding: 0 4px; }
  .ws-services__group { grid-template-columns: minmax(0, 1fr); } .ws-services__group .ws-fine { padding-top: 0; }
  .ws-linkrow { grid-template-columns: minmax(0, 1fr) auto; } .ws-linkrow__label { grid-column: 1 / -1; }
  .ws-activity li { grid-template-columns: minmax(0, 1fr) auto; }
  .ws-savebar { left: 14px; right: 14px; transform: translateY(140%); justify-content: flex-end; } .ws-savebar.is-on { transform: none; } .ws-savebar__text { margin-right: auto; }
  .ws-toast { left: 14px; right: 14px; bottom: 84px; max-width: none; }
  .ws-parsed dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* The wall: three columns of covers drifting at different speeds behind a veil. */
.auth-wall { position: relative; overflow: hidden; background: var(--c-canvas); border-left: 1px solid var(--c-line); }
.auth-wall__cols { position: absolute; inset: -10% -6%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; transform: rotate(-6deg); }
.auth-wall__col { display: grid; gap: 10px; align-content: start; animation: auth-drift 90s linear infinite; }
.auth-wall__col--1 { animation-duration: 120s; animation-direction: reverse; }
.auth-wall__col--2 { animation-duration: 100s; }
.auth-wall__col img { display: block; width: 100%; height: auto; border-radius: var(--r-md); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
@keyframes auth-drift { to { transform: translateY(-50%); } }
.auth-wall__veil { position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-canvas) 0%, color-mix(in srgb, var(--c-canvas) 35%, transparent) 22%, transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--c-canvas) 60%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--c-canvas) 70%, transparent)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .auth-wall__col { animation: none; } .auth-card--in > *, .is-wrong .otp__boxes { animation: none; } }
@media (max-width: 1023.98px) {
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-wall { order: -1; height: 168px; border-left: 0; border-bottom: 1px solid var(--c-line); }
  .auth-wall__cols { inset: -40% -10%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auth-wall__veil { background: linear-gradient(180deg, var(--c-canvas) 0%, color-mix(in srgb, var(--c-canvas) 55%, transparent) 34%, transparent 55%, var(--c-canvas) 100%); }
  .auth-side { padding-top: 0; gap: 24px; }
  .auth-top { position: absolute; top: 14px; left: 20px; right: 20px; z-index: 1; }
  .auth-back { padding: 5px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-canvas) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--c-text-strong); }
  .auth-main { align-content: start; padding-top: 8px; }
  .auth-card { width: 100%; max-width: 440px; }
}
@media (max-width: 479.98px) { .auth-studio__head { grid-template-columns: auto 1fr; } .auth-studio__view { grid-column: 1 / -1; } .otp__box { height: 52px; } }

/* === facets & generated pages === */
/* Format, style and sector rows over a feed (scripts/facet-pages.js). */
.facets { display: grid; gap: 8px; margin-bottom: 16px; }
.facets__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; }
.facets__label { color: var(--c-text-faint); }
.facets__shown { margin: -4px 0 12px; }
@media (max-width: 809.98px) { .facets__row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
/* A project's format, styles and client, and a profile's titles, link to their pages; underlined like the answer line's names. */
.project-facts dd a, .project-kicker a, .profile h1 + p a { text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; transition: color var(--dur-base) var(--ease-standard), text-decoration-color var(--dur-base) var(--ease-standard); }
.project-facts dd a:hover, .project-kicker a:hover, .profile h1 + p a:hover { color: var(--c-text-strong); text-decoration-color: currentColor; }
/* A best-of list: each project's card beside its place, studio, client and who made it. */
.best-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.best-item { display: grid; grid-template-columns: var(--card-w) minmax(0, 1fr); gap: 40px; align-items: center; }
.best-item__text { display: grid; gap: 12px; align-content: center; justify-items: start; max-width: 64ch; }
.best-item__rank { margin: 0; font-size: 40px; line-height: 1; letter-spacing: -0.04em; color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.best-item__title { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-regular); color: var(--c-text-strong); text-wrap: balance; }
.best-item__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.best-item__facts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.best-item__facts div { display: flex; gap: 8px; }
.best-item__facts dt { color: var(--c-text-faint); }
.best-item__facts dd { margin: 0; color: var(--c-text-strong); }
.best-item__facts a { text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; }
.best-item__facts a:hover { text-decoration-color: currentColor; }
.best-item .project-answer { margin: 0; }
.best-item__source { color: var(--c-text-faint); transition: color var(--dur-base) var(--ease-standard); }
.best-item__source:hover { color: var(--c-text-strong); }
.best-more { margin: 24px 0 0; }
/* On phones the place comes first, then the card, then the rest. */
@media (max-width: 809.98px) { .best-list { gap: 48px; } .best-item { grid-template-columns: minmax(0, 1fr); gap: 12px; } .best-item__text { display: contents; } .best-item__rank { order: -1; } }

/* === network (scripts/network-view.js, scripts/connect.js) === */
.net-section { margin-top: 8px; }
.tile-blank { display: grid; place-items: center; width: 100%; height: 100%; background: var(--c-surface-2); color: var(--c-text-faint); font-weight: var(--fw-strong); }
.faces { display: inline-flex; align-items: center; }
.faces .avatar { width: 34px; height: 34px; font-size: 11px; box-shadow: 0 0 0 2px var(--c-shell); }
.faces > * + * { margin-left: -10px; }
.faces__more { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface-2); color: var(--c-text); font-size: 11px; box-shadow: 0 0 0 2px var(--c-shell); }

/* Often works with / Regular team: covers of the shared work, the person, the count */
.collabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; }
.collab { position: relative; display: grid; grid-template-rows: auto auto; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-shell); transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); }
.collab:hover { border-color: var(--c-line-strong); transform: translateY(-2px); }
.collab__covers { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 128px; padding: 6px 6px 0; }
.collab__cover { overflow: hidden; border-radius: 10px; background: var(--c-surface); }
.collab__cover:first-child { grid-row: span 2; border-radius: 14px; }
.collab__cover picture, .collab__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-fade) var(--ease-out); }
.collab:hover .collab__cover img { transform: scale(1.04); }
.collab__covers { position: relative; }
.collab__count { position: absolute; right: 12px; top: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-canvas) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; color: var(--c-text); white-space: nowrap; }
.collab__count b { color: var(--c-text-strong); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.collab__who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px 14px; }
.collab__who .avatar { width: 38px; height: 38px; font-size: 12px; margin-top: -32px; box-shadow: 0 0 0 3px var(--c-shell); }
.collab__name { min-width: 0; display: grid; gap: 1px; }
.collab__name b { color: var(--c-text-strong); font-weight: var(--fw-regular); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab__name span { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Crews: a cover mosaic beside the people and their projects */
.crews { display: grid; gap: 14px; }
.crew { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-shell); }
.crew__mosaic { position: relative; display: grid; gap: 3px; min-height: 240px; padding: 6px; }
.crew__mosaic--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.crew__mosaic--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .crew__mosaic--3 > span:first-child { grid-row: span 2; }
.crew__mosaic--2 { grid-template-columns: 1fr 1fr; }
.crew__mosaic > span:not(.crew__badge) { overflow: hidden; border-radius: 14px; background: var(--c-surface); }
.crew__mosaic picture, .crew__mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crew__badge { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-canvas) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--c-text-strong); font-size: 12px; line-height: 15px; }
.crew__body { display: grid; gap: 16px; align-content: start; padding: 20px 22px; min-width: 0; }
.crew__head { display: flex; align-items: center; gap: 14px; }
.crew__title { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); color: var(--c-text-strong); }
.crew__title a { text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 4px; }
.crew__title a:hover { text-decoration-color: currentColor; }
.crew__sub { margin: 2px 0 0; font-size: var(--fs-meta); color: var(--c-text-faint); }
.crew__people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crew__people a { display: inline-flex; align-items: baseline; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-line); line-height: 28px; transition: border-color var(--dur-base) var(--ease-standard); }
.crew__people a:hover { border-color: var(--c-line-strong); }
.crew__people b { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.crew__people a span { font-size: 12px; color: var(--c-text-faint); }
.crew__people .is-self a { background: var(--c-text-strong); border-color: transparent; } .crew__people .is-self b { color: var(--c-canvas); } .crew__people .is-self a span { color: color-mix(in srgb, var(--c-canvas) 70%, transparent); }
.crew__works { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-meta); }
.crew__works a { color: var(--c-text); } .crew__works a:hover { color: var(--c-text-strong); text-decoration: underline; text-underline-offset: 3px; }
.crew__more { color: var(--c-text-faint); }

/* How are you connected? */
.connect { margin-top: 32px; padding: 24px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: radial-gradient(120% 140% at 100% 0%, var(--c-surface) 0%, var(--c-shell) 55%); }
.connect__intro h2 { margin: 0 0 4px; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.connect__intro p { margin: 0 0 16px; }
.connect__form { display: flex; gap: 8px; max-width: 640px; }
.connect__field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 6px; border-radius: var(--r-sm); background: var(--c-canvas); border: 1px solid var(--c-line-strong); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.connect__field:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.connect__field > .avatar { width: 34px; height: 34px; flex: none; font-size: 11px; }
.connect__arrow { color: var(--c-text-faint); }
.connect__input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 15px; color: var(--c-text-strong); outline: none; }
.connect__input::placeholder { color: var(--c-text-faint); }
.connect__form .btn { height: 48px; padding: 0 18px; }
.connect__list { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 10; list-style: none; margin: 0; padding: 6px; border-radius: var(--r-sm); background: var(--c-shell); border: 1px solid var(--c-line-strong); box-shadow: var(--shadow-float); max-height: 320px; overflow: auto; }
.connect__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: var(--r-xs); cursor: pointer; }
.connect__list li[aria-selected="true"], .connect__list li:hover { background: var(--c-surface-2); }
.connect__list b { display: block; color: var(--c-text-strong); font-weight: var(--fw-regular); }
.connect__list li span span { font-size: 12px; color: var(--c-text-faint); }
.connect__try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.connect__try .chip { height: 30px; }
.connect__result { margin-top: 20px; }
.connect__result:empty { display: none; }
.connect__result > p { margin: 0 0 14px; }
.connect__summary b { color: var(--c-text-strong); font-weight: var(--fw-regular); font-size: var(--fs-title); }
.path__face { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface-2); color: var(--c-text-strong); font-size: 12px; font-weight: var(--fw-strong); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.path { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 14px; }
.path > li { position: relative; display: flex; align-items: center; }
.path > li + li::before { content: ""; width: 22px; height: 2px; margin: 0 6px; background: var(--c-line-strong); border-radius: 2px; }
.path__person a { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: var(--c-canvas); border: 1px solid var(--c-line); }
.path__person a:hover { border-color: var(--c-line-strong); }
.path__person .path__face { grid-row: span 2; }
.path__person b { color: var(--c-text-strong); font-weight: var(--fw-regular); white-space: nowrap; }
.path__person a > span:last-child { font-size: 12px; color: var(--c-text-faint); white-space: nowrap; }
.path__person.is-end .path__face { background: var(--c-text-strong); color: var(--c-canvas); }
.path__work a { display: inline-flex; align-items: center; gap: 10px; max-width: 220px; padding: 4px 12px 4px 4px; border-radius: 14px; background: var(--c-surface); }
.path__work a:hover .path__title { color: var(--c-text-strong); }
.path__cover { width: 44px; height: 44px; flex: none; overflow: hidden; border-radius: 10px; background: var(--c-surface-2); }
.path__cover img { width: 100%; height: 100%; object-fit: cover; }
.path__title { font-size: 12px; line-height: 15px; color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.path.is-in > li { animation: auth-in var(--dur-slow) var(--ease-out) both; }
.path.is-in > li:nth-child(2) { animation-delay: 60ms; } .path.is-in > li:nth-child(3) { animation-delay: 120ms; } .path.is-in > li:nth-child(4) { animation-delay: 180ms; } .path.is-in > li:nth-child(5) { animation-delay: 240ms; } .path.is-in > li:nth-child(n+6) { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) { .path.is-in > li { animation: none; } .collab:hover { transform: none; } }
@media (max-width: 809.98px) {
  .crew { grid-template-columns: minmax(0, 1fr); } .crew__mosaic { min-height: 200px; }
  .connect { padding: 18px; } .connect__form { flex-direction: column; }
  .path { flex-direction: column; align-items: flex-start; }
  .path > li + li::before { width: 2px; height: 14px; margin: 0 0 0 26px; position: absolute; top: -14px; }
  .path > li { padding-left: 0; }
}

/* === discover (scripts/discover-view.js) === */
.dnav { margin: -8px 0 8px; }
.dsection { margin-top: 40px; }
.dtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dtile { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-shell); padding: 6px; transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); }
.dtile:hover { border-color: var(--c-line-strong); transform: translateY(-2px); }
.dtile__mosaic { display: grid; gap: 3px; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--c-surface); }
.dtile__mosaic--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.dtile__mosaic--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .dtile__mosaic--3 > span:first-child { grid-row: span 2; }
.dtile__mosaic--2 { grid-template-columns: 1fr 1fr; }
.dtile__mosaic > span { overflow: hidden; border-radius: 6px; background: var(--c-surface-2); }
.dtile__mosaic picture, .dtile__mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-fade) var(--ease-out); }
.dtile:hover .dtile__mosaic img { transform: scale(1.04); }
.dtile__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 6px 4px; }
.dtile__label b { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.dtile__label span { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--c-text-faint); }
.swatch { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.25); vertical-align: -1px; margin-right: 6px; }
.dintro .swatch { width: 18px; height: 18px; vertical-align: 0; }
.dcolours { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dcolour { display: block; padding: 6px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-shell); transition: border-color var(--dur-base) var(--ease-standard); }
.dcolour:hover { border-color: var(--c-line-strong); }
.dcolour .dtile__mosaic { aspect-ratio: 3 / 2; }
.dcolour__label { display: flex; align-items: center; gap: 0; padding: 10px 6px 4px; }
.dcolour__label b { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.dcolour__label span:last-child { margin-left: auto; font-size: 12px; color: var(--c-text-faint); }
.dcrumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 -8px; color: var(--c-text-faint); }
.dcrumbs a { color: var(--c-text); } .dcrumbs a:hover { color: var(--c-text-strong); }
.dwith { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin: -4px 0 20px; }
.dfoot { margin-top: 40px; }
.chip .swatch { margin-right: 6px; }
.dlook { margin-top: 32px; }
.dlook__rows { margin: 0; display: grid; gap: 10px; }
.dlook__rows > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.dlook__rows dd { margin: 0; }
.dsimilar { margin-top: 32px; }
@media (max-width: 809.98px) { .dlook__rows > div, .dwith { grid-template-columns: minmax(0, 1fr); gap: 6px; } .dtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dtile:hover { transform: none; } }

/* === calendar (scripts/calendar-view.js) === */
.cal-section { margin-top: 36px; }
.cal-deadlines { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cal-deadline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-shell); transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-spring); }
.cal-deadline:hover { border-color: var(--c-line-strong); transform: translateY(-2px); }
.cal-date { width: 56px; display: grid; justify-items: center; padding: 8px 0 6px; border-radius: var(--r-sm); background: var(--c-surface-2); }
.cal-date b { font-size: 24px; line-height: 1; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; color: var(--c-text-strong); }
.cal-date span { margin-top: 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-faint); }
.cal-deadline__body { min-width: 0; display: grid; gap: 4px; }
.cal-deadline__body b { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.cal-crafts { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-crafts span { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--c-surface); border: 1px solid var(--c-line); font-size: 11px; color: var(--c-text); }
.cal-month { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--c-line); }
.cal-month__name { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.cal-month__name span { color: var(--c-text-faint); font-size: var(--fs-body); }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cal-event { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-shell); border: 1px solid transparent; }
.cal-event.is-now { border-color: var(--c-line-strong); }
.cal-event__when { display: grid; gap: 4px; font-variant-numeric: tabular-nums; color: var(--c-text-strong); }
.cal-live { justify-self: start; height: 20px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent); font-size: 11px; }
.cal-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cal-event__what { min-width: 0; display: grid; gap: 2px; }
.cal-event__what b { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.cal-event__what a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cal-later { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 20px; }
.cal-later li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--c-line); }
.cal-later b { color: var(--c-text-strong); font-weight: var(--fw-regular); }
.cal-foot { margin-top: 32px; }
@media (max-width: 809.98px) { .cal-month { grid-template-columns: minmax(0, 1fr); gap: 8px; } .cal-event { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Guides (scripts/guides.mjs, drawn by scripts/facet-pages.js): a standfirst, the actions, contents
   beside the text, stat tiles and embedded projects with their credit lists. Built from the tokens. */
.guide { padding: 56px 0 80px; }
.guide__head { max-width: 760px; }
.guide__head h1 { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-regular); color: var(--c-text-strong); text-wrap: balance; }
.guide__head h1 span { color: var(--c-text-faint); }
.guide__head .project-kicker a { color: inherit; text-decoration: none; }
.guide__head .project-kicker a:hover { color: var(--c-text-strong); }
.guide__meta { margin: 12px 0 0; color: var(--c-text-faint); font-size: var(--fs-meta); line-height: var(--lh-meta); font-variant-numeric: tabular-nums; }
.guide__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.guide__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.guide__toc { padding: 16px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.guide__toc p { margin: 0 0 10px; color: var(--c-text-faint); font-size: var(--fs-meta); }
.guide__toc ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.guide__toc li { counter-increment: toc; display: flex; gap: 10px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.guide__toc li::before { content: counter(toc, decimal-leading-zero); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.guide__toc a { color: var(--c-text); text-decoration: none; }
.guide__toc a:hover { color: var(--c-text-strong); }
@media (min-width: 1100px) {
  .guide__layout { grid-template-columns: 220px minmax(0, 680px); gap: 64px; }
  .guide__toc { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; padding: 0; background: none; border: 0; }
}
.guide__body h2 { margin: 48px 0 12px; font-size: var(--fs-title); line-height: var(--lh-title); color: var(--c-text-strong); scroll-margin-top: calc(var(--nav-h) + 16px); }
.guide__body h2:first-child { margin-top: 0; }
.guide__body h3 { margin: 28px 0 8px; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--c-text-strong); }
.guide__body pre { margin: 0 0 16px; padding: 16px; overflow-x: auto; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-sm); font: 12.5px/1.6 var(--font-mono); color: var(--c-text-strong); }
.guide__body code { font-family: var(--font-mono); font-size: 0.92em; color: var(--c-text-strong); }
.guide-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 4px 0 20px; }
.guide-stat { display: grid; align-content: start; gap: 6px; padding: 16px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.guide-stat__value { font-size: var(--fs-title); line-height: var(--lh-title); color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
.guide-stat__label { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-faint); }
.guide-work { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 20px; margin: 8px 0 24px; padding: 10px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.guide-work__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--c-surface); }
.guide-work figcaption { display: grid; align-content: start; gap: 4px; padding: 6px 6px 6px 0; }
.prose .guide-work__title { color: var(--c-text-strong); text-decoration: none; }
.prose .guide-work__title:hover { text-decoration: underline; }
.guide-work__by { margin: 0 0 8px !important; color: var(--c-text-faint) !important; font-size: var(--fs-meta); line-height: var(--lh-meta) !important; }
.guide-work__credits { display: grid; margin: 0; padding: 0; list-style: none; }
.prose .guide-work__credits li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.guide-work__credits span { color: var(--c-text-faint); }
.prose .guide-work__credits a { text-decoration: none; text-align: right; }
.guide-work__more { margin-top: 8px; font-size: var(--fs-meta); }
.guide__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; max-width: 964px; margin-top: 56px; padding: 24px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.guide__end-title { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); color: var(--c-text-strong); }
.guide__end .guide__actions { margin-top: 0; }
@media (min-width: 1100px) { .guide__end { margin-left: 284px; max-width: 680px; } }
@media (max-width: 640px) { .guide-stats, .guide-work { grid-template-columns: minmax(0, 1fr); } }
.guide__body pre code { padding: 0; background: none; border: 0; font-size: inherit; color: inherit; }
.guide__body #checklist + ul { display: grid; gap: 4px; padding: 0; list-style: none; }
.guide__body #checklist + ul li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-sm); line-height: var(--lh-body); }
.guide__body #checklist + ul li::before { content: ''; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-xs); }

/* Colour palettes (scripts/palette-pages.mjs, drawn by scripts/facet-pages.js): each cover's colours as
   bars sized by their share of the cover, hex codes that copy on click, and the work they came from. */
.palette-groups { margin: 0 0 16px; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px; }
.palette { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; padding: 10px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.palette:hover { border-color: var(--c-line-strong); }
.palette__main { display: contents; }
.palette__swatches { grid-column: 1 / -1; grid-row: 1; display: flex; height: 168px; overflow: hidden; border-radius: var(--r-sm); }
.palette__swatch { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 12px; border: 0; background: var(--swatch); color: rgb(255 255 255 / 0.92); cursor: copy; transition: flex-grow var(--dur-base) var(--ease-standard); }
.palette__swatch--light { color: rgb(0 0 0 / 0.78); }
.palette__swatch span { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 11px/1 var(--font-mono); letter-spacing: 0.04em; white-space: nowrap; }
.palette__swatch:hover, .palette__swatch:focus-visible { flex-grow: 4 !important; }
.palette__swatch[data-copied] span::after { content: " copied"; }
.palette__cover { grid-column: 1; grid-row: 2; }
.palette__cover img { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-xs); background: var(--c-surface); }
.palette__foot { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.palette__by { margin: 0; min-width: 0; overflow: hidden; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-faint); white-space: nowrap; text-overflow: ellipsis; }
.palette__by a { color: var(--c-text-strong); text-decoration: none; }
.palette__by a:hover { text-decoration: underline; text-decoration-color: var(--c-line-strong); }
.palette__css { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: none; color: var(--c-text); cursor: copy; }
.palette__css:hover { color: var(--c-text-strong); border-color: var(--c-line-strong); }
.palette__css[data-copied] { color: var(--c-accent); border-color: var(--c-accent); }
@media (max-width: 400px) { .palette-grid { grid-template-columns: minmax(0, 1fr); } }
.palette__swatch--match { box-shadow: inset 0 0 0 2px var(--c-accent); }
.palette-hero { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: end; gap: 20px; margin: 0 0 20px; padding: 10px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.palette-hero__swatch { height: 200px; display: flex; align-items: flex-end; padding: 16px; border: 0; border-radius: var(--r-sm); background: var(--swatch); color: rgb(255 255 255 / 0.92); font: 500 13px/1 var(--font-mono); cursor: copy; }
.palette-hero__swatch.palette__swatch--light { color: rgb(0 0 0 / 0.78); }
.palette-hero__swatch[data-copied] span::after { content: " copied"; }
.palette-hero__text { padding: 0 10px 10px 0; }
.palette-hero__text p { margin: 0 0 6px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--c-text-faint); }
.palette-hero__text a { color: var(--c-text); }
.palette-hero__name { font-size: var(--fs-title) !important; line-height: var(--lh-title) !important; color: var(--c-text-strong) !important; }
@media (max-width: 640px) { .palette-hero { grid-template-columns: minmax(0, 1fr); } }
.palette-nav { display: grid; gap: 8px; margin: 0 0 16px; }
.palette-nav .palette-groups { margin: 0; }
.palette-with { margin: 0 0 16px; }
.palette-intro-link, .place-intro a.palette-intro-link { color: var(--c-text-strong); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; }
@media (max-width: 640px) {
  /* One scrolling row each on a phone, so the palettes start above the fold. */
  .palette-nav .palette-groups, .palette-with .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 24px; mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .palette-nav .palette-groups li, .palette-with .chip { flex: none; }
}
/* Every Colour of the Year: one card per colour, its swatch copies the hex code. */
.palette-years { margin-top: 56px; scroll-margin-top: calc(var(--nav-h, 60px) + 24px); }
.palette-years__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 4px; }
.palette-year { display: grid; grid-template-rows: 120px auto; gap: 10px; padding: 8px; background: var(--c-shell); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.palette-year--current { border-color: var(--c-line-strong); }
.palette-year__swatch { display: flex; align-items: flex-end; padding: 10px; border: 0; border-radius: var(--r-sm); background: var(--swatch); color: rgb(255 255 255 / 0.92); font: 500 11px/1 var(--font-mono); letter-spacing: 0.04em; cursor: copy; }
.palette-year__swatch.palette__swatch--light { color: rgb(0 0 0 / 0.78); }
.palette-year__swatch[data-copied] span::after { content: " copied"; }
.palette-year__text { padding: 0 4px 4px; min-width: 0; }
.palette-year__text p { margin: 0 0 2px; }
.palette-year__name { color: var(--c-text-strong); }
.palette-year__name b { margin-right: 6px; font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; color: var(--c-text-faint); }
.palette-year__works { display: flex; align-items: center; gap: 4px; margin-top: 8px !important; }
.palette-year__works img { display: block; width: 28px; height: 28px; object-fit: cover; border-radius: var(--r-xs); background: var(--c-surface); }
.palette-year__works span { margin-left: 4px; }
.palette-years__note { max-width: 720px; margin: 14px 0 0; }
.palette-years__note a { color: var(--c-text); }
/* Colour palette from an image (scripts/palette-tool.js). */
.palette-tool { display: grid; gap: 12px; margin: 0 0 32px; }
.palette-tool__drop { position: relative; display: grid; place-items: center; align-content: center; gap: 6px; min-height: 200px; padding: 24px; text-align: center; background: var(--c-shell); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard); }
.palette-tool__drop:hover, .palette-tool__drop[data-over], .palette-tool__drop:focus-within { border-color: var(--c-accent); }
.palette-tool__drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.palette-tool__cta { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--c-text-strong); color: var(--c-canvas); }
.palette-tool__status { margin: 0; min-height: 1.4em; }
.palette-tool__result { display: grid; gap: 16px; }
.palette-tool__result h2 { margin: 16px 0 0; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.palette-grid--one { grid-template-columns: minmax(0, 640px); }
.palette-tool__actions { display: flex; gap: 6px; flex: none; }
/* Discover's colour pages and project pages link to the palettes. */
.dintro__more { margin: 10px 0 0; }
.dintro__more a { color: var(--c-text); text-decoration: none; }
.dintro__more a:hover { color: var(--c-text-strong); }
.chip.dhex { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }

/* === studio facts from the studio's own site (scripts/studio-view.js) === */
.profile .profile__summary { max-width: 62ch; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--c-text); text-wrap: pretty; }
.studio-facts { display: grid; gap: 16px; max-width: 760px; margin: 0 0 8px; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-shell); }
.owner + .studio-facts { margin-top: 12px; }
.studio-facts__list { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; }
.studio-facts__list div { display: grid; gap: 2px; }
.studio-facts__list dd { margin: 0; color: var(--c-text-strong); }
.studio-facts__row { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: baseline; }
.studio-facts__row p { margin: 0; color: var(--c-text-strong); line-height: 1.55; text-wrap: pretty; }
.studio-facts__awards { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--c-text-strong); }
.studio-facts__sources { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin: 0; }
@media (max-width: 640px) { .studio-facts__row { grid-template-columns: 1fr; gap: 6px; } }