/* Countless Lab design system.
   One file, shared byte for byte by countlesslab.com (site/assets/css/cl-system.css) and the Framework app
   (src/styles/cl-system.css): the tokens, the floating top bar, the footer, buttons, chips, fields, glass, the
   aurora, motion, and the parts every page is built from (the opening of a home page, the head of an inner
   page, the head of a section, the window of glass). Each site lays its own pages out on top of it and declares
   the fonts (the paths differ). There is no logo: the names are set in type.
   Plum #3A1137 and white carry the brand; orchid, lilac, rose and apricot appear only as light. One family,
   Instrument Sans, sets everything; Instrument Serif italic is for one accent word. Lengths are in rem so the
   whole page scales on very wide windows. */

/* ============ 1. Tokens ============ */
:root {
  color-scheme: light dark;

  --cl-sans: "Instrument Sans", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cl-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif KR", serif;
  --cl-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --cl-plum: #3A1137;
  --cl-plum-deep: oklch(19% 0.075 331);

  /* type: one scale for both sites */
  --cl-fs-display: clamp(3.5rem, 11vw, 8.5rem);                 /* a home page's few words */
  --cl-fs-display-2: clamp(2.625rem, 6.4vw, 5.5rem);            /* a home page's sentence */
  --cl-fs-title: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);        /* the title of an inner page */
  --cl-fs-part: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);          /* the title of a part of a home page */
  --cl-fs-section: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);   /* a heading inside a page */
  --cl-fs-lead: clamp(1.0625rem, 0.55vw + 0.95rem, 1.3125rem);  /* the line under a title */

  /* shape */
  --cl-r-1: 0.5rem;
  --cl-r-2: 0.75rem;
  --cl-r-3: 1rem;
  --cl-r-4: 1.5rem;
  --cl-r-5: 2rem;
  --cl-r-pill: 999px;

  /* layout */
  --cl-page: 72rem;                    /* the widest a page's content runs */
  --cl-list: 54rem;                    /* the column of a page that is a list or a tool */
  --cl-col: 42rem;                     /* the column of a page that is read */
  --cl-gutter: clamp(1rem, 4vw, 2rem);
  --cl-page-top: clamp(1.5rem, 0.9rem + 2.6vw, 3rem);   /* from the top bar to the title of an inner page */
  --cl-head-h: 4.5rem;                 /* the band the floating bar occupies */
  --cl-section: clamp(4.5rem, 9vw, 8.5rem);

  /* motion */
  --cl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cl-ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --cl-fast: 160ms;
  --cl-med: 320ms;
  --cl-slow: 900ms;
}

:root, :root[data-theme="light"] {
  --cl-bg: oklch(100% 0 0);
  --cl-bg-2: oklch(98.4% 0.006 331);
  --cl-bg-3: oklch(96.2% 0.012 331);
  --cl-bg-4: oklch(93.4% 0.02 331);
  --cl-surface: oklch(100% 0 0);
  --cl-raised: oklch(100% 0 0);
  --cl-ink: oklch(26.2% 0.085 331);
  --cl-ink-2: oklch(35% 0.07 331);
  --cl-ink-3: oklch(47% 0.05 331);
  --cl-ink-4: oklch(64% 0.035 331);
  --cl-line: oklch(26.2% 0.085 331 / 0.1);
  --cl-line-2: oklch(26.2% 0.085 331 / 0.17);
  --cl-line-3: oklch(26.2% 0.085 331 / 0.4);
  --cl-edge: oklch(26.2% 0.085 331 / 0.55);
  --cl-tint: oklch(26.2% 0.085 331 / 0.05);
  --cl-tint-2: oklch(26.2% 0.085 331 / 0.09);
  --cl-fill: var(--cl-plum);
  --cl-fill-2: oklch(33% 0.105 331);
  --cl-on-fill: oklch(100% 0 0);
  --cl-accent: oklch(50% 0.21 328);
  --cl-accent-soft: oklch(50% 0.21 328 / 0.1);
  --cl-link: oklch(38% 0.16 328);
  --cl-danger: oklch(52% 0.19 25);
  --cl-glass: oklch(100% 0 0 / 0.62);
  --cl-glass-2: oklch(100% 0 0 / 0.86);
  --cl-glass-edge: oklch(100% 0 0 / 0.9);
  --cl-scrim: oklch(19% 0.075 331 / 0.42);
  --cl-au-1: oklch(74% 0.18 328);
  --cl-au-2: oklch(80% 0.12 295);
  --cl-au-3: oklch(86% 0.1 355);
  --cl-au-4: oklch(90% 0.085 65);
  --cl-au-5: oklch(86% 0.08 250);
  --cl-au-o: 0.6;
  --cl-grad: linear-gradient(100deg, oklch(26.2% 0.085 331) 0%, oklch(40% 0.17 328) 38%, oklch(60% 0.21 340) 72%, oklch(74% 0.15 40) 100%);
  --cl-shadow-1: 0 1px 2px oklch(26% 0.085 331 / 0.05), 0 2px 8px -2px oklch(26% 0.085 331 / 0.07);
  --cl-shadow-2: 0 1px 2px oklch(26% 0.085 331 / 0.05), 0 12px 32px -12px oklch(26% 0.085 331 / 0.2);
  --cl-shadow-3: 0 2px 4px oklch(26% 0.085 331 / 0.04), 0 28px 72px -28px oklch(26% 0.085 331 / 0.34);
  --cl-glow: 0 10px 28px -10px oklch(40% 0.17 328 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cl-bg: oklch(14.5% 0.035 331);
    --cl-bg-2: oklch(17.5% 0.042 331);
    --cl-bg-3: oklch(21% 0.05 331);
    --cl-bg-4: oklch(25.5% 0.055 331);
    --cl-surface: oklch(17.5% 0.042 331);
    --cl-raised: oklch(21% 0.05 331);
    --cl-ink: oklch(96.5% 0.012 331);
    --cl-ink-2: oklch(88% 0.02 331);
    --cl-ink-3: oklch(75% 0.03 331);
    --cl-ink-4: oklch(58% 0.035 331);
    --cl-line: oklch(100% 0 0 / 0.1);
    --cl-line-2: oklch(100% 0 0 / 0.17);
    --cl-line-3: oklch(100% 0 0 / 0.4);
    --cl-edge: oklch(100% 0 0 / 0.45);
    --cl-tint: oklch(100% 0 0 / 0.055);
    --cl-tint-2: oklch(100% 0 0 / 0.1);
    --cl-fill: oklch(95.5% 0.022 331);
    --cl-fill-2: oklch(100% 0 0);
    --cl-on-fill: var(--cl-plum);
    --cl-accent: oklch(80% 0.13 328);
    --cl-accent-soft: oklch(80% 0.13 328 / 0.14);
    --cl-link: oklch(84% 0.1 328);
    --cl-danger: oklch(74% 0.15 25);
    --cl-glass: oklch(23% 0.055 331 / 0.58);
    --cl-glass-2: oklch(19% 0.05 331 / 0.86);
    --cl-glass-edge: oklch(100% 0 0 / 0.1);
    --cl-scrim: oklch(8% 0.04 331 / 0.62);
    --cl-au-1: oklch(52% 0.21 328);
    --cl-au-2: oklch(44% 0.17 295);
    --cl-au-3: oklch(50% 0.17 355);
    --cl-au-4: oklch(54% 0.13 50);
    --cl-au-5: oklch(42% 0.12 265);
    --cl-au-o: 0.5;
    --cl-grad: linear-gradient(100deg, oklch(98% 0.01 331) 0%, oklch(88% 0.08 328) 40%, oklch(80% 0.13 345) 72%, oklch(86% 0.1 55) 100%);
    --cl-shadow-1: 0 1px 2px oklch(5% 0.03 331 / 0.4), 0 2px 8px -2px oklch(5% 0.03 331 / 0.4);
    --cl-shadow-2: 0 1px 2px oklch(5% 0.03 331 / 0.4), 0 12px 32px -12px oklch(5% 0.03 331 / 0.7);
    --cl-shadow-3: 0 2px 4px oklch(5% 0.03 331 / 0.4), 0 28px 72px -28px oklch(5% 0.03 331 / 0.85);
    --cl-glow: 0 10px 28px -10px oklch(70% 0.17 328 / 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --cl-bg: oklch(14.5% 0.035 331);
  --cl-bg-2: oklch(17.5% 0.042 331);
  --cl-bg-3: oklch(21% 0.05 331);
  --cl-bg-4: oklch(25.5% 0.055 331);
  --cl-surface: oklch(17.5% 0.042 331);
  --cl-raised: oklch(21% 0.05 331);
  --cl-ink: oklch(96.5% 0.012 331);
  --cl-ink-2: oklch(88% 0.02 331);
  --cl-ink-3: oklch(75% 0.03 331);
  --cl-ink-4: oklch(58% 0.035 331);
  --cl-line: oklch(100% 0 0 / 0.1);
  --cl-line-2: oklch(100% 0 0 / 0.17);
  --cl-line-3: oklch(100% 0 0 / 0.4);
  --cl-edge: oklch(100% 0 0 / 0.45);
  --cl-tint: oklch(100% 0 0 / 0.055);
  --cl-tint-2: oklch(100% 0 0 / 0.1);
  --cl-fill: oklch(95.5% 0.022 331);
  --cl-fill-2: oklch(100% 0 0);
  --cl-on-fill: var(--cl-plum);
  --cl-accent: oklch(80% 0.13 328);
  --cl-accent-soft: oklch(80% 0.13 328 / 0.14);
  --cl-link: oklch(84% 0.1 328);
  --cl-danger: oklch(74% 0.15 25);
  --cl-glass: oklch(23% 0.055 331 / 0.58);
  --cl-glass-2: oklch(19% 0.05 331 / 0.86);
  --cl-glass-edge: oklch(100% 0 0 / 0.1);
  --cl-scrim: oklch(8% 0.04 331 / 0.62);
  --cl-au-1: oklch(52% 0.21 328);
  --cl-au-2: oklch(44% 0.17 295);
  --cl-au-3: oklch(50% 0.17 355);
  --cl-au-4: oklch(54% 0.13 50);
  --cl-au-5: oklch(42% 0.12 265);
  --cl-au-o: 0.5;
  --cl-grad: linear-gradient(100deg, oklch(98% 0.01 331) 0%, oklch(88% 0.08 328) 40%, oklch(80% 0.13 345) 72%, oklch(86% 0.1 55) 100%);
  --cl-shadow-1: 0 1px 2px oklch(5% 0.03 331 / 0.4), 0 2px 8px -2px oklch(5% 0.03 331 / 0.4);
  --cl-shadow-2: 0 1px 2px oklch(5% 0.03 331 / 0.4), 0 12px 32px -12px oklch(5% 0.03 331 / 0.7);
  --cl-shadow-3: 0 2px 4px oklch(5% 0.03 331 / 0.4), 0 28px 72px -28px oklch(5% 0.03 331 / 0.85);
  --cl-glow: 0 10px 28px -10px oklch(70% 0.17 328 / 0.4);
}
:root[data-theme="light"] { color-scheme: light; }

/* A plum panel with white type, the same in either theme: the footer and the closing bands. */
.cl-night {
  --cl-bg: var(--cl-plum);
  --cl-bg-2: oklch(30% 0.09 331);
  --cl-bg-3: oklch(34% 0.09 331);
  --cl-surface: oklch(30% 0.09 331);
  --cl-raised: oklch(34% 0.09 331);
  --cl-ink: oklch(100% 0 0);
  --cl-ink-2: oklch(94% 0.02 331);
  --cl-ink-3: oklch(84% 0.045 331);
  --cl-ink-4: oklch(68% 0.06 331);
  --cl-line: oklch(100% 0 0 / 0.12);
  --cl-line-2: oklch(100% 0 0 / 0.2);
  --cl-line-3: oklch(100% 0 0 / 0.42);
  --cl-edge: oklch(100% 0 0 / 0.5);
  --cl-tint: oklch(100% 0 0 / 0.08);
  --cl-tint-2: oklch(100% 0 0 / 0.14);
  --cl-fill: oklch(100% 0 0);
  --cl-fill-2: oklch(95% 0.02 331);
  --cl-on-fill: var(--cl-plum);
  --cl-accent: oklch(86% 0.1 328);
  --cl-accent-soft: oklch(86% 0.1 328 / 0.16);
  --cl-link: oklch(90% 0.07 328);
  --cl-glass: oklch(100% 0 0 / 0.1);
  --cl-glass-2: oklch(100% 0 0 / 0.16);
  --cl-glass-edge: oklch(100% 0 0 / 0.16);
  --cl-au-1: oklch(58% 0.22 328);
  --cl-au-2: oklch(48% 0.19 295);
  --cl-au-3: oklch(62% 0.19 355);
  --cl-au-4: oklch(72% 0.14 55);
  --cl-au-5: oklch(46% 0.14 268);
  --cl-au-o: 0.55;
  --cl-grad: linear-gradient(100deg, oklch(100% 0 0) 0%, oklch(90% 0.07 328) 45%, oklch(86% 0.1 50) 100%);
  --cl-glow: 0 10px 28px -10px oklch(5% 0.03 331 / 0.6);
  background: var(--cl-plum);
  color: var(--cl-ink);
}

/* Very wide windows: the root size steps up, so the page grows instead of floating in white. */
@media (min-width: 1800px) { html { font-size: 112.5%; } }
@media (min-width: 2400px) { html { font-size: 125%; } }
@media (min-width: 3200px) { html { font-size: 137.5%; } }
@media (min-width: 4400px) { html { font-size: 150%; } }

/* ============ 2. The top bar: a floating strip of glass ============ */
.cl-head {
  position: sticky; top: 0; z-index: 100;
  height: var(--cl-head-h);
  padding: 0.5rem max(var(--cl-gutter), env(safe-area-inset-left, 0px)) 0.5rem max(var(--cl-gutter), env(safe-area-inset-right, 0px));
  font-family: var(--cl-sans);
  pointer-events: none;
  background: none;
}
.cl-head-bar {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  height: 3.5rem;
  max-width: var(--cl-page);
  margin-inline: auto;
  padding: 0 0.5rem 0 1.25rem;
  border-radius: var(--cl-r-pill);
}
/* The glass is a layer behind the bar's contents (the header itself is the stacking context), so a menu inside
   the bar can still be fixed to the window and blur the page behind it. */
.cl-head-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--cl-glass);
  -webkit-backdrop-filter: blur(1.25rem) saturate(180%);
  backdrop-filter: blur(1.25rem) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--cl-line), inset 0 1px 0 var(--cl-glass-edge), var(--cl-shadow-1);
  transition: background var(--cl-med) var(--cl-ease), box-shadow var(--cl-med) var(--cl-ease);
}
.cl-head.is-scrolled .cl-head-bar::before {
  background: var(--cl-glass-2);
  box-shadow: inset 0 0 0 1px var(--cl-line), inset 0 1px 0 var(--cl-glass-edge), var(--cl-shadow-2);
}
.cl-brand {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  margin-right: auto;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1;
  color: var(--cl-ink); text-decoration: none; white-space: nowrap;
}
.cl-brand small { font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.005em; color: var(--cl-ink-3); }
.cl-nav { display: flex; align-items: center; gap: 0.125rem; list-style: none; margin: 0; padding: 0; }
.cl-nav a {
  display: inline-flex; align-items: center;
  height: 2.25rem; padding: 0 0.875rem;
  border-radius: var(--cl-r-pill);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1;
  color: var(--cl-ink-2); text-decoration: none; white-space: nowrap;
  transition: background var(--cl-fast) var(--cl-ease), color var(--cl-fast) var(--cl-ease);
}
.cl-nav a:hover { background: var(--cl-tint); color: var(--cl-ink); }
.cl-nav a[aria-current="page"], .cl-nav a.active { background: var(--cl-tint-2); color: var(--cl-ink); }
.cl-head-end { display: flex; align-items: center; gap: 0.375rem; margin-left: auto; }
.cl-brand + .cl-nav { margin-inline: auto; }
.cl-icon-btn {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0; border: 0;
  border-radius: 50%;
  background: transparent; color: var(--cl-ink-2); cursor: pointer;
  transition: background var(--cl-fast) var(--cl-ease), color var(--cl-fast) var(--cl-ease), transform var(--cl-med) var(--cl-ease-back);
}
.cl-icon-btn:hover { background: var(--cl-tint-2); color: var(--cl-ink); }
.cl-icon-btn:active { transform: scale(0.9) rotate(-18deg); }
.cl-icon-btn svg { width: 1.125rem; height: 1.125rem; }

/* ============ 3. Buttons and chips ============ */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.25rem;
  border: 0; border-radius: var(--cl-r-pill);
  background: var(--cl-glass-2);
  box-shadow: inset 0 0 0 1px var(--cl-line-2), inset 0 1px 0 var(--cl-glass-edge), var(--cl-shadow-1);
  color: var(--cl-ink);
  font-family: var(--cl-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--cl-med) var(--cl-ease-back), box-shadow var(--cl-med) var(--cl-ease), background var(--cl-fast) var(--cl-ease), color var(--cl-fast) var(--cl-ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--cl-line-3), inset 0 1px 0 var(--cl-glass-edge), var(--cl-shadow-2); }
.btn:active { transform: translateY(0) scale(0.975); transition-duration: 80ms; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn-primary {
  background: linear-gradient(180deg, var(--cl-fill-2), var(--cl-fill));
  color: var(--cl-on-fill);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.2), inset 0 0 0 1px oklch(100% 0 0 / 0.06), 0 1px 2px oklch(19% 0.075 331 / 0.3), var(--cl-glow);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.26), inset 0 0 0 1px oklch(100% 0 0 / 0.08), 0 2px 4px oklch(19% 0.075 331 / 0.3), 0 16px 36px -12px oklch(40% 0.17 328 / 0.7); }
/* a band of light crosses a primary button on hover */
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, oklch(100% 0 0 / 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn-primary:hover::after { transform: translateX(120%); transition: transform 900ms var(--cl-ease); }
.btn-lg { min-height: 3.25rem; padding: 0 1.625rem; font-size: 1rem; }
.btn-sm { min-height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }
.btn .cl-arr { flex: none; width: 1em; height: 1em; transition: transform var(--cl-med) var(--cl-ease-back); }
.btn:hover .cl-arr { transform: translateX(0.1875rem); }

.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.375rem; padding: 0 0.875rem;
  border: 0; border-radius: var(--cl-r-pill);
  background: var(--cl-glass-2);
  box-shadow: inset 0 0 0 1px var(--cl-line-2);
  color: var(--cl-ink-2);
  font-family: var(--cl-sans); font-size: 0.875rem; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background var(--cl-fast) var(--cl-ease), box-shadow var(--cl-fast) var(--cl-ease), color var(--cl-fast) var(--cl-ease), transform var(--cl-med) var(--cl-ease-back);
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--cl-line-3); color: var(--cl-ink); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip.active, .chip.selected { background: var(--cl-fill); color: var(--cl-on-fill); box-shadow: none; }

/* A small label in a capsule, with a live dot. */
.cl-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 1.75rem; padding: 0 0.75rem;
  border-radius: var(--cl-r-pill);
  background: var(--cl-glass);
  -webkit-backdrop-filter: blur(0.75rem) saturate(160%);
  backdrop-filter: blur(0.75rem) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--cl-line), inset 0 1px 0 var(--cl-glass-edge);
  font-family: var(--cl-sans); font-size: 0.8125rem; font-weight: 500; line-height: 1; color: var(--cl-ink-2);
}
.cl-dot { flex: none; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--cl-accent); box-shadow: 0 0 0 0 var(--cl-accent); animation: cl-pulse 2.6s var(--cl-ease) infinite; }
@keyframes cl-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cl-accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.5rem transparent; } }

/* ============ 4. Glass, cards and the pointer light ============ */
.cl-glass {
  background: var(--cl-glass);
  -webkit-backdrop-filter: blur(1.25rem) saturate(170%);
  backdrop-filter: blur(1.25rem) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--cl-line), inset 0 1px 0 var(--cl-glass-edge), var(--cl-shadow-2);
}
.cl-card {
  position: relative; isolation: isolate;
  border-radius: var(--cl-r-4);
  background: var(--cl-bg-2);
  box-shadow: inset 0 0 0 1px var(--cl-line);
  transition: transform var(--cl-med) var(--cl-ease), box-shadow var(--cl-med) var(--cl-ease), background var(--cl-med) var(--cl-ease);
}
a.cl-card { display: block; color: inherit; text-decoration: none; }
a.cl-card:hover, .cl-card.is-link:hover { transform: translateY(-0.25rem); box-shadow: inset 0 0 0 1px var(--cl-line-2), var(--cl-shadow-3); background: var(--cl-bg); }
/* [data-spot]: a soft light that follows the pointer across a surface (cl-motion.js sets --px and --py). */
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(22rem circle at var(--px, 50%) var(--py, 0%), color-mix(in oklab, var(--cl-au-1) 26%, transparent), transparent 62%);
  opacity: 0; transition: opacity var(--cl-med) var(--cl-ease);
}
[data-spot]:hover::before { opacity: 1; }

/* ============ 5. The aurora: slow fields of plum light ============ */
.cl-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cl-aurora i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s, 46rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c) 0%, color-mix(in oklab, var(--c) 46%, transparent) 42%, transparent 100%);
  opacity: var(--cl-au-o);
  translate: calc(var(--mx, 0) * var(--k, 1rem)) calc(var(--my, 0) * var(--k, 1rem));
  transition: translate 1.4s var(--cl-ease);
  /* --cl-phase is set from the clock in the page's head, so the light is at the same point of its drift on the next
     page as it was on the last one and does not jump back when you move between pages. */
  animation: cl-drift var(--d, 26s) ease-in-out var(--cl-phase, 0s) infinite alternate;
  will-change: transform;
}
.cl-aurora i:nth-child(1) { --c: var(--cl-au-1); --x: -8%; --y: -55%; --s: 52rem; --d: 24s; --k: 2.25rem; }
.cl-aurora i:nth-child(2) { --c: var(--cl-au-2); --x: 48%; --y: -62%; --s: 58rem; --d: 31s; --k: -1.5rem; animation-direction: alternate-reverse; }
.cl-aurora i:nth-child(3) { --c: var(--cl-au-3); --x: 22%; --y: -18%; --s: 38rem; --d: 27s; --k: 3rem; }
.cl-aurora i:nth-child(4) { --c: var(--cl-au-4); --x: 62%; --y: -8%; --s: 30rem; --d: 34s; --k: -2.5rem; animation-direction: alternate-reverse; }
.cl-aurora i:nth-child(5) { --c: var(--cl-au-5); --x: -14%; --y: 2%; --s: 34rem; --d: 29s; --k: 1.75rem; }
@keyframes cl-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7%, 5%, 0) scale(1.12); }
  100% { transform: translate3d(-5%, 9%, 0) scale(0.94); }
}
/* Fine grain over the light, so the gradients never band: a field of specks in the ink colour, cut from noise. */
.cl-aurora::after, .cl-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--cl-ink); opacity: 0.09;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 13.75rem 13.75rem;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 13.75rem 13.75rem;
}
.cl-aurora--fade { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
/* The sky: the same light at the top of an inner page, behind the bar. It is a child of <body>, which is
   positioned; a home page opens on its own, larger field instead. */
.cl-sky { inset: 0 0 auto; height: 30rem; opacity: 0.8; }
/* Inside a panel the light is spread across it and sized by the panel, not by the page. */
.cl-aurora--panel i:nth-child(1) { --x: -14%; --y: -38%; --s: 58%; }
.cl-aurora--panel i:nth-child(2) { --x: 52%; --y: -46%; --s: 64%; }
.cl-aurora--panel i:nth-child(3) { --x: 24%; --y: 42%; --s: 50%; }
.cl-aurora--panel i:nth-child(4) { --x: 66%; --y: 34%; --s: 44%; }
.cl-aurora--panel i:nth-child(5) { --x: -18%; --y: 48%; --s: 46%; }

/* Words set in the display serif, and words filled with the plum light. */
.cl-serif { font-family: var(--cl-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.cl-shine {
  background: var(--cl-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: cl-shine 9s ease-in-out infinite alternate;
}
@keyframes cl-shine { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ============ 6. The parts a page is built from ============ */
/* The opening of a home page: a note, the title, one paragraph, two buttons, then a picture, all over the aurora. */
.cl-hero { position: relative; isolation: isolate; margin-top: calc(-1 * var(--cl-head-h)); padding-top: calc(var(--cl-head-h) + clamp(2.75rem, 7vw, 6rem)); text-align: center; }
.cl-hero > .cl-aurora { inset: 0 0 auto; height: 46rem; }
/* One column that may shrink below its content, so a long one-line pill ends in an ellipsis on a narrow phone and does not widen the page. */
.cl-hero-inner { width: min(100% - 2 * var(--cl-gutter), 62rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.cl-hero-inner > * { max-width: 100%; }
.cl-hero-note { min-height: 2.25rem; padding: 0 0.875rem 0 0.75rem; max-width: 100%; text-decoration: none; transition: box-shadow var(--cl-fast) var(--cl-ease), transform var(--cl-med) var(--cl-ease-back); }
.cl-hero-note:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--cl-line-2), inset 0 1px 0 var(--cl-glass-edge), var(--cl-shadow-1); }
.cl-hero-note b { font-weight: 600; color: var(--cl-ink); }
/* The clip box is taller than the line (padding, taken back by the margin), so the tail of a g or a y is never cut. */
.cl-hero-note span:not(.cl-dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 0.3em; margin-block: -0.3em; }
.cl-hero-note .cl-arr { flex: none; width: 0.875rem; height: 0.875rem; transition: transform var(--cl-med) var(--cl-ease-back); }
.cl-hero-note:hover .cl-arr { transform: translateX(0.1875rem); }
.cl-hero-title { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font-size: var(--cl-fs-display); font-weight: 500; letter-spacing: -0.06em; line-height: 0.9; color: var(--cl-ink); }
.cl-hero-title > span { display: inline-block; }
.cl-hero-title .cl-serif { font-size: 1.07em; letter-spacing: -0.03em; padding-inline: 0.02em 0.04em; }
.cl-hero-title .cl-shine { display: inline-block; padding: 0.1em 0.06em 0.16em 0; margin: -0.1em -0.06em -0.16em 0; }
.cl-hero-title--long { max-width: 15ch; font-size: var(--cl-fs-display-2); letter-spacing: -0.055em; line-height: 0.96; text-wrap: balance; }
.cl-hero-lede { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; max-width: 41rem; font-size: var(--cl-fs-lead); line-height: 1.5; letter-spacing: -0.01em; color: var(--cl-ink-2); text-wrap: pretty; }
.cl-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin-top: 2rem; }
.cl-hero-figure { width: min(100% - 2 * var(--cl-gutter), var(--cl-page)); margin: clamp(3rem, 7vw, 5.5rem) auto 0; perspective: 100rem; text-align: left; }
.cl-hero-tilt { border-radius: var(--cl-r-5); box-shadow: var(--cl-shadow-3); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 700ms var(--cl-ease); will-change: transform; }
@media (max-width: 34rem) {
  /* Three stacked lines; the longest word (“Countless”) is about 4.2em wide and has to clear the gutters at 320px. */
  .cl-hero-title:not(.cl-hero-title--long) { font-size: clamp(3.5rem, 19.5vw, 6rem); line-height: 0.88; }
  .cl-hero-title:not(.cl-hero-title--long) > span:not(.visually-hidden) { display: block; }
  .cl-hero-tilt { border-radius: var(--cl-r-4); }
}

/* The head of an inner page: the title, one line under it, and the page's own actions beside the title. */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 1.5rem; width: 100%; margin: 0 0 clamp(1.75rem, 1.2rem + 2vw, 2.75rem); padding: 0; border: 0; text-align: left; }
.page-head-text { display: contents; }
.page-title { grid-column: 1; grid-row: 1; margin: 0; padding: 0; border: 0; font-family: var(--cl-sans); font-size: var(--cl-fs-title); font-weight: 500; letter-spacing: -0.05em; line-height: 1; color: var(--cl-ink); text-align: left; text-wrap: balance; }
.page-sub { grid-column: 1 / -1; grid-row: 2; max-width: 40rem; margin: 0.875rem 0 0; font-size: var(--cl-fs-lead); line-height: 1.4; letter-spacing: -0.015em; color: var(--cl-ink-3); text-wrap: pretty; }
.page-sub a { color: var(--cl-ink); }
.page-actions { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.75rem; padding-bottom: 0.25rem; }
@media (max-width: 34rem) { .page-head { grid-template-columns: minmax(0, 1fr); } .page-actions { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 1.25rem; padding: 0; } }

/* The head of a section: its title, and beside it a line of text or the next step. */
.cl-part-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: end; gap: 1.25rem clamp(2rem, 5vw, 4rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cl-part-head .cl-tag { grid-column: 1 / -1; justify-self: start; }
.cl-part-title { max-width: 21ch; margin: 0; font-family: var(--cl-sans); font-size: var(--cl-fs-part); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; color: var(--cl-ink); text-wrap: balance; }
.cl-part-lede { max-width: 30rem; margin: 0; padding-bottom: 0.25rem; font-size: 1.0625rem; line-height: 1.5; color: var(--cl-ink-2); text-wrap: pretty; }
@media (max-width: 52rem) { .cl-part-head { grid-template-columns: minmax(0, 1fr); } .cl-part-lede { max-width: 38rem; } }

/* A window of glass over a field of light: it holds a picture of the product, or the product itself. */
.cl-window { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1rem, 5.5vw, 5rem) clamp(1rem, 5.5vw, 5rem) 0; border-radius: var(--cl-r-5); background: var(--cl-bg-3); box-shadow: inset 0 0 0 1px var(--cl-line); }
.cl-window .cl-aurora i, .cl-lit .cl-aurora i { opacity: calc(var(--cl-au-o) + 0.25); }
.cl-window-frame { overflow: hidden; border-radius: var(--cl-r-3) var(--cl-r-3) 0 0; background: var(--cl-glass-2); -webkit-backdrop-filter: blur(1.5rem) saturate(170%); backdrop-filter: blur(1.5rem) saturate(170%); box-shadow: 0 0 0 1px var(--cl-line), var(--cl-shadow-3); }
.cl-window-bar { position: relative; display: flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0 0.875rem; }
.cl-window-bar > i { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--cl-line-2); }
.cl-window-bar > span { margin-inline: auto; padding: 0.25rem 0.875rem; border-radius: var(--cl-r-pill); background: var(--cl-tint); font-size: 0.75rem; line-height: 1.2; color: var(--cl-ink-3); transform: translateX(-1.3rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 34rem) { .cl-window { border-radius: var(--cl-r-4); } }

/* A panel of colour inside a page (plum with .cl-night), lit by its own aurora. */
.cl-panel { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.5rem, 5vw, 4.5rem); border-radius: var(--cl-r-5); }
@media (max-width: 34rem) { .cl-panel { border-radius: var(--cl-r-4); } }

/* A list of short points, each with a small mark. */
.cl-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.cl-marks li { position: relative; margin: 0; padding-left: 1.625rem; font-size: 0.9375rem; line-height: 1.45; color: var(--cl-ink-2); text-wrap: pretty; }
.cl-marks li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1rem; height: 1rem; background: var(--cl-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.cl-marks--no li::before { background: var(--cl-ink-4); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E"); }

/* ============ 7. Motion ============ */
/* On load: [data-rise] children lift in, one after another. Pure CSS, so it runs with scripts off. */
@media (prefers-reduced-motion: no-preference) {
  [data-rise] { animation: cl-rise var(--cl-slow) var(--cl-ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
  @keyframes cl-rise { from { opacity: 0; transform: translate3d(0, 1.5rem, 0); filter: blur(0.625rem); } }

  /* [data-rise="each"]: the block stays still and its children lift in one after another, starting at the block's own
     place in the page's order (--i). The first eight take a step each and the rest arrive with the ninth. Rows fade
     and lift without the blur, so a long list stays smooth on a phone. cl-motion.js takes the attribute off once the
     last child has arrived, so a child that is hidden and shown again later (a list filter) does not replay. */
  [data-rise="each"] { animation: none; }
  [data-rise="each"] > * { animation: cl-rise-row 800ms var(--cl-ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 60ms + var(--n, 0) * 60ms); }
  [data-rise="each"] > :nth-child(2) { --n: 1; }
  [data-rise="each"] > :nth-child(3) { --n: 2; }
  [data-rise="each"] > :nth-child(4) { --n: 3; }
  [data-rise="each"] > :nth-child(5) { --n: 4; }
  [data-rise="each"] > :nth-child(6) { --n: 5; }
  [data-rise="each"] > :nth-child(7) { --n: 6; }
  [data-rise="each"] > :nth-child(8) { --n: 7; }
  [data-rise="each"] > :nth-child(n + 9) { --n: 8; }
  @keyframes cl-rise-row { from { opacity: 0; transform: translate3d(0, 1.25rem, 0); } }

  /* On scroll: [data-reveal] waits below the fold and lifts in when it arrives. cl-motion.js adds .is-in;
     if that script never runs, the fallback animation shows everything after a moment. */
  .cl-js [data-reveal] { transition: opacity var(--cl-slow) var(--cl-ease), transform var(--cl-slow) var(--cl-ease), filter var(--cl-slow) var(--cl-ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .cl-js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 1.75rem, 0); filter: blur(0.5rem); animation: cl-failsafe 1ms 6s forwards; }
  @keyframes cl-failsafe { to { opacity: 1; transform: none; filter: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .cl-aurora i, .cl-dot, .cl-shine, .cl-marquee-track { animation: none !important; }
  .btn, .chip, .cl-card, .cl-icon-btn { transition-duration: 1ms !important; }
}

/* A row that scrolls by on its own and pauses under the pointer. */
.cl-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cl-marquee-track { display: flex; width: max-content; gap: var(--gap, 1rem); animation: cl-marquee var(--d, 60s) linear infinite; }
.cl-marquee:hover .cl-marquee-track, .cl-marquee:focus-within .cl-marquee-track { animation-play-state: paused; }
@keyframes cl-marquee { to { transform: translate3d(calc(-50% - var(--gap, 1rem) / 2), 0, 0); } }

/* ============ 8. The footer: a plum panel, link columns, the name set very large ============ */
.cl-foot { padding: 0 max(0.5rem, env(safe-area-inset-left, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)); margin-top: var(--cl-section); font-family: var(--cl-sans); background: none; }
.cl-foot-panel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--cl-r-5);
  padding: clamp(2.5rem, 6vw, 5rem) var(--cl-gutter) 0;
  container-type: inline-size;   /* the large name below is sized against this panel */
}
.cl-foot-inner { max-width: var(--cl-page); margin-inline: auto; }
.cl-foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 2rem; align-items: start; }
.cl-foot-lede { font-size: clamp(1.75rem, 2.4vw + 1rem, 3rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; color: var(--cl-ink); max-width: 14ch; text-wrap: balance; }
.cl-foot-lede .cl-serif { letter-spacing: -0.025em; }
.cl-foot-note { margin-top: 1.25rem; max-width: 24rem; font-size: 0.9375rem; line-height: 1.55; color: var(--cl-ink-3); }
.cl-foot-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; }
.cl-foot-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 2rem 1.5rem; }
.cl-foot-cols h2 { margin: 0 0 0.875rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--cl-ink-4); }
.cl-foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.cl-foot-cols a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem;
  font-size: 0.9375rem; color: var(--cl-ink-2); text-decoration: none;
  transition: color var(--cl-fast) var(--cl-ease), transform var(--cl-med) var(--cl-ease);
}
.cl-foot-cols a:hover { color: var(--cl-ink); transform: translateX(0.1875rem); }
.cl-foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--cl-line); font-size: 0.8125rem; line-height: 1.5; color: var(--cl-ink-3); }
.cl-foot-legal a { color: var(--cl-ink-2); text-decoration: none; }
.cl-foot-legal a:hover { color: var(--cl-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.cl-foot-legal p { margin: 0; max-width: 44rem; }
.cl-foot-word {
  /* The whole word shows: its baseline sits just above the panel's edge, and the letters fade toward it without being cut. */
  margin: clamp(1.5rem, 4vw, 3rem) 0 0; padding: 0 0 0.09em;
  font-size: clamp(3.5rem, 15.5vw, 15rem); font-weight: 600; letter-spacing: -0.065em; line-height: 0.8; white-space: nowrap; text-align: center;
  /* Never wider than the panel: --cl-word-em is the name's width in em (“Countless Lab” is 5.87, “Framework” 4.77). */
  font-size: clamp(2rem, min(15.5vw, 100cqw / var(--cl-word-em, 6)), 15rem);
  background: linear-gradient(180deg, oklch(100% 0 0 / 0.3), oklch(100% 0 0 / 0.06) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  user-select: none; pointer-events: none;
}
.cl-foot .cl-aurora i:nth-child(1) { --x: -14%; --y: 56%; --s: 36rem; }
.cl-foot .cl-aurora i:nth-child(2) { --x: 56%; --y: 60%; --s: 40rem; }
.cl-foot .cl-aurora i:nth-child(3) { --x: 28%; --y: 78%; --s: 28rem; }
@media (max-width: 56rem) {
  .cl-foot-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 36rem) {
  .cl-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-foot-panel { border-radius: var(--cl-r-4); }
}

/* ============ 9. Small shared parts ============ */
.cl-focus:focus-visible, .btn:focus-visible, .chip:focus-visible, .cl-icon-btn:focus-visible, .cl-nav a:focus-visible, .cl-brand:focus-visible {
  outline: 2px solid var(--cl-accent); outline-offset: 2px;
}
.cl-kbd { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; border-radius: 0.375rem; background: var(--cl-tint-2); font-family: var(--cl-sans); font-size: 0.75rem; font-weight: 500; color: var(--cl-ink-3); }

/* ============ 10. The picture viewer ============ */
.cl-locked { overflow: hidden; }
.cl-lightbox {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  display: none; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: center;
  background: color-mix(in oklab, var(--cl-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(1.75rem) saturate(160%);
  backdrop-filter: blur(1.75rem) saturate(160%);
  color: var(--cl-ink); font-family: var(--cl-sans);
}
.cl-lightbox[open] { display: grid; animation: cl-fade var(--cl-med) var(--cl-ease) both; }
.cl-lightbox::backdrop { background: transparent; }
.cl-lightbox-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem 0 1.5rem; }
.cl-lightbox-count { margin: 0; font-size: 0.875rem; color: var(--cl-ink-3); font-variant-numeric: tabular-nums; }
.cl-lightbox figure { grid-column: 2; grid-row: 2; margin: 0; height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 0.875rem; padding: 0.75rem 0 1.25rem; }
.cl-lightbox img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--cl-r-3); box-shadow: var(--cl-shadow-3); animation: cl-pop var(--cl-med) var(--cl-ease) both; }
.cl-lightbox figcaption { max-width: 44rem; padding-inline: 1rem; text-align: center; font-size: 0.875rem; line-height: 1.5; color: var(--cl-ink-3); }
.cl-lightbox figcaption b { color: var(--cl-ink); font-weight: 600; }
.cl-lightbox figcaption .label { display: block; }
.cl-lightbox-nav { grid-row: 2; margin: 0 0.5rem; background: var(--cl-glass-2); box-shadow: inset 0 0 0 1px var(--cl-line-2); }
.cl-lightbox-nav[data-lb="prev"] { grid-column: 1; }
.cl-lightbox-nav[data-lb="next"] { grid-column: 3; }
.cl-lightbox.is-single .cl-lightbox-nav { visibility: hidden; }
@keyframes cl-fade { from { opacity: 0; } }
@keyframes cl-pop { from { opacity: 0; transform: scale(0.96); } }
@media (max-width: 40rem) {
  .cl-lightbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .cl-lightbox figure { grid-column: 1 / -1; padding-inline: 0.75rem; }
  .cl-lightbox-nav { grid-row: 3; margin: 0 0.75rem 1rem; }
  .cl-lightbox-nav[data-lb="prev"] { grid-column: 1; justify-self: end; }
  .cl-lightbox-nav[data-lb="next"] { grid-column: 2; justify-self: start; }
}