/* Critique: White Cube (d61). Generated by design/critique/build.mjs from tokens.json; don't edit. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/jost-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; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/jost-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(fonts/jost-latin-wght-italic.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; }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(fonts/jost-latin-ext-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Material Symbols Sharp"; font-style: normal; font-weight: 100 700; font-display: block;
  src: url(fonts/material-symbols-sharp-latin-wght-normal.woff2) format("woff2-variations"); }

:root {
  --ground: #ffffff;
  --wall: #f4f4f4;
  --hairline: #d9d9d9;
  --muted: #6b6b6b;
  --ink: #111111;
  --on-ink: #ffffff;
  --focus: #111111;
  --font-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-icons: "Material Symbols Sharp";
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;
  --radius-none: 0px;
  --radius-round: 50%;
  --weight-thin: 100;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-heavy: 800;
  --icon-thin: 100;
  --icon-heavy: 700;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --ground: #111111;
  --wall: #1c1c1c;
  --hairline: #3a3a3a;
  --muted: #a3a3a3;
  --ink: #f2f2f2;
  --on-ink: #111111;
  --focus: #f2f2f2;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #111111;
  --wall: #1c1c1c;
  --hairline: #3a3a3a;
  --muted: #a3a3a3;
  --ink: #f2f2f2;
  --on-ink: #111111;
  --focus: #f2f2f2;
  color-scheme: dark;
}

.t-display-xl { font-family: var(--font-sans); font-size: 120px; line-height: 0.85; font-weight: 100; letter-spacing: -0.045em; }
.t-display { font-family: var(--font-sans); font-size: 64px; line-height: 0.95; font-weight: 100; letter-spacing: -0.03em; }
.t-headline { font-family: var(--font-sans); font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.01em; }
.t-title { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 800; }
.t-body { font-family: var(--font-sans); font-size: 17px; line-height: 26px; font-weight: 300; }
.t-caption { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 300; }
.t-label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; }

/* Critique's component styles, from the design system's components/bundle.css (Claude Design), with the
   tappable-tag border fix. build.mjs puts them after the tokens and fonts in dist/critique.css. */

.cq-icon {
  font-family: var(--font-icons);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  display: inline-block;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  color: inherit;
}

.cq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ink);
  border-radius: var(--radius-none);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.cq-btn:focus-visible, .cq-tag:focus-visible, .cq-card-link:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 3px;
}
.cq-btn-solid { background: var(--ink); color: var(--on-ink); }
.cq-btn-solid:hover { background: var(--ground); color: var(--ink); }
.cq-btn-outline { background: transparent; color: var(--ink); }
.cq-btn-outline:hover { background: var(--ink); color: var(--on-ink); }
.cq-btn-text {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}
.cq-btn-text:hover { color: var(--muted); box-shadow: inset 0 -1px 0 var(--muted); }
.cq-btn:disabled { cursor: default; border-color: var(--muted); color: var(--muted); background: transparent; }

.cq-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
}
/* A tag you can tap is a control: its border needs 3:1, so muted, not hairline (a static tag keeps hairline). */
button.cq-tag { cursor: pointer; border-color: var(--muted); }
button.cq-tag:hover { border-color: var(--ink); }
.cq-tag-selected { border-color: var(--ink); background: var(--ink); color: var(--on-ink); font-weight: 400; }

.cq-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 200px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 19px;
  color: var(--ink);
}
.cq-label-artist { font-weight: 800; }
.cq-label-title { font-weight: 300; font-style: italic; }
.cq-label-line { font-weight: 300; }

.cq-card {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  border: 1px solid var(--ink);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
}
.cq-card-image { display: block; width: 100%; height: 180px; object-fit: cover; background: var(--wall); }
.cq-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px var(--space-4) var(--space-4); }
.cq-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cq-card-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.cq-card-title { margin: 0; font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -0.01em; }
.cq-card-link { color: inherit; text-decoration: none; }
.cq-card-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cq-card-subtitle { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 300; }

.cq-take {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink);
  font-family: var(--font-sans);
  color: var(--ink);
}
.cq-take-person { font-size: 12px; line-height: 16px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; }
.cq-take-text { margin: 0; font-size: 17px; line-height: 26px; font-weight: 300; }