/*
  The inner pages: more leaves of the same card. A running head, a title
  page, numbered chapters, the price sheet, the questions, a contents list
  and the midnight closing, all built from what the home already owns: the
  hairline, the tick, the italic numeral, the small-caps label.
  A variant the template page does not show is hooked on structure or on a
  data attribute, never on a class of its own.
*/

/*
  The rail underlines the page you are on, like the current language. The
  home's own link is an anchor inside the page and stays plain.
*/
.site-nav__link[aria-current="page"]:not([href*="#"]) {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

/* A hyphenated compound in a title stays on one line */
.nobr {
  white-space: nowrap;
}

/* A price quoted in a sentence holds together and stands out */
[data-price-ref],
[data-price-from] {
  font-weight: 600;
  white-space: nowrap;
}

/* Running head: the breadcrumb is the first line of the title page */
.crumbs {
  padding-top: var(--space-lg);
  background: var(--color-ground-alt);
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.crumbs__item {
  display: flex;
  align-items: center;
}

/* The separator is the tick of the ruled eyebrow, not a glyph */
.crumbs__item + .crumbs__item::before {
  content: "";
  width: var(--space-lg);
  margin-inline: var(--space-sm);
  border-top: 1px solid currentColor;
}

.crumbs__link,
.crumbs__here {
  padding-block: var(--space-xs);
}

.crumbs__link:hover {
  color: var(--color-accent-strong);
}

.crumbs__here {
  color: var(--color-ink);
}

/* Title page, on blush like the home's welcome */
.page-hero {
  padding-block: var(--space-xl) var(--space-2xl);
  background: var(--color-ground-alt);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-xl);
}

.page-hero__text {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.page-hero__title {
  max-width: 14em;
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

/*
  The answer paragraph: upright and in full ink, the plainest text on the
  page. It is long, so it is never centred, even under a centred title.
*/
.page-hero__lede {
  max-width: var(--measure);
  font-size: var(--text-lead);
  line-height: 1.4;
  text-align: left;
  text-wrap: pretty;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-xs);
}

.page-hero__media {
  justify-self: center;
  width: 100%;
  max-width: 26rem;
}

.page-hero__media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Where a plate is cut from, and whether it is set in black and white */
.plate[data-crop="top"] img {
  object-position: 50% 0;
}

.plate[data-crop="upper"] img {
  object-position: 50% 22%;
}

.plate[data-crop="left"] img {
  object-position: 0 50%;
}

.plate[data-tone="mono"] img {
  filter: var(--filter-mono);
}

/* Chapters: a numbered head beside its text, ruled apart */
.chapters {
  counter-reset: chapter;
}

.chapter {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  counter-increment: chapter;
}

/* Ruled between chapters only: the band's own edge opens and closes the set */
.chapter + .chapter {
  border-top: var(--rule);
}

.chapter:first-child {
  padding-top: 0;
}

.chapter:last-child {
  padding-bottom: 0;
}

.chapter__head {
  display: grid;
  justify-items: start;
  gap: var(--space-2xs);
}

.chapter__head::before {
  content: counter(chapter, upper-roman);
  font-size: var(--text-lead);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-accent-strong);
}

.chapter__title {
  font-size: var(--text-h3);
  line-height: 1.15;
}

.prose {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose a:not([class]):hover {
  color: var(--color-accent-strong);
}

/* A wide plate for a line-up of products */
.chapter__figure {
  margin-top: var(--space-xs);
}

.chapter__figure img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/*
  Small multiples. The Instagram frames are only 360px wide, so this is
  the one place they are set: never wider than half the file, at any
  width, so they stay sharp on a dense screen.
*/
.strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 11.25rem));
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.strip__item {
  max-width: 11.25rem;
}

.strip__photo {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/*
  La carte on the inner pages. A row is the hook around name, price and
  duration; the three still sit on the item's own grid.
*/
.carte__row {
  display: contents;
}

/*
  Under the row: the description below the name, the duration below the
  price as on the printed list. Both start on one line; the price column
  stays clear all the way down.
*/
.carte__time,
.carte__desc {
  align-self: start;
  margin-top: var(--space-2xs);
  font-size: var(--text-small);
  line-height: 1.35;
}

.carte__time {
  grid-area: 2 / 3;
  justify-self: end;
}

.carte__desc {
  grid-area: 2 / 1 / auto / 3;
  max-width: 30em;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* A starred line is priced to measure; the footnote of the sheet says so */
.carte__row[data-curated] .carte__name::after {
  content: "*";
}

.carte__footnote[data-curated]::before {
  content: "*\a0";
}

/* A sheet of one page */
.carte__page:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

/*
  Questions: a word section, so it sits on blush. The price sheet, the
  questions and the contents list make one blush run. Where two of its
  bands meet, the upper one gives up its bottom padding: they sit one
  interval apart, and an anchor still lands with air above its head.
*/
.faq {
  background: var(--color-ground-alt);
}

.prices:has(+ .faq),
.faq:has(+ .related) {
  padding-bottom: 0;
}

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

.faq__head {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.faq__list {
  border-top: var(--rule);
}

/*
  The pearl hairline is lost on blush, so the lines between the questions
  are drawn in the tweed rose; the list still opens and closes on a keyline.
*/
.faq__item {
  border-bottom: 1px solid var(--color-accent);
}

.faq__item:last-child {
  border-bottom: var(--rule);
}

.faq__q {
  position: relative;
  display: block;
  padding: var(--space-lg) var(--space-2xl) var(--space-lg) 0;
  font-size: var(--text-lead);
  line-height: 1.3;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* A plus drawn with two hairlines; the upright one lies down when open */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--space-md);
  border-top: 1px solid currentColor;
}

.faq__q::after {
  transform: rotate(90deg);
}

.faq__item[open] > .faq__q::after {
  transform: none;
}

.faq__q:hover {
  color: var(--color-accent-strong);
}

.faq__a {
  display: grid;
  gap: var(--space-md);
  max-width: var(--measure);
  padding-bottom: var(--space-lg);
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

.faq__a a {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.faq__a a:hover,
.faq__a [data-price-ref] {
  color: var(--color-ink);
}

/* Contents list: where to go next */
.related {
  background: var(--color-ground-alt);
}

/* Its head is only a label, so it sits close to the list it names */
.related .section-head {
  margin-bottom: var(--space-xl);
}

.index {
  max-width: 44rem;
  margin-inline: auto;
  border-top: var(--rule);
  counter-reset: index;
}

.index__item {
  border-bottom: var(--rule);
  counter-increment: index;
}

.index__link {
  display: grid;
  grid-template-columns: var(--space-xl) minmax(0, 1fr) var(--space-xl);
  align-items: baseline;
  column-gap: var(--space-sm);
  padding-block: var(--space-lg);
  font-size: var(--text-h3);
  line-height: 1.2;
}

.index__link::before {
  content: counter(index, upper-roman);
  font-size: var(--text-lead);
  font-style: italic;
  color: var(--color-accent-strong);
}

/* The tick says "this way"; it grows under the pointer */
.index__link::after {
  content: "";
  align-self: center;
  justify-self: end;
  width: var(--space-lg);
  border-top: 1px solid currentColor;
}

.index__link:hover {
  color: var(--color-accent-strong);
}

.index__link:hover::after {
  width: var(--space-xl);
}

/* Closing: the home's contact idiom, cut down to two cells */
.contact__list--pair {
  max-width: 44rem;
  margin-inline: auto;
}

@media (min-width: 48em) {
  .page-hero__title {
    font-weight: 300;
  }

  .strip {
    grid-template-columns: repeat(3, minmax(0, 11.25rem));
    gap: var(--space-md);
  }

  .carte:has(.carte__page:only-child) {
    max-width: 46rem;
    margin-inline: auto;
  }
}

@media (min-width: 64em) {
  .crumbs__list {
    justify-content: flex-start;
  }

  .page-hero {
    padding-block: var(--space-2xl);
  }

  /* Mirror of the home hero: words on the left, plate on the right */
  .page-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: center;
    column-gap: clamp(2.5rem, 7vw, 7rem);
  }

  .page-hero__text {
    justify-items: start;
    text-align: left;
  }

  .page-hero__actions {
    justify-content: flex-start;
  }

  .page-hero__media {
    max-width: none;
  }

  /* A title page without a plate stays on the page axis, as on a phone */
  .page-hero__text:only-child {
    grid-column: 1 / -1;
    justify-items: center;
    text-align: center;
  }

  .page-hero__text:only-child .page-hero__actions {
    justify-content: center;
  }

  .crumbs:has(+ .page-hero .page-hero__text:only-child) .crumbs__list {
    justify-content: center;
  }

  .chapter {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 7vw, 7rem);
    padding-block: var(--space-2xl);
  }

  .faq__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    column-gap: clamp(2.5rem, 7vw, 7rem);
  }

  .faq__head {
    justify-items: start;
    text-align: left;
  }
}

/* A head that stays while its column is read; only where the screen is tall */
@media (min-width: 64em) and (min-height: 48em) {
  .chapter__head,
  .faq__head {
    position: sticky;
    top: calc(var(--rail-h) + var(--space-xl));
    align-self: start;
  }
}

/* Past 80em the home sets four cells across; the pair keeps to two */
@media (min-width: 80em) {
  .contact__list--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Motion answers the visitor; it is never a show */
@media (prefers-reduced-motion: no-preference) {
  .crumbs__link,
  .prose a:not([class]),
  .faq__q,
  .faq__a a,
  .index__link {
    transition: color var(--dur) var(--ease);
  }

  .faq__q::after {
    transition: transform var(--dur) var(--ease);
  }

  .index__link::after {
    transition: width var(--dur) var(--ease);
  }

  /* Turning a leaf: one page cross-fades into the next */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur);
    animation-timing-function: var(--ease);
  }

  /* An answer opens at its own height where the browser can animate it */
  @supports (interpolate-size: allow-keywords) {
    .faq__list {
      interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size calc(var(--dur) * 1.5) var(--ease), content-visibility calc(var(--dur) * 1.5) allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
    }
  }
}

/*
  The remaining leaves: the houses, the atelier, the full list and the
  contact page. Everything from here down is an addition; no rule above
  this line is changed. One exception reaches an existing page on
  purpose: `.carte__heading a, .carte__note a` below (its underline,
  hover colour and reduced-motion transition) also styles the nails
  category page's Philip Martin's note link, which today inherits
  base.css's plain, undecorated link styling -- see "CSS additions" in
  design/README.md. Nothing else here reaches the home or a category
  page.
*/

/*
  A title page without a plate may set a short list beside its words:
  the contents of the page, or the few facts a visitor came for.
*/
.page-hero__aside {
  justify-self: center;
  width: 100%;
  max-width: 44rem;
}

/*
  The houses: a numbered directory, one leaf per house. The name stands
  where a chapter keeps its title, a size up; under it the house plate,
  beside it the words, and below both a planche of its lines.
*/
.maisons {
  counter-reset: maison;
}

/* An anchor from another page lands with air above the house's numeral */
.maison {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-xl);
  counter-increment: maison;
  scroll-margin-top: calc(var(--rail-h) + var(--space-xl));
}

.maison + .maison {
  border-top: var(--rule);
}

.maison:first-child {
  padding-top: 0;
}

.maison:last-child {
  padding-bottom: 0;
}

.maison__head {
  display: grid;
  justify-items: start;
  gap: var(--space-2xs);
}

.maison__head::before {
  content: counter(maison, upper-roman);
  font-size: var(--text-lead);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-accent-strong);
}

.maison__name {
  font-size: var(--text-h2);
  letter-spacing: -0.005em;
}

.maison__plate {
  max-width: 26rem;
  margin-top: var(--space-lg);
}

.maison__plate img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.maison__body {
  margin-top: var(--space-lg);
}

/* The first sentence introduces the house, in the italic of an intro */
.maison__lead {
  font-size: var(--text-lead);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}

/* The name of a line stands out where it is first told, like a price */
.maison__body b {
  font-weight: 600;
}

/* Where the house is at work: the tick says "this way" */
.maison__services::before {
  content: "";
  display: block;
  width: 2.5rem;
  margin-block: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--color-accent-strong);
}

/*
  The planche: specimens of a house's lines, each mounted with its name
  engraved on the mat. Square for a single product, wide for a line-up.
*/
.planche {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.specimen {
  height: 100%;
}

.specimen img {
  aspect-ratio: 1;
  object-fit: cover;
}

.planche[data-format="wide"] .specimen img {
  aspect-ratio: 16 / 9;
}

.specimen__label {
  padding: var(--space-sm) var(--space-2xs) var(--space-2xs);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

/*
  The atelier's title page: the title, the founder's plate, then the
  philosophy. A phone reads them in that order; from 64em the plate
  stands beside both.
*/
.manifesto {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.manifesto__quote {
  max-width: 26em;
  margin: 0;
  font-size: var(--text-h3);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}

/* Two portraits hung as a pair, each half the column */
.diptych {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.diptych img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/*
  More blush runs. On the full list the title page and the sheet share
  the ground, so the title page gives up its bottom padding and the sheet
  stands close under the title; the sheet then hands on to the contents
  list. On the contact page the title page hands on to it directly.
*/
.page-hero:has(+ .prices),
.page-hero:has(+ .related),
.prices:has(+ .related) {
  padding-bottom: 0;
}

.page-hero + .prices {
  padding-top: var(--space-2xl);
}

/* One section of the sheet per category, ruled apart */
.carte__section {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: var(--rule-soft);
  scroll-margin-top: var(--rail-h);
}

/* A grid item with auto margins would shrink to its rows; keep the measure */
.carte__section .carte__pages {
  width: 100%;
}

/* Its title opens the category's own page */
.carte__heading {
  font-size: var(--text-h3);
  line-height: 1.15;
  text-align: center;
}

.carte__heading a,
.carte__note a {
  text-decoration: underline;
  text-decoration-color: var(--color-accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.carte__heading a:hover,
.carte__note a:hover {
  color: var(--color-accent-strong);
}

/* One list set on two pages closes up on a phone and reads as one */
.carte__pages--split {
  row-gap: var(--space-sm);
}

/* The invitation to book, between the sheet and the button */
.prices__booking {
  max-width: var(--measure);
  margin: var(--space-xl) auto 0;
  font-size: var(--text-lead);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: var(--color-ink-soft);
  text-wrap: balance;
}

.prices__booking + .prices__action {
  margin-top: var(--space-lg);
}

/*
  Contact: what a visitor came for, as a ruled ledger under the title.
  The label stands over its line on a phone and beside it from 64em, on
  the chapter's own measure.
*/
.notes {
  width: 100%;
  border-top: var(--rule);
  text-align: left;
}

.note {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-bottom: var(--rule);
}

@media (min-width: 48em) {
  /* The name runs the width; the plate stands beside the words */
  .maison {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--space-xl);
  }

  .maison__head,
  .planche {
    grid-column: 1 / -1;
  }

  .maison__name {
    font-weight: 300;
  }

  .maison__plate {
    grid-column: 1;
    align-self: start;
    max-width: none;
  }

  .maison__body {
    grid-column: 2;
  }

  /* Single products already fit four across; line-ups wait for 64em */
  .planche {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .planche[data-format="wide"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diptych {
    gap: var(--space-md);
  }
}

/*
  Beside a long column the house plate stays while its words are read,
  where the screen is tall. From 64em it stands under the name again and
  the two scroll together.
*/
@media (min-width: 48em) and (min-height: 48em) {
  .maison__plate {
    position: sticky;
    top: calc(var(--rail-h) + var(--space-xl));
  }
}

@media (min-width: 64em) {
  .page-hero__aside {
    max-width: none;
  }

  /* The chapter's own measure: name and plate left, words right */
  .maison {
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 7vw, 7rem);
    padding-block: var(--space-2xl);
  }

  .maison__head {
    grid-area: 1 / 1;
  }

  .maison__plate {
    position: static;
    grid-area: 2 / 1;
  }

  .maison__body {
    grid-area: 1 / 2 / span 2;
    margin-top: 0;
  }

  .planche {
    grid-row: 3;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
  }

  .planche[data-format="wide"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .specimen__label {
    font-size: var(--text-label);
    letter-spacing: var(--tracking-caps);
  }

  .manifesto {
    grid-column: 1;
    justify-items: start;
    text-align: left;
  }

  /* The founder's plate keeps its full height beside title and philosophy */
  .page-hero__inner:has(> .manifesto) .page-hero__media {
    grid-row: span 2;
  }

  .page-hero__inner:has(> .manifesto) .page-hero__media img {
    aspect-ratio: 2 / 3;
  }

  /* The ledger runs the full width under the title */
  .notes {
    grid-column: 1 / -1;
  }

  .note {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: baseline;
    column-gap: clamp(2.5rem, 7vw, 7rem);
  }

  /* Three across: the ways to book over the places to follow */
  .contact__list--trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact__list--trio .contact__item:nth-child(n) {
    border-right: 1px solid var(--color-ink-soft);
  }

  .contact__list--trio .contact__item:nth-child(3n) {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .carte__heading a,
  .carte__note a {
    transition: color var(--dur) var(--ease);
  }
}