/* Inner pages (Info, Services, About, Blog, Shop, Contact).
   Builds only on tokens.css, base.css and components.css. Loaded after them on inner pages only,
   so the Home page is untouched. */

/* ---------- Shared bits ---------- */

.section-pad {
  padding-block: var(--space-section);
}

.frame--portrait { aspect-ratio: 4 / 5; }
.frame--land { aspect-ratio: 3 / 2; }
.frame--wide { aspect-ratio: 2 / 1; }
.frame--portrait img,
.frame--land img,
.frame--wide img { object-position: 50% 50%; }

.sublabel {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  max-width: none;
  color: var(--ink-soft);
}

.sublabel::before {
  content: "";
  flex: none;
  width: clamp(32px, 5vw, 64px);
  height: 1px;
  background: var(--clay);
}

.kicker {
  color: var(--clay-deep);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.75;
}

.prose p + p {
  margin-top: var(--space-m);
}

.mini-title {
  margin-bottom: var(--space-m);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--sage-deep);
}

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

.phero {
  padding-top: clamp(28px, 4.2vw, 64px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

.phero__grid {
  row-gap: var(--space-xl);
}

.phero__copy {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}

.phero__title {
  font-size: clamp(2.5rem, 9.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
}

.phero__sub {
  margin-top: clamp(24px, 3vw, 40px);
}

.phero__aside {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule-strong);
  max-width: 30ch;
}

.phero__aside .label {
  color: var(--sage-deep);
}

.phero__aside .label span {
  display: block;
}

.phero__aside em {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.25;
  color: var(--charcoal);
}

.phero__figure {
  grid-column: 1 / -1;
}

.phero .frame img {
  object-position: 50% 40%;
}

@media (min-width: 640px) {
  .phero__figure { grid-column: 3 / -1; }
}

@media (min-width: 960px) {
  .phero__grid { row-gap: 0; align-items: stretch; }
  .phero__title { font-size: min(4.75rem, 5.3vw); }
  .phero__copy { grid-column: 1 / span 6; justify-content: space-between; }
  .phero__figure { grid-column: 8 / -1; }
  .phero__figure .frame { aspect-ratio: 4 / 4.4; }
  .phero--narrow-media .phero__copy { grid-column: 1 / span 7; }
  .phero--narrow-media .phero__figure { grid-column: 9 / -1; }
  .phero--land .phero__figure { grid-column: 7 / -1; align-self: end; }
  .phero--land .phero__figure .frame { aspect-ratio: 3 / 2; }
}

/* Typographic hero + wide band (Info) */

.phero--type .phero__copy {
  grid-column: 1 / -1;
}

.phero--type .phero__title {
  max-width: 14ch;
}

.band-img {
  padding-bottom: var(--space-section);
}

.band-img .frame {
  aspect-ratio: 3 / 2;
}

@media (min-width: 720px) {
  .band-img .frame { aspect-ratio: 2 / 1; }
}

@media (min-width: 960px) {
  .phero--type .phero__title { font-size: min(5.25rem, 6vw); }
  .phero--type .phero__copy { grid-column: 1 / span 9; }
  .phero--type .phero__note { grid-column: 10 / -1; align-self: end; }
}

.phero__note {
  grid-column: 1 / -1;
  color: var(--ink-soft);
}

/* ---------- Offerings: spread (Info) ---------- */

.spread__grid {
  row-gap: var(--space-3xl);
}

.offer-col {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}

.offer-col .frame {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-l);
}

.offer__num {
  display: block;
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--clay);
}

.offer__title {
  font-size: var(--step-4);
  line-height: 1.05;
}

.offer__eyebrow {
  margin-top: var(--space-m);
  max-width: 38ch;
}

.offer__body {
  margin-top: var(--space-m);
}

.offer__meta {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

.offer__meta dt {
  margin-bottom: var(--space-3xs);
  color: var(--sage-deep);
}

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

.offer__list li {
  position: relative;
  padding-left: 22px;
  max-width: 60ch;
}

.offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--clay);
}

.offer__list strong {
  font-weight: 500;
}

.offer__cta {
  margin-top: auto;
  padding-top: var(--space-xl);
}

@media (min-width: 960px) {
  .spread__grid { row-gap: 0; }
  .offer-col:first-child { grid-column: 1 / span 6; padding-right: var(--space-l); }
  .offer-col:last-child {
    grid-column: 7 / -1;
    padding-left: calc(var(--space-l) + var(--col-gap));
    margin-left: calc(var(--col-gap) * -1);
    border-left: 1px solid var(--rule);
  }
  .offer-col:last-child .frame { aspect-ratio: 4 / 3.6; }
  .offer-col:first-child .frame { aspect-ratio: 4 / 3; }
}

/* Logos row */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-l);
}

.logos li {
  display: flex;
  align-items: center;
}

.logos img {
  width: auto;
  height: 28px;
}

.logos .logo--marini { height: 38px; }
.logos .logo--isclinical { height: 22px; }

/* ---------- Offerings: rows (Services) ---------- */

.offer-row {
  padding-block: var(--space-section);
}

.offer-row + .offer-row {
  border-top: 1px solid var(--rule);
}

.offer-row__grid {
  row-gap: var(--space-xl);
}

.offer-row__media,
.offer-row__body {
  grid-column: 1 / -1;
}

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

.offer-row__media .caption {
  margin-top: var(--space-s);
}

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.feature {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-s) var(--space-m) 0;
  border-bottom: 1px solid var(--rule);
}

.feature:nth-child(even) {
  padding-left: var(--space-m);
  border-left: 1px solid var(--rule);
}

.feature .icon {
  width: 30px;
  height: 30px;
  color: var(--clay-deep);
}

.feature__label {
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-wrap: balance;
}

.feature__text {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-soft);
}

.features--icons .feature {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.offer-block {
  margin-top: var(--space-xl);
}

@media (min-width: 640px) {
  .features--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features--icons .feature { grid-template-columns: 1fr; align-items: start; }
  .features--icons .feature:nth-child(even) { padding-left: 0; border-left: 0; }
  .features--icons .feature:not(:nth-child(3n + 1)) { padding-left: var(--space-m); border-left: 1px solid var(--rule); }
}

@media (min-width: 960px) {
  .offer-row__grid { row-gap: 0; align-items: start; }
  .offer-row__media { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h-compact) + 32px); }
  .offer-row__body { grid-column: 7 / -1; }
  .offer-row--flip .offer-row__media { grid-column: 8 / -1; grid-row: 1; }
  .offer-row--flip .offer-row__body { grid-column: 1 / span 6; grid-row: 1; }
  .features--icons { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .features--icons .feature:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .features--icons .feature:not(:first-child) { padding-left: var(--space-s); border-left: 1px solid var(--rule); }
}

/* Skincare lines strip */

.lines {
  border-block: 1px solid var(--rule);
}

.lines__in {
  display: grid;
  gap: var(--space-l);
  padding-block: clamp(32px, 4vw, 56px);
}

.lines__label {
  color: var(--sage-deep);
}

.lines__list {
  display: grid;
  grid-template-columns: 1fr;
}

.lines__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: var(--space-m);
}

.lines__list li + li {
  border-top: 1px solid var(--rule);
}

.lines__list img {
  width: auto;
  height: 34px;
}

.lines__list .logo--marini { height: 56px; }
.lines__list .logo--isclinical { height: 28px; }

@media (min-width: 720px) {
  .lines__in { grid-template-columns: 1fr 3fr; align-items: center; }
  .lines__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lines__list li + li { border-top: 0; border-left: 1px solid var(--rule); }
}

/* ---------- Closing banner ---------- */

.closing {
  background: var(--charcoal);
  color: var(--ivory);
}

.closing__grid {
  row-gap: var(--space-xl);
  padding-block: var(--space-block);
}

.closing__media {
  grid-column: 1 / -1;
}

.closing__media .frame {
  aspect-ratio: 3 / 2;
  background: #2a3536;
}

.closing__body {
  grid-column: 1 / -1;
  align-self: center;
}

.closing__quote {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-style: italic;
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 18ch;
}

.closing__title {
  font-size: var(--step-4);
  line-height: 1.08;
  max-width: 16ch;
}

.closing__sub {
  margin-top: var(--space-m);
  color: var(--on-dark-soft);
}

.closing__by {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-l);
  color: var(--on-dark-soft);
}

.closing__by::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--clay);
}

.closing__cta {
  margin-top: var(--space-xl);
}

.closing .btn--ghost {
  color: var(--ivory);
  border-color: var(--ivory);
}

.closing .btn--ghost:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--charcoal);
}

@media (min-width: 960px) {
  .closing__grid { padding-block: 0; row-gap: 0; }
  .closing__media { grid-column: 1 / span 5; }
  .closing__media .frame { aspect-ratio: 4 / 4.2; height: 100%; }
  .closing__body { grid-column: 7 / -1; padding-block: var(--space-3xl); }
}

/* ---------- About ---------- */

.about-hero .frame {
  aspect-ratio: 1061 / 802;
}

.about-hero .frame img {
  object-position: 16% 30%;
}

@media (min-width: 960px) {
  .about-hero .phero__copy { grid-column: 1 / span 5; }
  .about-hero .phero__figure { grid-column: 6 / -1; }
  .about-hero .phero__figure .frame { aspect-ratio: 1061 / 802; }
}

.story__grid {
  row-gap: var(--space-2xl);
}

.collage {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: start;
}

.collage__quote {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  font-weight: 300;
  line-height: 1.15;
  color: var(--clay);
}

.collage__a { grid-column: 1 / span 4; }
.collage__b { grid-column: 5 / span 2; margin-top: var(--space-2xl); }
.collage__c { grid-column: 2 / span 5; }

.collage .frame { aspect-ratio: 4 / 5; }
.collage__c .frame { aspect-ratio: 3 / 2; }

.story__body {
  grid-column: 1 / -1;
}

.story__title {
  font-size: var(--step-4);
  line-height: 1.06;
  margin-bottom: var(--space-l);
  max-width: 16ch;
}

@media (min-width: 960px) {
  .story__grid { row-gap: 0; align-items: start; }
  .collage { grid-column: 1 / span 6; }
  .story__body { grid-column: 8 / -1; padding-top: var(--space-xl); }
}

/* Clearly marked placeholder for client assets/copy we do not have yet */

.pending {
  display: grid;
  place-content: center;
  gap: var(--space-2xs);
  height: 100%;
  padding: var(--space-m);
  border: 1px dashed var(--field-line);
  background: #efe7da;
  color: var(--ink-soft);
  text-align: center;
  font-size: var(--step--1);
  line-height: 1.5;
}

.pending strong {
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--clay-deep);
}

.pending p {
  margin-inline: auto;
  max-width: 34ch;
}

.pending--block {
  display: block;
  text-align: left;
  padding: var(--space-l);
}

.pending--block p {
  margin: var(--space-2xs) 0 0;
  max-width: 60ch;
}

/* Philosophy split (About) */

.split__grid {
  row-gap: var(--space-xl);
}

.split__media,
.split__body {
  grid-column: 1 / -1;
}

.split__title {
  font-size: var(--step-5);
  line-height: 1.02;
  margin-bottom: var(--space-l);
}

@media (min-width: 960px) {
  .split__grid { row-gap: 0; align-items: center; }
  .split__media { grid-column: 1 / span 7; }
  .split__body { grid-column: 9 / -1; }
}

/* ---------- Blog ---------- */

.filters {
  border-block: 1px solid var(--rule);
}

.filters__in {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-s);
}

.filters__list {
  display: flex;
  gap: 4px var(--space-m);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.filters__list::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color var(--dur-s) ease;
}

.chip:hover { color: var(--charcoal); }

.chip[aria-pressed="true"] {
  color: var(--clay-deep);
}

.chip[aria-pressed="true"] .link-u::after {
  transform: scaleX(1);
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search .icon {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  color: var(--ink-soft);
  pointer-events: none;
}

.search input {
  width: 100%;
  min-height: 44px;
  padding: 8px 0 8px 32px;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  background: transparent;
  color: var(--charcoal);
}

.search input::placeholder { color: var(--ink-soft); opacity: 1; }

.search input:focus-visible {
  outline: 2px solid var(--clay-deep);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .filters__in { grid-template-columns: 1fr minmax(220px, 280px); align-items: center; gap: var(--space-xl); }
  .filters__list { margin: 0; padding: 0; overflow: visible; flex-wrap: wrap; }
}

.posts {
  padding-block: var(--space-block) var(--space-section);
}

.posts__count {
  margin-bottom: var(--space-l);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.posts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl) var(--col-gap);
}

.post-card {
  display: grid;
  align-content: start;
  gap: var(--space-s);
}

.post-card[hidden] { display: none; }

.post-card .frame {
  aspect-ratio: 4 / 5;
  margin-bottom: var(--space-2xs);
}

.post-card__cat {
  color: var(--sage-deep);
}

.post-card__title {
  font-size: var(--step-3);
  line-height: 1.1;
}

.post-card__title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-m) var(--ease-out), color var(--dur-s) ease;
}

.post-card__title a:hover,
.post-card__title a:focus-visible { text-decoration-color: currentColor; }

.post-card__excerpt {
  color: var(--ink-soft);
}

.post-card .text-link {
  justify-self: start;
}

.post-card .frame img {
  transition: transform var(--dur-l) var(--ease-out);
}

.post-card:hover .frame img {
  transform: scale(1.03);
}

@media (min-width: 720px) {
  .posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts__grid .post-card:nth-child(even) { margin-top: var(--space-3xl); }
  .is-filtered .post-card:nth-child(even) { margin-top: 0; }
}

@media (min-width: 1100px) {
  .posts__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-3xl); }
  .posts__grid .post-card { grid-column: span 4; margin-top: 0; }
  .posts__grid .post-card:nth-child(even) { margin-top: 0; }
  .posts__grid:not(.is-filtered) .post-card:nth-child(1) { grid-column: 1 / span 7; }
  .posts__grid:not(.is-filtered) .post-card:nth-child(1) .frame { aspect-ratio: 3 / 2; }
  .posts__grid:not(.is-filtered) .post-card:nth-child(2) { grid-column: 9 / span 4; margin-top: var(--space-4xl); }
  .posts__grid:not(.is-filtered) .post-card:nth-child(3) { grid-column: 1 / span 4; }
  .posts__grid:not(.is-filtered) .post-card:nth-child(4) { grid-column: 5 / span 4; margin-top: var(--space-3xl); }
  .posts__grid:not(.is-filtered) .post-card:nth-child(5) { grid-column: 9 / span 4; }
}

.posts__empty {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

.posts__empty[hidden] { display: none; }

/* Newsletter band */

.newsletter {
  background: var(--charcoal);
  color: var(--ivory);
}

.newsletter__grid {
  row-gap: var(--space-xl);
  padding-block: var(--space-section);
}

.newsletter__main {
  grid-column: 1 / -1;
}

.newsletter__title {
  font-size: var(--step-4);
  line-height: 1.06;
}

.newsletter__body {
  margin-top: var(--space-m);
  color: var(--on-dark-soft);
}

.newsletter__form {
  margin-top: var(--space-l);
  max-width: 520px;
}

.newsletter__row {
  display: flex;
  border: 1px solid rgba(247, 241, 231, 0.6);
  border-radius: var(--radius);
}

.newsletter__row input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: var(--ivory);
}

.newsletter__row input::placeholder { color: var(--on-dark-soft); opacity: 1; }

.newsletter__row input:focus-visible,
.newsletter__row button:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.newsletter__row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 52px;
  border-left: 1px solid rgba(247, 241, 231, 0.6);
  color: var(--ivory);
  transition: background-color var(--dur-s) ease, color var(--dur-s) ease;
}

.newsletter__row button:hover {
  background: var(--ivory);
  color: var(--charcoal);
}

.newsletter__status {
  min-height: 1.5em;
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--on-dark-soft);
}

.newsletter__aside {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  max-width: 14ch;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule-on-dark);
}

@media (min-width: 960px) {
  .newsletter__main { grid-column: 1 / span 6; }
  .newsletter__aside { grid-column: 9 / -1; align-self: end; }
}

/* Blog post */

.article-head {
  padding-top: clamp(28px, 4.2vw, 64px);
}

.article-head__grid {
  row-gap: var(--space-l);
}

.article-head__back,
.article-head__copy,
.article-head__figure {
  grid-column: 1 / -1;
}

.article-head__title {
  margin-top: var(--space-m);
  font-size: clamp(2.25rem, 7.6vw, 4.5rem);
  line-height: 1.04;
  max-width: 18ch;
}

.article-head__lede {
  margin-top: var(--space-l);
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--ink-soft);
}

.article-head__figure {
  margin-top: var(--space-xl);
}

.article-head__figure .frame {
  aspect-ratio: 3 / 2;
}

.article-body {
  padding-block: var(--space-block) var(--space-section);
}

.article-body__in {
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  .article-head__copy { grid-column: 2 / span 9; }
  .article-head__back { grid-column: 2 / -1; }
  .article-body__in { grid-column: 3 / span 7; }
}

.more {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-block) var(--space-section);
}

.more__title {
  font-size: var(--step-3);
  margin-bottom: var(--space-xl);
}

.more__list {
  display: grid;
  gap: var(--space-l);
}

.more__item a {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-m);
  align-items: center;
}

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

.more__item h3 {
  font-size: var(--step-2);
  line-height: 1.15;
}

.more__item .label {
  display: block;
  margin-bottom: var(--space-3xs);
  color: var(--sage-deep);
  font-size: var(--step--2);
}

.more__item a:hover h3 {
  color: var(--clay-deep);
}

@media (min-width: 720px) {
  .more__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
  .more__item a { grid-template-columns: 1fr; align-items: start; gap: var(--space-s); }
  .more__item .frame { aspect-ratio: 3 / 2; }
}

/* ---------- Shop (Phase 2) ---------- */

.phase-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-l);
  padding: 10px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 46ch;
}

.phase-note .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--clay-deep);
}

.phero__actions {
  margin-top: clamp(28px, 3.4vw, 48px);
}

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

.shop-compact { display: none; }

html.shop-query .phero,
html.shop-query .brands { display: none; }

html.shop-query .shop-compact {
  display: block;
  padding: clamp(24px, 4vw, 40px) 0 4px;
}

.shop-compact__title {
  margin: 4px 0 0;
  font-size: var(--step-4);
  font-weight: 300;
}

#shop-results { scroll-margin-top: calc(var(--header-h-compact) + 16px); }

.brand-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: var(--space-m);
}

.brand-toolbar .shop-cat-chips { flex: 1 1 240px; }

.not-found { padding-top: clamp(36px, 6vw, 72px); }

.not-found h1 {
  margin: 8px 0 var(--space-s);
  font-size: var(--step-4);
  font-weight: 300;
  max-width: 16ch;
}

.not-found__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: var(--space-l) 0 0;
  padding: 0;
  list-style: none;
}

.brand-row {
  border-bottom: 1px solid var(--rule);
}

.brand-row__in {
  display: grid;
  gap: var(--space-m);
  align-items: center;
  padding-block: clamp(28px, 4vw, 56px);
}

.brand-row__logo img {
  width: auto;
  height: 40px;
}

.brand-row__logo .logo--marini { height: 72px; }
.brand-row__logo .logo--isclinical { height: 34px; }

.brand-row__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.1;
}

@media (max-width: 959px) {
  .brands {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .brand-row__in {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px var(--gutter);
  }

  .brand-row__logo img,
  .brand-row__logo .logo--marini { height: 32px; }
  .brand-row__logo .logo--isclinical { height: 20px; }
  .brand-row__logo .logo--pavise { height: 28px; }

  .brand-row__name { font-size: var(--step-2); }

  .product-page { padding-top: 8px; }

  .product-detail {
    display: flex;
    flex-direction: column;
  }

  .product-gallery { order: 2; }

  .product-detail__info { order: 1; }

  .product-detail__title { font-size: clamp(2rem, 8vw, 2.6rem); }

  .product-detail__buy { margin-top: var(--space-s); }

  .crumbs ol { margin-bottom: 8px; }
}

@media (min-width: 720px) and (max-width: 959px) {
  .brand-row__in { display: flex; }
}

@media (min-width: 960px) {
  .brand-row__in { grid-template-columns: 4fr 5fr 3fr; }
  .brand-row .text-link { justify-self: end; }

  [data-shop="brand"] .shop-cat-chips {
    flex-wrap: wrap;
    overflow: visible;
  }
}

.catalog__grid {
  row-gap: var(--space-2xl);
}

.catalog__intro {
  grid-column: 1 / -1;
}

.catalog__title {
  font-size: var(--step-4);
  line-height: 1.06;
  max-width: 14ch;
}

.catalog__col {
  grid-column: 1 / -1;
}

.catalog__list {
  columns: 2;
  column-gap: var(--col-gap);
}

.catalog__list li {
  break-inside: avoid;
  padding-block: 10px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.2;
}

.catalog__list--single { columns: 1; }

@media (min-width: 960px) {
  .catalog__intro { grid-column: 1 / span 4; }
  .catalog__col--cat { grid-column: 6 / span 4; }
  .catalog__col--brand { grid-column: 10 / -1; }
}

/* ---------- Contact ---------- */

.contact-hero__tag {
  margin-top: var(--space-l);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  color: var(--clay);
}

.lead {
  padding-bottom: var(--space-section);
}

.lead__grid {
  row-gap: var(--space-3xl);
}

.lead__form {
  grid-column: 1 / -1;
  scroll-margin-top: calc(var(--header-h-compact) + 24px);
}

.lead__title {
  font-size: var(--step-4);
  line-height: 1.06;
  margin-bottom: var(--space-xl);
}

.field__error {
  font-size: var(--step--1);
  color: var(--clay-deep);
}

.field__error[hidden] { display: none; }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--clay-deep);
  box-shadow: inset 3px 0 0 var(--clay-deep);
}

.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead .form__foot {
  margin-top: var(--space-xl);
}

.lead .form__status {
  margin-top: var(--space-m);
  padding: 0;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--charcoal);
}

.lead .form__status:not(:empty) {
  padding: var(--space-m);
  border-left: 2px solid var(--clay);
  background: #efe7da;
}

.lead .form__status.is-error {
  border-left-color: var(--clay-deep);
}

.visit {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-xl);
}

.visit__title {
  font-size: var(--step-4);
  line-height: 1.06;
}

.contact-list {
  display: grid;
  gap: var(--space-m);
}

.contact-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-s);
  align-items: start;
}

.contact-list .icon {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--clay-deep);
}

.contact-list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.hours {
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}

.hours p + p {
  margin-top: var(--space-2xs);
}

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

@media (min-width: 720px) {
  .visit { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .visit__media { grid-column: 2; grid-row: 1 / span 2; }
}

@media (min-width: 1100px) {
  .lead__grid { row-gap: 0; }
  .lead__form { grid-column: 1 / span 6; }
  .visit { grid-column: 8 / -1; grid-template-columns: 1fr; }
  .visit__media { grid-column: auto; grid-row: auto; }
  .visit .frame { aspect-ratio: 4 / 3.4; }
}

/* ---------- Small additions ---------- */

.offer__meta-title { color: var(--sage-deep); margin-bottom: var(--space-s); }
.form__confirm { margin-top: var(--space-s); }
.contact-list { margin-top: var(--space-l); }
.hours { margin-top: var(--space-l); }
.hours .contact-list { margin-top: 0; }
.hours__main { display: block; }
.hours__note { display: block; margin-top: var(--space-3xs); max-width: 36ch; }
.more__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.15;
  transition: color var(--dur-s) ease;
}
.more__item a:hover .more__name { color: var(--clay-deep); }
.post-card__media { display: block; overflow: hidden; }
.post-card__media .frame { margin-bottom: 0; }
.article-head__figure { grid-column: 1 / -1; }

/* ---------- Review fixes ---------- */

/* Long CTAs may wrap on narrow screens instead of overflowing */
.offer__cta .btn,
.offer-row .btn,
.closing__cta .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

/* Info: two-line typographic hero on desktop */
.phero--type .phero__title { max-width: 22ch; }

/* Info: breathing room before the dark closing band */
.spread { padding-bottom: var(--space-section); }

/* Logos read at a legible size */
.logos img { height: 30px; }
.logos .logo--marini { height: 52px; }
.logos .logo--isclinical { height: 26px; }
.lines__list img { height: 36px; }
.lines__list .logo--marini { height: 76px; }
.lines__list .logo--isclinical { height: 32px; }

/* Services: icon features stay 3-up on desktop (5-up was too narrow) */
@media (min-width: 960px) {
  .features--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features--icons .feature:not(:first-child) { padding-left: 0; border-left: 0; }
  .features--icons .feature:not(:nth-child(3n + 1)) { padding-left: var(--space-m); border-left: 1px solid var(--rule); }
}

/* Dark bands: separate from the dark footer with a hairline + desktop padding */
.closing,
.newsletter { border-bottom: 1px solid var(--rule-on-dark); }
@media (min-width: 960px) {
  .closing__grid { padding-block: var(--space-2xl); }
}
.nowrap { white-space: nowrap; }

/* About */
.story__title { max-width: 20ch; }
.split__title { font-size: var(--step-4); }
@media (min-width: 960px) {
  .split__media { grid-column: 1 / span 6; }
  .split__body { grid-column: 8 / -1; }
}

/* Shop: no intro column, so lists start at the grid edge */
@media (min-width: 960px) {
  .catalog__col--cat { grid-column: 1 / span 7; }
  .catalog__col--brand { grid-column: 9 / -1; }
}

/* Avoid orphaned last words in running copy */
main p,
main li { text-wrap: pretty; }
.newsletter__aside,
.phero__aside,
.article-head__title,
.closing__quote,
.feature p { text-wrap: balance; }
.hp {
  position: absolute !important;
  left: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Clay on charcoal is below 3:1; on dark bands the italic accent stays italic in soft ivory */
.on-dark h2 em { color: var(--on-dark-soft); }
.article-head__title { max-width: 22ch; }
.post-card p { text-wrap: balance; }
.story__title { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); text-wrap: pretty; }
.story__title,
.feature__text { text-wrap: balance; }

/* ---------- Shop catalog ---------- */

.header__tools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__tools .menu-toggle { grid-column: auto; }

.cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--charcoal);
}

.cart-toggle__count {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 99px;
  background: var(--clay);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

.cart-toggle__count[hidden] { display: none; }

.brand-row__wordmark {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.shop { scroll-margin-top: calc(var(--header-h-compact) + 12px); }

.shop__layout { row-gap: var(--space-2xl); }

.shop__filters,
.shop__main { grid-column: 1 / -1; }

.shop-search input {
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-2xs);
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  background: transparent;
  border-radius: 0;
}

.shop-search input:focus {
  outline: 2px solid var(--clay);
  outline-offset: 4px;
}

.shop-filter-group { margin-top: var(--space-xl); }

.shop-filter-list { display: grid; }

.shop-filter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}

.shop-filter input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--clay-deep);
  flex: none;
}

.shop-filter__count {
  margin-left: auto;
  color: var(--sage-deep);
  font-size: 1rem;
}

.shop-filter.is-active { color: var(--clay-deep); }

.shop-filter.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.shop-filter:hover { color: var(--clay-deep); }

.shop-clear { margin-top: var(--space-m); }

.shop__status {
  margin-bottom: var(--space-m);
  color: var(--sage-deep);
  font-size: var(--step--1);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--col-gap);
}

.product-card__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: #efe8dc;
  overflow: hidden;
}

.product-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.product-card__fallback {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  color: var(--sage);
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card[hidden] { display: none; }

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: var(--space-s);
}

.product-card__body .btn { margin-top: auto; }

.product-card__brand {
  color: var(--sage-deep);
  font-size: var(--step--2);
}

.product-card__name {
  margin: 4px 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.15;
}

.product-card__name a:hover { color: var(--clay-deep); }

.product-card__price {
  font-size: var(--step-0);
  letter-spacing: 0.02em;
}

.product-card__from { color: var(--ink-soft); }

.product-card__ref {
  margin: 2px 0 var(--space-s);
  color: var(--sage-deep);
  font-size: var(--step--2);
}

.btn--compact {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  letter-spacing: 0.12em;
  white-space: normal;
  text-align: center;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.shop-empty {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

.shop-back { margin-bottom: var(--space-l); }

.product-detail { display: grid; gap: var(--space-xl); }

.product-detail__title {
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.05;
  margin: var(--space-2xs) 0 var(--space-s);
}

.product-detail__cats,
.product-detail__size { color: var(--ink-soft); }

.product-detail__price {
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
}

.product-detail__buy {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
  max-width: 420px;
}

.shop-field { display: grid; gap: 6px; }

.shop-field select,
.shop-field input {
  min-height: 48px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  background: transparent;
  border-radius: 0;
}

.product-detail__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-s);
}

.product-detail__thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--rule);
  background: #efe8dc;
  cursor: pointer;
}

.product-detail__thumb[aria-pressed="true"] { border-color: var(--clay); }

.product-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-copy { margin-top: var(--space-xl); }

.product-copy p + p,
.product-copy .product-copy__list { margin-top: var(--space-s); }

.product-copy__list { padding-left: 1.1em; list-style: disc; }

.product-copy__list li + li { margin-top: 0.35em; }

.product-detail__info .text-link { margin-top: var(--space-l); }

/* Drawer only. WooCommerce's add-to-cart form is also class "cart"; scoping to #cart
   keeps that form in the product column instead of sliding it off-screen. */
#cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: var(--ivory);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  transition: transform var(--dur-m) var(--ease-out);
}

#cart[hidden] { display: none; }

#cart.is-open { transform: none; }

.cart__top,
.cart__foot {
  flex: none;
  padding: var(--space-m) var(--gutter);
}

.cart__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  border-bottom: 1px solid var(--rule);
}

.cart__top h2 {
  font-size: var(--step-3);
  font-weight: 300;
}

.cart__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.cart__body {
  flex: 1;
  overflow: auto;
  padding: var(--space-m) var(--gutter);
}

.cart__empty { color: var(--ink-soft); }

.cart__item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule);
}

.cart__item img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: #efe8dc;
}

.cart__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.15;
}

.cart__meta .label,
.cart__variant,
.cart__note { color: var(--sage-deep); }

.cart__line-price { margin-top: 4px; }

.cart__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2xs);
}

.qty-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  cursor: pointer;
}

.cart__qty { min-width: 1.5em; text-align: center; }

.cart__remove {
  margin-left: auto;
  min-height: 36px;
  color: var(--clay-deep);
  font-size: var(--step--1);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
}

.cart__total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: 6px;
}

.cart__checkout { width: 100%; margin-top: var(--space-m); }

.cart__checkout:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cart__note {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  line-height: 1.5;
}

.shop-mobile-bar {
  position: sticky;
  top: var(--header-h-compact);
  z-index: 6;
  display: grid;
  gap: 10px;
  margin-bottom: var(--space-m);
  padding-block: 8px;
  background: var(--ivory);
}

.shop-cat-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.shop-cat-chips::-webkit-scrollbar { display: none; }

.shop-chip {
  flex: none;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
}

.shop-chip.is-active,
.shop-chip[aria-pressed="true"] {
  border-color: var(--clay);
  color: var(--clay-deep);
}

.shop-chip--clear { border-style: dashed; }

.shop-active {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-m);
}

.shop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
}

.shop-sort select {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  background: transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem;
}

.shop-price-note {
  margin-bottom: var(--space-m);
  color: var(--sage-deep);
  font-size: var(--step--1);
}

.shop__filters {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: var(--space-m) var(--gutter) var(--space-l);
  background: var(--ivory);
  overflow: auto;
  transform: translateY(100%);
  visibility: hidden;
}

.shop__filters.is-open {
  transform: none;
  visibility: visible;
}

.shop-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 48px;
}

.shop-filters__head h2 {
  font-size: var(--step-3);
  font-weight: 300;
}

.shop-filters__apply {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: var(--space-m);
  background: var(--ivory);
}

.shop-filters__apply .btn { width: 100%; }

.shop__layout { display: block; }

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 var(--space-m);
  padding: 0;
  list-style: none;
}

.crumbs li {
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
}

.crumbs li + li::before {
  content: "›";
  margin: 0 0.45em;
  color: var(--sage);
}

.crumbs a:hover { color: var(--clay-deep); }

.brand-hero {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--rule);
}

.brand-hero__logo img {
  width: auto;
  max-width: min(320px, 100%);
}

.brand-hero__logo .logo--marini { height: 84px; }
.brand-hero__logo .logo--pavise { height: 72px; }
.brand-hero__logo .logo--isclinical { height: 40px; }

.brand-hero__title {
  margin-top: var(--space-s);
  font-size: var(--step-4);
  font-weight: 300;
}

.brand-hero__wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.04em;
}

.brand-hero__text { margin-top: var(--space-s); }

.brand-hero__count {
  margin-top: var(--space-2xs);
  color: var(--sage-deep);
}

.product-page { padding-top: clamp(20px, 3vw, 40px); }

.product-acc { margin-top: var(--space-xl); }

.product-acc details {
  border-top: 1px solid var(--rule);
}

.product-acc details:last-child { border-bottom: 1px solid var(--rule); }

.product-acc summary {
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
}

.product-acc details > div { padding-bottom: var(--space-m); }

.product-related { margin-top: var(--space-2xl); }

.product-related h2 {
  margin-bottom: var(--space-l);
  font-size: var(--step-3);
  font-weight: 300;
}

@media (max-width: 959px) {
  .product-detail { display: flex; }
}

@media (min-width: 960px) {
  .shop-mobile-bar { display: none; }
  .shop__layout { display: grid; }
  .shop__filters {
    position: sticky;
    inset: auto;
    top: calc(var(--header-h-compact) + 12px);
    grid-column: 1 / span 3;
    align-self: start;
    max-height: calc(100vh - var(--header-h-compact) - 24px);
    margin: 0;
    padding: 0 8px 0 0;
    overflow: auto;
    background: transparent;
    transform: none;
    visibility: visible;
    z-index: 2;
  }
  .shop-filters__head,
  .shop-filters__apply { display: none; }
  .shop__main { grid-column: 5 / -1; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
  #cart,
  .shop__filters { transition: none; }
}

/* ---------- Blog: archive meta, article byline, breadcrumbs, prose ---------- */

.post-card__meta,
.article-head__byline {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0;
  color: var(--ink-soft);
}

.post-card__meta > :not(:last-child)::after,
.article-head__byline > :not(:last-child)::after {
  content: "·";
  margin-inline: 0.6em;
  color: var(--sage-deep);
}

.post-card__meta {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.article-head__byline {
  max-width: none;
  margin-top: var(--space-m);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.article-head__byline strong {
  font-weight: 500;
  color: var(--charcoal);
}

.article-head__back ol { flex-wrap: nowrap; margin-bottom: 0; }
.article-head__back li { flex: 0 0 auto; }
.article-head__back li[aria-current] {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--charcoal);
}
.crumbs a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; }
.crumbs a:hover,
.crumbs a:focus-visible { text-decoration-color: currentColor; }

.article-head__figure .frame img,
.more__item .frame img { object-position: center; }

.article-note {
  max-width: none;
  margin-bottom: var(--space-l);
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--rule-strong);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.prose {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.8;
}

.prose p { max-width: none; }
.prose > * + * { margin-top: 1.15em; }

.prose > p:first-child {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.prose h2 {
  margin-top: var(--space-xl);
  font-size: var(--step-3);
  line-height: 1.12;
}

.prose h2 + * { margin-top: var(--space-m); }

.prose h3 {
  margin-top: var(--space-l);
  font-size: var(--step-2);
  line-height: 1.2;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--clay-deep);
}

.prose ul { display: grid; gap: var(--space-2xs); }

.prose li {
  position: relative;
  padding-left: 1.6em;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.8em;
  height: 1px;
  background: var(--clay);
}

.prose blockquote {
  margin-block: var(--space-l);
  padding-block: var(--space-m);
  border-block: 1px solid var(--rule-strong);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  text-wrap: balance;
}

.prose blockquote p { max-width: 24ch; }

.prose .signoff {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
}