/* El Empaque y el Prospecto
   Pharmaceutical packaging and its folded insert. Flat unmodulated colour
   fields own whole regions; nothing is an accent scattered on neutral. One
   teal family at two depths carries the seven Functional Medicine lines and
   terracotta is reserved by law for home care. */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Ground. Cold white, never cream: this is coated stock, not old paper. */
  --paper: oklch(98.8% 0.003 200);
  --paper-2: oklch(96.4% 0.006 200);
  --paper-3: oklch(93.2% 0.010 198);

  /* Ink */
  --ink: oklch(21% 0.018 215);
  --ink-2: oklch(43% 0.020 215);
  --ink-3: oklch(50% 0.016 212);
  /* Secondary text on the dark footer needs its own value: one token
     cannot clear 4.5:1 against both paper and ink. */
  --on-ink-2: oklch(76% 0.012 210);
  --rule: oklch(84% 0.012 205);
  --rule-strong: oklch(21% 0.018 215);

  /* The package colour, two depths. The hue answers to the client's mark,
     which is oklch(66.3% 0.111 175.6): too light to be a field colour at
     2.91:1 under white text, and too light to be text on paper at 2.84:1, so
     it cannot be the system colour itself. The family sits at 186 instead,
     which reads as the same green as the mark without becoming the generic
     medical green the brief rules out. Lightness and chroma are untouched, so
     every ratio the system was measured at still holds. */
  --teal: oklch(45% 0.098 186);
  --teal-deep: oklch(31% 0.072 188);
  --teal-pale: oklch(93.5% 0.030 182);
  /* One step deeper than --teal-pale. It exists because the pale tint moved
     from being the shelf's hover to being its resting state, and the hover
     then had nowhere to go. */
  --teal-pale-2: oklch(89% 0.045 182);
  --teal-line: oklch(78% 0.055 184);
  --on-teal: oklch(97.8% 0.010 180);
  --on-teal-2: oklch(87% 0.030 182);

  /* Home care only. Never a button, never a link, never a decoration. */
  --terra: oklch(46% 0.148 33);
  --terra-deep: oklch(33% 0.115 33);
  --terra-pale: oklch(94% 0.035 40);
  --on-terra: oklch(97.8% 0.014 40);
  --on-terra-2: oklch(88% 0.045 38);

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1.06rem, 1rem + 0.28vw, 1.19rem);
  --step-1: clamp(1.22rem, 1.11rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.45rem, 1.24rem + 0.95vw, 2rem);
  --step-3: clamp(1.75rem, 1.36rem + 1.75vw, 2.8rem);
  --step-4: clamp(2.1rem, 1.4rem + 3.1vw, 3.9rem);
  --step-5: clamp(2.5rem, 1.3rem + 4.4vw, 4.6rem);

  /* Rhythm */
  --gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
  /* Was 7rem. At that size two adjacent sections put 224px of air between
     them and a page paid it six or seven times over. 4.5rem still reads as
     printed margin, and across a whole site it gives back a viewport. */
  --band: clamp(2.6rem, 1.7rem + 3.5vw, 4.5rem);
  --edge: clamp(1.15rem, 0.5rem + 2.9vw, 4rem);
  --measure: 68ch;
  /* How far a photo overhangs the colour field it sits on. Two values because
     the overhang has to stay proportional to the object: the hero portrait is
     a tall narrow plate where 3.2rem is a visible crossing, while a service
     plate is nearly a metre of image on a desktop and the same distance reads
     as a misalignment rather than a decision. */
  --overhang: clamp(1.4rem, 2.6vw, 3.2rem);
  --overhang-plate: clamp(2.4rem, 6.5vw, 6.5rem);
  --shell: 1320px;

  /* One radius, and it is nearly square: a printed panel has a die-cut, not
     a soft corner. */
  --radius: 2px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 180ms;
  --slow: 620ms;
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is a thin printed strip, so the offset stays small. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--teal-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--teal-line);
  transition: text-decoration-color var(--fast) var(--ease);
}

a:hover {
  text-decoration-color: currentColor;
}

/* Browser surfaces. These ship with defaults that belong to no design
   system, so they are themed like everything else. */
::selection {
  background: var(--teal);
  color: var(--on-teal);
}

:root {
  caret-color: var(--teal);
  scrollbar-color: var(--teal-line) var(--paper-2);
  scrollbar-width: thin;
  accent-color: var(--teal);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--paper-2);
}

::-webkit-scrollbar-thumb {
  background: var(--teal-line);
  border: 3px solid var(--paper-2);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--teal);
}

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

.on-colour :focus-visible {
  outline-color: var(--paper);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: var(--step--1);
}

.skip:focus {
  left: 0;
}

/* --------------------------------------------------------------- layout */

.shell {
  width: min(100% - var(--edge) * 2, var(--shell));
  margin-inline: auto;
}

.stack > * + * {
  margin-top: var(--gap);
}

.prose {
  max-width: var(--measure);
}

.prose p + p {
  margin-top: 0;
}

/* --------------------------------------------------- the package surface */

/* A package is a flat unmodulated colour region that bleeds to both edges.
   No gradient, no shadow, no rounded corner: it is printed board. */
.pkg {
  background: var(--teal);
  color: var(--on-teal);
  position: relative;
}

.pkg--deep {
  background: var(--teal-deep);
}

.pkg--terra {
  background: var(--terra);
  color: var(--on-terra);
}

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

.pkg h1,
.pkg h2,
.pkg h3 {
  color: inherit;
}

.pkg .lede {
  color: var(--on-teal-2);
}

/* Must follow the rule above: both selectors have the same specificity and a
   terracotta band also carries `.pkg`, so source order is what makes the
   secondary text on terracotta warm instead of teal-tinted. */
.pkg--terra .lede {
  color: var(--on-terra-2);
}

/* The identification band. On a real package this strip carries the
   category and the essential facts, ruled off from the artwork above it. */
.idband {
  background: var(--paper);
  color: var(--ink);
  border-block: 1px solid var(--rule-strong);
}

.idband__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.idband__cell {
  padding: 0.95rem var(--gap) 1.05rem;
  border-left: 1px solid var(--rule);
}

.idband__cell:first-child {
  border-left: 0;
  padding-left: 0;
}

.idband__cell:last-child {
  padding-right: 0;
}

.label {
  display: block;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.42rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.pkg .label {
  color: currentColor;
  opacity: 0.72;
}

.idband__value {
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ---------------------------------------------------------------- action */

.action {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.2;
  padding: 1.05rem 1.6rem;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--teal);
  color: var(--on-teal);
  transition:
    background var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

/* On a colour field the action is the only solid paper block, which makes it
   the brightest thing on screen without borrowing the reserved terracotta.
   `.action--paper` is for a colour ground only: on paper it has neither fill
   contrast nor an edge, so it must never be used outside a `.pkg`. */
.pkg .action,
.pkg .action--paper {
  background: var(--paper);
  color: var(--teal-deep);
}

.pkg--terra .action {
  color: var(--terra-deep);
}


@media (hover: hover) {
  .action:hover {
    background: var(--teal-deep);
    color: var(--on-teal);
  }

  .pkg .action:hover,
  .pkg .action--paper:hover {
    background: var(--paper-3);
    color: var(--teal-deep);
  }

  .pkg--terra .action:hover {
    background: var(--terra-pale);
    color: var(--terra-deep);
  }


}

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

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.15rem;
  align-items: center;
}

.action-note {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.6rem;
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 500;
  color: inherit;
  opacity: 0.9;
  text-decoration-color: currentColor;
}

/* A standalone continue link, sized as a real target rather than a bare
   line of text. */
.link-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.6rem;
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--teal-deep);
}

/* ------------------------------------------------------------- masthead */

.masthead {
  background: var(--ink);
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 3.4rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.012em;
  color: var(--paper);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding-block: 0.5rem;
}

/* The mark ships in paper because the masthead is ink. It is the client's own
   artwork with its alpha poured full of one of our tokens, never redrawn. */
.wordmark img {
  height: 1.85rem;
  width: auto;
  flex: none;
}

/* The name and the city keep their own baseline alignment, which the mark
   would otherwise drag off. */
.wordmark__text {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.wordmark__text span {
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-line);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.7rem);
}

.nav a {
  font-family: var(--display);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-decoration: none;
  padding-block: 1.05rem;
  border-bottom: 2px solid transparent;
}

.nav a[aria-current="page"] {
  border-bottom-color: var(--teal-line);
}

@media (hover: hover) {
  .nav a:hover {
    border-bottom-color: var(--paper);
  }
}

.nav__action {
  font-family: var(--display);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 0.62rem 0.95rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--teal);
  color: var(--on-teal);
  border-radius: var(--radius);
  text-decoration: none;
}

@media (hover: hover) {
  .nav__action:hover {
    background: var(--paper);
    color: var(--teal-deep);
  }
}

.nav-toggle {
  display: none;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
}

@media (max-width: 61rem) {
  .nav-toggle {
    display: inline-block;
  }

  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-top: 1px solid var(--ink-2);
    padding: 0.4rem var(--edge) 1.1rem;
  }

  .masthead__inner {
    position: relative;
  }

  .nav[data-open="true"] {
    display: flex;
  }

  .nav a {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--ink-2);
    font-size: 0.98rem;
  }

  .nav__action {
    margin-top: 0.9rem;
    justify-content: center;
    font-size: 0.95rem;
    min-height: 48px;
  }
}

/* ------------------------------------------------------- package head */

/* An interior page's package face. The name is the artwork, the panel beside
   it is the description, so the colour field is never half empty. */
.pkghead {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: clamp(1.6rem, 1rem + 3vw, 4rem);
  align-items: end;
}

.pkghead h1 {
  font-size: var(--step-4);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.032em;
  line-height: 0.94;
  max-width: 15ch;
}

.pkghead__panel {
  padding-bottom: 0.35rem;
}

.pkghead__panel .lede {
  margin-bottom: 1.7rem;
  max-width: 40ch;
}

.pkghead__panel .note {
  margin-top: 1.6rem;
}

@media (max-width: 53rem) {
  .pkghead {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .pkghead__panel {
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding-block: clamp(1.9rem, 1rem + 2.8vw, 3.2rem) 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: clamp(1.5rem, 0.8rem + 2.6vw, 3.4rem);
  align-items: end;
}

.hero__name {
  font-size: var(--step-5);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 0.88;
  margin-bottom: 1.15rem;
}

.hero__specialty {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.25;
  color: var(--on-teal);
  margin: 0 0 1.05rem;
}

.hero__statement {
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.5;
  max-width: 42ch;
  margin-bottom: 1.6rem;
  color: var(--on-teal-2);
}

.hero__actions {
  padding-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
}

/* The portrait breaks the bottom edge of the colour field and crosses into
   the paper below, the way a product photo overhangs its board. */
/* The photo hangs past the bottom of the colour field and onto the paper,
   the way a product shot overhangs its board. */
.hero__figure {
  position: relative;
  z-index: 2;
  margin-bottom: calc(-1 * var(--overhang));
  align-self: end;
}

/* The band directly under the hero makes room for that overhang. */
.after-hero {
  padding-top: calc(var(--overhang) + clamp(1.1rem, 0.8rem + 1.2vw, 1.8rem));
}

/* The portrait shows whole, never cropped. It used to be forced to a fixed
   height with object-fit, which cut him off at the chest.

   What keeps that from doubling the hero is the width, not a crop: at the
   figure column's full width a 2:3 portrait stands 740px tall and the hero
   goes from 528px to 756px. Capped at 21rem it is 503px tall and the hero
   measures the same 528px it did when the photo was being cut. The cap is the
   thing to preserve; raising it costs scroll on the first screen. */
.hero__figure img {
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin-left: auto;
  border-radius: var(--radius);
}

@media (max-width: 53rem) {
  .hero__figure img {
    /* One column below this width, so the portrait fills it and lands on the
       same two margins as everything above it. Keeping the 21rem cap here left
       it nineteen pixels short of the right margin, which reads as a mistake
       rather than as a decision. */
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 53rem) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero__figure {
    max-width: 22rem;
    margin-inline: auto 0;
  }

  .after-hero {
    padding-top: calc(var(--overhang) + 1.6rem);
  }

  .hero__actions {
    padding-bottom: 2.2rem;
  }
}

/* ------------------------------------------------------- composition panel */

/* "Qué contiene esta consulta", set as a real ruled table because that is
   what a composition panel is. */
.composition {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: left;
}

.composition caption {
  text-align: left;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 0.85rem;
}

.composition th,
.composition td {
  padding: 0.72rem 1.1rem 0.72rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.composition thead th {
  border-bottom: 1.5px solid var(--rule-strong);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 0.6rem;
}

.composition tbody th {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: -0.004em;
  color: var(--ink);
  width: 34%;
}

.composition td {
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.5;
}

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

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

@media (max-width: 40rem) {
  .composition tbody th {
    width: 42%;
  }
}

/* ------------------------------------------------------------- prospecto */

/* The folded insert: numbered sections with a hanging rail. The numbers are
   how a reader navigates an insert, so they carry information here. */
.prospecto {
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr);
  gap: 0 clamp(1.2rem, 0.6rem + 2vw, 3rem);
  padding-block: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  border-top: 1px solid var(--rule);
}

.step:first-child {
  border-top: 1.5px solid var(--rule-strong);
}

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

/* The rail is the insert's margin: number above the section's own name. It
   sits beside the heading, never above it. */
.step__rail {
  color: var(--teal);
}

.step__num {
  display: block;
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.step__name {
  display: block;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
}

.pkg .step__name {
  color: currentColor;
  opacity: 0.75;
  border-top-color: currentColor;
}

.step h2,
.step h3 {
  font-size: var(--step-2);
  margin-bottom: 0.85rem;
}

.step__body {
  max-width: var(--measure);
  color: var(--ink);
}

.step__body p + p {
  margin-top: 0.9em;
}

@media (max-width: 44rem) {
  .step {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  /* On a phone the rail becomes a running head: number and section name on
     one line, still not a label stacked above the heading. */
  .step__rail {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
  }

  .step__num {
    font-size: var(--step-1);
  }

  .step__name {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* A short strip of measured fields, used where the insert lists what gets
   recorded. Empty by design: patient values are never published. */
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1.5px solid var(--rule-strong);
  margin-top: 1.6rem;
}

.fields__item {
  padding: 1rem 1.1rem 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}

.fields__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
  display: block;
  margin-bottom: 0.3rem;
}

.fields__meta {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ------------------------------------------------------------- the shelf */

/* The services index: every line visible in one pass, flagship at eye level.
   Not a grid of identical cards; the hierarchy is carried by scale. */
.shelf {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

/* Fixed column counts, not auto-fit: there are always six secondary lines,
   so three and two both fill the grid exactly and no empty cell ever shows
   the rule colour through. */
.shelf--two {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

/* The cells are pale teal at rest, not white. On a paper band a white cell is
   two and a half points of lightness away from its ground, which is not enough
   to read as a panel: the shelf looked like a plain table rather than like six
   things on offer. The tint also ties them to the package colour, under a
   flagship that carries it at full strength. */
.spine {
  background: var(--teal-pale);
  padding: clamp(1.25rem, 0.9rem + 1.3vw, 1.75rem) 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background var(--fast) var(--ease);
}

.shelf--two .spine {
  padding-inline: clamp(1.1rem, 0.6rem + 1.6vw, 1.9rem);
}



.spine__name {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.12;
  color: var(--ink);
  order: 1;
}

/* The category reads as the package's own classification, printed under the
   name the way a box prints its line, never as a label above a heading. */
.spine__cat {
  order: 2;
  margin-bottom: 0.1rem;
}

.spine__summary {
  order: 3;
}

.spine__more {
  order: 4;
}

/* The cross-link shelf at the foot of a line of care. The reader arrived here
   having already chosen something, so these rows are navigation: the name and
   its category are enough, and six summaries are half a viewport of text
   nobody asked for. The selling shelves on the home and the index keep theirs. */
.shelf--compact .spine__summary {
  display: none;
}

.shelf--compact .spine {
  gap: 0.35rem;
}

.spine__summary {
  font-size: var(--step--1);
  line-height: 1.52;
  color: var(--ink-2);
  max-width: 46ch;
}

.spine__more {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-top: auto;
  padding-top: 0.7rem;
}

@media (hover: hover) {
  .spine:hover {
    background: var(--teal-pale-2);
  }
}

/* The flagship sits on its own colour, at eye level, at a larger scale. */
.spine--lead {
  background: var(--teal);
  color: var(--on-teal);
  padding: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem) clamp(1.2rem, 0.6rem + 2vw, 2.4rem);
  grid-column: 1 / -1;
}

.spine--lead .spine__name {
  color: var(--on-teal);
  font-size: var(--step-3);
  font-stretch: 106%;
}

.spine--lead .spine__summary {
  color: var(--on-teal-2);
  font-size: var(--step-0);
  max-width: 52ch;
}

.spine--lead .spine__more,
.spine--lead .label {
  color: var(--on-teal);
}

@media (hover: hover) {
  .spine--lead:hover {
    background: var(--teal-deep);
  }
}

.spine--terra {
  background: var(--terra);
  color: var(--on-terra);
  grid-column: 1 / -1;
  padding-inline: clamp(1.2rem, 0.6rem + 2vw, 2.4rem);
}

.spine--terra .spine__name {
  color: var(--on-terra);
}

.spine--terra .spine__summary {
  color: var(--on-terra-2);
}

.spine--terra .spine__more,
.spine--terra .label {
  color: var(--on-terra);
}

@media (hover: hover) {
  .spine--terra:hover {
    background: var(--terra-deep);
  }
}

/* -------------------------------------------------------------- sections */

.band {
  padding-block: var(--band);
}

.band--tight {
  padding-block: clamp(1.9rem, 1.3rem + 2.3vw, 3rem);
}

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

.band__head {
  max-width: 30ch;
  margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}

.band__head h2 {
  font-size: var(--step-3);
  margin-bottom: 0.9rem;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.44;
  max-width: 46ch;
  color: var(--ink-2);
}

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.6rem, 1rem + 2.2vw, 3rem);
  border-top: 1.5px solid var(--rule-strong);
  padding-top: 1.7rem;
}

.columns h3 {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.75rem;
}

.columns p {
  font-size: var(--step--1);
  line-height: 1.56;
  color: var(--ink);
  max-width: 40ch;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(1.8rem, 1rem + 3vw, 4rem);
  align-items: start;
}

@media (max-width: 53rem) {
  .split {
    grid-template-columns: 1fr;
  }
}

.figure {
  margin: 0;
}

.figure img {
  width: 100%;
  border-radius: var(--radius);
}

/* A figure beside a column of text must not outrun it by half a screen. */
.split .figure img {
  max-height: 34rem;
  object-fit: cover;
  object-position: 50% 18%;
}

.figure figcaption {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  margin-top: 0.7rem;
}

.note {
  font-family: var(--display);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2);
  border-left: 1px solid var(--rule-strong);
  padding-left: 1.05rem;
  max-width: 52ch;
}

.pkg .note {
  color: inherit;
  border-left-color: currentColor;
}

/* The one place terracotta is allowed to exist. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-terra);
  font-variant-numeric: tabular-nums lining-nums;
}

.stamp::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: currentColor;
}

/* ------------------------------------------------------------ utilities */

/* These replace the inline font-size and margin attributes the sections were
   carrying; a single visual system should not live half in the stylesheet. */
.band__title {
  font-size: var(--step-3);
  margin-bottom: 1rem;
}

.band__title--sm {
  font-size: var(--step-2);
}

.band__title--lead {
  margin-bottom: 1.2rem;
}

.lede--gap {
  margin-bottom: 1.8rem;
}

.note--after {
  margin-top: 1.5rem;
}

.after-prose {
  margin-top: 1.2rem;
}

.after-list {
  margin-top: 1.7rem;
}

.doctor-sub {
  font-size: var(--step-2);
  margin: 2.1rem 0 0.8rem;
}


/* A service plate overhangs the colour field beneath it, exactly the way the
   hero portrait overhangs the package edge. This is the same law applied to
   the other object in the system that sits on a printed field, not a second
   effect: the overhang distance is the same `--overhang` token, and the field
   below adds it to its own padding rather than being pushed around by it.

   The plate must keep `z-index` above the field, and the field must not carry
   a background that paints over it. Both hold today; if either changes, the
   image disappears under the colour rather than crossing it. */
/* A plate is cropped to a fixed strip rather than allowed to set its own
   height, exactly as the hero portrait is. At the shell's full width a 3:2
   plate stands 880px tall on a desktop, which is a whole viewport spent on a
   supporting illustration. The cap makes it a band the eye crosses instead of
   a picture it has to scroll past. */
.plate .figure img {
  height: clamp(14rem, 40vh, 25rem);
  object-fit: cover;
}

.plate {
  position: relative;
  z-index: 2;
  /* Tighter above than a normal band: the plate is answering the insert it
     follows, and a full band of air above it leaves the image stranded. */
  padding-top: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  padding-bottom: 0;
  margin-bottom: calc(-1 * var(--overhang-plate));
}

/* The overhang already separates the field from the plate, so this band does
   not also need its own full top padding: it needs to clear the crossing and
   breathe once. */
.after-plate {
  padding-top: calc(var(--overhang-plate) + 2.2rem);
}

/* The coverage list replaces the map this site used to carry. There is no
   consulting room to point at, so the answer to "where" is a list of places he
   travels to, set as a printed schedule rather than as prose. */
.coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.4rem, 1rem + 1.8vw, 2.6rem);
  margin-top: 2.2rem;
  border-top: 1.5px solid var(--rule-strong);
  padding-top: 1.5rem;
}

.coverage__list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}

.coverage__list li {
  font-size: var(--step--1);
  line-height: 1.5;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--rule);
}

.coverage__list li:last-child {
  border-bottom: 0;
}

/* A short ordered sequence. Numbered because the order is the meaning: the
   visitor writes, they agree a time, he arrives. */
.sequence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  border-top: 1.5px solid var(--rule-strong);
  padding-top: 1.6rem;
}

.sequence__num {
  display: block;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 0.7rem;
}

.sequence__name {
  display: block;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.sequence__text {
  display: block;
  font-size: var(--step--1);
  line-height: 1.56;
  color: var(--ink-2);
  max-width: 34ch;
}

/* --------------------------------------------------------------- listing */




.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1.5px solid var(--rule-strong);
}

.timeline li {
  display: grid;
  grid-template-columns: minmax(9rem, 0.34fr) minmax(0, 1fr);
  gap: 0 var(--gap);
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rule);
}

.timeline dt,
.timeline__term {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
}

.timeline__desc {
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.5;
}

@media (max-width: 40rem) {
  .timeline li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* ---------------------------------------------------------------- footer */

.footer {
  background: var(--ink);
  color: var(--paper-3);
  padding-block: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem) 1.8rem;
  font-size: var(--step--1);
}

.footer a {
  color: var(--paper);
  text-decoration-color: var(--ink-3);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--gap);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ink-2);
}

.footer .label {
  color: var(--on-ink-2);
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 0.45rem put 25px between the centres of two 18px links: inside WCAG 2.2
     target-size by a rounding error and awkward under a thumb. */
  gap: 0.7rem;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem var(--gap);
  padding-top: 1.4rem;
  color: var(--on-ink-2);
  font-family: var(--display);
  font-size: 0.76rem;
}

/* ------------------------------------------------------- floating action */

/* The floating action, on every route and on screen from the first paint.

   It carries no JavaScript at all now. It used to be mobile-only and gated by
   an IntersectionObserver on the hero action, which meant a visitor who never
   scrolled, or who had JavaScript off, never saw it.

   Ink, not teal. This is the one element that floats over every ground the
   system has, and a teal button vanishes on a teal package band. Ink is also
   what the other two pinned surfaces are made of, the masthead and the footer,
   so the rule is legible: anything pinned to the viewport is ink. The hairline
   is what keeps it from dissolving into the footer, which is ink too, and it
   is the only border in the system that encloses rather than separates.

   Corner-anchored and compact rather than spanning the viewport: it is on
   screen permanently, and a full-width bar would tax every page for its whole
   length. */
.float {
  position: fixed;
  inset-inline-end: var(--edge);
  bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--on-ink-2);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--radius);
  text-decoration: none;
  min-height: 48px;
  transition: background var(--fast) var(--ease);
}

.float:hover {
  background: var(--teal-deep);
}

.float svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: currentColor;
}

/* On the narrowest phones the button is trimmed rather than stripped. Hiding
   the label was the first attempt and it is a trap: the mark beside it is
   aria-hidden, so a label removed with `display: none` leaves an anchor with
   no accessible name at all. Shrinking keeps one visible, readable label at
   every width and costs nothing. */
@media (max-width: 22rem) {
  .float {
    padding: 0.72rem 0.85rem;
    font-size: 0.85rem;
    gap: 0.45rem;
  }
}

/* The float sits over the last thing on the page, so the footer makes room for
   it rather than being covered by it. The clearance has to beat the button's
   own height plus its offset from the viewport bottom, not just look roomy:
   48px of button, 14px of offset, and a gap so the two do not touch. */
.footer__base {
  padding-bottom: 5.75rem;
}

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

/* One authored moment: the colour field prints in, the way ink lays down on
   board. Everything is visible by default, so no JavaScript means no loss. */
@media (prefers-reduced-motion: no-preference) {
  .print {
    clip-path: inset(0 0 0 0);
  }

  .print[data-print="pending"] {
    clip-path: inset(0 0 100% 0);
  }

  .print[data-print="done"] {
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--slow) var(--ease);
  }

  .rise[data-print="pending"] > * {
    opacity: 0;
    transform: translateY(0.7rem);
  }

  .rise[data-print="done"] > * {
    opacity: 1;
    transform: none;
    transition:
      opacity 460ms var(--ease),
      transform 520ms var(--ease);
  }

  .rise[data-print="done"] > *:nth-child(2) {
    transition-delay: 70ms;
  }

  .rise[data-print="done"] > *:nth-child(3) {
    transition-delay: 140ms;
  }

  .rise[data-print="done"] > *:nth-child(4) {
    transition-delay: 210ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ misc */

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

@media print {
  .masthead,
  .float,
  .nav-toggle {
    display: none;
  }

  .pkg {
    background: none;
    color: var(--ink);
  }
}