/* Self-hosted fonts (SIL OFL 1.1, licences in fonts/). Cyrillic and Latin subsets only;
   Alegreya also keeps Latin Extended for the rouble sign. Alegreya upright is one variable file (400–500). */

@font-face {
  font-family: "Yeseva One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/yeseva-one-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Yeseva One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/yeseva-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/alegreya-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/alegreya-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/alegreya-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/alegreya-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/alegreya-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design tokens: «Модная картинка» — fashion plates of the 1830s, rendered minimal. */
:root {
  /* Paper and ink */
  --paper: #F7F7F4;          /* page ground: cool white plate paper */
  --sheet: #FFFFFF;          /* the plate itself */
  --ink: #22201E;            /* body and headings */
  --ink-2: #5A5550;          /* secondary text, captions */
  --hair: rgba(34, 32, 30, .15);   /* hairline rules */
  --hair-strong: rgba(34, 32, 30, .28);
  --platemark: rgba(34, 32, 30, .25);

  /* Hand-colouring washes (only inside plates) */
  --wash-rose: #E9CFCF;
  --wash-blue: #DCE4EE;

  /* Engraved ornaments: one hairline of faded ink */
  --ornament: #6E6760;
  --ornament-stroke: 1.15;

  /* Prussian blue: reserved for booking and focus */
  --prussian: #1F3D7A;
  --prussian-deep: #162C5A;
  --on-prussian: #FFFFFF;

  /* Type */
  --font-display: "Yeseva One", "Georgia", serif;
  --font-text: "Alegreya", "Georgia", serif;

  --fs-display: clamp(2.75rem, 1.6rem + 3.6vw, 4.875rem);  /* 44 → 78px */
  --fs-h2: clamp(2.125rem, 1.5rem + 2vw, 3.25rem);         /* 34 → 52px */
  --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);        /* 22 → 28px */
  --fs-lead: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);   /* 19 → 22px */
  --fs-body: 1.1875rem;                                    /* 19px: older readers */
  --fs-small: 1rem;
  --fs-label: .875rem;

  --lh-tight: 1.04;
  --lh-text: 1.55;

  /* Space (4px base) */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  --container: 80rem;                         /* 1280px */
  --gutter: clamp(1rem, .2rem + 4vw, 5rem);    /* 16 → 80px */
  --header-h: 5.75rem;                        /* 92px */
  --tap: 3rem;                                /* 48px minimum target */

  /* Depth: a plate lying on paper */
  --shadow-plate: 0 18px 40px rgba(34, 32, 30, .12), 0 2px 6px rgba(34, 32, 30, .06);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 320ms;
}

/* Base: reset, typography, browser surfaces. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  scrollbar-color: var(--hair-strong) var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-display); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--hair-strong);
  transition: text-decoration-color var(--dur) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

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

::selection { background: var(--prussian); color: var(--on-prussian); }

/* Layout helpers */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: var(--s-4); top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--prussian);
  color: var(--on-prussian);
}
.skip-link:focus { top: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Components: header, buttons, price list, plate, booking bar, footer. */

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--hair); }

.site-header__inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-6);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1;
  text-decoration: none;
}

.site-nav ul { display: flex; justify-content: center; gap: var(--s-6); }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 1.125rem;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--hair-strong); }
@media (min-width: 60.0625rem) {
  .site-nav a { white-space: nowrap; }
}
@media (min-width: 60.0625rem) and (max-width: 75rem) {
  /* Narrow desktops: six links and the phone on one line */
  .site-header__inner { gap: var(--s-5); }
  .site-nav ul { gap: var(--s-4); }
  .site-nav a, .header-tel { font-size: 1rem; }
}

.header-tel {
  font-weight: 500;
  font-size: 1.125rem;
  text-decoration: none;
  white-space: nowrap;
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: none;
  border: 1px solid var(--hair-strong);
  cursor: pointer;
  font-size: 1.0625rem;
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 60rem) {
  :root { --header-h: 4.25rem; }
  .site-header__inner { grid-template-columns: 1fr auto; gap: var(--s-4); }
  .logo { font-size: 1.625rem; }
  .header-tel { display: none; }
  .menu-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--paper);
    padding: var(--s-5) var(--gutter) var(--s-9);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    width: 100%;
    min-height: 3.5rem;
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--hair);
    font-family: var(--font-display);
    font-size: 1.75rem;
  }
  .site-nav__contacts { margin-top: var(--s-6); display: grid; gap: var(--s-2); font-size: var(--fs-lead); }
}
@media (min-width: 60.0625rem) {
  .site-nav__contacts { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 3.5rem;
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-text);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* Booking: an Empire cartouche. Four corner gradients leave concave notches,
   so the shape needs no mask and the focus ring stays unclipped. */
.btn--book {
  --cartouche: var(--prussian);
  position: relative;
  padding: 0 var(--s-6) 0 var(--s-5);
  color: var(--on-prussian);
  letter-spacing: .01em;
  background-color: transparent;
  background:
    radial-gradient(circle 9px at 0 0, #0000 97%, var(--cartouche)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle 9px at 100% 0, #0000 97%, var(--cartouche)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle 9px at 0 100%, #0000 97%, var(--cartouche)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle 9px at 100% 100%, #0000 97%, var(--cartouche)) 100% 100% / 51% 51% no-repeat;
}
/* Engraved inner frame */
.btn--book::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, .42);
  pointer-events: none;
  transition: inset var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.btn--book:hover { --cartouche: var(--prussian-deep); }
.btn--book:hover::after { inset: 5px; border-color: rgba(255, 255, 255, .7); }

/* Quiet: a double engraved rule */
.btn--quiet {
  position: relative;
  background: transparent;
  color: var(--ink);
  border-color: var(--hair-strong);
}
.btn--quiet::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--hair);
  pointer-events: none;
  transition: inset var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.btn--quiet:hover { border-color: var(--ink); }
.btn--quiet:hover::after { inset: 4px; border-color: var(--hair-strong); }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-size: 1.125rem;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Price list ---------- */
/* Dot leaders, as in a 19th-century price list. A long name wraps;
   the leader and the price stay on its last line. */
.price-list { list-style: none; padding: 0; }
.price-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1.25rem, 1fr) auto;
  align-items: end;
  column-gap: .45em;
  padding: var(--s-2) 0;
}
.price-row::before {
  content: "";
  grid-area: 1 / 2;
  margin-bottom: calc(.37em - 2px);
  border-bottom: 2px dotted var(--hair-strong);
}
.price-row__name { grid-area: 1 / 1; font-style: italic; color: var(--ink-2); }
.price-row__price {
  grid-area: 1 / 3;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.price-row__price--ask { font-weight: 400; font-style: italic; }
.price-row__note {
  grid-column: 1 / -1;
  max-width: 58ch;
  margin-top: var(--s-1);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* ---------- Plate (fashion plate) ---------- */
.plate {
  background: var(--sheet);
  padding: var(--s-5);
  box-shadow: var(--shadow-plate);
}
/* Hand-colouring: each plate is washed rose, or blue for .plate--blue, around the picture */
.plate__mark {
  background: color-mix(in srgb, var(--wash-rose) 32%, var(--sheet));
  border: 1px solid var(--platemark);
  padding: var(--s-4) var(--s-4) var(--s-5);
}
.plate__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.plate__img {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: var(--s-3) 0 var(--s-4);
  background: var(--wash-rose);
  overflow: hidden;
}
.plate--blue .plate__img { background: var(--wash-blue); }
.plate--blue .plate__mark { background: color-mix(in srgb, var(--wash-blue) 45%, var(--sheet)); }
.plate__img img { width: 100%; height: 100%; object-fit: cover; }
.plate__placeholder {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-4);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.plate figcaption, .plate__caption {
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.35;
}
@media (max-width: 60rem) {
  /* Narrow plates: a long title wraps under the number, centred like an engraved legend */
  .plate__head { justify-content: center; gap: 0 var(--s-2); font-size: .8125rem; letter-spacing: .08em; }
}

/* ---------- Section ---------- */
.section { padding-block: clamp(var(--s-8), 8vw, var(--s-10)); }
.section__head { max-width: 46rem; margin-bottom: var(--s-7); }
.section__head p { margin-top: var(--s-4); font-size: var(--fs-lead); color: var(--ink-2); }

/* A section not built yet: pencil outline (unselected = dashed) */
.stub {
  border: 1px dashed var(--hair-strong);
  padding: var(--s-6);
  color: var(--ink-2);
  font-style: italic;
}

/* ---------- Mobile booking bar ---------- */
.booking-bar { display: none; }
@media (max-width: 60rem) {
  .booking-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-2);
    padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--hair);
  }
  .booking-bar .btn { min-height: 3.25rem; padding: 0 var(--s-5); white-space: nowrap; }
  .booking-bar {
    transition: transform var(--dur) var(--ease-out), visibility 0s linear 0s;
  }
  .booking-bar.is-hidden {
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  /* Tablets: a button of comfortable width, not a stripe across the screen */
  @media (min-width: 48rem) {
    .booking-bar { grid-template-columns: minmax(0, 24rem) auto; justify-content: center; }
  }
  .booking-bar .btn--quiet { width: 3.25rem; padding: 0; background: var(--sheet); }
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hair);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--fs-small);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-6);
}
.site-footer__logo img { width: 8.5rem; height: auto; }
.site-footer__about { margin-top: var(--s-3); color: var(--ink-2); max-width: 26ch; }
.site-footer h3 {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-3);
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-1); }
.site-footer a { display: inline-block; padding-block: var(--s-1); }
.site-footer__tel { font-size: 1.25rem; font-weight: 500; text-decoration: none; }
.site-footer__legal {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  color: var(--ink-2);
}
@media (max-width: 60rem) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 36rem) {
  .site-footer__grid { grid-template-columns: 1fr; }
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
/* «Настройки cookie»: a button that reads as one more footer link */
.site-footer__cookie {
  padding: var(--s-1) 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hair-strong);
  text-underline-offset: .2em;
  cursor: pointer;
}
.site-footer__cookie:hover { color: var(--ink); }

/* ---------- Cookie consent ---------- */
/* A plain sheet with two equal choices: declining is as easy as accepting */
.consent {
  position: fixed;
  z-index: 60;
  left: var(--gutter);
  bottom: var(--gutter);
  width: min(26rem, calc(100% - 2 * var(--gutter)));
  padding: var(--s-5);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  box-shadow: var(--shadow-plate);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.consent .btn { min-height: var(--tap); padding: 0 var(--s-4); }
@media (max-width: 60rem) {
  /* Phones and tablets: over the booking bar until the visitor chooses */
  .consent {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
  }
}

/* Decor: engraved ornaments of the 18th–19th centuries, drawn with one hairline. */

.orn {
  display: block;
  flex: none;
  fill: none;
  stroke: var(--ornament);
  stroke-width: var(--ornament-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.orn .fill, .orn--filled { fill: var(--ornament); stroke: none; }

.orn--rule { width: 15rem; height: 1.125rem; }
.orn--rule-wide { width: min(100%, 22rem); height: 1.5rem; margin-inline: auto; }
.orn--laurel { width: 6rem; height: 2.5rem; }
.orn--laurel-flip { transform: scaleX(-1); }
.orn--fleuron { width: 1.25rem; height: 1.25rem; }
.orn--vignette { height: 3.5rem; width: auto; }
/* Engraved tools under some section titles, so the rule with the rosette stays a rarity */
.orn--comb { width: 4.5rem; height: 1.75rem; }
.orn--scissors { width: 4rem; height: 2rem; }
.orn--mirror { width: 1.75rem; height: 3.25rem; }

/* Section title: heading over a short engraved rule */
.title-orn { display: grid; justify-items: start; gap: var(--s-3); }
.title-orn--center { justify-items: center; text-align: center; }

/* Laurel pair around a short label */
.laurels { display: inline-flex; align-items: center; gap: var(--s-3); }
.laurels > .orn { width: 3.5rem; height: 1.5rem; }

/* Plate corners: engraved frame ornaments inside the platemark */
.plate__mark { position: relative; }
.plate__corner {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  pointer-events: none;
}
.plate__corner--tl { top: -1px; left: -1px; }
.plate__corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.plate__corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.plate__corner--br { bottom: -1px; right: -1px; transform: scale(-1, -1); }
.plate__corner .orn { width: 100%; height: 100%; }

/* ---------- Motion: the engraver's burin ---------- */
/* Ornaments draw themselves once when they enter the screen.
   Only armed when JS confirms motion is allowed, so without JS they are simply drawn. */
.motion-ok .draw:not(.is-drawn) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.motion-ok .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--ease-out);
  transition-delay: var(--draw-delay, 0ms);
}
.motion-ok .draw .fill { opacity: 0; transition: opacity .6s var(--ease-out) calc(var(--draw-delay, 0ms) + .9s); }
.motion-ok .draw.is-drawn .fill { opacity: 1; }

/* Scissors on the booking button snip on hover and keyboard focus */
.scissors { width: 2.125rem; height: 1.0625rem; flex: none; overflow: visible; }
@media (max-width: 22rem) {
  .booking-bar .scissors { display: none; }
}
.scissors path, .scissors circle { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.scissors .pivot { fill: currentColor; stroke: none; }
.scissors .blade { transform-box: view-box; transform-origin: 24px 12px; }

@keyframes snip-a { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(-9deg); } 50% { transform: rotate(1deg); } }
@keyframes snip-b { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(9deg); } 50% { transform: rotate(-1deg); } }

@media (prefers-reduced-motion: no-preference) {
  .btn:hover .scissors .blade-a, .btn:focus-visible .scissors .blade-a { animation: snip-a .6s var(--ease-out); }
  .btn:hover .scissors .blade-b, .btn:focus-visible .scissors .blade-b { animation: snip-b .6s var(--ease-out); }
}

/* Page sections.
   Five layouts by screen width:
   phone          < 36rem (575px)  one column, plates as a swipe strip
   large phone    36–48rem         one column, roomier lists
   tablet         48–60rem         two columns, the stack shuffles, burger menu and booking bar stay
   small laptop   60–75rem         desktop layout with slimmer side columns
   desktop        ≥ 75rem          full layout */

/* ---------- First viewport ---------- */
.hero { padding-block: var(--s-6) var(--s-9); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: var(--s-8);
  align-items: center;
}
/* The title is sized by its own column: «Парикмахерская» is about 8.7em wide
   and must never break, at any screen width */
.hero__copy { container-type: inline-size; }
.hero h1 {
  font-size: clamp(2.375rem, 1.3rem + 3.4vw, 4.5rem);
  font-size: clamp(1.75rem, 11cqi, 4.5rem);
}
@media (min-width: 48rem) and (max-width: 75rem) {
  /* Tablets and small laptops: a slimmer stack leaves the title more room */
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--s-7); }
  .plate-stack .plate { padding: var(--s-4); }
  .plate-stack .plate__head { justify-content: center; gap: 0 var(--s-2); font-size: .8125rem; letter-spacing: .08em; }
}
@media (min-width: 48rem) and (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s-6); }
  .plate-stack { margin-inline: 0; }
  .plate-stack__status { display: none; }
}
.hero__lead { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--ink-2); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
.hero__prices { margin-top: var(--s-7); max-width: 30rem; }
.hero__more { margin-top: var(--s-2); }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.hero__facts .orn--fleuron { width: 1rem; height: 1rem; }

/* Plate stack: the top plate lies straight, the ones behind are turned */
.plate-stack {
  position: relative;
  aspect-ratio: 4 / 5.4;
  margin-inline: var(--s-6) 0;
}
.plate-stack .plate {
  position: absolute;
  inset: 0 0 auto auto;
  width: 82%;
  transition: transform .7s var(--ease-out);
}
.plate-stack .plate[data-pos="0"] { z-index: 3; transform: none; }
.plate-stack .plate[data-pos="1"] { z-index: 2; transform: translate(-30%, 6%) rotate(-4deg); }
.plate-stack .plate[data-pos="2"] { z-index: 1; transform: translate(-12%, 3%) rotate(3deg); }
/* Plates underneath show only their picture: a cut-off number or caption would read as a glitch */
@media (min-width: 48rem) {
  .plate-stack .plate .plate__head,
  .plate-stack .plate figcaption { transition: opacity var(--dur) var(--ease-out); }
  .plate-stack .plate:not([data-pos="0"]) .plate__head,
  .plate-stack .plate:not([data-pos="0"]) figcaption { opacity: 0; }
}
/* Controls sit under the pile, above any plate that hangs over its edge */
.plate-stack { margin-bottom: calc(var(--tap) + var(--s-4)); }
.plate-stack__controls {
  position: absolute;
  z-index: 4;
  right: 0;
  top: calc(100% + var(--s-3));
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.plate-stack__next {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: none;
  border: 0;
  color: var(--ink);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-decoration-color: var(--hair-strong);
  text-underline-offset: .22em;
  cursor: pointer;
}
.plate-stack__next:hover { text-decoration-color: currentColor; }
.plate-stack__next svg { width: 18px; height: 18px; }
.plate-stack[data-ready] .plate { cursor: pointer; }

@media (max-width: 60rem) {
  .hero { padding-top: var(--s-4); }
}
@media (max-width: 47.9375rem) {
  /* Phones: the works come right after the title and lead, so the first screen shows them;
     buttons and prices follow the strip. The grid is the container for the title's cqi size. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; container-type: inline-size; }
  .hero__copy { display: contents; }
  .hero h1 { order: 1; }
  .hero__lead { order: 2; }
  .hero__media { order: 3; margin-top: var(--s-5); }
  .hero__actions { order: 4; margin-top: var(--s-2); }
  .hero__prices { order: 5; }
  .hero__more { order: 6; justify-self: start; }
  .hero__facts { order: 7; }

  /* On phones the plates become a swipeable strip */
  .plate-stack {
    aspect-ratio: auto;
    margin: 0 calc(var(--gutter) * -1);
    padding: var(--s-2) var(--gutter) var(--s-6);
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .plate-stack::-webkit-scrollbar { display: none; }
  .plate-stack .plate {
    position: static;
    flex: 0 0 min(78vw, 22rem);
    width: auto;
    scroll-snap-align: start;
  }
  .plate-stack .plate[data-pos] { transform: none; }
  .plate-stack .plate { padding: var(--s-4); }
  .plate-stack__controls { display: none; }
}

/* ---------- Why us ---------- */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8);
  align-items: start;
}
.why__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.why__aside .plate { margin-top: var(--s-7); max-width: 26rem; }
.why__aside .plate__img { aspect-ratio: 5 / 4; }
.why__list { list-style: none; padding: 0; }
.why__item { padding-block: var(--s-6); }
.why__item + .why__item { border-top: 1px solid var(--hair); }
.why__item h3 { display: flex; align-items: center; gap: var(--s-3); }
.why__item h3 .orn--fleuron { width: 1.5rem; height: 1.5rem; }
.why__item p { margin-top: var(--s-3); color: var(--ink-2); max-width: 52ch; }

@media (max-width: 60rem) {
  .why__grid { gap: var(--s-6); }
}
@media (max-width: 47.9375rem) {
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .why__aside { position: static; }
}

/* ---------- Services and prices ---------- */
/* A page from an old price list: a framed sheet with one tipped-in plate */
.services__sheet {
  position: relative;
  padding: var(--s-8);
  border: 1px solid var(--platemark);
}
.services__sheet::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--hair);
  pointer-events: none;
}
.services__sheet > .plate__corner { width: 2.75rem; height: 2.75rem; }

.services__head { margin-bottom: var(--s-8); }
.services__head p { max-width: 44ch; font-size: var(--fs-lead); color: var(--ink-2); }

.services__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: start;
}
.services__group + .services__group { margin-top: var(--s-7); }
.services__group h3 { margin-bottom: var(--s-3); }
.services__body > .plate {
  position: sticky;
  top: calc(var(--header-h) + var(--s-6));
  justify-self: end;
  width: min(100%, 26rem);
  transform: rotate(1.5deg);
}

.services__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5) var(--s-7);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hair);
}
.services__notes { display: grid; gap: var(--s-2); color: var(--ink-2); }
.services__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

@media (max-width: 60rem) {
  .services__sheet { padding: var(--s-7) var(--s-6); }
  .services__sheet > .plate__corner { width: 2rem; height: 2rem; }
  .services__head { margin-bottom: var(--s-6); }
  .services__body { gap: var(--s-6); }
  .services__body > .plate { padding: var(--s-4); }
  .services__foot { margin-top: var(--s-7); }
}
@media (max-width: 47.9375rem) {
  .services__sheet { padding: var(--s-7) var(--s-4); }
  .services__body { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .services__body > .plate {
    position: static;
    justify-self: center;
    width: min(100%, 20rem);
    transform: none;
  }
}

/* ---------- Split section head: title on the left, a short lead on the right ---------- */
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-5) var(--s-8);
  /* Top-aligned: a long lead must not rise above the section title */
  align-items: start;
  margin-bottom: var(--s-7);
}
.split-head > p { max-width: 40ch; font-size: var(--fs-lead); color: var(--ink-2); }
/* Works: the long lead sits under the title on every width (client's edit) */
.gallery .split-head { grid-template-columns: minmax(0, 1fr); }
.gallery .split-head > p { max-width: 60ch; }
@media (max-width: 60rem) {
  .split-head { margin-bottom: var(--s-6); }
}
@media (max-width: 47.9375rem) {
  .split-head { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Works gallery ---------- */
/* An album of numbered plates laid out on the table, each slightly askew */

/* Filters: the chosen one is drawn solid, the rest dashed, as on a sewing pattern */
.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-7);
}
.filter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-1);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--hair-strong);
  color: var(--ink-2);
  font-size: 1.125rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.filter:hover { color: var(--ink); border-bottom-color: var(--ink-2); }
.filter[aria-pressed="true"] {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}
.filter__count { font-size: var(--fs-label); color: var(--ink-2); font-variant-numeric: lining-nums; }

.gallery__grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
}
.gallery__item[hidden] { display: none; }

.gallery .plate {
  padding: var(--s-4);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.gallery .plate__mark { padding: var(--s-3) var(--s-3) var(--s-4); }
.gallery .plate__head { gap: var(--s-2); font-size: .8125rem; letter-spacing: .1em; }
.gallery .plate figcaption { font-size: 1.0625rem; }
.gallery__item:nth-child(4n + 1) .plate { transform: rotate(-.8deg); }
.gallery__item:nth-child(4n + 2) .plate { transform: rotate(.6deg); }
.gallery__item:nth-child(4n + 3) .plate { transform: rotate(-.4deg); }
.gallery__item:nth-child(4n) .plate { transform: rotate(.9deg); }
.gallery__item:nth-child(even) .plate__img { background: var(--wash-blue); }
.gallery .plate:focus-within { transform: translateY(-4px); }
@media (hover: hover) {
  .gallery .plate:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(34, 32, 30, .16), 0 3px 8px rgba(34, 32, 30, .08);
  }
}

/* The picture itself opens the viewer */
.plate__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}
.plate__open img { transition: transform .6s var(--ease-out); }
.plate__open:hover img { transform: scale(1.03); }
/* Before/after collages are square: mounted whole on the wash, never cropped */
.plate--fit .plate__img img { object-fit: contain; }

.gallery__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

@media (max-width: 75rem) {
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .gallery__grid { gap: var(--s-6) var(--s-5); }
  .gallery .plate { padding: var(--s-3); }
  .gallery .plate__mark { padding: var(--s-2) var(--s-2) var(--s-3); }
  .gallery__foot { margin-top: var(--s-7); }
}
@media (max-width: 47.9375rem) {
  .gallery__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(var(--gutter) * -1) var(--s-6);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .gallery__filters::-webkit-scrollbar { display: none; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
}
@media (max-width: 36rem) {
  /* Number over kind, so every plate in a row keeps the same height */
  .gallery .plate__head { flex-direction: column; font-size: .75rem; letter-spacing: .06em; }
  .gallery .plate__head .orn { display: none; }
  .gallery .plate figcaption { display: none; }
}

/* ---------- Viewer: one plate, large ---------- */
.viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--s-6) var(--gutter);
  border: 0;
  background: rgba(247, 247, 244, .97);
  color: var(--ink);
}
.viewer[open] { display: grid; place-items: center; }
.viewer::backdrop { background: rgba(34, 32, 30, .35); }
html.viewer-open { overflow: hidden; }

.viewer__inner { display: grid; justify-items: center; gap: var(--s-4); max-width: 100%; }
.viewer__plate { width: fit-content; max-width: 100%; animation: viewer-in .45s var(--ease-out); }
.viewer__img {
  display: grid;
  place-items: center;
  margin: var(--s-3) 0 var(--s-4);
  background: var(--wash-rose);
}
.viewer__img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 19rem);
}
.viewer__plate figcaption { max-width: 36ch; }

.viewer__nav { display: flex; align-items: center; gap: var(--s-4); }
.viewer__step { width: 3.5rem; padding: 0; }
.viewer__count { min-width: 5.5rem; text-align: center; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-2); }

.viewer__close {
  position: absolute;
  top: var(--s-4);
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  background: var(--sheet);
  border: 1px solid var(--hair-strong);
  font-size: 1.0625rem;
  cursor: pointer;
}
.viewer__close:hover { border-color: var(--ink); }
.viewer__close svg { width: 20px; height: 20px; }

@keyframes viewer-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 60rem) {
  .viewer { padding: calc(var(--tap) + var(--s-5)) var(--s-4) var(--s-4); }
  .viewer__plate { padding: var(--s-3); }
  .viewer__plate .plate__mark { padding: var(--s-3) var(--s-3) var(--s-4); }
  .viewer__img img { max-height: calc(100dvh - 18rem); }
  .viewer__close { top: var(--s-3); right: var(--s-4); }
}

/* ---------- Reviews ---------- */
/* The rating struck like a medal; what guests write, retold */
.reviews__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-8);
  align-items: start;
}
.reviews__medals {
  position: sticky;
  top: calc(var(--header-h) + var(--s-6));
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
}
.medal { display: grid; justify-items: center; gap: var(--s-4); }
.medal__disc {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-2);
  width: 16rem;
  aspect-ratio: 1;
  padding: var(--s-6);
  border: 1px solid var(--platemark);
  border-radius: 50%;
  background: var(--sheet);
  /* An inner engraved ring, then the shadow of a medal lying on paper */
  box-shadow: inset 0 0 0 9px var(--sheet), inset 0 0 0 10px var(--hair-strong), var(--shadow-plate);
}
.medal__score { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; }
.medal__stars { width: 7.5rem; height: 1.5rem; }
.medal__stars-fill { fill: var(--ink); }
.medal__stars-line { fill: none; stroke: var(--ornament); stroke-width: 1.1; stroke-linejoin: round; }
.medal__count { font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.medal figcaption { font-style: italic; font-size: var(--fs-lead); }
.reviews__date { font-size: var(--fs-small); color: var(--ink-2); }

.reviews__body h3 { margin-bottom: var(--s-5); }
.reviews__themes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-7);
}
.reviews__themes li { padding-block: var(--s-5); border-top: 1px solid var(--hair); }
.reviews__theme { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); line-height: 1.2; }
.reviews__themes li > p + p { margin-top: var(--s-2); color: var(--ink-2); }
.reviews__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6);
}

@media (max-width: 60rem) {
  /* Medal above, the retold themes in two columns below */
  .reviews__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .reviews__medals { position: static; }
}
@media (max-width: 36rem) {
  .reviews__themes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Chair rental ---------- */
/* A notice for hairdressers in a double rule, with the workplace plate laid over its edge */
.rental__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}
.rental__notice {
  position: relative;
  padding: var(--s-8) var(--s-8) var(--s-7);
  border: 3px double var(--platemark);
  background: var(--sheet);
}
.rental__notice > .plate__corner { width: 2.25rem; height: 2.25rem; }
.rental__lead { max-width: 44ch; font-size: var(--fs-lead); color: var(--ink-2); }
.rental__terms { margin-top: var(--s-7); }
.rental__included { margin-top: var(--s-6); }
.rental__included h3 { margin-bottom: var(--s-3); }
.rental__included li { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-1); }
.rental__note { margin-top: var(--s-6); color: var(--ink-2); }
.rental__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-5);
}
.rental__plate {
  position: relative;
  z-index: 1;
  justify-self: start;
  width: min(100%, 26rem);
  /* Overlaps only the notice's margin, never its prices */
  margin-left: calc(var(--s-6) * -1);
  transform: rotate(2deg);
}

@media (max-width: 60rem) {
  .rental__grid { gap: var(--s-6); }
  .rental__notice { padding: var(--s-7) var(--s-5) var(--s-6); }
  .rental__plate { margin-left: 0; padding: var(--s-4); }
}
@media (max-width: 47.9375rem) {
  .rental__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .rental__plate {
    justify-self: center;
    width: min(100%, 20rem);
    transform: none;
  }
}

/* ---------- How to find us ---------- */
.findus__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: start;
}
.findus__address { display: grid; gap: var(--s-1); margin-top: var(--s-6); font-style: normal; }
.findus__street { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; }
.findus__address span + span { color: var(--ink-2); }

/* The way in, step by step: a courtyard entrance is easy to miss */
.findus__steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
  counter-reset: step;
}
.findus__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-lead);
}
.findus__steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ornament);
}
.findus__facts { margin-top: var(--s-6); }

.findus__contacts { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--hair); }
.findus__tel { font-family: var(--font-display); font-size: var(--fs-h3); text-decoration: none; }
.findus__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-2); }
.findus__links a { display: inline-flex; align-items: center; min-height: var(--tap); }
.findus__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-4);
}

/* The way in as an engraved plan: our own hairline schematic, hand-coloured house on a blue wash.
   Only what helps find the door; the caption links to the interactive Yandex map. */
.findus__map { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.findus__frame {
  aspect-ratio: 4 / 3;
  margin: var(--s-3) 0 var(--s-4);
  overflow: hidden;
}
.plan { display: block; width: 100%; height: 100%; }
.plan__ground { fill: var(--wash-blue); }
.plan__road { fill: var(--paper); }
.plan__line, .plan__leader { fill: none; stroke: var(--ornament); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.plan__leader { stroke-dasharray: 2 4; }
.plan__house { fill: var(--wash-rose); stroke: var(--ink); stroke-width: 1.2; }
.plan__door { fill: var(--ink); }
.plan__door-ring { fill: none; stroke: var(--ink); stroke-width: 1; }
.plan__stop { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.2; }
.plan text { font-family: var(--font-text); fill: var(--ink); }
.plan__street { font-size: 17px; font-style: italic; letter-spacing: .04em; fill: var(--ink-2); }
.plan__number { font-family: var(--font-display); font-size: 18px; text-anchor: middle; }
.plan__label { font-size: 17px; }
.plan__label--small { font-size: 15px; }
.plan__note { font-size: 17px; font-style: italic; fill: var(--ink-2); }
.plan__note--small { font-size: 13px; }

@media (max-width: 60rem) {
  .findus__grid { gap: var(--s-6); }
  .findus__map { padding: var(--s-4); }
}
@media (max-width: 47.9375rem) {
  .findus__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .findus__map { position: static; }
}

/* ---------- About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s-8);
  align-items: start;
}
.cameo {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
}
.cameo__frame {
  width: min(100%, 20rem);
  aspect-ratio: 4 / 5;
  padding: var(--s-3);
  border: 1px solid var(--platemark);
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: var(--shadow-plate);
}
.cameo__img {
  position: relative;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wash-blue);
  display: grid;
  place-items: center;
}
.cameo__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 50%);
}
.cameo__img span { max-width: 14ch; font-size: var(--fs-small); color: var(--ink-2); }
.cameo figcaption { font-style: italic; font-size: var(--fs-lead); }

.about__text > p { margin-top: var(--s-4); max-width: 60ch; }
.about__text > p:first-of-type { font-size: var(--fs-lead); }
.about__amenities { margin-top: var(--s-7); max-width: 34rem; }
.about__amenities h3 { margin-bottom: var(--s-3); }
.about__aside { display: grid; justify-items: center; gap: var(--s-7); }
.about__plate { width: min(100%, 24rem); }
.about__plate.plate--blue { transform: rotate(-1.5deg); }

/* Masters: a full-width row of large cameos; each portrait is cropped so the face sits dead centre */
.masters { margin-top: var(--s-9); }
.masters .title-orn p { max-width: 44ch; color: var(--ink-2); }
.masters__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  justify-items: center;
  gap: var(--s-7) var(--s-6);
  margin-top: var(--s-7);
}
.masters__list > li { width: 100%; display: grid; justify-items: center; }
.masters__list .cameo { gap: var(--s-4); width: min(100%, 18rem); }
.masters__list .cameo__frame { width: 100%; }
.masters__list figcaption { display: grid; gap: var(--s-1); font-style: normal; }
.masters__name { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; }
.masters__role { font-style: italic; color: var(--ink-2); }
@media (max-width: 47.9375rem) {
  .about__plate.plate--blue { transform: none; }
  .masters { margin-top: var(--s-8); }
}

@media (max-width: 60rem) {
  .about__grid { gap: var(--s-6); }
}
@media (max-width: 47.9375rem) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}