/* ==========================================================================
   CDRC — Claim, Dispute, Resolution and Consultancy Pvt. Ltd.

   Measured from the references rather than assumed:
     Stripe    h1 weight 300, tracking -0.02em, lh 1.15, radius 6px,
               shadows 0 16px 32px rgba(50,50,93,.12), ink rgb(6,27,49)
     Intercom  h1 weight 400, tracking -0.03em, lh 0.95, radii 4/6/8
     Nike      hero weight 500, square CTAs, white ground
   Large type is LIGHT. That is where the premium feel comes from — heavy
   weights read as shouting. This supersedes the earlier "radius 0, no
   shadows, weight 900" rules in the design-system canvas.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:    #FFFFFF;
  --raised:   #F8FAFD;          /* Stripe's panel ground */
  --ink:      #0B1520;
  --text:     #1B2532;
  --text-2:   #596574;
  --text-3:   #5D6C7D;          /* 5.38:1 on white — small text must clear 4.5 */
  --line:     #E4E8EE;
  --hair:     #EFF2F6;

  --blue:     #285796;
  --blue-700: #1C4173;
  --accent:   #D9661F;

  --r:    6px;
  --r-lg: 10px;
  --sh-1: 0 3px 6px rgba(23, 23, 23, .06);
  --sh-2: 0 16px 32px rgba(50, 50, 93, .12);
  --sh-3: 0 28px 56px rgba(50, 50, 93, .16);

  --maxw: 1180px;
  --gut:  clamp(20px, 4.2vw, 60px);
  --nav:  84px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 200ms var(--ease);
  --slow: 780ms var(--ease);
  --sp:   clamp(84px, 10vw, 156px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  text-wrap: pretty; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 14px 20px; z-index: 300; }
.skip:focus { left: 0; top: 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sp); }

/* --- the mark ------------------------------------------------------------- */
.brand { display: inline-flex; flex-direction: column; gap: 5px; text-decoration: none; }
.brand b {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 29px; font-weight: 700; letter-spacing: -.101em;
  line-height: .8; padding-right: .101em; color: var(--blue);
}
.brand span {
  font-size: 9.5px; font-weight: 500; letter-spacing: .085em;
  text-transform: uppercase; color: var(--text-3); line-height: 1;
}
.brand--rev b { color: #fff; }
.brand--rev span { color: rgba(255,255,255,.66); }

/* --- masthead ------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast), background var(--fast);
}
.masthead.is-stuck { border-bottom-color: var(--line); background: rgba(255,255,255,.92); }
/* min-height, not height: on a narrow screen the descriptor wraps to two lines
   and the bar has to grow rather than let them spill over the rule below. */
.masthead .wrap { min-height: var(--nav); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 10px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { position: relative; font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; padding-block: 8px; transition: color var(--fast); }
.nav a:hover { color: var(--ink); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* .nav a out-specifies .cta, so the button must out-specify it back — this is
   how the CTA ended up with dark text on its own dark ground. */
.cta, .nav a.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px; border-radius: var(--r);
  background: var(--ink); color: #fff; text-decoration: none;
  font-size: 14.5px; font-weight: 600;
  box-shadow: var(--sh-1);
  transition: background var(--fast), box-shadow var(--fast), transform var(--fast);
}
.cta:hover, .nav a.cta:hover { background: #1E3350; color: #fff; box-shadow: var(--sh-2); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.cta::after, .nav a.cta::after { display: none; }
.cta--lg { min-height: 54px; padding: 0 26px; font-size: 15.5px; }

.navtoggle { display: none; width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.navtoggle i { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 5px auto; transition: transform var(--fast), opacity var(--fast); }
.navtoggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- type — large is light ------------------------------------------------ */
.display {
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 300; letter-spacing: -.028em; line-height: 1.06; color: var(--ink);
}
.h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; letter-spacing: -.026em; line-height: 1.12; color: var(--ink); }
.h3 { font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; letter-spacing: -.018em; line-height: 1.25; color: var(--ink); }
.lede { font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.58; color: var(--text-2); max-width: 48ch; }
.small { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.fine  { font-size: 13px; line-height: 1.5; color: var(--text-3); }
.kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.num { font-variant-numeric: tabular-nums; }

.go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--blue); text-decoration: none; padding-block: 6px;
}
.go svg { width: 15px; height: 15px; transition: transform 320ms var(--ease); }
.go:hover { color: var(--blue-700); }
.go:hover svg { transform: translateX(5px); }

/* --- hero ----------------------------------------------------------------- */
.hero { padding-top: clamp(48px, 6vw, 86px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero .display { max-width: 16ch; }
.hero .lede { margin-top: 24px; }
.hero__links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 32px; }

/* the artefact panel — the equivalent of Stripe's product shot */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.panel__h {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; background: var(--raised); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-3);
}
.panel__b { padding: 18px; }
.barline { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.barline + .barline { border-top: 1px solid var(--hair); }
.barline span { flex: 0 0 116px; font-size: 12.5px; color: var(--text-2); }
.barline i { display: block; height: 9px; border-radius: 0 3px 3px 0; background: var(--blue); }
.barline i.is-mark { background: var(--accent); }
.barline b { font-size: 12.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- client wall ---------------------------------------------------------- */
.wall { display: flex; flex-wrap: wrap; gap: 14px 44px; align-items: center; }
.wall span { font-size: 15px; font-weight: 500; color: var(--text-3); }

/* --- panels / cards ------------------------------------------------------- */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 26px 28px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color var(--fast);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #D7DDE6; }
.card p { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.card .go { margin-top: auto; padding-top: 6px; }

/* --- full-bleed photograph ------------------------------------------------ */
.full { width: 100%; overflow: hidden; }
.full img { width: 100%; height: clamp(280px, 48vh, 540px); object-fit: cover; filter: grayscale(1) contrast(1.05); }
.full figcaption { max-width: var(--maxw); margin-inline: auto; padding: 12px var(--gut) 0; display: flex; justify-content: flex-end; }

/* --- dark statement ------------------------------------------------------- */
.dark { background: var(--ink); color: #fff; }
.dark .h2, .dark .display { color: #fff; }
.dark .lede, .dark .small { color: rgba(255,255,255,.74); }
.dark .fine { color: rgba(255,255,255,.55); }
.dark .go { color: #fff; }
.dark .fig { font-size: clamp(46px, 7.4vw, 108px); font-weight: 300; letter-spacing: -.035em; line-height: 1; color: #fff; }
.dark .wall span { color: rgba(255,255,255,.62); }
.dark .roll { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); }

/* --- people --------------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-top: 32px; }
.people div { padding-top: 16px; border-top: 1px solid var(--line); }
.people b { display: block; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.people span { display: block; font-size: 14px; color: var(--text-2); margin-top: 3px; }

/* --- insights ------------------------------------------------------------- */
.notes a {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: baseline;
  padding: 22px 14px; margin-inline: -14px; border-radius: var(--r);
  border-top: 1px solid var(--line); text-decoration: none;
  transition: background var(--fast);
}
.notes a:hover { background: var(--raised); }
.notes b { font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -.016em; color: var(--ink); }

/* --- footer --------------------------------------------------------------- */
.foot { background: var(--ink); color: rgba(255,255,255,.76); padding-block: 66px 28px; }
.foot__grid { display: flex; gap: 44px; flex-wrap: wrap; }
.foot__grid > :first-child { flex: 1 1 290px; }
.foot__col { flex: 0 1 180px; display: flex; flex-direction: column; gap: 11px; }
.foot__col b { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.foot a { font-size: 15px; color: rgba(255,255,255,.82); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 52px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.5); }

/* ==========================================================================
   MOTION — slow, few, never load-bearing
   ========================================================================== */
@media (scripting: enabled) {
  .up { opacity: 0; transform: translateY(16px); }
}
.up.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--slow) calc(var(--i, 0) * 90ms),
              transform var(--slow) calc(var(--i, 0) * 90ms);
}
@media (scripting: enabled) {
  .full img { transform: scale(1.04); transition: transform 1700ms var(--ease); }
}
.full.is-in img { transform: none; }
/* the panel's bars draw out once it arrives */

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --nav: 70px; }
  .navtoggle { display: block; }
  /* the descriptor wraps here, so it needs leading — at line-height 1 the two
     lines touch each other and the rule underneath */
  .brand span { line-height: 1.34; letter-spacing: .07em; }
  .hero .wrap { grid-template-columns: 1fr; }
  .nav {
    /* absolute against the sticky masthead, not fixed to the viewport, so the
       panel always starts directly below the bar even when the brand wraps to
       two lines and the bar grows */
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - var(--nav)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 4px var(--gut) 22px;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity var(--fast), transform var(--fast);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 16px 0; border-top: 1px solid var(--hair); font-size: 18px; }
  .nav a::after { display: none; }
  .nav .cta { margin-top: 16px; }
  .foot__grid > :first-child { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .up { opacity: 1; transform: none; }
  .full img { transform: none; }
}

@media print {
  .masthead, .navtoggle { display: none; }
  body { font-size: 11pt; }
  .dark, .foot { background: #fff; color: #000; }
  .up { opacity: 1 !important; transform: none !important; }
  .full img { transform: none !important; }
}

/* ==========================================================================
   PAGE FURNITURE — sub-pages
   ========================================================================== */

.pagehead { padding-block: clamp(48px, 6vw, 84px) clamp(32px, 4vw, 52px); }
.pagehead .display { max-width: 18ch; }
.pagehead .lede { margin-top: 22px; }

/* --- register (projects, clientele) --------------------------------------- */
.reg { border-top: 1px solid var(--ink); }
.reg__h { display: flex; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.reg__h span { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.reg__r {
  display: flex; gap: 20px; align-items: baseline;
  padding: 18px 14px; margin-inline: -14px; border-radius: var(--r);
  border-bottom: 1px solid var(--hair); text-decoration: none;
  transition: background var(--fast);
}
.reg__r:hover { background: var(--raised); }
.reg__n { flex: 0 0 40px; font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.reg__t { flex: 1 1 auto; min-width: 0; font-size: clamp(16px, 1.5vw, 18px); font-weight: 600; letter-spacing: -.014em; color: var(--ink); }
.reg__s { flex: 0 0 140px; text-align: right; font-size: 14.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.reg__x { flex: 0 0 190px; text-align: right; font-size: 14px; color: var(--text-3); }

/* --- roster (team) — portrait-led, sized for half-portrait photography --- */
.division { margin-top: clamp(44px, 5vw, 72px); }
.division__h { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.division__h h2 { font-size: clamp(20px, 2vw, 25px); font-weight: 600; letter-spacing: -.018em; color: var(--ink); }
.division__h span { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.division > p { margin-top: 16px; }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 24px; margin-top: 28px; }
.person {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.person:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
/* 4:5 — a half-portrait (waist-up) sits in this without cropping the face */
.person__p {
  aspect-ratio: 4 / 5; width: 100%;
  background: linear-gradient(170deg, #EEF3FA 0%, #D9E4F2 100%);
  display: grid; place-items: center; overflow: hidden;
}
/* staff portraits stay in colour — the greyscale treatment is for the
   editorial site photography, not for people */
.person__p img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.person__p b { font-size: clamp(34px, 4vw, 44px); font-weight: 300; color: var(--blue); letter-spacing: -.03em; }
.person__d { padding: 18px 20px 22px; }
.person__d h3 { font-size: 18px; font-weight: 600; letter-spacing: -.016em; color: var(--ink); }
.person__d .role { font-size: 13.5px; color: var(--blue); margin-top: 3px; }
.person__d .cred { font-size: 13.5px; color: var(--text-2); margin-top: 8px; line-height: 1.5; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips span {
  font-size: 11.5px; font-weight: 500; color: var(--text-2);
  background: var(--raised); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px;
}

/* --- prose (services, insights) ------------------------------------------- */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 18px; }
.prose ul { margin-top: 16px; display: grid; gap: 10px; }
.prose li { position: relative; padding-left: 20px; font-size: 15.5px; color: var(--text-2); }
.prose li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--blue); }

.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: clamp(36px, 4.5vw, 60px); border-top: 1px solid var(--line); }
.split:first-of-type { border-top: 0; }
.split__k { position: sticky; top: calc(var(--nav) + 24px); }

/* --- form ----------------------------------------------------------------- */
.form { display: grid; gap: 18px; max-width: 640px; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
/* Grid and flex children default to min-width:auto, so a long placeholder or a
   date picker's intrinsic width pushes the track wider than the screen. These
   three lines are what stop the form scrolling sideways on a phone. */
.form, .row2, .field { min-width: 0; }
.form > *, .row2 > * { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  min-height: 48px; padding: 12px 14px; font-size: 15.5px;
  background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(40, 87, 150, .14);
}
.field .hint { font-size: 13px; color: var(--text-3); }
.notice { padding: 16px 18px; border-radius: var(--r); background: #EEF6EE; border: 1px solid #CFE4CF; font-size: 14.5px; color: #1F5A2E; }

/* --- callout -------------------------------------------------------------- */
.callout { padding: 22px 24px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__k { position: static; }

  /* Register rows STACK on a phone rather than dropping columns. Hiding the
     right-hand column used to lose the project name on the clientele table,
     which is the only reason that table exists.

     display:block also neutralises the inline `flex: 0 0 330px` on those cells
     — flex properties are ignored on a block child, and an inline style cannot
     otherwise be overridden from a stylesheet. Do not change this to flex or
     grid without re-checking those inline widths. */
  .reg__h { display: none; }
  .reg__r { display: block; padding: 15px 12px; }
  .reg__n { display: none; }
  .reg__t { display: block; font-size: 17px; line-height: 1.35; }
  .reg__s,
  .reg__x {
    display: block; text-align: left; font-size: 13.5px;
    color: var(--text-3); margin-top: 3px;
  }
}

/* ==========================================================================
   BACKGROUND GRAPHICS
   One motif everywhere: a fine dot field, strongest at the top right and
   dissolving before it reaches the text column.

   Pure CSS — no image file, no mask. Both of those failed earlier: a mask that
   did not apply left the element's bare background showing as a rectangle, and
   a generated SVG can be malformed in ways nothing warns you about. A repeating
   radial-gradient has neither failure mode, and being a pattern rather than a
   shape it cannot collapse into a blob.
   ========================================================================== */

.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.has-bg > * { position: relative; z-index: 1; }

.bg-dots::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    /* a soft wash of the brand blue, single hue, giving the corner some weight */
    radial-gradient(120% 85% at 92% -10%, rgba(40, 87, 150, .16) 0%, rgba(40, 87, 150, 0) 62%),
    radial-gradient(circle at center, rgba(40, 87, 150, .82) 1.5px, transparent 1.6px);
  background-size: 100% 100%, 22px 22px;
}
.dark.bg-dots::before {
  background-image:
    radial-gradient(120% 85% at 92% -10%, rgba(92, 133, 188, .30) 0%, rgba(92, 133, 188, 0) 62%),
    radial-gradient(circle at center, rgba(255, 255, 255, .5) 1.5px, transparent 1.6px);
}

/* The fade, painted over the dots in the page's own colour. It starts late so
   the field stays clearly blue across the open right-hand side. */
.bg-dots::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(104deg, #fff 4%, rgba(255,255,255,.78) 26%, rgba(255,255,255,.2) 54%, rgba(255,255,255,0) 78%),
    linear-gradient(to bottom, rgba(255,255,255,0) 58%, #fff 97%);
}
.dark.bg-dots::after {
  background:
    linear-gradient(104deg, #0B1520 4%, rgba(11,21,32,.78) 26%, rgba(11,21,32,.2) 54%, rgba(11,21,32,0) 78%),
    linear-gradient(to bottom, rgba(11,21,32,0) 58%, #0B1520 97%);
}
/* the raised closing panel sits on --raised, so its fade has to match */
.bg-dots.on-raised::after {
  background:
    linear-gradient(104deg, #F8FAFD 4%, rgba(248,250,253,.78) 26%, rgba(248,250,253,.2) 54%, rgba(248,250,253,0) 78%),
    linear-gradient(to bottom, rgba(248,250,253,0) 58%, #F8FAFD 97%);
}

@media (max-width: 860px) {
  /* two layers: the wash must stay full-box, only the dot pitch changes.
     A single value here sized BOTH layers to 18px and tiled the wash. */
  .bg-dots::before { background-size: 100% 100%, 18px 18px; }
  /* the text column fills the width at this size, so the field has to retreat
     much earlier than it does on a wide screen */
  .bg-dots::after {
    background:
      linear-gradient(104deg, #fff 2%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.62) 58%, rgba(255,255,255,.3) 88%),
      linear-gradient(to bottom, rgba(255,255,255,0) 48%, #fff 94%);
  }
  .dark.bg-dots::after {
    background:
      linear-gradient(104deg, #0B1520 2%, rgba(11,21,32,.94) 30%, rgba(11,21,32,.62) 58%, rgba(11,21,32,.3) 88%),
      linear-gradient(to bottom, rgba(11,21,32,0) 48%, #0B1520 94%);
  }
  .bg-dots.on-raised::after {
    background:
      linear-gradient(104deg, #F8FAFD 2%, rgba(248,250,253,.94) 30%, rgba(248,250,253,.62) 58%, rgba(248,250,253,.3) 88%),
      linear-gradient(to bottom, rgba(248,250,253,0) 48%, #F8FAFD 94%);
  }

}
@media print { .bg-dots::before, .bg-dots::after { display: none; } }

/* ==========================================================================
   LONG-FORM ARTICLE
   ========================================================================== */
.article { max-width: 68ch; }
.article > * + * { margin-top: 20px; }
.article h2 {
  font-size: clamp(22px, 2.3vw, 29px); font-weight: 600; letter-spacing: -.022em;
  line-height: 1.22; color: var(--ink); margin-top: 56px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.article h3 {
  font-size: clamp(17px, 1.6vw, 19px); font-weight: 600; letter-spacing: -.014em;
  color: var(--ink); margin-top: 34px;
}
.article p { font-size: 17px; line-height: 1.68; color: var(--text-2); }
.article p strong { color: var(--ink); font-weight: 600; }
.article ul { margin-top: 16px; display: grid; gap: 9px; }
.article li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.article li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 1px; background: var(--blue); }

/* the short declarative lines the author uses as beats */
.article .beat {
  font-size: clamp(19px, 1.9vw, 23px); font-weight: 500; letter-spacing: -.018em;
  line-height: 1.4; color: var(--ink); margin-top: 26px;
}
/* the causal chain, set apart so it reads as a diagram */
.article .chain {
  padding: 18px 20px; border-left: 2px solid var(--blue); background: var(--raised);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 16px; line-height: 1.65; color: var(--ink);
}
/* the specimen notice */
.article .specimen {
  padding: 24px 26px; background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.article .specimen p { font-size: 15.5px; color: var(--text-2); }
.article .specimen p + p { margin-top: 14px; }
.article .specimen .subject { font-weight: 600; color: var(--ink); }
.article .disclaimer {
  margin-top: 56px; padding: 20px 22px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; color: var(--text-3);
}

.byline { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-top: 26px; }
.byline b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.byline span { font-size: 14px; color: var(--text-3); }

.toc { position: sticky; top: calc(var(--nav) + 26px); align-self: start; }
.toc b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.toc a { display: block; padding: 6px 0 6px 13px; border-left: 2px solid var(--line); font-size: 14px; color: var(--text-2); text-decoration: none; transition: color var(--fast), border-color var(--fast); }
.toc a:hover { color: var(--ink); border-left-color: var(--blue); }

.readwrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 980px) {
  .readwrap { grid-template-columns: 1fr; }
  .toc { position: static; display: none; }
}