/* ============================================================
   YES DAY - svatební salon
   Elevated redesign of the client's concept.

   Layout system: a manuscript grid. Every section is a spread with a
   narrow standing rail on the left carrying its number and name, and a
   body whose column split changes from section to section, so the page
   never repeats the same measure twice in a row.

   Rules that govern this file:
   - No icons. Hairlines, numerals and typographic scale carry meaning.
   - Ordinals appear only where the content is genuinely ordered.
   - No radii, no shadows, no gradients, no pills.
   - Photography is a weak, swappable material: fixed ratios, one warm
     grade, air around every frame, exactly one bleed per page.
   ============================================================ */

:root {
  --cream:  #F6F1EA;
  --paper:  #FBF8F4;
  --brown:  #2C221C;
  --taupe:  #8A7462;
  --line:   #E3D9CD;
  --line-2: #D6C9B8;
  /* Jemnější linka uvnitř panelů administrace. */
  --line-soft: #EDE4D8;
  --ink:    #1C1714;
  --ink-60: rgba(28, 23, 20, .62);
  --ink-40: rgba(28, 23, 20, .40);
  --ink-24: rgba(28, 23, 20, .24);

  /* Baskervville: the Baskerville of the pairing Alex picked. Full
     latin-ext, so Czech carons and acutes are properly drawn. */
  --serif: "Baskervville", "Baskerville", "Times New Roman", serif;
  --sans:  "Instrument Sans", -apple-system, "Segoe UI", sans-serif;

  --pad:    clamp(20px, 4.5vw, 72px);
  --gutter: clamp(20px, 2.4vw, 40px);
  --rail:   clamp(88px, 9vw, 140px);
  --max:    1460px;

  --sec:    clamp(64px, 8vw, 132px);

  --ease:   cubic-bezier(.16, .84, .44, 1);

  /* Corner radii. Every rounded corner on the site reads one of these
     four, so the softness can be tuned in one place. */
  --r-frame: 20px;  /* photographs and the map */
  --r-btn:   10px;  /* buttons, pager, calendar cells */
  --r-field: 10px;  /* inputs and selects */
  --r-panel: 24px;  /* panels and boxed blocks */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }

/* ---------- primitives ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.eyebrow {
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 400; }

.h1 { font-size: clamp(2.7rem, 6.6vw, 5.8rem); }
.h2 { font-size: clamp(2rem, 3.9vw, 3.3rem); }
.h3 { font-size: clamp(1.4rem, 2.2vw, 1.95rem); }

.lede {
  font-size: clamp(15px, 1.15vw, 17.5px);
  color: var(--ink-60);
  max-width: 46ch;
  line-height: 1.7;
}
.small { font-size: 13.5px; color: var(--ink-60); line-height: 1.65; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-btn);
  border: 1px solid var(--brown);
  padding: 17px 34px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
/* the label sits above a panel that wipes up from the baseline */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn > span { position: relative; z-index: 2; display: block; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }

.btn--primary { background: var(--brown); color: var(--cream); }
.btn--primary::before { background: var(--taupe); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost::before { background: var(--brown); }
.btn--ghost:hover { color: var(--cream); border-color: var(--brown); }
.btn--onDark { background: var(--cream); color: var(--brown); border-color: var(--cream); }
.btn--onDark::before { background: var(--taupe); }
.btn--onDark:hover { color: var(--cream); }
.btn--sm { padding: 13px 24px; }

/* text link: the arrow steps forward, the rule fills in behind it */
.tlink span { transition: transform .35s var(--ease); }
.tlink:hover span { transform: translateX(5px); }

.tlink {
  display: inline-flex;
  align-items: baseline;
  gap: .7em;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .35s ease;
}
.tlink { width: fit-content; }
.tlink:hover { border-color: var(--brown); }
.tlink span { font-family: var(--serif); font-size: 15px; letter-spacing: 0; }

/* ---------- icons ----------
   Hand drawn single-line illustrations. The delivered JPEGs are kept in
   assets/icons/*.jpg as the master files; the .png beside each one is the
   same drawing with the white plate turned into real transparency, so the
   ink sits on the cream ground with no plate showing through.
   They carry more detail than a glyph, so they are set larger. */
.ico {
  width: 92px; height: 92px;
  flex: none;
  object-fit: contain;
  opacity: .9;
}
.ico--sm { width: 44px; height: 44px; }
/* the calendar is drawn with a heavier pen than the rest of the set */
.ico[src*="calendar"] { opacity: .76; }

/* ---------- images ---------- */
.frame { position: relative; overflow: hidden; background: var(--line); border-radius: var(--r-frame); }
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.78) contrast(1.02) brightness(1.03) sepia(.07);
  transition: transform 1.6s var(--ease);
}
.frame::after {              /* unifies mixed photo sources into one warm set */
  content: "";
  position: absolute; inset: 0;
  background: var(--taupe);
  mix-blend-mode: multiply;
  opacity: .085;
  pointer-events: none;
}
.r-45 { aspect-ratio: 4 / 5; }
.r-34 { aspect-ratio: 3 / 4; }
.r-23 { aspect-ratio: 2 / 3; }
.r-11 { aspect-ratio: 1 / 1; }
.r-32 { aspect-ratio: 3 / 2; }
.r-916 { aspect-ratio: 9 / 16; }

/* Browsers without aspect-ratio would let every photograph fall back to
   its natural height. The padding box keeps the same proportions. */
@supports not (aspect-ratio: 1 / 1) {
  .frame { height: 0; }
  .r-45 { padding-bottom: 125%; }
  .r-34 { padding-bottom: 133.33%; }
  .r-23 { padding-bottom: 150%; }
  .r-11 { padding-bottom: 100%; }
  .r-32 { padding-bottom: 66.67%; }
  .r-916 { padding-bottom: 177.78%; }
  .frame img { position: absolute; inset: 0; }
  .cols--level > figure .frame { padding-bottom: 133.33%; }
}

.caption {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 14px; padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.caption i {
  font-style: normal; font-family: var(--serif); font-size: 14px;
  letter-spacing: 0; color: var(--taupe);
  font-variant-numeric: lining-nums;
}
.caption b { font-weight: 500; color: var(--ink-60); }

/* exactly one row per page may run off the right edge - far enough to
   read as a bleed, not so far that the last card loses its caption */
.bleed-r { margin-right: max(calc(-1 * var(--pad)), -36px); }
@media (max-width: 1180px) { .bleed-r { margin-right: -24px; } }

/* ============================================================
   SCROLL CHOREOGRAPHY
   Three moves only: text rises, hairlines draw themselves left to
   right, photographs settle out of a slight overscale.
   ============================================================ */
/* Gated on .js: without scripting every element renders in its final
   state, so the page is complete for crawlers and for anyone whose
   JavaScript never arrives. */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }

.js .rvline { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.js .rvline.in { transform: scaleX(1); }

.js .rvimg .frame img { transform: scale(1.07); }
.js .rvimg.in .frame img { transform: scale(1); }

/* ============================================================
   HEADER
   ============================================================ */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.site-head__in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gutter);
  height: 92px;
  transition: height .4s var(--ease);
}
.is-scrolled .site-head__in { height: 68px; }
.logo img {
  height: 54px; width: auto;
  /* plate is #FEF7F1, lighter than any ground it sits on, so darken removes it */
  mix-blend-mode: darken;
  transition: height .4s var(--ease);
}
.is-scrolled .logo img { height: 40px; }
.nav { display: flex; justify-content: center; gap: clamp(20px, 2.6vw, 42px); }
.nav a {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 0;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.nav a { color: var(--ink-60); }
.nav a:hover { color: var(--ink); border-color: var(--line-2); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-width: 2px; border-color: var(--brown); }
.head-cta { display: flex; align-items: center; gap: 18px; }
.head-phone { font-size: 11px; letter-spacing: .12em; color: var(--ink-60); white-space: nowrap; }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 1px; background: var(--ink); margin: 5px 0; }

/* ============================================================
   THE MANUSCRIPT GRID
   ============================================================ */
.spread {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
  padding-block: var(--sec);
}
.spread + .spread { padding-top: 0; }

/* chapters are separated by a full width rule and extra air, so the eye
   registers where one ends and the next begins */
.chapter-break {
  border: 0; border-top: 1px solid var(--line-2);
  margin: 0; height: 0;
}
.spread--chapter { padding-top: clamp(48px, 5vw, 80px); }
.spread--tight { padding-block: clamp(44px, 5vw, 76px); }

.rail {
  border-right: 1px solid var(--line);
  padding-right: 18px;
}
.rail__inner { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 18px; }
.rail__num {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 300; line-height: 1;
  color: var(--taupe);
  font-variant-numeric: lining-nums;
}
.rail__label {
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-40);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.rail__note {
  font-size: 11.5px; line-height: 1.55; color: var(--ink-40);
  border-top: 1px solid var(--line); padding-top: 12px;
}

/* body column splits, never the same twice running */
.cols { display: grid; gap: clamp(24px, 3.4vw, 64px); align-items: start; }
/* a picture column that has to finish level with the text beside it */
/* The picture keeps a fixed proportion instead of being stretched to the
   height of the text beside it. Stretching made the frame depend on how
   the copy happened to wrap, so the same page rendered differently on a
   different browser or window width. A fixed ratio renders identically
   everywhere, which matters more here than a perfectly level baseline. */
.cols--level { align-items: start; }
.cols--level > figure .frame { aspect-ratio: 3 / 4; }
.cols-46 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.cols-55 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols-64 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.cols-73 { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.cols-37 { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }

/* section opener inside a spread body */
.opener { border-top: 1px solid var(--line); padding-top: 24px; margin-bottom: clamp(32px, 4vw, 64px); }
.opener__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px clamp(28px, 4vw, 64px);
}
/* a note that reads as a deliberate margin note: own rule, top aligned,
   never a paragraph adrift beside a heading */
.opener__note {
  align-self: end;
  max-width: 30ch;
  border-left: 1px solid var(--line);
  padding: 2px 0 2px 20px;
  font-size: 13px; line-height: 1.6; color: var(--ink-60);
}
.opener p.lede { margin-top: 18px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(40px, 6vw, 88px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: stretch;
}
/* the type column spreads over the full height of the picture beside it,
   so the buttons land near the bottom edge of the photograph */
.hero__copy {
  padding-top: clamp(0px, 2vw, 30px);
  display: flex; flex-direction: column;
  justify-content: center;
}
.hero__actions { margin-top: clamp(30px, 3.4vw, 46px); }
.hero__copy .eyebrow { display: block; margin-bottom: 26px; }
.hero .h1 { margin-bottom: 32px; max-width: 18ch; }
.hero__lede { margin-bottom: 40px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__art { position: relative; margin-top: clamp(0px, 3vw, 44px); z-index: 2; }

/* the label lies inside the photograph on a frosted panel, so the picture
   keeps running underneath it instead of being cut away */
.hero__stamp {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px clamp(20px, 2.2vw, 30px) 20px;
  border-radius: 0 0 var(--r-frame) var(--r-frame);
  background: rgba(246, 241, 234, .58);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, .34);
  color: var(--ink);
}
@supports not (backdrop-filter: blur(4px)) {
  .hero__stamp { background: rgba(246, 241, 234, .92); }
}
.hero__stamp b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(21px, 1.9vw, 26px); font-weight: 400; line-height: 1.15;
  margin-bottom: 4px;
}
.hero__stamp span { display: block; font-size: 10.5px; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60); }

/* meta band tucks under the hero image */
/* Four drawings with a caption under each. No cells, no vertical rules -
   the illustrations are the point, so they get room and the words step
   back under them. One hairline above the row is the only frame. */
.metaband {
  margin-top: clamp(40px, 5vw, 76px);
  padding-top: clamp(38px, 4.4vw, 62px);
  border-top: 1px solid var(--line);
  position: relative;
}
.metaband ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 56px);
}
.metaband li {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 0 4px;
}
.metaband .ico { margin-bottom: 16px; }
.metaband li b {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-40);
}
.metaband li em {
  font-family: var(--serif); font-style: normal;
  font-size: clamp(18px, 1.6vw, 23px); line-height: 1.25;
  letter-spacing: -.005em; color: var(--ink);
  text-wrap: balance;
}

/* ============================================================
   COLLECTION - one lead piece, two followers, never three equals
   ============================================================ */
.coll { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gutter); align-items: start; }
.coll__item:nth-child(2) { margin-top: clamp(28px, 5vw, 88px); }
.coll__item:nth-child(3) { margin-top: clamp(56px, 9vw, 152px); }
.coll__item a:hover .frame img { transform: scale(1.035); }
.coll__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--line);
  margin-top: 18px; padding-top: 13px;
}
.coll__name { font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.coll__style { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--taupe); white-space: nowrap; }
.coll__price { margin-top: 7px; font-size: 12px; color: var(--ink-40); }

/* the section's own link sits under its content, left aligned with it */
.coll__after { margin-top: clamp(28px, 3.4vw, 48px); }

/* ============================================================
   CRAFT STRIP - detail crops at staggered depths
   ============================================================ */
.craft { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter); align-items: start; }
.craft figure:nth-child(2) { margin-top: clamp(20px, 3vw, 52px); }
.craft figure:nth-child(3) { margin-top: clamp(8px, 1.4vw, 22px); }
.craft figure:nth-child(4) { margin-top: clamp(30px, 4.6vw, 76px); }
.craft figure:nth-child(5) { margin-top: clamp(14px, 2.2vw, 36px); }
.craft figcaption { margin-top: 12px; }
.craft__n { font-family: var(--serif); font-size: 14px; color: var(--taupe); }
.craft__t { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; margin-top: 5px; }

/* ============================================================
   FEATURE LIST - two columns, hairlines, no ordinals
   ============================================================ */
.index { border-top: 1px solid var(--brown); }
.index li {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(14px, 2.4vw, 40px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.index__t { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 25px); font-weight: 400; line-height: 1.25; }
.index__d { font-size: 14.5px; color: var(--ink-60); line-height: 1.65; }

/* ============================================================
   TIMELINE - genuinely ordered, so it carries real numbers: minutes
   ============================================================ */
.timeline { border-top: 1px solid var(--brown); }
.timeline li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.timeline__t {
  font-family: var(--serif); font-size: 26px; font-weight: 300; line-height: 1;
  color: var(--taupe); font-variant-numeric: tabular-nums;
}
.timeline__t small { display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); margin-top: 6px; }
.timeline__h { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 25px); font-weight: 400; line-height: 1.25; }
.timeline__d { font-size: 14px; color: var(--ink-60); line-height: 1.65; }

/* ============================================================
   DESIGNER INDEX - a real list, set like one
   ============================================================ */
.brands { columns: 2; column-gap: clamp(28px, 4vw, 72px); }
.brands li {
  break-inside: avoid;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
}
.brands b { font-family: var(--serif); font-size: 19px; font-weight: 400; }
.brands span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40); white-space: nowrap; }

/* ============================================================
   DARK BLOCK
   ============================================================ */
.dark { background: var(--brown); color: var(--cream); }
.dark .eyebrow { color: rgba(246,241,234,.55); }
.dark .rail { border-right-color: rgba(246,241,234,.18); }
.dark .rail__num { color: rgba(246,241,234,.6); }
.dark .rail__label { color: rgba(246,241,234,.42); }
.quote blockquote {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 1.2; letter-spacing: -.01em;
  text-wrap: balance; max-width: 30ch;
}
.quote cite { display: block; margin-top: 28px; font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(246,241,234,.5); }

.numbers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(246,241,234,.18); margin-top: clamp(40px, 5vw, 76px); }
.numbers li { padding: 32px 8px 4px 30px; border-left: 1px solid rgba(246,241,234,.18); }
.numbers li:first-child { border-left: 0; padding-left: 0; }
.numbers b {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1; margin-bottom: 10px;
}
.numbers span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,241,234,.55); }

/* ============================================================
   FAQ - hairline disclosure, no chevrons
   ============================================================ */
.faq { border-top: 1px solid var(--brown); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  font-family: var(--serif); font-size: clamp(18px, 1.7vw, 22px); font-weight: 400; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--sans); font-size: 16px; color: var(--taupe);
  transition: transform .3s var(--ease); flex: none; line-height: 1.6;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 24px; font-size: 14.5px; color: var(--ink-60); max-width: 62ch; line-height: 1.7; }

/* ============================================================
   VISIT - address set as a record, not a card
   ============================================================ */
.visit dl { display: grid; grid-template-columns: max-content 1fr; gap: 14px 28px; }
.visit dt { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); padding-top: 5px; white-space: nowrap; }
.visit dd { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.4; }
.visit dd small { display: block; font-family: var(--sans); font-size: 13px; color: var(--ink-60); margin-top: 3px; }

/* ============================================================
   CLOSING
   ============================================================ */
.closing {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px); align-items: end;
  padding-block: clamp(60px, 7vw, 116px);
  border-top: 1px solid var(--line);
}
.closing p { margin-top: 20px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot { background: var(--brown); color: var(--cream); padding-block: clamp(56px, 6vw, 92px) 0; }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr));
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(48px, 5vw, 76px);
}
.foot__logo img {
  height: 62px; width: auto;
  /* inverted plate is near black, darker than the brown ground -> lighten removes it */
  filter: invert(1);
  mix-blend-mode: lighten;
  margin-bottom: 20px;
}
.foot__note { font-size: 13px; color: rgba(246,241,234,.55); max-width: 30ch; line-height: 1.65; }
.foot h4 { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: rgba(246,241,234,.5); margin-bottom: 20px; }
.foot dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; font-size: 13.5px; }
.foot dt { color: rgba(246,241,234,.5); white-space: nowrap; }
.foot ul li { font-size: 13.5px; margin-bottom: 9px; }
.foot a { border-bottom: 1px solid transparent; transition: border-color .3s ease; padding-bottom: 2px; }
.foot a:hover { border-color: rgba(246,241,234,.5); }
.foot__bar {
  border-top: 1px solid rgba(246,241,234,.16);
  padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-size: 11.5px; color: rgba(246,241,234,.45);
}

/* ============================================================
   BOOKING
   ============================================================ */
.book { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 56px); align-items: start; }
.book aside { position: sticky; top: 108px; }

.panel { border: 1px solid var(--line); background: var(--paper); padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-panel); }
.panel + .panel { margin-top: var(--gutter); }
.panel h3 { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--taupe); margin-bottom: 24px; }

.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.cal__month { font-family: var(--serif); font-size: 22px; white-space: nowrap; }
.cal__nav { display: flex; gap: 6px; }
.cal__nav button {
  width: 34px; height: 34px; border: 1px solid var(--line); background: transparent;
  border-radius: var(--r-btn); cursor: pointer; line-height: 1; transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.cal__nav button:hover { border-color: var(--brown); background: var(--brown); color: var(--cream); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.cal__grid span, .cal__grid button {
  background: var(--paper); aspect-ratio: 1 / .82;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; border: 0; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .25s ease, color .25s ease;
}
.cal__grid span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); aspect-ratio: auto; padding: 12px 0; cursor: default; }
.cal__grid button:hover:not(:disabled) { background: var(--line); }
.cal__grid button[aria-pressed="true"] { background: var(--brown); color: var(--cream); }
.cal__grid button:disabled { color: var(--ink-24); cursor: not-allowed; }
.cal__grid button.is-out { color: var(--ink-24); }

.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slots button {
  border: 1px solid var(--line-2); background: transparent; padding: 15px 6px;
  border-radius: var(--r-btn);
  font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.slots button:hover:not(:disabled) { border-color: var(--brown); }
.slots button[aria-pressed="true"] { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.slots button:disabled { color: var(--ink-24); border-color: var(--line); cursor: not-allowed; text-decoration: line-through; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); margin-bottom: 9px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line-2); background: var(--cream);
  border-radius: var(--r-field); padding: 14px 16px; font-size: 14.5px;
  transition: border-color .3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--brown); }
.field ::placeholder { color: rgba(28,23,20,.34); }
.field textarea { resize: vertical; font-family: var(--sans); }
.field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 12px 20px; font-size: 14px; }
.summary dt { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); padding-top: 3px; white-space: nowrap; }
.summary dd { margin: 0; font-family: var(--serif); font-size: 19px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 11px 22px; font-size: 14px; }
.kv dt { color: var(--taupe); white-space: nowrap; }
.kv dd { margin: 0; }

.hairlist { border-top: 1px solid var(--line); }
.hairlist li {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; align-items: baseline;
}
.hairlist li i { font-style: normal; font-family: var(--serif); font-size: 15px; color: var(--taupe); }

/* ============================================================
   CATALOG
   ============================================================ */
.filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: 20px;
}
.filters .field { margin: 0; min-width: 165px; }
.filters__count { margin-left: auto; white-space: nowrap; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40); padding-bottom: 14px; }

.grid-saty { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 52px) var(--gutter); margin-top: clamp(32px, 4vw, 56px); }
.card a:hover .frame img { transform: scale(1.035); }
.card__meta { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 12px; }
.card__name { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.card__designer { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--taupe); margin-top: 2px; }
.card__prices { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 10px; font-size: 12px; color: var(--ink-60); }
.card__prices b { font-weight: 500; color: var(--ink); }
.card__sizes { margin-top: 6px; font-size: 11px; letter-spacing: .1em; color: var(--ink-40); }
.card__tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--cream); padding: 8px 12px; white-space: nowrap;
  border-radius: var(--r-frame) 0 var(--r-btn) 0;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe);
}

.pager { display: flex; justify-content: center; gap: 6px; margin-top: clamp(40px, 5vw, 72px); }
.pager a {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); font-size: 13px; border-radius: var(--r-btn);
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.pager a:hover { border-color: var(--brown); }
.pager a[aria-current="page"] { background: var(--brown); color: var(--cream); border-color: var(--brown); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  :root { --rail: 76px; }
  .rail__note { display: none; }
  .craft { grid-template-columns: repeat(3, 1fr); }
  .craft figure:nth-child(n) { margin-top: 0; }
  .craft figure:nth-child(2) { margin-top: clamp(18px, 3vw, 44px); }
  .craft figure:nth-child(5) { margin-top: clamp(18px, 3vw, 44px); }
  .grid-saty { grid-template-columns: repeat(3, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .site-head__in { grid-template-columns: auto 1fr; height: 72px; }
  .is-scrolled .site-head__in { height: 62px; }
  .nav {
    display: none;
    position: absolute; inset: 72px 0 auto; background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px var(--pad) 24px;
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
  .head-cta .btn, .head-phone { display: none; }
  .burger { display: block; justify-self: end; }

  /* the rail folds into a horizontal label above the section */
  .spread { grid-template-columns: 1fr; row-gap: 20px; }
  .rail { border-right: 0; border-top: 1px solid var(--line); padding: 14px 0 0; }
  .rail__inner { position: static; flex-direction: row; align-items: baseline; gap: 14px; }
  .rail__num { font-size: 20px; }
  .rail__label { writing-mode: horizontal-tb; transform: none; }

  .cols-46, .cols-55, .cols-64, .cols-73, .cols-37 { grid-template-columns: 1fr; }
  .opener { border-top: 0; padding-top: 0; }

  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero__art { margin-top: 0; max-width: 460px; }
  .hero .h1 { max-width: 100%; }
  .metaband { margin-top: 0; padding-top: 0; }
  .metaband::before { display: none; }
  .metaband ul { grid-template-columns: 1fr 1fr; }
  .metaband li { border-left: 0; padding-left: 0; padding-block: 18px; border-top: 1px solid var(--line); }
  .metaband li:nth-child(-n+2) { border-top: 0; }

  .coll { grid-template-columns: 1fr 1fr; }
  .coll__item:nth-child(n) { margin-top: 0; }
  .bleed-r { margin-right: 0; }

  .brands { columns: 1; }
  .numbers { grid-template-columns: 1fr; }
  .numbers li { border-left: 0; padding-left: 0; padding-block: 22px; border-top: 1px solid rgba(246,241,234,.18); }
  .numbers li:first-child { border-top: 0; }

  .timeline li { grid-template-columns: 82px minmax(0, 1fr); }
  .timeline__d { grid-column: 2; }

  .closing { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .book { grid-template-columns: 1fr; }
  .book aside { position: static; }
  .grid-saty { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .metaband ul { grid-template-columns: 1fr; }
  .metaband li:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .metaband li:first-child { border-top: 0; }
  .coll { grid-template-columns: 1fr; gap: 30px; }
  .craft { grid-template-columns: 1fr 1fr; gap: 20px; }
  .craft figure:nth-child(n) { margin-top: 0; }
  .index li { grid-template-columns: 1fr; gap: 8px; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; }
  .timeline__d { grid-column: 1; }
  .timeline__t { display: flex; align-items: baseline; gap: 10px; }
  .timeline__t small { margin-top: 0; }
  .slots { grid-template-columns: 1fr 1fr; }
  .field--2 { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 100%; }
  .visit dl { grid-template-columns: 1fr; gap: 2px 0; }
  .visit dt { padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto; }
  .js .rv, .js .rvline { opacity: 1; transform: none; }
  .js .rvimg .frame img { transform: none; }
}

/* ---------- drawable hairline (the one rule that animates) ---------- */
.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }
.hairline--ink { border-top-color: var(--brown); }
.dark .hairline { border-top-color: rgba(246,241,234,.18); }
.opener { border-top: 0; padding-top: 0; }
.opener .hairline { margin-bottom: 24px; }

/* ============================================================
   MAP
   Drawn by hand, in the page's own palette, and driven by the site's
   own script: drag to pan, wheel or the buttons to zoom, click the
   salon to open the route. No tile service, no key, no third party
   styling to fight with.
   ============================================================ */
.map { border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--paper); }

.map__canvas {
  position: relative;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
  background: var(--paper);
}
.map__canvas.is-panning { cursor: grabbing; }
.map__canvas:focus-visible { outline: 2px solid var(--brown); outline-offset: -2px; }
.map svg { display: block; width: 100%; height: auto; overflow: hidden; }
#mapView { transition: transform .5s var(--ease); }
.map__canvas.is-panning #mapView { transition: none; }

.m-ground { fill: var(--paper); }
.m-block  { fill: var(--cream); stroke: var(--line); stroke-width: 1; }
.m-court  { fill: var(--paper); stroke: none; }
.m-house  { fill: none; stroke: var(--line); stroke-width: .8; }
.m-park   { fill: rgba(138,116,98,.10); stroke: none; }
.m-tree   { fill: none; stroke: var(--line-2); stroke-width: .9; }
.m-road   { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.m-road--main { stroke: var(--line-2); stroke-width: 7; stroke-linecap: round; }
.m-rail   { fill: none; stroke: var(--paper); stroke-width: .9; }

.m-street { font-family: var(--sans); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; fill: var(--ink-40); }
.m-label  { font-family: var(--sans); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; fill: var(--taupe); }
.m-num    { font-family: var(--sans); font-size: 7px; letter-spacing: .04em; fill: var(--ink-24); }

/* the walk from the metro, drawn on when the map comes into view */
.m-walk {
  fill: none; stroke: var(--taupe); stroke-width: 1.6;
  stroke-dasharray: 4 5; stroke-linecap: round;
  opacity: .55;
  stroke-dashoffset: 1;
}
.js .rvimg .m-walk { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.js .rvimg.in .m-walk {
  stroke-dasharray: 4 5; stroke-dashoffset: 0; opacity: .55;
  transition: opacity .6s var(--ease) .5s;
}

/* markers */
.m-pin, .m-stop { cursor: pointer; }
.m-pin:focus-visible, .m-stop:focus-visible { outline: none; }
.m-plot { fill: rgba(44,34,28,.10); }
.m-pin__halo { fill: var(--taupe); opacity: .12; transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease), opacity .4s ease; }
.m-pin__ring { fill: none; stroke: var(--brown); stroke-width: 1.2; }
.m-pin__dot  { fill: var(--brown); }
.m-pin:hover .m-pin__halo, .m-pin:focus-visible .m-pin__halo { transform: scale(1.5); opacity: .2; }

.m-stop__bg { fill: var(--paper); stroke: var(--taupe); stroke-width: 1.2; transition: fill .3s ease; }
.m-stop__l  { font-family: var(--sans); font-size: 9px; font-weight: 500; fill: var(--taupe); text-anchor: middle; transition: fill .3s ease; }
.m-stop:hover .m-stop__bg, .m-stop:focus-visible .m-stop__bg { fill: var(--taupe); }
.m-stop:hover .m-stop__l,  .m-stop:focus-visible .m-stop__l  { fill: var(--paper); }

/* the label that follows the active marker */
.map__badge {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, calc(-100% - 20px));
  background: var(--brown); color: var(--cream);
  padding: 11px 16px 10px;
  border-radius: var(--r-btn);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease, transform .4s var(--ease);
  white-space: nowrap;
}
.map__badge.is-on { opacity: 1; }
.map__badge b { display: block; font-family: var(--serif); font-size: 15px; line-height: 1.2; }
.map__badge span { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(246,241,234,.6); margin-top: 3px; }
.map__badge::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; background: var(--brown);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
}

/* zoom controls */
.map__zoom { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 6px; }
.map__zoom button {
  width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--paper); color: var(--ink-60);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.map__zoom button:hover { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.map__zoom button:last-child { font-size: 9px; }

.map__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  border-top: 1px solid var(--line);
  padding: 15px clamp(16px, 2vw, 22px);
}
.map__legend ul { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.map__legend li { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink-60); }
.map__legend i {
  font-style: normal; font-size: 8.5px; font-weight: 500;
  width: 19px; height: 19px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--taupe);
}
.map__legend i.is-salon { background: var(--brown); border-color: var(--brown); }
.map__legend b { font-weight: 500; color: var(--ink); }
.map__legend .tlink { margin-left: auto; }

@media (max-width: 560px) {
  .map__legend { flex-direction: column; align-items: flex-start; }
  .map__legend .tlink { margin-left: 0; }
}

/* ============================================================
   GALLERY - a shop shown as a room, not two equal rectangles
   ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto;
  gap: var(--gutter);
}
.gallery figure:nth-child(1) { grid-row: 1 / span 2; }
.gallery figure:nth-child(3) { align-self: start; }
.gallery__wide { grid-column: 1 / -1; }

/* ============================================================
   PULL - a short claim that fills the room a bare band leaves behind
   ============================================================ */
.pull {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(52px, 6vw, 96px);
  padding-block: clamp(44px, 5vw, 76px) 0;
  border-top: 1px solid var(--line);
}
.pull__claim {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.3;
  letter-spacing: -.008em; text-wrap: balance;
}
.pull__claim em { font-style: italic; }
.pull__side { display: grid; gap: 16px; justify-items: start; }
.pull__side p { font-size: 14px; color: var(--ink-60); line-height: 1.7; max-width: 46ch; }

@media (max-width: 900px) {
  .metaband li { padding: 20px 0; grid-template-columns: auto minmax(0, 1fr); }
  .cols--level > figure .frame { aspect-ratio: 3 / 4; }
  .gallery { grid-template-columns: 1fr; }
  .gallery figure:nth-child(1) { grid-row: auto; }
  .pull { grid-template-columns: 1fr; }
  .opener__row { grid-template-columns: 1fr; }
  .opener__note { border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; max-width: 100%; }
  .ico { width: 40px; height: 40px; }
}

/* ============================================================
   BRAND BAND - a four column list, set flat, deliberately unlike
   the two column question list in the next chapter
   ============================================================ */
.brandgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--brown);
}
.brandgrid li {
  padding: 24px clamp(14px, 1.6vw, 24px) 26px 0;
  border-bottom: 1px solid var(--line);
}
.brandgrid b {
  display: block;
  font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400; line-height: 1.2; margin-bottom: 6px;
}
.brandgrid span {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-40);
}

/* a section's closing action, left aligned with the body column */
.cols--tail { margin-top: clamp(28px, 3.2vw, 44px); }

@media (max-width: 1180px) { .brandgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .brandgrid { grid-template-columns: 1fr; } }