/* BLURSOR's design system for redesigned pages: colour, type, space and the
   shared components from references/redesign-2026-10/briefs/style.md.
   The header and footer live in site-shell.css, which every page loads. */

:root {
  --bl-page: #eeeae4;
  --bl-field: #f0e9e4;
  --bl-panel: #f6f2ee;
  --bl-paper: #fffdfa;
  --bl-sand: #e6e0d9;
  --bl-stone: #d9d0c8;
  --bl-ink: #1e1a17;
  --bl-ink-on: #f6f1ec;
  --bl-muted: #625952;
  --bl-quiet: #5e554f;
  --bl-rule: #cdc3ba;
  --bl-rule-light: #ddd4cc;
  --bl-outline: #b3a89f;
  --bl-underline: #a39890;
  --bl-black: #141210;
  --bl-black-text: #f3eee9;
  --bl-black-muted: #c9c0b8;
  --bl-accent: #b73524;
  --bl-font: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bl-side: 5.5%;
  --bl-section: clamp(96px, 9vw, 160px);
}

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

html {
  /* Anchors and scrolled-to panels land below the sticky header. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 759px) {
  html {
    scroll-padding-top: 72px;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bl-page);
  color: var(--bl-ink);
  font-family: var(--bl-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
ol,
ul,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

img,
video,
svg {
  display: block;
}

a {
  color: var(--bl-ink);
  text-decoration: none;
}

a:hover {
  color: var(--bl-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--bl-ink);
  outline-offset: 3px;
}

::selection {
  background: rgba(183, 53, 36, .2);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Eyebrow, heading, text */
.eyebrow {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(26px, 2.1vw, 36px);
  font-weight: 300;
  line-height: 1.15;
}

.subhead {
  font-size: clamp(22px, 1.75vw, 28px);
  font-weight: 400;
  line-height: 1.2;
}

/* Arrow link: a thin 17×10 arrow, then the text */
.arrow,
.arrow-link svg {
  flex: none;
  width: 17px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

/* Outline button: fills with ink on hover */
.button-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--bl-ink);
  border-radius: 0;
  background: transparent;
  color: var(--bl-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.button-outline:hover {
  background: var(--bl-ink);
  color: var(--bl-ink-on);
  text-decoration: none;
}

.button-outline--plain {
  padding: 0 18px;
  font-weight: 400;
}

/* Underlined text link */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bl-underline);
  text-underline-offset: .25em;
}

.text-link:hover {
  text-decoration-color: var(--bl-ink);
}

/* Placeholders: an art slot waiting for its still, and wording still to come */
.art-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: rgba(127, 127, 127, .08);
  color: var(--bl-ink);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}

.art-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px dashed currentColor;
  opacity: .35;
  pointer-events: none;
}

.art-slot svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: .45;
}

.art-slot span {
  max-width: 90%;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .75;
}

.to-confirm {
  color: var(--bl-accent);
  font-size: 14px;
}

/* Solid button with glare: ink fill, a pale sheen crossing every few seconds
   and a slow edge pulse. It holds still for reduced motion. */
.button-glare {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
  min-height: 56px;
  padding: 0 24px;
  overflow: hidden;
  border: 0;
  background: var(--bl-ink);
  box-shadow: 0 0 0 1px rgba(246, 241, 236, .06) inset;
  color: var(--bl-ink-on);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.button-glare:hover {
  background: #2b2521;
  box-shadow: 0 0 0 1px rgba(246, 241, 236, .14) inset, 0 14px 30px -18px rgba(20, 18, 16, .7);
  color: var(--bl-ink-on);
  text-decoration: none;
  transform: translateY(-1px);
}

.button-glare > * {
  position: relative;
  z-index: 1;
}

.button-glare::before,
.button-glare::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.button-glare::before {
  top: 0;
  right: 0;
  bottom: 0;
  width: 34%;
  background: linear-gradient(90deg, rgba(246, 241, 236, 0) 0%, rgba(246, 241, 236, .11) 100%);
  animation: bl-edge 4.8s ease-in-out infinite;
  transition: background .4s ease;
}

.button-glare:hover::before {
  background: linear-gradient(90deg, rgba(246, 241, 236, 0) 0%, rgba(246, 241, 236, .2) 100%);
  animation-duration: 1.6s;
}

.button-glare::after {
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 28%;
  background: linear-gradient(90deg, rgba(255, 250, 242, 0) 0%, rgba(255, 250, 242, .2) 50%, rgba(255, 250, 242, 0) 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: bl-glare 5.6s cubic-bezier(.4, 0, .2, 1) 1.2s infinite;
}

.button-glare:hover::after {
  background: linear-gradient(90deg, rgba(255, 250, 242, 0) 0%, rgba(255, 250, 242, .3) 50%, rgba(255, 250, 242, 0) 100%);
  animation: bl-glare-hover 1.15s cubic-bezier(.4, 0, .2, 1) infinite;
}

.button-glare svg {
  flex: none;
  width: 17px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

@keyframes bl-glare {
  0% { transform: translateX(-160%) skewX(-18deg); }
  28% { transform: translateX(420%) skewX(-18deg); }
  100% { transform: translateX(420%) skewX(-18deg); }
}

@keyframes bl-glare-hover {
  0% { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(420%) skewX(-18deg); }
}

@keyframes bl-edge {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .button-glare,
  .button-glare:hover {
    transform: none;
    transition: none;
  }

  .button-glare::before,
  .button-glare:hover::before {
    animation: none;
  }

  .button-glare::after {
    display: none;
  }
}

/* "Read it as text": an explainer's story as prose, opened from a link near
   its launcher and shown in full without JavaScript. */
.text-version {
  flex: 1 1 100%;
  margin-top: clamp(40px, 4vw, 72px);
}

.shell-js .text-version:not(.is-open) {
  display: none;
}

.text-version__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
}

.text-version__head .subhead {
  margin-top: 14px;
}

.text-version__close {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bl-ink);
  cursor: pointer;
}

html:not(.shell-js) .text-version__close {
  display: none;
}

.text-version__list {
  margin-top: 28px;
  border-top: 1px solid var(--bl-rule);
}

.text-version__item {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4vw;
  row-gap: 10px;
  padding: 30px 0;
  border-bottom: 1px solid var(--bl-rule);
}

.text-version__item h4 {
  flex: 0 0 22%;
  min-width: 12em;
  font-size: clamp(19px, 1.43vw, 24px);
  font-weight: 400;
  line-height: 1.3;
}

.text-version__words {
  flex: 1 1 28em;
  max-width: 46em;
  font-size: 16px;
  line-height: 1.6;
}

.text-version__words > * + * {
  margin-top: 12px;
}

.text-version__words ul {
  padding-left: 1.2em;
  list-style: disc;
}

.text-version__words li + li {
  margin-top: 4px;
}

.text-version__research {
  color: var(--bl-muted);
  font-size: 14px;
  line-height: 1.5;
}

.text-version__research a {
  color: var(--bl-muted);
  text-decoration: underline;
  text-decoration-color: var(--bl-underline);
  text-underline-offset: .2em;
}

.text-version__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
}

.text-version__note {
  color: var(--bl-muted);
  font-size: 14px;
  font-style: italic;
}

/* Page opening on the warm field, fading into the page below it */
.page-top {
  position: relative;
  background: var(--bl-field);
}

.page-top::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48px;
  background: linear-gradient(to bottom, rgba(238, 234, 228, 0), var(--bl-page));
  pointer-events: none;
}

/* Research cards: the research page's latest digests and an article's
   "Keep reading". */
.research-card {
  min-width: 0;
  container-type: inline-size;
}

.research-card__art {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
}

.research-card__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.research-card__art:hover {
  text-decoration: none;
}

.research-card__topic {
  margin-top: 32px;
}

.research-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 32px;
  margin-top: 18px;
}

.research-card--related .research-card__head {
  margin-top: 28px;
}

.research-card__title {
  flex: 1 1 16em;
  max-width: 19em;
  font-size: clamp(20px, 1.56vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: pretty;
}

/* The date starts its own line under the title, and moves up beside it,
   at the right, only where the card is wide enough for the longest title,
   so cards side by side always match. */
.research-card__meta {
  flex: 0 0 100%;
  margin-top: .2em;
  font-size: 15px;
  line-height: 1.45;
}

@container (min-width: 800px) {
  .research-card__meta {
    flex-basis: auto;
  }
}

.research-card__meta a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bl-underline);
  text-underline-offset: .25em;
  overflow-wrap: anywhere;
}

.research-card__summary {
  max-width: 34em;
  margin-top: 14px;
  color: var(--bl-muted);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.research-card .arrow-link {
  margin-top: 14px;
}