/* Palace Barber, Fabra i Puig - site stylesheet.
   The only stylesheet written by hand for this site. ds.css, booking.css and
   media.css are shared and load AFTER this file, so anything that has to win
   against them is written at a higher specificity and says why in a comment.

   Design read: neighbourhood barbershop landing for local walk-in trade, with
   a composed, precise language, leaning toward cold-luxury monochrome and a
   single saturated accent (docs/DESIGN-DIRECTIONS.md, section 01).

   Cold luxury means graphite, silver and smoke, generous white space, and one
   electric blue that appears on the booking route and nowhere decorative. */

/* ---------------------------------------------------------------- tokens --
   :root would lose to booking.css and ds.css, which load later and declare on
   :root themselves. html:root is one specificity step higher, so these values
   hold wherever they have to. */
html:root {
  /* Palette. Nothing here is pure black or pure white; the only #ffffff on the
     page is the CTA label, which is the value the contrast table was computed
     against (6.63:1 on the accent). */
  --ground: #f4f5f6;   /* off-white */
  --ink: #1c1e21;      /* graphite, 15.30:1 on the ground */
  --muted: #5a6067;    /* 5.82:1 on the ground, so it is body-legible */
  --accent: #1f4fd8;   /* electric blue, 6.07:1 on the ground */
  --accent-ink: #ffffff;
  --accent-soft: #e8edfb;

  --panel: #fafafb;    /* raised surface */
  --bg-2: #edeef0;     /* read by media.css for photo frames */
  --bg-3: #e6e8ea;     /* read by booking.css for input fills */
  --line: #d6d9dd;
  --line-strong: #b3b9c0;

  /* Error text. booking.css sets --bad on :root and then swaps it to a light
     salmon under prefers-color-scheme: dark. This page is light whatever the
     system setting is, so that swap would put error text at 1.83:1 on our
     ground for every visitor whose phone is in dark mode. Pinned here, at a
     specificity that beats a bare :root inside a media query. 5.99:1. */
  --bad: #b3261e;

  /* One corner radius system, two steps, held everywhere. */
  --r-s: 4px;
  --r-m: 8px;

  /* Measured, not assumed: the language switcher is the tallest thing in the
     header (44px links inside a 2px-padded, 1px-bordered shell) and the row
     adds 0.55rem top and bottom, which comes to 68.6px at every width. The
     hero subtracts this to fill exactly one screen, and ds.css uses it to keep
     a focused control from landing under the sticky header. */
  --nav-h: 69px;
  --wrap: 74rem;

  /* Interaction dials, read by ds.css. Small lift, quick settle: this shop
     reads as precise rather than leisurely. */
  --ds-lift: 2px;
  --ds-dur: 0.22s;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  /* Nothing on this page may cause a sideways scroll at 360px. */
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: "Syne", "Work Sans", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

a { color: var(--accent); }

img { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}

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

/* Icons from assets/social.svg. Always beside a word, never instead of one. */
.si {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ---------------------------------------------------------------- reveal --
   The floor under motion.js. If Motion never loads this transition is what
   reveals the page; ds.css switches it off when motion.js takes over. */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.22, 0.75, 0.3, 1),
              transform 0.55s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  background: none;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: #1a44bc; border-color: #1a44bc; }

.btn-ghost {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover { background: #fff; }

/* aria-disabled rather than disabled: site.js leaves the control reachable so
   a reader can still hear why the route is not open yet. */
.btn[aria-disabled="true"] { color: var(--muted); cursor: default; }

/* ---------------------------------------------------------------- header -- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(2px)) {
  .site-head { background: var(--ground); }
}

.head-row {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: 0.55rem;
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  line-height: 1.1;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.brand b {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}
.brand span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.head-nav { display: none; gap: 0.25rem; }
.head-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}
.head-nav a:hover { color: var(--accent); }

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--panel);
}
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] {
  background: var(--ink);
  color: var(--ground);
}

.nav-cta {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--r-s);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

/* --------------------------------------------------------------- section -- */
.sec { padding-block: clamp(3.25rem, 7vw, 6rem); }

.sec-head { max-width: 46rem; }
.sec-head h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}
.sec-head p {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 40rem;
}

/* ------------------------------------------------------------------ hero --
   Asymmetric split: type on the left, the interior photograph on the right.
   Four text elements, headline two lines at every width, and the booking
   button inside the first screen. Measured at 390px and 1280px. */
.hero {
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.hero-grid {
  width: 100%;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

/* The location line sits BELOW the headline and lede on purpose. Above it it
   would read as an eyebrow, and this page spends none. */
.hero-where {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--muted);
}
/* The separator is glued to the second item rather than being an item of its
   own, so it can never end up stranded at the end of a wrapped line. */
.hero-where span + span::before {
  content: "\00B7";
  margin-right: 0.7rem;
  color: var(--line-strong);
}
.dot { color: var(--line-strong); }

.hero h1 {
  /* Two words, and Syne is a wide face. Measured in Chrome rather than
     guessed: at 390px this sets 41.6px and breaks "Palace / Barber"; at 1280px
     it sets 68px in a 620px column and breaks in the same place. Two lines at
     both ends, which is the ceiling the brief sets. */
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.hero-lede {
  margin-top: 1.15rem;
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--muted);
  max-width: 32rem;
}

.hero-actions {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero-actions .btn { flex: 1 1 13rem; }

.hero-photo {
  position: relative;
  border-radius: var(--r-m);
  background: var(--bg-2);
  aspect-ratio: 16 / 9;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The backlit Palace Barber sign sits at the far right of this frame, and a
     4:5 crop of a 16:9 photograph only keeps 45% of its width. Anchoring the
     crop hard right is what keeps the sign, and therefore the thing that
     identifies the shop, inside the hero. Checked at 1280px against the
     rendered crop, not inferred from the file. */
  object-position: 100% center;
  border-radius: var(--r-m);
}

/* --------------------------------------------------------------- orient --
   A measured row rather than three equal cards: two figures and one piece of
   plain speech about which Palace Barber this is. */
.orient {
  border-block: 1px solid var(--line);
  background: var(--panel);
}
.orient-row {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}
.fact .k {
  display: block;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.fact .v {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.orient-note {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 34rem;
}
.orient-note b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- prices --
   Three groups, never one flat list and never a row of hairlines. Corte and
   Barba stack in the narrow column; the Palace Experience tier is a taller
   panel with the accent on its edge, because it is the top of the range. */
.price-wrap {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.price-group {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
}
.price-group.is-top {
  border-color: var(--line);
  border-left: 3px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--panel) 55%);
}

.price-group h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-group.is-top h3 { color: var(--accent); }

.price-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.price-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.35rem 1rem;
}
.price-list .nm {
  font-weight: 500;
  font-size: 1.0625rem;
  min-width: 0;
}
.price-list .amt {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-list .meta {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  color: var(--muted);
}

.price-foot {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 42rem;
}

/* ---------------------------------------------------------------- craft --
   A triptych rather than a second image-plus-text split: the team photograph,
   the copy, and a finished cut, at three different widths. The copy sits
   BETWEEN the two photographs in the markup, so the narrow layout reads
   picture, words, picture and never stacks two portraits back to back. */
.craft-grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  align-items: center;
}
.craft-figure {
  margin: 0;
  width: 100%;
  /* Below the three-column width a portrait photograph would otherwise run the
     full column and swallow a phone screen on its own. */
  max-width: 24rem;
}
.craft-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-m);
  background: var(--bg-2);
}
.craft-figure.is-team img { object-position: center 38%; }
.craft-figure.is-cut img { object-position: center 45%; }
.craft-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
/* Smaller than the other section headings because this one lives in the
   narrowest text column on the page. */
.craft-body h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.35rem); }
.craft-body p {
  margin-top: 1.1rem;
  color: var(--muted);
  max-width: 34rem;
}
.craft-body p.lead { color: var(--ink); font-size: 1.05rem; }

/* -------------------------------------------------------------- reviews --
   A wall of quotes at uneven widths. Deliberately not a row of equal cards. */
.reviews {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.25rem);
}
.quote {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.quote p {
  font-size: 1.0625rem;
  line-height: 1.6;
  /* About three lines at this measure, which is where a quoted review stops
     being a quote and starts being an essay. */
  max-width: 34ch;
}
.quote.is-wide p { max-width: 62ch; }
.quote footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: auto;
}
.quote .who { font-weight: 600; color: var(--ink); }
.quote .stars {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.reviews-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 44rem;
}

/* ------------------------------------------------------------- the form -- */
.book { background: var(--panel); border-block: 1px solid var(--line); }

.book-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.book-aside h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.book-aside p {
  margin-top: 1rem;
  color: var(--muted);
  max-width: 32rem;
}
/* The photograph is a child of the booking grid rather than of the aside, on
   purpose. On a phone that puts it after the form instead of pushing the form
   further down the screen; at desk width it fills column one under a short
   aside, which otherwise left a 300px hole beside a 700px form. */
.book-photo {
  margin: 0;
  width: 100%;
}
.book-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-m);
  background: var(--bg-2);
}

.book-aside .tel-big {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  margin-top: 1.25rem;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: clamp(1.15rem, 3vw, 1.9rem);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* booking.css gives .form textarea `border-radius: inherit`, so the radius
     the textarea uses is the one declared here. */
  border-radius: var(--r-s);
}
.field label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  width: 100%;
  min-width: 0;
}
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.field textarea { width: 100%; }
.field-msg { margin: 0.15rem 0 0; }

.form-error, .form-ok {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.form-error {
  color: var(--bad);
  border-left: 3px solid var(--bad);
  padding-left: 0.8rem;
}
.form-error a { color: var(--bad); font-weight: 700; }
.form-ok {
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 0.8rem;
}
.form-error.show, .form-ok.show { display: block; }

.book-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

#book-result { border-radius: var(--r-m); margin-top: 1rem; }

/* ---------------------------------------------------------------- visit -- */
.visit-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* The etched window is the only thing on this page that shows what to look for
   from the pavement, so it sits directly above the address rather than in a
   gallery: photograph of the door, then the door's number. */
.visit-photo {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  width: 100%;
}
.visit-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* The file is 1284x722, so 16/9 is the real frame and nothing is cropped:
     the etched crest fills it already. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-m);
  background: var(--bg-2);
}

.hours {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* No column gap: the rule under the day and the rule under the hours are two
     separate borders, and any gap between the columns shows as a nick in what
     should read as one line. The breathing room comes from padding instead. */
  gap: 0.1rem 0;
}
.hours dt,
.hours dd {
  margin: 0;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.hours dt { padding-right: 1.5rem; }
.hours dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hours .off { color: var(--muted); }

.addr { font-style: normal; font-size: 1.05rem; }
.addr .street { font-weight: 600; }
.addr p { margin-top: 0.35rem; color: var(--muted); font-size: 0.95rem; }

.contact-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.contact-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-block: 0.2rem;
  border-top: 1px solid var(--line);
}
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contact-list a[href]:hover { border-bottom-color: currentColor; }
/* site.js strips the href from anything the shop has not confirmed. The label
   has to read correctly as plain text, so it is styled as plain text. */
.contact-list a:not([href]) { color: var(--muted); font-weight: 500; }
.contact-list .aside {
  flex: 1 1 100%;
  font-size: 0.85rem;
  color: var(--muted);
}

/* --------------------------------------------------------------- footer -- */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.foot-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
.foot-brand {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
}
.site-foot address { font-style: normal; color: var(--muted); font-size: 0.95rem; margin-top: 0.3rem; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.foot-links a:hover { color: var(--accent); }
.foot-links a:not([href]) { color: var(--muted); font-weight: 400; }
.demo-notes {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 52rem;
}

/* ====================================================================== */
/* Every multi-column layout on this page collapses here, in one block, so
   the narrow width is a declared state rather than something hoped for.   */
/* ====================================================================== */

@media (min-width: 46em) {
  .orient-row {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  .orient-row .fact + .fact,
  .orient-row .orient-note {
    border-left: 1px solid var(--line);
    padding-left: clamp(1.5rem, 4vw, 3.5rem);
  }

  .price-list li { gap: 0.35rem 1.5rem; }

  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote.is-wide { grid-column: 1 / -1; }

  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field.full { grid-column: 1 / -1; }

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

@media (min-width: 62em) {
  .head-nav { display: flex; }
  .nav-cta { display: inline-flex; }

  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  /* 4:5 in a 490px column is 611px tall, which keeps the whole hero inside a
     900px window with the sticky header on top. Measured. */
  .hero-photo { aspect-ratio: 4 / 5; }

  /* Corte and Barba stack in the left column; the Palace Experience tier is one
     tall panel beside them. It stretches rather than sitting at its content
     height, because at content height it left a 260px hole under the loudest
     element on the page and the section read as unfinished. */
  .price-wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
  }
  .price-group.is-top { grid-row: 1 / span 2; grid-column: 2; }

  /* Photograph, words, photograph, at three unequal widths. The cut sits a
     little lower than the team shot so the row is a composition rather than
     two matching panels. */
  .craft-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) minmax(0, 0.9fr);
  }
  .craft-figure { max-width: none; }
  .craft-figure.is-cut { margin-top: clamp(2rem, 4vw, 3.25rem); }

  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quote.is-wide { grid-column: span 2; }

  /* The form spans both rows of column two; the aside and the photograph
     stack in column one beside it. */
  .book-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .book-aside { grid-column: 1; grid-row: 1; }
  .book-form-col { grid-column: 2; grid-row: 1 / span 2; }
  .book-photo { grid-column: 1; grid-row: 2; }

  .visit-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

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

/* Below this the address and the metro stop sit on two lines, and a separator
   dot left stranded at the end of the first line reads as a typo. */
@media (max-width: 30em) {
  .hero-where { flex-direction: column; gap: 0.1rem; }
  .hero-where span + span::before { content: none; }
}

/* The one place a very narrow phone needs help: the two-up price row would
   otherwise squeeze the service name to two words a line. */
@media (max-width: 22em) {
  .price-list li { grid-template-columns: minmax(0, 1fr); }
  .price-list .amt { justify-self: start; }
}