/* The Quotation Society — storefront styles.
   Implements designs/newsletter-v2 ("Citation Society Landing") on the Classical design
   system's tokens. The canvas keeps every rule in a style attribute; here the tokens live in
   :root and every canvas rule became a class, because a CMS template is reused across pages
   and a shop's look has to be editable in one file.

   Webfonts are declared as families with fallbacks, never @import-ed: the canvas pulls
   Cormorant Garamond and Lora from Google Fonts, which would leak visitor IPs before consent
   (and font-src in the storefront CSP is 'self' data: only). Drop self-hosted WOFF2s in and
   the two --tqs-font-* variables pick them up with no other change. */

:root {
  --tqs-bg: #f3f2f2;
  --tqs-surface: #eae9e9;
  --tqs-text: #201f1d;
  --tqs-accent: #b68235;
  --tqs-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --tqs-accent-400: #e1ad66;
  --tqs-accent-700: #7d5411;
  --tqs-accent-800: #5a3b0a;

  /* Text at reduced weight. The accent itself only clears 3:1 against this ground, so body
     copy in accent uses --tqs-accent-700, never --tqs-accent. */
  --tqs-text-82: color-mix(in srgb, var(--tqs-text) 82%, transparent);
  --tqs-text-78: color-mix(in srgb, var(--tqs-text) 78%, transparent);
  --tqs-text-72: color-mix(in srgb, var(--tqs-text) 72%, transparent);
  --tqs-text-66: color-mix(in srgb, var(--tqs-text) 66%, transparent);
  --tqs-text-62: color-mix(in srgb, var(--tqs-text) 62%, transparent);

  --tqs-font-heading: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --tqs-font-body: "Lora", Georgia, "Times New Roman", serif;

  --tqs-radius-md: 4px;

  --tqs-gutter: clamp(20px, 5vw, 72px);
  --tqs-measure: 1180px;
}

/* ── base ───────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  background: var(--tqs-bg);
  color: var(--tqs-text);
  font-family: var(--tqs-font-body);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

.tqs-site *,
.tqs-site *::before,
.tqs-site *::after { box-sizing: border-box; }

.tqs-site a { color: var(--tqs-accent-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tqs-site a:hover { color: var(--tqs-accent-800); }
.tqs-site :focus { outline: none; }
.tqs-site :focus-visible { outline: 2px solid var(--tqs-accent); outline-offset: 2px; }
.tqs-site ::selection { background: color-mix(in srgb, var(--tqs-accent) 30%, transparent); }
.tqs-site img { display: block; max-width: 100%; }
.tqs-site figure { margin: 0; }

.tqs-site {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Paper grain. Fixed, multiplied over everything, and pointer-transparent so it never eats a
   click. The noise is an inline SVG data URI — img-src in the storefront CSP allows data:. */
.tqs-grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27160%27 height=%27160%27 filter=%27url(%23n)%27 opacity=%270.28%27/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.tqs-rule { height: 1px; border: 0; margin: 0; background: var(--tqs-divider); }

.tqs-eyebrow {
  margin: 0 0 clamp(26px, 3vw, 40px);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tqs-accent-700);
  font-feature-settings: "tnum" 1;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.tqs-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px var(--tqs-gutter);
  border-bottom: 1px solid var(--tqs-divider);
}

.tqs-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tqs-text);
}

.tqs-brand:hover { color: var(--tqs-text); }
.tqs-seal { display: block; flex: none; }
.tqs-brand-name { font-family: var(--tqs-font-heading); font-size: 21px; letter-spacing: 0.01em; }

.tqs-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tqs-nav a { color: var(--tqs-text-72); text-decoration: none; }
.tqs-nav a:hover { color: var(--tqs-accent-700); }
.tqs-nav .tqs-nav-cta { color: var(--tqs-accent-700); }

@media (max-width: 760px) {
  .tqs-header { flex-wrap: wrap; gap: 14px; }
  .tqs-nav { gap: 14px; font-size: 11.5px; row-gap: 8px; flex-wrap: wrap; }
}

/* ── main ───────────────────────────────────────────────────────────────── */

.tqs-main {
  position: relative;
  z-index: 2;
  max-width: var(--tqs-measure);
  margin: 0 auto;
  padding: 0 var(--tqs-gutter);
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.tqs-hero { padding: clamp(56px, 9vw, 116px) 0 clamp(44px, 6vw, 76px); }
.tqs-hero .tqs-eyebrow { margin-bottom: clamp(34px, 5vw, 58px); }

/* The canvas sets 38px as the floor and hangs the opening quote mark in the margin. Both are
   desktop assumptions: at 375px the floor never yields to 6vw, so the line carries three or four
   words, and -0.34em of hang eats 13px of a 20px gutter — the block then touches the left edge
   while sitting flush against the right one. So the floor drops on small screens, and the hang
   waits until the gutter is wide enough to give it away. */
.tqs-hero-quote {
  margin: 0;
  max-width: 15em;
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(32px, 6vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

@media (min-width: 720px) {
  .tqs-hero-quote { margin-left: -0.34em; }
}

.tqs-hero-caption {
  margin: clamp(30px, 4vw, 46px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The struck-through misattribution. The rule is a pseudo-element rather than a node so the
   name still reads as one word to a screen reader. */
.tqs-hero-attribution {
  position: relative;
  align-self: flex-start;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tqs-text-62);
}

.tqs-hero-attribution::after {
  content: "";
  position: absolute;
  left: -2px;
  right: 2px;
  top: 52%;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: tqs-strike 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 900ms both;
}

.tqs-hero-source {
  font-family: var(--tqs-font-heading);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.4;
  color: var(--tqs-accent-700);
  animation: tqs-rise 620ms ease-out 1450ms both;
}

.tqs-hero-source p { margin: 0; }

.tqs-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}

.tqs-hero-lede {
  margin: 0;
  font-size: 17px;
  line-height: 28px;
  max-width: 46ch;
  color: var(--tqs-text-82);
}

@keyframes tqs-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tqs-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .tqs-hero-attribution::after,
  .tqs-hero-source {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── newsletter signup ──────────────────────────────────────────────────── */

.tqs-signup { display: block; }
.tqs-signup-form { margin: 0; }

.tqs-signup-label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tqs-text-72);
  margin-bottom: 10px;
}

.tqs-signup-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.tqs-signup-input {
  flex: 1 1 200px;
  min-height: 44px;
  padding: 6px 10px;
  font: inherit;
  font-size: 16px; /* 16px keeps iOS Safari from zooming the page on focus */
  color: var(--tqs-text);
  caret-color: var(--tqs-accent);
  background: transparent;
  border: 1px solid var(--tqs-divider);
  border-radius: var(--tqs-radius-md);
}

.tqs-signup-input:hover { border-color: color-mix(in srgb, var(--tqs-text) 45%, transparent); }
.tqs-signup-input:focus-visible { border-color: var(--tqs-accent); outline-offset: 0; }

.tqs-signup-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--tqs-font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 9px 17px;
  color: var(--tqs-accent-700);
  background: transparent;
  border: 1px solid var(--tqs-accent);
  border-radius: var(--tqs-radius-md);
}

.tqs-signup-submit:hover { background: color-mix(in srgb, var(--tqs-accent) 12%, transparent); }
.tqs-signup-submit:active { background: color-mix(in srgb, var(--tqs-accent) 22%, transparent); }
.tqs-signup-submit[disabled] { opacity: 0.45; cursor: not-allowed; }

.tqs-signup-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--tqs-text-62);
}

.tqs-signup-note[data-state="error"] { color: var(--tqs-accent-800); }

.tqs-signup-privacy {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 19px;
  color: var(--tqs-text-62);
}

/* Honeypot. Off-screen rather than display:none — some form fillers skip hidden inputs, and a
   field they skip catches nothing. aria-hidden plus tabindex="-1" keeps it away from screen
   readers and the tab order, so no human ever meets it.

   The template repeats these declarations in a style attribute, which is the one place inline
   styles are worth it here: if this stylesheet fails to load, a class-only honeypot becomes a
   visible field that humans fill in — and the CMS rejects every submission that carries one. */
.tqs-trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.tqs-signup-sent {
  border: 1px solid var(--tqs-accent-400);
  border-radius: var(--tqs-radius-md);
  padding: 20px 22px;
}

.tqs-signup-sent-title {
  margin: 0;
  font-family: var(--tqs-font-heading);
  font-size: 23px;
  line-height: 1.3;
}

.tqs-signup-sent-body {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 24px;
  color: color-mix(in srgb, var(--tqs-text) 80%, transparent);
}

.tqs-signup-sent-email { color: var(--tqs-accent-700); }

/* ── definition lists (how an issue works / classifications) ────────────── */

.tqs-deflist-section { padding: clamp(48px, 6vw, 90px) 0; }
/* A second list continuing the section above it (the classification legend under "how an issue
   works") — one padding between them, not two. */
.tqs-deflist-section-tight { padding-top: 0; }
.tqs-deflist { display: grid; gap: 0; }

/* Mobile first: term over description, one column. The canvas's two-column rule is a desktop
   layout — a 210px label column on a 390px screen leaves the description about 160px, which
   breaks every line after two or three words. The side-by-side reading only starts once the row
   is wide enough to carry both. */
.tqs-defrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--tqs-divider);
}

/* Full-width lists only. A row inside the classification legend is already sharing the page with
   a second column, so it must not take the wide list's term column — it has its own, later
   breakpoint below. */
@media (min-width: 720px) {
  .tqs-deflist:not(.tqs-deflist-split) > .tqs-defrow {
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 48px);
    align-items: baseline;
    padding: 22px 0;
  }
}

.tqs-deflist > .tqs-defrow:last-child { border-bottom: 1px solid var(--tqs-divider); }

.tqs-defrow-term {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tqs-defrow-body {
  margin: 0;
  font-size: 16.5px;
  line-height: 27px;
  max-width: 60ch;
  color: var(--tqs-text-82);
}

/* The classification legend. One stacked column by default; at 1000px it becomes the canvas's
   two-column table.

   All three of its width-dependent decisions — how many columns the legend has, whether a row
   puts its term beside the description, and which rows carry the closing rule — hang off that one
   breakpoint, and the column count is stated rather than left to auto-fit. An earlier version had
   auto-fit choose the columns while media queries decided the rest; the two disagreed between
   820px and 995px, where a single-column legend still drew the two-column closing rule and left a
   stray line mid-list. Two rules that must agree should not be able to disagree.

   1000px is also where a column is finally wide enough (~425px) to carry a 150px term column and
   still leave the description room; below it the pair reads better stacked. */
.tqs-deflist-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(24px, 5vw, 64px);
  margin-top: 26px;
}

.tqs-deflist-split > .tqs-defrow { gap: 6px; padding: 14px 0; }
.tqs-deflist-split > .tqs-defrow:last-child { border-bottom: 1px solid var(--tqs-divider); }

@media (min-width: 1000px) {
  .tqs-deflist-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tqs-deflist-split > .tqs-defrow {
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    gap: 6px 18px;
    align-items: baseline;
  }

  /* Two columns, so the last visual row is the last two items. */
  .tqs-deflist-split > .tqs-defrow:nth-last-child(-n + 2) { border-bottom: 1px solid var(--tqs-divider); }
}

.tqs-deflist-split .tqs-defrow-term { font-size: 12px; }
.tqs-deflist-split .tqs-defrow-body { font-size: 15.5px; line-height: 24px; color: var(--tqs-text-78); }

.tqs-deflist-lead {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tqs-text-66);
}

.tqs-deflist-lead-body {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 27px;
  max-width: 60ch;
  color: var(--tqs-text-82);
}

/* ── an issue (page: /issues/{slug}) ───────────────────────────────────────────────────── */

.tqs-issue-section { padding: clamp(40px, 5vw, 70px) 0 clamp(48px, 6vw, 90px); }
.tqs-issue-section .tqs-eyebrow { margin-bottom: clamp(24px, 3vw, 36px); }

.tqs-issue {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--tqs-divider);
  border-radius: var(--tqs-radius-md);
  padding: clamp(26px, 5vw, 64px) clamp(22px, 5vw, 60px);
}

.tqs-issue-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tqs-text-66);
  font-feature-settings: "tnum" 1;
}

.tqs-issue-classification {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tqs-text-78);
}

.tqs-issue-title {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 26px 0 0;
}

.tqs-issue-block-eyebrow {
  margin: 38px 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tqs-text-66);
}

/* Same hanging-quote rule as the hero, for the same reason — inside the issue card the gutter is
   the card's own 22px padding on a phone. */
.tqs-issue-quote {
  margin: 0;
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.24;
}

@media (min-width: 720px) {
  .tqs-issue-quote { margin-left: -0.34em; }
}

.tqs-issue-quote-original {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 24px;
  font-style: italic;
  color: color-mix(in srgb, var(--tqs-text) 74%, transparent);
}

.tqs-issue-body { font-size: 17px; line-height: 29px; text-align: justify; hyphens: auto; }
.tqs-issue-body p { margin: 0 0 20px; }
.tqs-issue-body p:last-child { margin-bottom: 0; }

.tqs-issue-citation {
  margin: 20px 0 0;
  padding-left: 18px;
  border-left: 1px solid var(--tqs-accent-400);
  font-size: 14.5px;
  line-height: 24px;
  color: var(--tqs-accent-700);
}

.tqs-issue-citation-note { color: var(--tqs-text-66); }

.tqs-issue-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--tqs-divider);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tqs-text-62);
  font-feature-settings: "tnum" 1;
}

/* ── the citation apparatus ─────────────────────────────────────────────── */

.tqs-citation-section { padding: clamp(48px, 6vw, 90px) 0; }
.tqs-citation-section .tqs-eyebrow { margin-bottom: 20px; }

.tqs-citation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.tqs-citation-title {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.16;
  margin: 0;
  max-width: 26ch;
}

.tqs-citation-body {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 28px;
  max-width: 50ch;
  color: var(--tqs-text-82);
}

.tqs-citation-list { display: flex; flex-direction: column; gap: 26px; }

.tqs-citation-label {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tqs-text-62);
}

.tqs-citation-text {
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--tqs-accent-400);
  font-size: 14.5px;
  line-height: 24px;
  color: var(--tqs-accent-700);
}

/* "The record stops here": the rule stops short of the text instead of running its full
   height — a citation that ends in nothing is a finding, drawn as one. */
.tqs-citation-stop .tqs-citation-text {
  border-left: 0;
  background-image: linear-gradient(to bottom, var(--tqs-accent-400) 0 60%, transparent 60% 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
}

.tqs-citation-note {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tqs-accent-700);
}

/* ── the register ───────────────────────────────────────────────────────── */

.tqs-society {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
  padding: clamp(48px, 6vw, 90px) 0;
}

.tqs-society .tqs-eyebrow { margin-bottom: 20px; }

.tqs-society-title {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.16;
  margin: 0;
  max-width: 26ch;
}

.tqs-society-body {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 28px;
  max-width: 52ch;
  color: var(--tqs-text-82);
}

.tqs-society-body + .tqs-society-body { margin-top: 20px; }
.tqs-society-count { color: var(--tqs-accent-700); font-feature-settings: "tnum" 1; }

.tqs-member-card {
  justify-self: start;
  width: min(340px, 100%);
  border: 1px solid var(--tqs-divider);
  border-radius: var(--tqs-radius-md);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tqs-member-card .tqs-seal { color: var(--tqs-accent-700); }

.tqs-member-label {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tqs-text-62);
}

.tqs-member-number {
  margin: 6px 0 0;
  font-family: var(--tqs-font-heading);
  font-size: 44px;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}

.tqs-member-badge {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--tqs-divider);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tqs-accent-700);
}

/* ── archive ────────────────────────────────────────────────────────────── */

.tqs-archive { padding: clamp(48px, 6vw, 90px) 0; }

.tqs-archive-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

.tqs-archive-head .tqs-eyebrow { margin: 0; }

.tqs-archive-all {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tqs-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(26px, 3vw, 40px);
}

.tqs-archive-card {
  border: 1px solid var(--tqs-divider);
  border-radius: var(--tqs-radius-md);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tqs-site a.tqs-archive-card-link { color: inherit; text-decoration: none; }
.tqs-site a.tqs-archive-card-link:hover { border-color: var(--tqs-accent-400); }
.tqs-site a.tqs-archive-card-link:hover .tqs-archive-card-quote { color: var(--tqs-accent-800); }

.tqs-archive-card-meta { display: flex; flex-direction: column; gap: 6px; }

.tqs-archive-card-number {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tqs-text-62);
  font-feature-settings: "tnum" 1;
}

.tqs-archive-card-classification {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tqs-text-78);
}

.tqs-archive-card-quote {
  margin: 0;
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.24;
}

.tqs-archive-card-source {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--tqs-divider);
  font-size: 14.5px;
  line-height: 22px;
  color: var(--tqs-accent-700);
}

/* ── locked issues (blurred teaser + signup) ────────────────────────────── */

.tqs-locked {
  display: grid;
  padding: clamp(48px, 6vw, 90px) 0;
}

.tqs-locked > * { grid-area: 1 / 1; }

.tqs-locked-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 3vw, 34px);
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}

.tqs-locked-card {
  background: var(--tqs-surface);
  border: 1px solid var(--tqs-divider);
  border-radius: var(--tqs-radius-md);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tqs-locked-bar {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: var(--tqs-text-62);
}

.tqs-locked-bar-short { width: 38%; height: 10px; }
.tqs-locked-bar-mid { width: 64%; }

.tqs-locked-panel {
  /* The blur filter on the preview makes it its own stacking layer, which paints above any
     non-positioned sibling; the panel must be positioned to stay on top of it. */
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: min(100%, 560px);
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 40px);
  background: var(--tqs-bg);
  border: 1px solid var(--tqs-accent-400);
  box-shadow: 0 0 0 clamp(14px, 3vw, 28px) var(--tqs-bg);
  border-radius: var(--tqs-radius-md);
  text-align: center;
}

.tqs-locked-panel .tqs-eyebrow { margin: 0 0 14px; }

.tqs-locked-title {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.14;
  margin: 0;
}

.tqs-locked-body {
  margin: 16px auto 24px;
  font-size: 16.5px;
  line-height: 26px;
  max-width: 44ch;
  color: var(--tqs-text-82);
}

.tqs-locked-signup { text-align: center; }

/* ── news-style row list (/issues, /quotes) ───────────────────────────── */

.tqs-row-list { padding: 0 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--tqs-divider); }

.tqs-row {
  position: relative;
  padding: clamp(26px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--tqs-divider);
  max-width: 760px;
}

.tqs-row-meta {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tqs-text-66);
  font-feature-settings: "tnum" 1;
}

.tqs-row-title {
  margin: 0;
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.tqs-site a.tqs-row-link { color: var(--tqs-text); text-decoration: none; }
.tqs-site a.tqs-row-link:hover { color: var(--tqs-accent-800); }
/* the whole row is the click target, not just the headline */
.tqs-row-link::after { content: ""; position: absolute; inset: 0; }

.tqs-row-quote {
  margin: 18px 0 0;
  font-style: italic;
  font-size: 18px;
  line-height: 28px;
  color: var(--tqs-text-82);
}

.tqs-row-text {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--tqs-text-82);
}

.tqs-row-source {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 23px;
  color: var(--tqs-text-66);
}

.tqs-row-more {
  display: inline-block;
  margin-top: 18px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tqs-accent-700);
}

.tqs-row:hover .tqs-row-more { color: var(--tqs-accent-800); text-decoration: underline; text-underline-offset: 3px; }

/* ── modal (native <dialog>, opened by data-tqs-modal-open in tqs-site-script) ── */

.tqs-modal-trigger {
  margin-top: 22px;
  padding: 14px 28px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tqs-bg);
  background: var(--tqs-accent-800);
  border: 0;
  border-radius: var(--tqs-radius-md);
  cursor: pointer;
}

.tqs-modal-trigger:hover { background: var(--tqs-text); }

.tqs-modal {
  text-align: left;
  width: min(560px, calc(100% - 2 * var(--tqs-gutter) + 16px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  margin: auto;
  overflow: auto;
  color: var(--tqs-text);
  background: var(--tqs-bg);
  border: 1px solid var(--tqs-accent-400);
  border-radius: var(--tqs-radius-md);
  box-shadow: 0 24px 60px color-mix(in srgb, #201f1d 28%, transparent);
}

.tqs-modal::backdrop { background: color-mix(in srgb, #201f1d 55%, transparent); }

.tqs-modal-panel { position: relative; padding: clamp(28px, 5vw, 44px); }

.tqs-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  color: var(--tqs-text-72);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.tqs-modal-close:hover { color: var(--tqs-accent-800); }

.tqs-modal-panel .tqs-eyebrow { margin: 0 0 14px; padding-right: 36px; }

.tqs-modal-title {
  margin: 0;
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.14;
}

.tqs-modal-body {
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 26px;
  color: var(--tqs-text-82);
}

.tqs-modal-signup { margin-top: 24px; }

body:has(.tqs-modal[open]) { overflow: hidden; }

/* ── join ───────────────────────────────────────────────────────────────── */

.tqs-join {
  padding: clamp(52px, 7vw, 104px) 0 clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.tqs-join-title {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  margin: 0;
  max-width: 24ch;
}

.tqs-join-body {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 28px;
  max-width: 48ch;
  color: var(--tqs-text-82);
}

/* ── the sourcing standard ──────────────────────────────────────────────── */

.tqs-standard { padding: 0 0 clamp(48px, 6vw, 88px); }

.tqs-standard-band {
  border-top: 1px solid var(--tqs-accent-400);
  border-bottom: 1px solid var(--tqs-accent-400);
  padding: clamp(28px, 4vw, 48px) 0;
}

.tqs-standard-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tqs-accent-700);
}

.tqs-standard-body {
  margin: 0;
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(23px, 2.8vw, 34px);
  line-height: 1.32;
  max-width: 40ch;
}

/* ── prose pages (confirmation landing, errata, legal) ──────────────────── */

.tqs-prose { padding: clamp(52px, 7vw, 104px) 0 clamp(48px, 6vw, 90px); max-width: 68ch; }
.tqs-prose .tqs-eyebrow { margin-bottom: 20px; }

.tqs-prose h1 {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  margin: 0;
  max-width: 24ch;
}

.tqs-prose-body { margin-top: 24px; font-size: 17px; line-height: 28px; color: var(--tqs-text-82); }
.tqs-prose-body p { margin: 0 0 20px; }
.tqs-prose-body li { margin-bottom: 8px; }

.tqs-prose-body h2,
.tqs-prose-body h3 {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tqs-text);
  margin: 34px 0 12px;
}

.tqs-prose-body h2 { font-size: 26px; }
.tqs-prose-body h3 { font-size: 21px; }

.tqs-prose-back {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── confirmation banner (built by the site script) ─────────────────────── */

.tqs-confirmed-banner {
  position: relative;
  z-index: 2;
  max-width: var(--tqs-measure);
  margin: 24px auto 0;
  padding: 20px 22px;
  border: 1px solid var(--tqs-accent-400);
  border-radius: var(--tqs-radius-md);
}

.tqs-confirmed-banner strong {
  display: block;
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.3;
}

.tqs-confirmed-banner p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 24px;
  color: color-mix(in srgb, var(--tqs-text) 80%, transparent);
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.tqs-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--tqs-divider);
}

.tqs-footer-inner {
  max-width: var(--tqs-measure);
  margin: 0 auto;
  padding: 34px var(--tqs-gutter) 48px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tqs-text-66);
}

.tqs-footer-colophon { font-feature-settings: "tnum" 1; }
.tqs-footer-links { display: flex; gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap; }

/* ── consent banner ─────────────────────────────────────────────────────── */

.tqs-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--tqs-surface);
  border-top: 1px solid var(--tqs-divider);
}

.tqs-consent-inner {
  max-width: var(--tqs-measure);
  margin: 0 auto;
  padding: 18px var(--tqs-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.tqs-consent-text { margin: 0; font-size: 14px; line-height: 22px; max-width: 68ch; }
.tqs-consent-actions { display: flex; align-items: center; gap: 14px; }

.tqs-consent-reject {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tqs-text-72);
}

.tqs-consent-accept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 18px;
  font-family: var(--tqs-font-heading);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: var(--tqs-accent-700);
  border: 1px solid var(--tqs-accent);
  border-radius: var(--tqs-radius-md);
}

.tqs-consent-accept:hover { background: color-mix(in srgb, var(--tqs-accent) 12%, transparent); }

/* ── glossary: collection pages, author pages, quote cards ─────────────────
   Quotes are deliberately plain — text, author, source — so a page can carry dozens of them.
   The CMS paginating nav ships Tailwind utility classes this stylesheet does not define, so
   .cms-pagination is styled here from the shop's own tokens. */

.tqs-listing-hero { padding: clamp(52px, 7vw, 104px) 0 clamp(20px, 3vw, 36px); max-width: 68ch; }
.tqs-listing-hero .tqs-eyebrow { margin-bottom: 20px; }
.tqs-listing-hero .tqs-eyebrow a { color: inherit; text-decoration: none; }
.tqs-listing-hero h1 {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.08;
  margin: 0;
}
.tqs-listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 14px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tqs-text-72);
}
.tqs-listing-intro { margin-top: 24px; font-size: 17px; line-height: 28px; color: var(--tqs-text-82); }
.tqs-listing-intro p { margin: 0 0 20px; }

.tqs-quote-list-wrap { padding: 0 0 clamp(36px, 5vw, 64px); }
.tqs-quote-list-heading {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 18px;
}
.tqs-quote-list-wrap .tqs-quote-list { padding: 0; }

.tqs-quote-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(12px, 2vw, 24px) 0 clamp(48px, 6vw, 90px);
}
/* the CMS appends the pagination nav as the list's last child */
.tqs-quote-list .cms-pagination { grid-column: 1 / -1; }

.tqs-quote-card {
  margin: 0;
  border: 1px solid var(--tqs-divider);
  border-radius: var(--tqs-radius-md);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tqs-quote-card-text {
  margin: 0;
  font-family: var(--tqs-font-heading);
  font-size: 23px;
  line-height: 1.28;
}
.tqs-quote-card-text::before { content: "\201C"; }
.tqs-quote-card-text::after { content: "\201D"; }
.tqs-quote-card-by {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--tqs-divider);
  font-size: 14.5px;
  line-height: 22px;
  display: flex;
  flex-direction: column;
}
.tqs-quote-card-author { font-weight: 500; }
.tqs-quote-card-source { color: var(--tqs-text-66); font-size: 13.5px; }

.tqs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  padding: 0 0 clamp(48px, 6vw, 90px);
}
.tqs-link-card {
  display: block;
  border: 1px solid var(--tqs-divider);
  border-radius: var(--tqs-radius-md);
  padding: 24px;
  text-decoration: none;
}
.tqs-site a.tqs-link-card { color: var(--tqs-text); }
.tqs-link-card:hover { border-color: var(--tqs-accent); }
.tqs-link-card-title {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}
.tqs-link-card-text { margin: 10px 0 0; color: var(--tqs-text-72); font-size: 14.5px; }

.cms-pagination { margin-top: 12px; font-size: 13px; }
.cms-pagination a {
  border: 1px solid var(--tqs-divider);
  border-radius: var(--tqs-radius-md);
  padding: 4px 12px;
  color: var(--tqs-accent-700);
  text-decoration: none;
}
.cms-pagination a[aria-current="page"] {
  background: var(--tqs-text);
  border-color: var(--tqs-text);
  color: var(--tqs-bg);
}

.tqs-quote-card-text a,
.tqs-site .tqs-quote-card-text a { color: inherit; text-decoration: none; }
.tqs-quote-card-text a:hover { color: var(--tqs-accent-800); }

/* ── single quotation page ─────────────────────────────────────────────── */

.tqs-quote-detail { padding: clamp(52px, 7vw, 104px) 0 clamp(36px, 5vw, 64px); max-width: 860px; }
.tqs-quote-detail .tqs-eyebrow { margin-bottom: 28px; }
.tqs-quote-detail .tqs-eyebrow a { color: inherit; text-decoration: none; }
.tqs-quote-detail-text {
  margin: 0;
  font-family: var(--tqs-font-heading);
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.14;
}
/* the quote is the page's h1; the marks sit on the h1 so they stay on the same line as the text */
.tqs-quote-detail-h1 { margin: 0; font: inherit; }
.tqs-quote-detail-h1::before { content: "\201C"; }
.tqs-quote-detail-h1::after { content: "\201D"; }
.tqs-quote-detail-by { margin: 22px 0 0; font-size: 18px; }
.tqs-quote-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--tqs-divider);
}
.tqs-quote-detail-facts dt {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tqs-text-62);
}
.tqs-quote-detail-facts dd { margin: 4px 0 0; font-size: 15px; }
.tqs-quote-detail-context { margin-top: clamp(32px, 4vw, 52px); max-width: 68ch; }
.tqs-quote-detail-context h2 {
  font-family: var(--tqs-font-heading);
  font-weight: 400;
  font-size: 28px;
  margin: 0;
}

/* ── language switcher ─────────────────────────────────────────────────── */

.tqs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tqs-lang { display: inline-flex; align-items: center; }
.tqs-lang-select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--tqs-divider);
  border-radius: var(--tqs-radius-md);
  color: var(--tqs-text-72);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  cursor: pointer;
}
.tqs-lang-select:hover { color: var(--tqs-accent-700); border-color: var(--tqs-accent); }