/* About — laid out from the owner's wireframe (6 October 2026): a centred opening, Peppino's
   portrait beside his story with three small notes under it, his own words and signature, the
   family and friends behind the homes beside a Beach House photograph, the four ways a stay is
   looked after as stacked cards, and a centred close.

   Palette: the site's own (theme.css), under this page's role names; cards stand white on the
   cream with a hairline edge. This sheet is linked only on /about/; elsewhere it is held out of
   the cascade with media="not all", which is why it may style :root. */

:root {
  --about-ink: var(--color-ink);
  --about-ink-soft: var(--color-ink-soft);
  --about-muted: var(--color-muted);
  --about-line: var(--color-line);
  /* A card on the cream ground is white; the warm card is for cards on a white band */
  --about-card: var(--color-section);
  --about-media-bg: var(--color-media);
  --about-section: clamp(4.5rem, 2.5rem + 6vw, 9rem);
  --about-measure: 72rem;
}

.about {
  padding-bottom: var(--space-prefooter);
  color: var(--about-ink);
}

/* Every block shares one measure, centred between the gutters */
.about > * {
  box-sizing: content-box;
  max-width: var(--about-measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.about > * + * {
  margin-top: var(--about-section);
}

/* ---------- Shared type ---------- */
.about-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  color: var(--about-ink);
}

.about-prose {
  max-width: 44em;
  text-wrap: pretty;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--about-ink-soft);
}

.about-prose p + p {
  margin-top: 1.1em;
}

/* A home's name in the text, linked to its page: the site's text link. The name never breaks
   across two lines (Danylo, 5 November 2026) */
.about-link {
  white-space: nowrap;
  color: var(--about-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 0.3s var(--ease-out);
}

.about-link:hover {
  text-decoration-color: currentColor;
}

/* ---------- Opening ---------- */
.about-intro {
  /* A little higher than the other pages' openings: the title runs to two lines */
  padding-top: clamp(2.25rem, 1.5rem + 3vw, 4.875rem);
  text-align: center;
}

/* A hairline closes the opening, the kind that parts the sentence from the counts at the top of a
   home's page, run past the page's measure by 7% at each end, so it reaches well beyond the
   widest line of the copy above (never past the gutters, so a phone cannot scroll sideways); it
   stands halfway between the opening and Peppino (the owner's direction, 15 October 2026) */
.about-intro::after {
  --rule-width: min(114%, 100% + 2 * var(--gutter));
  content: "";
  display: block;
  width: var(--rule-width);
  height: 1px;
  margin-top: calc(var(--about-section) * 0.575);
  margin-left: calc((100% - var(--rule-width)) / 2);
  background: var(--about-line);
}

/* The space either side of the hairline: half a section, and 15% more (15 October 2026) */
.about > .about-intro + * {
  margin-top: calc(var(--about-section) * 0.575);
}

/* The page title at the size For owners and Contact use, on two lines, with the copy under it
   wider than the title and set further below it than its paragraphs are from each other (the
   owner's direction, 15 October 2026) */
.about-intro__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h1);
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  color: var(--about-ink);
}

.about-intro__line {
  display: block;
}

.about-intro__lead {
  max-width: 52em;
  margin: var(--space-l) auto 0;
  font-size: var(--text-lead);
  line-height: 1.7;
  text-wrap: pretty;
  color: var(--about-ink-soft);
}

/* The opening runs to four short paragraphs: they follow each other closer than the heading */
.about-intro__lead + .about-intro__lead {
  margin-top: 1em;
}

/* ---------- Peppino ---------- */
/* One group: the portrait's top edge level with the facts line beside it */
.about-host {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.5fr);
  gap: clamp(1.75rem, 0.75rem + 2.6vw, 3.5rem);
  align-items: start;
}

/* The facts' capitals sit under half a line of leading; the portrait drops to meet them */
.about-host__aside {
  padding-top: var(--facts-cap-offset, 0.3rem);
}

.about-host__figure {
  margin: 0;
}

/* "Message Us" with "International WhatsApp" centred under it, the pair standing at the
   portrait's left edge; the button is the homepage's longer one */
.about-host__action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 0.45rem + 0.2vw, 0.6875rem);
  margin-top: var(--space-m);
}

.about-host__whatsapp {
  padding-inline: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  white-space: nowrap;
  /* The homepage host card's width, kept from "Message Peppino" (components.css) */
  min-width: calc(10.46em + 2 * clamp(2.5rem, 2rem + 2vw, 3.5rem));
}

:lang(it) .about-host__whatsapp {
  min-width: calc(10.13em + 2 * clamp(2.5rem, 2rem + 2vw, 3.5rem));
}

.about-host__note {
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--about-muted);
}

.about-host__portrait {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--about-media-bg);
}

.about-host__name {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.1;
  color: var(--about-ink);
}

/* The four facts on one line, as on the host card, set off with middots: the site's label, in
   Peppino's gold */
.about-host__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0;
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.about-host__facts li + li::before {
  content: "\00B7";
  margin-inline: 0.9em;
  color: color-mix(in srgb, var(--color-gold) 55%, transparent);
}

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

/* The rest of his story, opened in place under the first three paragraphs (AboutPage.tsx): the
   two paragraphs slide down and the notes under them make room; closed, the notes sit straight
   under the story. A native <details>, so it opens without script, from the keyboard and by
   find-in-page. The text unrolls and rolls back up, clipped as it goes, with no fade (the owner's
   direction, 15 October 2026). The toggle is laid out after the text it opens, so it always ends
   the story, and reads "Read less" while open. Where a browser cannot animate to auto height it
   simply opens. */
.about-more {
  /* How long the paragraphs take to open or close (tuned in dev-tools/motion-lab) */
  --about-more-time: 600ms;
  /* A grid, not a flex column: Chrome will not animate the opening in a flex container */
  display: grid;
  align-content: start;
  interpolate-size: allow-keywords;
}

.about-more::details-content {
  grid-row: 1;
  block-size: 0;
  overflow: clip;
  transition:
    block-size var(--about-more-time) var(--ease-glide),
    content-visibility var(--about-more-time) allow-discrete;
}

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

.about-more__body > p {
  margin-top: 1.1em;
}

.about-more__toggle {
  grid-row: 2;
  justify-self: start;
  margin-top: var(--space-s);
  font-size: var(--text-small);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  list-style: none;
  cursor: pointer;
  transition: text-decoration-color 0.3s var(--ease-out);
}

.about-more__toggle::-webkit-details-marker {
  display: none;
}

.about-more__toggle:hover {
  text-decoration-color: currentColor;
}

.about-more[open] .about-more__label--open,
.about-more:not([open]) .about-more__label--close {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-more {
    --about-more-time: 0ms;
  }
}

/* Three small notes in a row under the story */
.about-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.about-note {
  padding: var(--space-s) clamp(1rem, 0.8rem + 0.6vw, 1.375rem);
  border: 1px solid var(--about-line);
  border-radius: 8px;
  background: var(--about-card);
}

.about-note__label {
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.about-note__text {
  margin-top: 0.35em;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--about-ink-soft);
}

/* ---------- His own words ---------- */
/* A small signed note between two sections, so it takes extra air on both sides */
/* His words run wide and short, centred on the page, and the signature signs them off under the
   last line at their right edge (the owner's direction, 15 October 2026): only the words are
   centred, so the signature never pulls them off the middle */
.about > .about-quote {
  display: grid;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: calc(var(--about-section) * 1.35);
}

.about > .about-quote + *,
.about > .about-quote + .about-host__action--phone + * {
  margin-top: calc(var(--about-section) * 1.35);
}

/* The phone's copies (AboutPage.tsx): "Message Us" under the quote, and the third paragraph of
   his story inside "Read more". Elsewhere they stay out of the page, and its own stand. */
.about > .about-host__action--phone,
.about-intro__action,
.about-prose__phone {
  display: none;
}

.about-quote__text {
  margin: 0;
  max-width: 36em;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--about-ink);
}

.about-quote__text p::before {
  content: "\201C";
}

.about-quote__text p::after {
  content: "\201D";
}

/* The Italian quotes his words in guillemets, as his own text does (25 October 2026) */
.about-quote__text p:lang(it)::before {
  content: "\00AB";
}

.about-quote__text p:lang(it)::after {
  content: "\00BB";
}

/* Masked, not painted, as on the host card */
.about-quote__sign {
  justify-self: end;
}

.about-quote__signature {
  display: block;
  width: clamp(6.5rem, 4.5rem + 4vw, 9.5rem);
  aspect-ratio: 640 / 337;
  background-color: var(--about-ink);
  opacity: 0.92;
  -webkit-mask: url("/assets/host/peppino-signature.png") center / contain no-repeat;
  mask: url("/assets/host/peppino-signature.png") center / contain no-repeat;
}

/* ---------- Family and friends ---------- */
/* The heading runs above, and the photograph and its button stand beside the text alone, from
   its first line to its last (the owner's direction, 15 October 2026): the text sets the height,
   the column stretches to it and the photograph fills what the button leaves, cut by cover rather
   than stretched. The body's wrapper steps aside (display: contents) so the heading and the text
   can take rows of their own. */
.about-circle {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 0.9fr);
  column-gap: clamp(2rem, 1rem + 4vw, 5.5rem);
}

.about-circle__body {
  display: contents;
}

.about-circle .about-heading {
  grid-column: 1;
}

.about-circle__body .about-prose {
  grid-column: 1;
  margin-top: var(--space-m);
}

.about-circle__media {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  /* The button keeps its own width, centred under the photograph */
  justify-items: center;
  gap: var(--space-m);
  /* Takes no height of its own, so only the text decides the row's */
  contain: size;
  /* The text's first line sits half a leading below the top of its box; the photograph drops to
     meet the letters, and keeps the text's top margin */
  margin-top: var(--space-m);
  padding-top: 0.55rem;
}

/* The photograph is a way into Beach House: the link takes the photograph's place in the column */
.about-circle__photo-link {
  display: block;
  justify-self: stretch;
  min-height: 0;
}

.about-circle__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  background: var(--about-media-bg);
}

/* ---------- How a stay is looked after ---------- */
.about-care__intro {
  text-align: center;
}

/* Wide enough for each sentence on one line on desktop, the Italian being the longer (20 October 2026) */
.about-care__lead {
  max-width: 38em;
  margin: var(--space-s) auto 0;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--about-ink-soft);
}

/* Where a narrow screen wraps a sentence, its lines come out even, never one word alone */
.about-care__line {
  display: block;
  text-wrap: balance;
}

.about-steps {
  display: grid;
  gap: var(--space-s);
  max-width: 56rem;
  margin: var(--space-l) auto 0;
  padding: 0;
  list-style: none;
}

/* Each step a wide card: its name on the left, what happens on the right */
.about-step {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--space-s) var(--space-l);
  align-items: center;
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem) clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
  border: 1px solid var(--about-line);
  border-radius: 8px;
  background: var(--about-card);
}

.about-step__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: 1.15;
  color: var(--about-ink);
}

.about-step__text {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--about-ink-soft);
}

/* ---------- Close ---------- */
.about-close {
  text-align: center;
}

/* The closing pair sits a little closer to the last card than sections sit to each other (the
   owner's direction, 15 October 2026); the space before the footer is the page's own, unchanged */
.about > .about-close {
  margin-top: calc(var(--about-section) * 0.57);
}

/* The close has no heading since 14 October 2026 (the opening took its line): the buttons
   lead it */
.about-close__actions:first-child {
  margin-top: 0;
}

/* The pair stands together and centred, as the homepage's "How to stay with us" pair does (the
   owner's direction, 15 October 2026): the same gap, and the note under "Message Us" taken
   out of the flow with its height reserved, so its width cannot push the pair apart or off centre */
.about-close__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.75rem, 0.6rem + 0.4vw, 1.25rem);
  margin-top: var(--space-l);
}

/* Side by side on a wide screen, the two one width, the wider one's */
@media not all and (max-width: 52rem) {
  .about-close__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: fit-content;
    margin-inline: auto;
  }

  .about-close__actions .btn {
    width: 100%;
  }
}

.about-close__action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2rem;
}

.about-close__note {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 100vw;
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--about-muted);
  text-align: center;
}

/* The two buttons one width, the wider one's, in either language (15 October 2026): equal grid
   columns in a row as wide as its content, centred. On a narrow screen they stay side by side
   across the page, as How to stay with us does (components.css, Danylo, 5 November 2026; they
   stacked until then): the note in the flow under "Message Us", both buttons one height. */
@media (max-width: 52rem) {
  .about-close__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--pair-gap);
    row-gap: 0;
    width: min(100%, 30rem);
    margin-inline: auto;
  }

  .about-close__actions > .btn {
    grid-row: 1;
  }

  .about-close__action {
    position: static;
    display: grid;
    grid-row: 1 / span 2;
    grid-template-rows: subgrid;
    align-items: stretch;
    padding-bottom: 0;
  }

  .about-close__note {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 0.5rem;
    translate: none;
    font-size: var(--pair-note);
  }

  .about-close__actions .btn {
    width: 100%;
    min-height: 2.75rem;
    padding-inline: var(--pair-pad);
    white-space: normal;
    text-wrap: balance;
    line-height: 1.3;
  }
}

/* ---------- One column ---------- */
@media (max-width: 52rem) {
  .about-host,
  .about-circle {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-host__aside,
  .about-circle__media {
    max-width: 16rem;
  }

  /* The photograph and its button follow the text they belong to, at their own height */
  .about-circle__media {
    grid-column: 1;
    grid-row: auto;
    grid-template-rows: auto;
    justify-items: start;
    contain: none;
    margin-top: var(--space-l);
    padding-top: 0;
  }

  .about-circle__photo {
    height: auto;
  }

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

  /* Wrapped, the middots would start lines; the four facts sit in two columns instead */
  .about-host__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5em var(--space-s);
  }

  .about-host__facts li + li::before {
    content: none;
  }

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

/* ---------- A phone (the owner's direction, 20 October 2026) ----------
   The opening closes on "Message Us", in place of its hairline. Peppino's part reads as the
   homepage's card does: one centred column, his portrait, his name
   under it, his four facts two by two behind brass dots, then his story centred, with only two
   paragraphs before "Read more", and the three notes. "Message Us" follows his quote instead of
   his portrait. "Our homes, our island, our people" takes three lines, each opening on a capital,
   and the Beach House photograph and its button stand centred under the text. The four steps'
   names are a step heavier, and the closing pair runs 85% of the width, as the homepage's does. */
@media (max-width: 40rem) {
  /* The opening closes on "Message Us" rather than a hairline */
  .about-intro::after {
    content: none;
  }

  .about-intro__action {
    display: inline-flex;
    margin-top: var(--space-l);
  }

  .about-host {
    justify-items: center;
    text-align: center;
  }

  .about-host__aside {
    padding-top: 0;
  }

  .about-host__aside .about-host__action {
    display: none;
  }

  /* A fifth more room between the signature and "Message Us" (20 October 2026) */
  .about > .about-host__action--phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin-top: calc(var(--space-l) * 1.2);
  }

  /* The homepage card's facts: a two-by-two grid in Peppino's gold, each behind a brass dot */
  .about-host__facts {
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 0.5rem 1.5rem;
    justify-content: center;
    font-size: var(--text-small);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
  }

  .about-host__facts li {
    display: flex;
    gap: 0.55em;
  }

  .about-host__facts li::before,
  .about-host__facts li + li::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    margin: calc((1lh - 5px) / 2) 0 0;
    border-radius: 50%;
    background: var(--color-accent);
  }

  .about-prose__wide {
    display: none;
  }

  .about-prose__phone {
    display: block;
  }

  .about-more__toggle {
    justify-self: center;
  }

  .about-notes {
    justify-self: stretch;
  }

  .about-circle__phrase {
    display: block;
  }

  .about-circle__phrase::first-letter {
    text-transform: uppercase;
  }

  /* Down the width as a stair (Danylo, 5 November 2026): the first phrase at the left, the second
     in the middle, the last at the right */
  .about-circle__phrase:nth-child(2) {
    text-align: center;
  }

  .about-circle__phrase:nth-child(3) {
    text-align: right;
  }

  .about-circle__media {
    justify-self: center;
    justify-items: center;
  }

  .about-step__title {
    font-weight: 600;
  }

}