/* Digital Collar: manifesto site */

@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-var.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette 5 "Graphite Signal", owner pick 2026-10-27 (T-621/T-628). Old: blue #1636c9, uv #9b1df2, ink #0a1a5c. */
  --blue: #1f2933;     /* graphite, primary */
  --white: #ffffff;    /* shirt white */
  --uv: #d0241b;       /* signal red, the digital collar */
  --ink: #1f2933;      /* graphite ink, body text */
  --workwear: #1636c9; /* workwear blue, only for the blue collar block (white on it 8.7:1) */
  --line: #c7cacc;
  --line2: #f5cfcd;
  --gut: 16px;
  --display: "Anybody", "Arial Narrow", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --measure: 34rem;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
@media (min-width: 48em) { body { font-size: 1.1875rem; } }

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; }

a { color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { color: var(--uv); }
:focus-visible { outline: 3px solid var(--uv); outline-offset: 3px; }

.skip {
  position: absolute; left: var(--gut); top: -100px; z-index: 10;
  background: var(--ink); color: var(--white); padding: .6em 1em; font-family: var(--display); font-weight: 700;
}
.skip:focus { top: var(--gut); }

/* ---------- top bar ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 14px var(--gut);
  font-family: var(--display);
}
.mark {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--blue); text-decoration: none;
  font-weight: 800; font-stretch: 125%; font-size: 1.125rem; letter-spacing: -.01em;
}
.mark__icon { width: 30px; height: 30px; color: var(--blue); flex: none; }
.bar__nav { display: none; }
.bar__nav ul { list-style: none; display: flex; gap: 1.75rem; }
.bar__nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-stretch: 90%; font-size: 1rem; }
.bar__nav a:hover { color: var(--uv); text-decoration: underline; }
.bar { position: relative; }
.bar__nav a[aria-current="page"] { color: var(--blue); text-decoration: underline; text-decoration-color: var(--uv); text-decoration-thickness: 3px; text-underline-offset: .3em; }
.bar__menu summary {
  list-style: none; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: 1rem; color: var(--blue);
  padding: .35rem .8rem .4rem; border: 2px solid var(--blue);
}
.bar__menu summary::-webkit-details-marker { display: none; }
.bar__menu[open] summary { background: var(--blue); color: var(--white); }
.bar__menu nav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--white); border-bottom: 6px solid var(--blue); padding: 0 var(--gut) .75rem;
}
.bar__menu ul { list-style: none; }
.bar__menu li + li { border-top: 2px solid var(--blue); }
.bar__menu a {
  display: block; padding: .7rem 0; text-decoration: none; color: var(--blue);
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 80; font-size: 1.5rem; line-height: 1;
}
.bar__menu a[aria-current="page"] { color: var(--uv); }
@media (min-width: 56em) { .bar__nav { display: block; } .bar__menu { display: none; } }

/* ---------- hero ---------- */
.fit {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: .8;
  letter-spacing: -.01em;
}
.fit--old { font-weight: 800; }
.fit--new { font-weight: 900; font-variation-settings: "wdth" 150; font-size: 22vw; letter-spacing: -.02em; }

.hero__stack { font-size: inherit; }
.hero__old { display: grid; grid-template-columns: 1fr 1fr; }
.fit--old { font-size: 6.4vw; font-variation-settings: "wdth" 50; }
@media (min-width: 50em) {
  .fit--old { font-size: 8.4vw; font-variation-settings: "wdth" 62; }
}

.band { display: block; overflow: hidden; padding: clamp(12px, 1.3vw, 20px) var(--gut) clamp(10px, 1.1vw, 16px); }
.band .fit { padding-top: .03em; }
.hero__old .band { padding-left: 12px; padding-right: 12px; }
@media (min-width: 50em) { .hero__old .band { padding-left: var(--gut); padding-right: var(--gut); } }
.band--blue { background: var(--workwear); color: var(--white); }
.band--white { background: var(--white); color: var(--blue); }
.band--digital { background: var(--uv); color: var(--white); padding-top: clamp(18px, 1.9vw, 30px); padding-bottom: clamp(16px, 1.6vw, 26px); }
.band--digital .fit + .fit { margin-top: .07em; }

.hero__foot { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2.25rem) var(--gut) 0; }
.hero__name { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 125; font-size: 1.125rem; line-height: 1.1; color: var(--blue); }
.hero__name time { display: block; margin-top: .3rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--ink); }
@media (min-width: 50em) {
  .hero__foot { grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
  .hero__name { padding-right: var(--gut); padding-top: .55rem; font-size: 1.375rem; }
}
.hero__def {
  max-width: 31ch;
  font-size: clamp(1.375rem, 1rem + 1.25vw, 2.125rem);
  line-height: 1.22;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 50em) {
  .hero__def { padding-left: var(--gut); }
}

/* hero load moment */
@keyframes wipe-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipe-y { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stretch { from { font-variation-settings: "wdth" 50; } to { font-variation-settings: "wdth" 150; } }
@keyframes rise { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .js .band--blue  { animation: wipe-x .55s cubic-bezier(.7,0,.2,1) both paused; }
  .js .band--white { animation: wipe-x .55s cubic-bezier(.7,0,.2,1) .35s both paused; }
  .js .band--digital { animation: wipe-y .45s cubic-bezier(.7,0,.2,1) .8s both paused; }
  .js .fit--new { animation: stretch 1.05s cubic-bezier(.16,.9,.1,1) 1.05s both paused; }
  .js .fit--new + .fit--new { animation-delay: 1.17s; }
  .js .hero__def, .js .hero__name { animation: rise .6s ease-out 2s both paused; }
  .js .hero__name { animation-delay: 2.15s; }
  .js.go .band, .js.go .fit--new, .js.go .hero__def, .js.go .hero__name { animation-play-state: running; }
}

/* ---------- dictionary entry ---------- */
.entry {
  display: grid; gap: 1.5rem;
  padding: clamp(3rem, 9vw, 8rem) var(--gut) clamp(3.5rem, 8vw, 7rem);
}
.headword {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  line-height: 1; letter-spacing: -.02em; color: var(--blue);
}
.pos { font-style: italic; font-size: 1.25rem; margin-top: .4rem; }
.senses { padding-left: 1.6em; display: grid; gap: .75rem; font-size: 1.25rem; line-height: 1.4; max-width: var(--measure); }
.senses li::marker { font-family: var(--display); font-weight: 800; color: var(--uv); }
.preamble { display: grid; gap: 1em; max-width: var(--measure); padding-top: 1rem; }
.preamble p:last-child { font-weight: 700; }

@media (min-width: 50em) {
  .entry { grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 3rem; }
  .entry__term { grid-row: span 2; padding-right: var(--gut); }
  .senses, .preamble { padding-left: calc(var(--gut) + 1.6em); }
  .preamble { padding-left: var(--gut); border-top: 4px solid var(--blue); padding-top: 2rem; }
  .senses { font-size: 1.5rem; }
}

/* ---------- theses ---------- */
.theses {
  background: var(--blue); color: var(--white);
  padding: clamp(3rem, 7vw, 6rem) var(--gut) clamp(3.5rem, 8vw, 7rem);
}
.theses__title { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.fit--title { font-weight: 900; font-variation-settings: "wdth" 150; font-size: 13vw; }

.theses__list { list-style: none; display: grid; gap: 0; }
.theses__list li {
  display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1rem;
  padding: 1.5rem 0 1.75rem;
  border-top: 3px solid var(--white);
}
.t-num {
  grid-row: span 2;
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 112;
  font-size: 2.25rem; line-height: .82; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.theses h3 {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 80;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.02; letter-spacing: -.005em;
  margin-bottom: .6rem;
}
.theses li p { max-width: 32rem; color: var(--white); }

@media (min-width: 50em) {
  .theses__list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); }
  .theses__list li { grid-template-columns: 7.5rem 1fr; padding: 2rem 0 2.5rem; }
  .t-num { font-size: 3.6rem; }
}

/* ---------- who it is for ---------- */
.who {
  display: grid; gap: 1.5rem;
  padding: clamp(3.5rem, 8vw, 7rem) var(--gut);
}
.who + .who--companies { border-top: 6px solid var(--blue); }
.who__title {
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 130;
  font-size: clamp(2.25rem, .5rem + 8vw, 7rem); line-height: .86; letter-spacing: -.02em;
  color: var(--blue); text-wrap: balance;
}
.who__body { display: grid; gap: 1em; max-width: var(--measure); }
.who__body p:first-child { font-size: 1.25em; line-height: 1.38; font-weight: 600; }

.who--agents { background: var(--uv); color: var(--white); }
.who--agents .who__title { color: var(--white); font-size: clamp(2.25rem, 1rem + 5vw, 5rem); }
.who--agents :focus-visible { outline-color: var(--white); }

@media (min-width: 50em) {
  .who { grid-template-columns: 1fr 1fr; column-gap: 0; align-items: start; }
  .who__body { padding-left: var(--gut); padding-top: .4rem; }
  .who__title { padding-right: var(--gut); }
}

/* ---------- closing ---------- */
.close {
  background: var(--blue); color: var(--white);
  padding: clamp(3.5rem, 8vw, 7rem) var(--gut) clamp(3.5rem, 8vw, 6rem);
}
.fit--close { font-weight: 900; font-variation-settings: "wdth" 110; font-size: 14vw; }
.fit--close + .fit--close { margin-top: .06em; }
.close__note { margin-top: clamp(2rem, 4vw, 3rem); max-width: var(--measure); font-size: 1.25em; line-height: 1.4; }
@media (min-width: 50em) { .close__note { margin-left: 50%; padding-left: var(--gut); } }
.close :focus-visible { outline-color: var(--white); }

/* ---------- footer ---------- */
.foot { padding: clamp(3rem, 6vw, 5rem) var(--gut) 2.5rem; }
.readon__title {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 125;
  font-size: 1.5rem; color: var(--uv); margin-bottom: 1rem;
}
.readon ul { list-style: none; border-top: 3px solid var(--blue); }
.readon li { border-bottom: 3px solid var(--blue); }
.readon a {
  display: block; padding: .7rem 0 .8rem;
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 75;
  font-size: clamp(1.5rem, 1rem + 3vw, 3.5rem); line-height: 1; letter-spacing: -.01em;
  color: var(--blue); text-decoration: none;
}
.readon a:hover { color: var(--white); background: var(--uv); }
.readon a:hover, .readon a:focus-visible { padding-left: .25em; }
.foot__small { margin-top: 2.5rem; display: grid; gap: .25rem; font-size: .9375rem; }
@media (min-width: 50em) {
  .foot__small { grid-template-columns: 1fr auto; column-gap: 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .readon a { transition: padding-left .2s ease, background-color .2s ease, color .2s ease; }
}

/* off-screen clone used by site.js to measure a line at its final width */
.fit.fit-measure {
  position: absolute; visibility: hidden; left: 0; top: 0;
  display: inline-block; width: auto; animation: none !important;
}
.band, .theses__title, .close__title { position: relative; }


/* ================= article pages ================= */
.art__band { padding: clamp(2.5rem, 6vw, 5rem) var(--gut) clamp(2rem, 4vw, 3.25rem); }
.art--blue .art__band { background: var(--blue); color: var(--white); }
.art--uv .art__band { background: var(--uv); color: var(--white); }
.art--white .art__band { background: var(--white); color: var(--blue); border-bottom: 6px solid var(--blue); }
.art--blue .art__band a, .art--uv .art__band a { color: var(--white); }
.art--blue .art__band :focus-visible, .art--uv .art__band :focus-visible { outline-color: var(--white); }
.crumbs { font-family: var(--display); font-weight: 600; font-stretch: 100%; font-size: .9375rem; margin-bottom: clamp(1rem, 3vw, 2rem); }
.crumbs a { text-decoration-thickness: 1px; }
.art__title {
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 112;
  font-size: clamp(2.25rem, 1rem + 5.4vw, 6.25rem); line-height: .9; letter-spacing: -.02em;
  max-width: 16ch; text-wrap: balance; overflow-wrap: break-word;
}
.art__date { margin-top: 1.25rem; font-style: italic; font-size: 1rem; }

.art__body { padding: clamp(2.5rem, 6vw, 4.5rem) var(--gut) clamp(3rem, 6vw, 5rem); }
.prose, .faq, .sources { max-width: 68ch; }
@media (min-width: 72em) { .prose, .faq, .sources { margin-left: calc((100% - 68ch) / 2 - 8rem); } }
.prose > * + * { margin-top: 1em; }
.prose > p:first-child { font-size: 1.2em; line-height: 1.45; }
.prose h2 {
  margin-top: 2.25em; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 100;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.02; letter-spacing: -.01em; color: var(--blue);
  text-wrap: balance;
}
.prose h3 {
  margin-top: 1.75em; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 88;
  font-size: 1.3rem; line-height: 1.1; color: var(--ink);
}
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--uv); font-family: var(--display); font-weight: 800; }
.prose a.term { text-decoration-style: dotted; text-decoration-thickness: 2px; }

/* tables */
.dc-table-wrap { overflow-x: auto; margin-top: 1.5em; border-top: 6px solid var(--blue); -webkit-overflow-scrolling: touch; }
.dc-table-wrap:focus-visible { outline-offset: 0; }
.dc-table-wrap table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.4; }
.dc-table-wrap th, .dc-table-wrap td { text-align: left; vertical-align: top; padding: .7rem .75rem .75rem 0; border-bottom: 2px solid var(--line, #c9d1f2); }
.dc-table-wrap thead th {
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 90; font-size: 1.05rem;
  color: var(--blue); border-bottom: 3px solid var(--blue);
}
.dc-compare { min-width: 40rem; }
.dc-compare td:first-child { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 90; color: var(--blue); width: 9.5rem; }
.dc-compare th:last-child { color: var(--uv); }
.dc-compare th:nth-child(2) { color: var(--workwear); }
.dc-compare td:last-child { font-weight: 600; }
@media (min-width: 72em) {
  .prose .dc-table-wrap { width: min(calc(100vw - 2 * var(--gut)), 72rem); }
}

/* glossary */
.dc-glossary { margin-top: 2rem; border-top: 6px solid var(--blue); }
.dc-glossary dt {
  scroll-margin-top: 1rem; padding-top: 1.25rem;
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 100;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.05; color: var(--blue);
}
.dc-glossary dt:target { color: var(--uv); }
.dc-glossary dd { margin: .5rem 0 0; padding-bottom: 1.25rem; border-bottom: 2px solid var(--line, #c9d1f2); }

/* FAQ, sources */
.faq { margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 6px solid var(--uv); padding-top: 1.5rem; }
.faq--lead { margin-top: 2rem; }
.faq__title, .sources__title {
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 125;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1; color: var(--uv); margin-bottom: 1rem;
}
.faq__item { padding: 1.25rem 0; border-bottom: 2px solid var(--line2, #e2cff9); }
.faq__item h3 { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 90; font-size: 1.3rem; line-height: 1.12; color: var(--ink); margin-bottom: .45rem; }
.faq__src { margin-top: .4rem; font-size: .9375rem; font-style: italic; }
.sources { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.sources__title { color: var(--blue); font-size: 1.5rem; }
.sources ul { padding-left: 1.2em; font-size: .9375rem; }
.sources li + li { margin-top: .35em; }

/* related block reuses .readon rows at a smaller size */
.readon--related a { font-size: clamp(1.375rem, 1rem + 2vw, 2.5rem); }

/* home: compact 'More reading' list */
.more { margin-top: 2.25rem; }
.more__title { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 125; font-size: 1.125rem; color: var(--blue); margin-bottom: .6rem; }
.more ul { list-style: none; display: grid; gap: .35rem 2rem; }
.more a { font-size: 1.0625rem; }
@media (min-width: 50em) { .more ul { grid-template-columns: 1fr 1fr 1fr; } }

.dc-compare tr > :first-child { position: sticky; left: 0; background: var(--white); padding-right: .75rem; }