@charset "UTF-8";

/* Hallmark · macrostructure: Feature Stack · nav: N9 edge-aligned · footer: Ft1 mast-headed
 * theme: custom · vibe: "paddy-belt kitchen, mill-town precision"
 * paper oklch(97% 0.014 84) · accent oklch(74% 0.148 76) warm · Archivo Expanded + Martian Mono
 * axes: light paper · grotesk-expanded display · warm accent
 * tone: warm-utilitarian · anchor hue: 76 (refined rice bran oil)
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 * ==========================================================================
 * RAMDEVBABA SOLVENT LIMITED — THE PAPER BENCH
 * --------------------------------------------------------------------------
 * The old system was a dark measurement chamber. This one is the paper the
 * bench sits on. Two colour fields do the structural work and both are the
 * company's own physical property: the red-and-white stripe clad on the silo
 * building at Bramhapuri, and the gold of refined rice bran oil. Nothing
 * floats — division is by hairline rule and by full-width band, never by
 * shadow. See DESIGN.md.
 * ========================================================================== */

/* --- Faces -------------------------------------------------------------- */
/* One variable file gives condensed label widths and expanded display
   widths, so the whole type system costs a single request. */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD, U+20B9;
}

@font-face {
  font-family: 'Martian Mono';
  src: url('/assets/fonts/martianmono-latin.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD, U+20B9;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Ground and ink. */
  --paper: #fbf8f2;
  --paper-2: #f4efe4;
  --paper-3: #ebe3d3;
  --ink: #22150c;
  --ink-2: #6a5545;
  --ink-3: #75604e;

  /* Fields. The oil, the silo stripe, the paddy. */
  --gold: #e3a008;
  --gold-deep: #8d5a02;
  --gold-wash: #fbefcf;
  --brick: #a4231c;
  --brick-deep: #7a1712;
  --leaf: #3d6b33;
  --leaf-deep: #2d5125;
  --leaf-wash: #e8eedf;

  /* Rules do all the division. */
  --rule: rgb(34 21 12 / 12%);
  --rule-strong: rgb(34 21 12 / 26%);
  --rule-light: rgb(251 248 242 / 26%);
  --stripe: repeating-linear-gradient(90deg, var(--brick) 0 8px, transparent 8px 16px);

  /* 4pt scale. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5.5rem;
  --s-11: 7rem;
  --s-12: 9rem;

  --shell: 80rem;
  --shell-narrow: 44rem;
  --pad: clamp(1.25rem, 5vw, 4rem);

  --r-1: 4px;
  --r-2: 14px;
  --r-3: 22px;

  /* Strong curves. The CSS built-ins are too weak to read as intentional. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
  accent-color: var(--gold-deep);
}

/* --- Reset -------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
  overflow-x: clip;
}

/* Smooth scrolling is scoped to in-page jumps only. Applied to the root it
   also animates wheel, keyboard and programmatic scrolling, which makes the
   whole page feel like it lags behind the input and desynchronises the
   scroll-scrubbed section on the home page. */
html:has(:target) {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
picture,
video,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brick-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Brick on ink is 1.7:1 — invisible. Dark surfaces take the gold ring. */

.footer :focus-visible,
.band--ink :focus-visible,
.cell__stage :focus-visible {
  outline-color: var(--gold);
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

/* --- Type --------------------------------------------------------------- */

.display,
.display--sm,
.heading,
.subhead {
  font-stretch: 118%;
  font-weight: 780;
  letter-spacing: -0.022em;
  line-height: 0.96;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

.display {
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  line-height: 0.94;
}

.display--sm {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

.heading {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.02;
}

.subhead {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
}

.lede {
  font-size: clamp(1.06rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

.prose {
  color: var(--ink-2);
  max-width: 64ch;
}

.prose + .prose,
.prose p + p,
.prose p + ul,
.prose ul + p {
  margin-top: var(--s-4);
}

.prose ul {
  padding-left: 1.15em;
}

.prose li + li {
  margin-top: var(--s-2);
}

.prose strong,
.lede strong {
  color: var(--ink);
  font-weight: 620;
}

.label {
  font-family: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-3);
}

.num {
  font-family: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-stretch: 87.5%;
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-1);
  text-decoration: none;
  transition: top 180ms var(--ease-out);
}

.skip-link:focus {
  top: var(--s-4);
}

/* --- Shell and bands ---------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.shell--wide {
  max-width: 88rem;
}

.shell--narrow {
  max-width: calc(var(--shell-narrow) + var(--pad) * 2);
}

.plate,
.chamber,
.band {
  padding-block: clamp(3.5rem, 8vw, var(--s-11));
  position: relative;
}

.plate {
  background: var(--paper);
}

.chamber {
  background: var(--paper-2);
}

.band--gold {
  background: var(--gold-wash);
}

.band--leaf {
  background: var(--leaf-wash);
}

.band--ink {
  background: var(--ink);
  color: var(--paper);
}

.band--ink .prose,
.band--ink .lede {
  color: rgb(251 248 242 / 74%);
}

.band--ink .label {
  color: rgb(251 248 242 / 56%);
}

/* The one ornament: the stripe clad on the silo building at Bramhapuri. */
.stripe {
  height: 6px;
  background: var(--stripe);
  background-color: var(--paper-3);
}

.chapter {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: clamp(var(--s-6), 4vw, var(--s-8));
}

.chapter__rule {
  width: 3.5rem;
  height: 5px;
  background: var(--stripe);
  background-color: var(--paper-3);
}

.chapter .heading {
  max-width: 22ch;
}

.chapter .prose {
  margin-top: var(--s-2);
}

/* --- Grids -------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--s-5);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(var(--s-5), 4vw, var(--s-9));
  align-items: start;
}

@media (max-width: 60rem) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
}

@media (max-width: 38rem) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Actions ------------------------------------------------------------ */

.action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.875rem;
  padding: 0.6875rem var(--s-5);
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: var(--r-1);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms var(--ease-soft), border-color 180ms var(--ease-soft),
    color 180ms var(--ease-soft), transform 140ms var(--ease-out);
}

.action__arrow {
  display: inline-block;
  transition: transform 220ms var(--ease-out);
}

.action:active {
  transform: scale(0.985);
}

.action--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.action--quiet {
  background: transparent;
  border-color: transparent;
  padding-inline: 0;
  color: var(--brick-deep);
  text-decoration: underline;
  text-decoration-color: rgb(164 35 28 / 35%);
  text-underline-offset: 0.34em;
}

.band--ink .action--ghost {
  color: var(--paper);
  border-color: var(--rule-light);
}

@media (hover: hover) and (pointer: fine) {
  .action:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }

  .action:hover .action__arrow {
    transform: translateX(3px);
  }

  .action--quiet:hover {
    background: transparent;
    color: var(--brick);
    text-decoration-color: currentColor;
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* --- Masthead ----------------------------------------------------------- */

/* The masthead is sticky, so anything reached by anchor has to stop clear of
   it. The home page sections are the whole of the Products and Company
   navigation now, which makes this load-bearing rather than a nicety. */
[id] {
  scroll-margin-top: 6rem;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(251 248 242 / 88%);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.25rem;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  min-width: 0;
}

.masthead__logo {
  width: auto;
  height: 2rem;
}

.masthead__wordmark {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.masthead__wordmark b,
.masthead__wordmark span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead__wordmark b {
  font-stretch: 112%;
  font-weight: 720;
  font-size: 0.9375rem;
  letter-spacing: -0.015em;
}

.masthead__wordmark span {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.masthead__end {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--s-2);
}

/* Below the smallest common handset the subtitle is the first thing to go:
   the burger must always be reachable. */
@media (max-width: 25rem) {
  .masthead__wordmark span {
    display: none;
  }

  .masthead__logo {
    height: 1.75rem;
  }
}

.masthead__ticker {
  display: none;
  align-items: baseline;
  gap: var(--s-2);
  padding: 0.375rem var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  background: var(--paper-2);
  text-decoration: none;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  transition: border-color 180ms var(--ease-soft);
}

@media (min-width: 64rem) {
  .masthead__ticker {
    display: inline-flex;
  }
}

@media (hover: hover) and (pointer: fine) {
  .masthead__ticker:hover {
    border-color: var(--rule-strong);
  }
}

.t-code {
  color: var(--ink-3);
}

.t-price {
  font-weight: 600;
  color: var(--ink);
}

/* --- Nav ---------------------------------------------------------------- */

.nav {
  display: none;
  margin-left: auto;
}

@media (min-width: 64rem) {
  .nav {
    display: block;
  }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
}

.nav__link,
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.25rem;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 520;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 160ms var(--ease-soft), background-color 160ms var(--ease-soft);
}

.nav__toggle::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 220ms var(--ease-out);
}

.nav__item--open .nav__toggle::after {
  transform: translateY(1px) rotate(225deg);
}

.nav__link[aria-current='page'],
.nav__toggle[data-current='true'] {
  color: var(--ink);
}

.nav__link[aria-current='page']::before {
  content: '';
  position: absolute;
  inset-inline: var(--s-3);
  bottom: -0.35rem;
  height: 2px;
  background: var(--brick);
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover,
  .nav__toggle:hover {
    color: var(--ink);
    background: var(--paper-3);
  }
}

.nav__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: min(46rem, 78vw);
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  box-shadow: 0 1px 0 var(--rule);
  columns: 2;
  column-gap: var(--s-6);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px) scale(0.985);
  transform-origin: top center;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out),
    visibility 180ms;
}

.nav__item--open .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.nav__item:last-child .nav__panel {
  left: auto;
  right: 0;
  transform: translate(0, -6px) scale(0.985);
  transform-origin: top right;
}

.nav__item--open:last-child .nav__panel {
  transform: translate(0, 0) scale(1);
}

.nav__panel a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.875rem;
  color: var(--ink-2);
  text-decoration: none;
  break-inside: avoid;
  transition: color 140ms var(--ease-soft);
}

.nav__panel a[aria-current='page'] {
  color: var(--brick-deep);
  font-weight: 560;
}

@media (hover: hover) and (pointer: fine) {
  .nav__panel a:hover {
    color: var(--ink);
    text-decoration: underline;
  }
}

.nav__panel-heading {
  margin: var(--s-4) 0 var(--s-2);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  break-inside: avoid;
  break-after: avoid;
}

.nav__panel-heading:first-child {
  margin-top: 0;
}

/* --- Drawer ------------------------------------------------------------- */

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  background: transparent;
  cursor: pointer;
}

@media (min-width: 64rem) {
  .burger {
    display: none;
  }
}

.burger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform 260ms var(--ease-out), opacity 160ms var(--ease-soft);
}

.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 4.25rem 0 0;
  z-index: 55;
  padding: var(--s-5) var(--pad) var(--s-9);
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 240ms;
}

.drawer[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 64rem) {
  .drawer {
    display: none;
  }
}

.drawer nav > a {
  display: block;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  font-stretch: 112%;
  font-size: 1.25rem;
  font-weight: 660;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.drawer .nav__panel-heading {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.drawer .nav__panel-heading:first-child {
  margin-top: var(--s-2);
  border-top: 0;
  padding-top: 0;
}

.drawer__sub {
  display: grid;
  gap: 0;
}

.drawer__sub a {
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  overflow: clip;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  align-items: center;
  gap: clamp(var(--s-6), 3.6vw, var(--s-8));
  padding-block: clamp(var(--s-7), 4.6vw, var(--s-9));
}

.hero__lede {
  max-width: 40rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  color: var(--ink-2);
}

.hero__eyebrow::before {
  content: '';
  width: 2rem;
  height: 5px;
  background: var(--stripe);
  background-color: var(--paper-3);
  flex-shrink: 0;
}

.hero .display {
  font-size: clamp(2.35rem, 4.15vw, 3.85rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin-bottom: var(--s-4);
}

.hero .display em {
  font-style: normal;
  color: var(--brick-deep);
}

.hero__lede .lede {
  max-width: 40ch;
}

.hero .actions {
  margin-top: var(--s-5);
}

.hero__art {
  position: relative;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper-3);
  aspect-ratio: 5 / 6;
}

.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
}

.hero__badge {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  right: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  background: rgb(251 248 242 / 92%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero__badge b {
  font-stretch: 112%;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero__badge span {
  display: block;
}

.hero__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
}

.figure__value {
  display: block;
  font-stretch: 118%;
  font-weight: 760;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.figure__unit {
  display: block;
  margin-top: var(--s-2);
  max-width: 22ch;
}

/* Between the two-column hero and the stack there is a band where the badge
   has to give up its location line or it wraps four ways. */
@media (min-width: 62.0625rem) and (max-width: 73rem) {
  .hero__badge > :last-child {
    display: none;
  }
}

@media (max-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__art {
    aspect-ratio: 4 / 3;
    order: -1;
  }

  .hero__art img {
    object-position: 56% 46%;
  }

  .hero__lede {
    max-width: none;
  }
}

@media (max-width: 34rem) {
  .hero__figures {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }

  .hero__art {
    aspect-ratio: 5 / 4;
  }

  .hero__art img {
    object-position: 58% 62%;
  }

  .hero__badge {
    left: var(--s-3);
    right: auto;
    top: var(--s-3);
    bottom: auto;
    padding: var(--s-2) var(--s-3);
  }

  .hero__badge > :last-child {
    display: none;
  }
}

/* --- Brand shelf -------------------------------------------------------- */

.shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

@media (max-width: 52rem) {
  .shelf {
    grid-template-columns: minmax(0, 1fr);
  }
}

.brandcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: border-color 240ms var(--ease-soft), transform 240ms var(--ease-out);
}

.brandcard--tulsi .brandcard__img {
  background: #f6c630;
}

.brandcard--sehat .brandcard__img {
  background: #c9d98d;
}

.brandcard__img {
  aspect-ratio: 1280 / 512;
  overflow: hidden;
}

.brandcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 700ms var(--ease-out);
}

.brandcard__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}

.brandcard__name {
  font-stretch: 118%;
  font-weight: 780;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brandcard__body p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.brandcard__spec {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

/* --- The rail: refining stages ------------------------------------------ */

.rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  align-items: start;
  margin-top: var(--s-7);
}

@media (max-width: 56rem) {
  .rail {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rail__rack {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}

.rail__cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.rail__swatch {
  display: block;
  height: clamp(4.5rem, 11vw, 7.5rem);
  border-radius: var(--r-1);
  background: var(--swatch);
  border: 1px solid var(--rule);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-soft);
}

.rail__cell[aria-selected='true'] .rail__swatch {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.4px var(--ink);
}

.rail__stage {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  transition: color 200ms var(--ease-soft);
}

.rail__cell[aria-selected='true'] .rail__stage {
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .rail__cell:hover .rail__swatch {
    transform: translateY(-3px);
  }
}

.rail__reading {
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
}

.rail__name {
  font-stretch: 118%;
  font-weight: 760;
  font-size: 1.35rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}

.rail__note {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.rail__lovibond {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* --- The sample cell ---------------------------------------------------- */

.cell {
  position: relative;
}

.cell__stage {
  position: sticky;
  top: 5.5rem;
  border-radius: var(--r-3);
  overflow: hidden;
  background: #0d0b08;
  aspect-ratio: 16 / 9;
}

.cell__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cell__stage::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top, rgb(12 8 4 / 78%), rgb(12 8 4 / 0%));
}

.cell__caption {
  position: absolute;
  z-index: 1;
  left: var(--s-5);
  bottom: var(--s-5);
  right: var(--s-5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  color: var(--paper);
}

.cell__caption .label {
  color: rgb(251 248 242 / 70%);
}

.cell__reading {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.cell__ticks {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

.cell__tick {
  width: 3px;
  height: 22px;
  transform-origin: bottom;
  transform: scaleY(0.636);
  background: rgb(251 248 242 / 26%);
  transition: background-color 320ms var(--ease-soft), transform 320ms var(--ease-out);
}

.cell__tick[data-on='true'] {
  background: var(--gold);
  transform: scaleY(1);
}

.cell__scroll {
  height: 180vh;
}

/* The reading is swapped behind a brief blur so the eye reads one changing
   value, not two overlapping ones. The JS already holds for this. */

.rail__name,
.rail__note,
.rail__lovibond,
.cell__caption .label,
.cell__reading {
  transition: opacity 130ms var(--ease-soft), filter 130ms var(--ease-soft);
}

.rail[data-swapping='true'] .rail__name,
.rail[data-swapping='true'] .rail__note,
.rail[data-swapping='true'] .rail__lovibond,
[data-clarify][data-swapping='true'] .cell__caption .label,
[data-clarify][data-swapping='true'] .cell__reading {
  opacity: 0;
  filter: blur(4px);
}

@media (max-width: 48rem) {
  .cell__scroll {
    height: 120vh;
  }

  .cell__caption {
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-4);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
}

/* --- Units, streams, readouts ------------------------------------------- */

.unit {
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
}

.unit__name {
  font-stretch: 114%;
  font-weight: 720;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: var(--s-3);
}

.unit__detail {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* Award cards carry a photograph, so the picture bleeds to the card edge and
   only the text keeps the card's padding. */
.unit--award {
  padding: 0;
  overflow: hidden;
}

.unit--award .frame {
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  aspect-ratio: 4 / 3;
}

.unit--award > .label,
.unit--award > .unit__name,
.unit--award > .unit__detail {
  padding-inline: var(--s-5);
}

.unit--award > .unit__detail {
  padding-bottom: var(--s-5);
}

.unit__address {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  line-height: 1.7;
  color: var(--ink-3);
}

.stream {
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
}

.stream__abbr {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--gold-deep);
}

.stream__name {
  margin: var(--s-2) 0 var(--s-2);
  font-stretch: 114%;
  font-weight: 720;
  font-size: 1.05rem;
  letter-spacing: -0.012em;
  line-height: 1.15;
}

.stream p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.readout {
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--paper);
}

.readout__value {
  display: block;
  font-stretch: 118%;
  font-weight: 760;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.readout__unit {
  display: block;
  margin-top: var(--s-3);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.6;
}

.readout__delta {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-3);
}

[data-dir='up'] .readout__delta {
  color: var(--leaf-deep);
}

[data-dir='down'] .readout__delta {
  color: var(--brick);
}

/* --- Timeline ----------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 60rem;
  border-top: 1px solid var(--rule);
}

.timeline__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.timeline__year {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--brick-deep);
}

.timeline__body p {
  color: var(--ink-2);
  max-width: 62ch;
}

.timeline__body p + p {
  margin-top: var(--s-2);
}

@media (max-width: 40rem) {
  .timeline__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
}

/* --- People ------------------------------------------------------------- */

.person {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.person__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--paper-3);
}

.person__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.person__name {
  font-stretch: 114%;
  font-weight: 740;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.person__role {
  margin-top: var(--s-2);
}

.person__bio {
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.person__bio p + p {
  margin-top: var(--s-3);
}

/* --- Logo walls --------------------------------------------------------- */

/* Hairlines are drawn on the items, not as a gap over a coloured container.
   auto-fit leaves orphan cells whenever the item count does not divide by the
   column count, and a container-background rule paints those cells grey. */
.logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
}

.logos__item {
  display: grid;
  place-items: center;
  padding: var(--s-5) var(--s-4);
  background: var(--paper);
  min-height: 6.5rem;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  margin: -1px 0 0 -1px;
}

.logos__item img {
  max-height: 3.25rem;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* --- Documents ---------------------------------------------------------- */

.docs {
  border-top: 1px solid var(--rule);
}

.doc {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color 160ms var(--ease-soft);
}

.doc__index {
  flex: 0 0 2.25rem;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  color: var(--ink-3);
}

.doc__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.doc__meta {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  white-space: nowrap;
}

.doc__arrow {
  transition: transform 240ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .doc:hover {
    background: var(--gold-wash);
  }

  .doc:hover .doc__label {
    text-decoration: underline;
    text-underline-offset: 0.28em;
  }

  .doc:hover .doc__arrow {
    transform: translateX(3px);
  }
}

.doc:active {
  background: var(--paper-3);
}

/* --- Market panel ------------------------------------------------------- */

.quote {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.quote__price {
  font-stretch: 118%;
  font-weight: 760;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.spark {
  margin: var(--s-5) 0 0;
}

.spark__plot {
  height: 4.5rem;
  position: relative;
}

.spark__plot svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.spark__line {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.spark__area {
  fill: rgb(227 160 8 / 14%);
  stroke: none;
}

[data-dir='down'] .spark__line {
  stroke: var(--brick);
}

[data-dir='down'] .spark__area {
  fill: rgb(164 35 28 / 10%);
}

.spark__scale {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

dl.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
}

dl.sheet > div {
  background: var(--paper);
  padding: var(--s-4);
}

dl.sheet dt {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

dl.sheet dd {
  margin: var(--s-2) 0 0;
  font-stretch: 112%;
  font-weight: 660;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

/* The same name as a table: a key-and-value ledger, ruled, never boxed. */

table.sheet {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9375rem;
  border-top: 1px solid var(--rule);
}

table.sheet th,
table.sheet td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.5;
}

table.sheet td:last-child,
table.sheet th:last-child {
  padding-right: 0;
}

table.sheet th[scope='row'] {
  width: 38%;
  font-weight: 500;
  color: var(--ink-2);
}

table.sheet thead th {
  padding-block: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule-strong);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

table.sheet tbody tr:last-child th,
table.sheet tbody tr:last-child td {
  border-bottom: 0;
}

table.sheet .num {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

table.sheet a {
  color: var(--brick-deep);
}

@media (max-width: 34rem) {
  table.sheet th[scope='row'] {
    width: 42%;
  }
}

/* --- Page head ---------------------------------------------------------- */

.pagehead {
  padding-block: clamp(var(--s-7), 6vw, var(--s-10)) clamp(var(--s-6), 4vw, var(--s-8));
  border-bottom: 1px solid var(--rule);
}

.pagehead__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.pagehead__crumb a {
  color: var(--ink-3);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .pagehead__crumb a:hover {
    color: var(--ink);
    text-decoration: underline;
  }
}

/* --- Frames, galleries, quotes ------------------------------------------ */

.frame {
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--rule);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--portrait {
  aspect-ratio: 4 / 5;
}

.frame--wide {
  aspect-ratio: 16 / 9;
}

.figure__caption {
  margin-top: var(--s-3);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--s-4);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-2);
  border: 1px solid var(--rule);
}

.pull {
  font-stretch: 112%;
  font-weight: 620;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

/* --- Map ---------------------------------------------------------------- */

.plot {
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--paper-2);
}

.plot__map {
  aspect-ratio: 16 / 10;
  background: var(--paper-3);
}

.plot iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.plot__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--rule);
}

.plot__coord {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

/* --- Tables ------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.table th {
  text-align: left;
  padding: var(--s-3) var(--s-3);
  border-bottom: 2px solid var(--ink);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.table td {
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.table tr:nth-child(even) td {
  background: var(--paper-2);
}

.table__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Footer ------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(var(--s-8), 6vw, var(--s-10)) var(--s-6);
}

.footer__mast {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule-light);
}

.footer__mark {
  font-stretch: 118%;
  font-weight: 780;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--s-6) var(--s-5);
  padding-block: var(--s-7);
}

.footer__block h3 {
  margin-bottom: var(--s-3);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgb(251 248 242 / 52%);
}

.footer__block p,
.footer__block li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgb(251 248 242 / 78%);
}

.footer__block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.footer__block a {
  text-decoration: none;
  color: inherit;
}

.footer__block a:focus-visible {
  color: var(--gold);
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .footer__block a:hover {
    color: var(--gold);
    text-decoration: underline;
  }
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-light);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-stretch: 87.5%;
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(251 248 242 / 52%);
}

.footer__social {
  display: flex;
  gap: var(--s-2);
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--rule-light);
  border-radius: var(--r-1);
  transition: background-color 180ms var(--ease-soft);
}

.footer__social img {
  width: 15px;
  height: 15px;
  filter: invert(1) opacity(0.7);
}

@media (hover: hover) and (pointer: fine) {
  .footer__social a:hover {
    background: rgb(251 248 242 / 10%);
  }
}

/* --- Entrance ----------------------------------------------------------- */

/* Six moves, one vocabulary, each drawn from the bench this site is set on:
   a rule is ruled, a print develops, a card is set down, a figure is read off,
   a rack fills in process order. Every move runs once, is keyed to .is-settled,
   and is written as an animation with backwards fill rather than a transition —
   so nothing is left holding a transform, and hover keeps its own timing after
   the element has arrived. --settle-delay is the element's place in the group
   that crossed the line together; --row-delay its place within a dealt list. */

@keyframes settle-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes settle-lift {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes settle-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes settle-print {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* 1. Default — the block rises and resolves. The elements listed below run a
      move of their own and must not also fade in as a block. */

.js
  [data-settle]:not(
    :where(
        .chapter,
        .hero__art,
        .hero__figures,
        .frame,
        .unit,
        .stream,
        .person,
        .brandcard,
        .timeline__row,
        .docs,
        .logos,
        .sheet
      )
  ) {
  opacity: 0;
}

.js
  [data-settle]:not(
    :where(
        .chapter,
        .hero__art,
        .hero__figures,
        .frame,
        .unit,
        .stream,
        .person,
        .brandcard,
        .timeline__row,
        .docs,
        .logos,
        .sheet
      )
  ).is-settled {
  opacity: 1;
  animation: settle-rise 620ms var(--ease-out) var(--settle-delay, 0ms) backwards;
}

/* 2. The chapter is ruled first, then read: the stripe draws out of the left
      margin and the label, heading and standfirst follow it down the column. */

.js .chapter .chapter__rule {
  transform: scaleX(0);
  transform-origin: left center;
}

.js .chapter.is-settled .chapter__rule {
  transform: scaleX(1);
  animation: settle-draw 620ms var(--ease-out) var(--settle-delay, 0ms) backwards;
}

.js .chapter > *:not(.chapter__rule) {
  opacity: 0;
}

.js .chapter.is-settled > *:not(.chapter__rule) {
  opacity: 1;
  animation: settle-rise 620ms var(--ease-out) var(--chapter-step, 0ms) backwards;
}

.js .chapter.is-settled > :nth-child(2) {
  --chapter-step: calc(var(--settle-delay, 0ms) + 110ms);
}

.js .chapter.is-settled > :nth-child(3) {
  --chapter-step: calc(var(--settle-delay, 0ms) + 185ms);
}

.js .chapter.is-settled > :nth-child(4) {
  --chapter-step: calc(var(--settle-delay, 0ms) + 260ms);
}

.js .chapter.is-settled > :nth-child(n + 5) {
  --chapter-step: calc(var(--settle-delay, 0ms) + 330ms);
}

/* 3. A print develops from its bottom edge. The clip sits on the frame rather
      than the image, so the image itself stays free to drift and to scale on
      hover. */

.js .hero__art,
.js .frame,
.js .brandcard__img,
.js .person__portrait {
  clip-path: inset(0 0 100% 0);
}

.js .hero__art.is-settled,
.js .frame.is-settled,
.js .brandcard.is-settled .brandcard__img,
.js .person.is-settled .person__portrait {
  clip-path: none;
  animation: settle-print 880ms var(--ease-out) var(--settle-delay, 0ms) backwards;
}

/* The card carries the frame, so the print inside it develops just behind. */

.js .brandcard.is-settled .brandcard__img,
.js .person.is-settled .person__portrait {
  animation-delay: calc(var(--settle-delay, 0ms) + 90ms);
}

/* 4. A card is set down: it arrives from below and settles onto the page. */

.js .unit,
.js .stream,
.js .person,
.js .brandcard {
  opacity: 0;
}

.js .unit.is-settled,
.js .stream.is-settled,
.js .person.is-settled,
.js .brandcard.is-settled {
  opacity: 1;
  animation: settle-lift 640ms var(--ease-out) var(--settle-delay, 0ms) backwards;
}

/* 5. A measured figure is read off a ruled line. The rule is drawn first and
      the quantities land along it, left to right. */

.js .hero__figures {
  position: relative;
  border-top-color: transparent;
}

.js .hero__figures::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left center;
}

.js .hero__figures.is-settled::before {
  transform: scaleX(1);
  animation: settle-draw 760ms var(--ease-out) backwards;
}

.js .hero__figures > div {
  opacity: 0;
}

.js .hero__figures.is-settled > div {
  opacity: 1;
  animation: settle-rise 620ms var(--ease-out) calc(var(--row-delay, 0ms) + 140ms) backwards;
}

/* 6. A dealt list — filings, marks, ledger rows — arrives row by row rather
      than as one slab, in the order it would be read. */

.js .docs .doc,
.js .logos .logos__item,
.js dl.sheet > div,
.js table.sheet tbody tr {
  opacity: 0;
}

.js .docs.is-settled .doc,
.js .logos.is-settled .logos__item,
.js dl.sheet.is-settled > div,
.js table.sheet.is-settled tbody tr {
  opacity: 1;
  animation: settle-rise 520ms var(--ease-out) calc(var(--settle-delay, 0ms) + var(--row-delay, 0ms))
    backwards;
}

/* The record draws its own rules as it is read down. */

.js .timeline__row {
  position: relative;
  opacity: 0;
  border-bottom-color: transparent;
}

.js .timeline__row::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left center;
}

.js .timeline__row.is-settled {
  opacity: 1;
  animation: settle-rise 560ms var(--ease-out) var(--settle-delay, 0ms) backwards;
}

.js .timeline__row.is-settled::after {
  transform: scaleX(1);
  animation: settle-draw 780ms var(--ease-out) calc(var(--settle-delay, 0ms) + 120ms) backwards;
}

/* The rack fills in process order rather than fading in as a block, because
   the order is the content. --fill-delay is written per cell by rbs.js. */

.js .rail .rail__swatch {
  clip-path: inset(100% 0 0 0);
}

.js .rail.is-settled .rail__swatch {
  clip-path: inset(0 0 0 0);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-soft),
    clip-path 520ms var(--ease-out) var(--fill-delay, 0ms);
}

/* --- Drift -------------------------------------------------------------- */

/* The two full-bleed prints hold back very slightly against the scroll, so the
   page has a near and a far plane. Scroll-linked, so it costs no script and
   simply does not happen where the timeline is unsupported. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes drift {
      from {
        transform: translateY(-2.4%) scale(1.07);
      }
      to {
        transform: translateY(2.4%) scale(1.07);
      }
    }

    /* The timeline is named on the frame rather than left as a bare view(),
       because the frame clips its overflow and so would otherwise be read as
       the scrollport — a box that never scrolls, and a drift that never
       moves. Named here, the frame is measured against the page instead. */

    .js .hero__art,
    .js .frame--wide {
      view-timeline-name: --print;
    }

    .js .hero__art img,
    .js .frame--wide img {
      /* Longhands, not the shorthand: the shorthand resets duration to 0s,
         and a scroll-driven animation needs auto to take its length from the
         timeline rather than finishing before it starts. */
      animation-name: drift;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --print;
      animation-range: entry 0% exit 100%;
    }
  }
}

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }

  /* A reader who has asked for stillness should not have to scroll content
     into existence. Every entrance resolves to its finished state up front. */

  .js [data-settle],
  .js .chapter > *:not(.chapter__rule),
  .js .unit,
  .js .stream,
  .js .person,
  .js .brandcard,
  .js .timeline__row,
  .js .hero__figures > div,
  .js .docs .doc,
  .js .logos .logos__item,
  .js dl.sheet > div,
  .js table.sheet tbody tr {
    opacity: 1;
  }

  .js .chapter .chapter__rule,
  .js .hero__figures::before,
  .js .timeline__row::after {
    transform: scaleX(1);
  }

  .js .hero__art,
  .js .frame,
  .js .brandcard__img,
  .js .person__portrait,
  .js .rail .rail__swatch {
    clip-path: none;
  }

  .cell__stage {
    position: static;
  }

  .cell__scroll {
    display: none;
  }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .masthead,
  .drawer,
  .burger,
  .footer__social,
  .cell__scroll {
    display: none;
  }

  body {
    background: #fff;
  }

  /* Nothing on paper has entered from anywhere. */

  .js [data-settle],
  .js .chapter > *:not(.chapter__rule),
  .js .unit,
  .js .stream,
  .js .person,
  .js .brandcard,
  .js .timeline__row,
  .js .hero__figures > div,
  .js .docs .doc,
  .js .logos .logos__item,
  .js dl.sheet > div,
  .js table.sheet tbody tr {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .js .chapter .chapter__rule,
  .js .hero__figures::before,
  .js .timeline__row::after {
    transform: scaleX(1);
  }

  .js .hero__art,
  .js .frame,
  .js .brandcard__img,
  .js .person__portrait,
  .js .rail .rail__swatch {
    clip-path: none;
  }
}