/* ═══════════════════════════════════════════════════════════
   BERA JACKETS — one page
   Palette per "Website Color Palette Brief"
   Type: EB Garamond (display + prose) / Inter (labels + UI)
   ═══════════════════════════════════════════════════════════ */

/* ── fonts ─────────────────────────────────────────────── */
@font-face{
  font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/ebgaramond-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:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/ebgaramond-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/ebgaramond-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;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/inter-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:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/inter-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── tokens ────────────────────────────────────────────── */
:root{
  /* core palette */
  --ivory:#F3EBDD;
  --warm-white:#FBF8F3;
  --brown:#402F2D;
  --navy:#2C343E;
  --taupe:#A79B91;
  --deep-ink:#1D1B1A;
  --gold:#A98648;

  /* semantic (light ground) */
  --bg:var(--ivory);
  --fg:var(--brown);
  --fg-muted:color-mix(in srgb, var(--brown) 72%, var(--ivory));
  --fg-faint:color-mix(in srgb, var(--brown) 42%, var(--ivory));
  --rule:color-mix(in srgb, var(--brown) 16%, transparent);
  --rule-strong:color-mix(in srgb, var(--brown) 32%, transparent);
  --accent:var(--gold);            /* ornaments: rules, diamonds, gradients */
  --accent-ink:#84642E;            /* gold TEXT on light grounds — AA 4.6:1 */
  --plate-bg:color-mix(in srgb, var(--taupe) 22%, var(--warm-white));

  /* type */
  --ff-display:'EB Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --ff-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --fs-label:0.6875rem;                                    /* 11 */
  --fs-meta:0.75rem;                                       /* 12 */
  --fs-body:clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem); /* 17 → 19 */
  --fs-deck:clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-h3:clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-h2:clamp(1.75rem, 1.35rem + 2.3vw, 3.125rem);       /* 28 → 50 */
  --fs-statement:clamp(1.5rem, 1.1rem + 1.9vw, 2.375rem);
  --fs-hero:clamp(2.25rem, 1.3rem + 4.4vw, 4rem);

  /* rhythm */
  --gutter:clamp(1.5rem, 6vw, 4.5rem);
  --container:74rem;
  --measure:33rem;
  --section-y:clamp(5rem, 9.5vw, 9.5rem);
  --spread-y:clamp(4rem, 7.5vw, 7.5rem);
  --head-h:clamp(5.5rem, 6.4vw, 7rem);

  --ease:cubic-bezier(.22,1,.36,1);
}

/* dark grounds */
.chapter--dark{
  --bg:var(--brown);
  --fg:var(--warm-white);
  --fg-muted:color-mix(in srgb, var(--warm-white) 72%, var(--brown));
  --fg-faint:color-mix(in srgb, var(--warm-white) 45%, var(--brown));
  --rule:color-mix(in srgb, var(--warm-white) 20%, transparent);
  --rule-strong:color-mix(in srgb, var(--warm-white) 34%, transparent);
  --plate-bg:color-mix(in srgb, var(--warm-white) 10%, var(--brown));
  --accent:color-mix(in srgb, var(--gold) 82%, var(--warm-white));
  --accent-ink:color-mix(in srgb, var(--gold) 82%, var(--warm-white));
}
.chapter--tint{ --bg:var(--warm-white); }

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 1.5rem)}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--ff-display);font-size:var(--fs-body);font-weight:400;
  line-height:1.68;letter-spacing:.004em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-kerning:normal;font-variant-ligatures:common-ligatures;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,ol,ul,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:1px}
::selection{background:color-mix(in srgb, var(--gold) 30%, transparent)}

.skip-link{
  position:absolute;left:50%;top:0;translate:-50% -120%;z-index:100;
  background:var(--brown);color:var(--warm-white);padding:.75rem 1.25rem;
  font-family:var(--ff-ui);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;
  transition:translate .2s var(--ease);
}
.skip-link:focus{translate:-50% 0}

.wrap{width:min(100% - var(--gutter)*2, var(--container));margin-inline:auto}

/* ── shared type ───────────────────────────────────────── */
.display{
  font-family:var(--ff-display);font-weight:400;font-size:var(--fs-h2);
  line-height:1.1;letter-spacing:.012em;text-transform:uppercase;
  text-wrap:balance;
}
.deck{
  font-family:var(--ff-display);font-style:italic;font-size:var(--fs-deck);
  line-height:1.3;color:var(--fg-muted);margin-top:.75rem;
}
.kicker{
  font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.185em;text-transform:uppercase;color:var(--accent-ink);
  line-height:1.7;margin-top:1rem;
}
.kicker--wide{font-size:var(--fs-meta);line-height:2;margin-top:1.25rem}

.prose > p + p{margin-top:1.1em}
.prose{color:var(--fg-muted);max-width:var(--measure)}
.prose__accent{color:color-mix(in srgb, var(--fg) 84%, var(--bg))}
.prose--cols{max-width:52rem}
.said{letter-spacing:.045em;color:var(--fg)}

.mark{display:block;width:2.75rem;height:1px;background:var(--accent);opacity:.75}
.spread--centred > .mark{margin-inline:auto}

/* ── masthead ──────────────────────────────────────────── */
.masthead{
  position:fixed;inset:0 0 auto;z-index:60;color:var(--fg);
  background:color-mix(in srgb, var(--ivory) 0%, transparent);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
}
.masthead.is-solid{
  background:color-mix(in srgb, var(--ivory) 92%, transparent);
  border-bottom-color:var(--rule);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
}
.masthead__inner{
  width:min(100% - var(--gutter)*2, calc(var(--container) + 6rem));margin-inline:auto;
  height:var(--head-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(.75rem,2vw,2rem);
}
.brand{
  grid-column:2;justify-self:center;
  display:flex;flex-direction:column;align-items:center;gap:.32rem;
  min-height:2.75rem;text-align:center;
}
.masthead__cta{grid-column:3;justify-self:end}
/* Знак набран текстом, а не картинкой: «BERA JACKETS» встаёт одной
   строкой в разрядку и остаётся чётким на любом экране. */
.brand__name{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.15rem,1.75vw,1.6rem);line-height:1.05;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;white-space:nowrap;
}
.brand__by{
  display:flex;align-items:center;gap:.55rem;align-self:stretch;
  font-family:var(--ff-display);font-style:italic;
  font-size:clamp(.75rem,1vw,.9rem);line-height:1;opacity:.85;
}
.brand__by::before,
.brand__by::after{content:'';flex:1;height:1px;background:currentColor;opacity:.45}
.brand__author{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(.78rem,1.1vw,.95rem);line-height:1.05;
  letter-spacing:.22em;text-indent:.22em;white-space:nowrap;
}
/* ── buttons ───────────────────────────────────────────── */
.btn{
  --btn-bg:var(--brown);--btn-fg:var(--warm-white);--btn-bd:var(--brown);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.875rem;padding:.85rem 1.9rem;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.185em;text-transform:uppercase;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover{--btn-bg:var(--navy);--btn-bd:var(--navy)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:var(--rule-strong)}
.btn--outline:hover{--btn-bg:var(--brown);--btn-fg:var(--warm-white);--btn-bd:var(--brown)}
.btn--sm{min-height:2.5rem;padding:.65rem 1.25rem;font-size:0.625rem;letter-spacing:.16em}
.btn--block{display:flex;width:100%}
.chapter--dark .btn{--btn-bg:var(--warm-white);--btn-fg:var(--brown);--btn-bd:var(--warm-white)}
.chapter--dark .btn:hover{--btn-bg:var(--gold);--btn-bd:var(--gold);--btn-fg:var(--brown)}

/* ── burger + menu ─────────────────────────────────────── */
.burger{grid-column:1;justify-self:start;display:flex;align-items:center;gap:.6rem;padding:.6rem 0;min-height:2.75rem}
.burger__bars{display:grid;gap:5px;width:1.25rem}
.burger__bars i{display:block;height:1px;background:currentColor;transition:translate .3s var(--ease), rotate .3s var(--ease)}
.burger__label{
  font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;
}
/* при открытом меню кнопка оказывается поверх светлой панели —
   иначе на титульном кадре она остаётся белой и пропадает */
.is-menu-open .burger{color:var(--brown)}
/* пока панель уже экрана, центрованное лого висит над фотографией;
   как только она перекрывает середину — лого тоже темнеет */
@media (max-width:992px){
  .is-menu-open .brand{color:var(--brown)}
}
.is-menu-open .burger__bars i:first-child{translate:0 3px;rotate:45deg}
.is-menu-open .burger__bars i:last-child{translate:0 -3px;rotate:-45deg}

.menu{
  position:fixed;inset:0;z-index:55;
  background:color-mix(in srgb, var(--deep-ink) 42%, transparent);
  opacity:0;transition:opacity .4s var(--ease);overflow:hidden;
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu__inner{
  width:min(100%, 31rem);height:100%;background:var(--ivory);
  padding:calc(var(--head-h) + 2rem) clamp(1.5rem,4vw,3rem) 3rem;
  display:flex;flex-direction:column;gap:2.5rem;
  overflow-y:auto;overscroll-behavior:contain;
  translate:-100% 0;transition:translate .45s var(--ease);
}
.menu.is-open .menu__inner{translate:0 0}
.menu__nav{display:flex;flex-direction:column}
.menu__nav a{
  display:flex;align-items:baseline;gap:1.1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--rule);
  font-family:var(--ff-display);font-size:clamp(1.125rem,.95rem + 1.05vw,1.5rem);line-height:1.2;
  text-transform:uppercase;letter-spacing:.02em;text-wrap:balance;
}
.menu__num{
  font-family:var(--ff-ui);font-size:0.625rem;font-weight:500;letter-spacing:.14em;
  color:var(--accent-ink);min-width:2rem;
}

/* ── hero ──────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding:calc(var(--head-h) + 2.5rem) 0 5.5rem;text-align:center;overflow:hidden;
  color:var(--fg);
}
.hero__media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 44%;display:none;
}
.has-hero-media .hero__media{display:block}
.has-hero-media .hero::after{
  content:'';position:absolute;inset:0;
  /* кадр светлый, поэтому держим две зоны: полосу под шапкой
     и низ под строку. Середина с гербом остаётся чистой. */
  background:linear-gradient(180deg,
    rgba(29,27,26,.66) 0%,
    rgba(29,27,26,.34) 10%,
    rgba(29,27,26,.06) 26%,
    rgba(29,27,26,.06) 56%,
    rgba(29,27,26,.34) 82%,
    rgba(29,27,26,.66) 100%);
}
.has-hero-media .hero{
  --fg:var(--warm-white);
  --fg-muted:color-mix(in srgb,var(--warm-white) 82%,transparent);
  --fg-faint:color-mix(in srgb,var(--warm-white) 52%,transparent);
  --accent-ink:color-mix(in srgb,var(--gold) 76%,var(--warm-white));
}
/* header sits over the photograph until the page scrolls */
.has-hero-media .masthead:not(.is-solid){
  --fg:var(--warm-white);
  --fg-muted:color-mix(in srgb,var(--warm-white) 82%,transparent);
  --rule-strong:color-mix(in srgb,var(--warm-white) 48%,transparent);
}
.hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.num--hero{font-size:.8125rem;margin-bottom:clamp(1.5rem,4vw,3rem)}
.num--hero::after{width:1.75rem}
.hero__mark{margin:0}
/* Кадр говорит сам за себя: герб на нём настоящий, поэтому логотип
   поверх не нужен. Внизу по центру остаётся только строка дома —
   она же занимает место указателя прокрутки. */
.has-hero-media .hero__mark{display:none}
.has-hero-media .hero__cue{display:none}
.has-hero-media .hero{
  align-content:end;text-align:center;
  padding-bottom:clamp(2.75rem,6.5vh,4.5rem);
}
.has-hero-media .hero__inner{align-items:center}
.has-hero-media .hero__tagline{margin-top:0}
.hero__lockup{
  display:block;width:min(66vw, 21.5rem);aspect-ratio:929/1170;
  max-height:min(42svh, 19rem);background:currentColor;
  -webkit-mask:url('../lockup.svg') center/contain no-repeat;
          mask:url('../lockup.svg') center/contain no-repeat;
}
.hero__chapter{
  margin-top:clamp(1.75rem,4vw,2.75rem);
  font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-meta);
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--accent-ink);
}
.hero__tagline{
  margin-top:clamp(2.25rem,5vw,3.25rem);font-family:var(--ff-display);font-style:italic;
  font-size:var(--fs-deck);color:var(--fg-muted);
}
.hero__cue{
  position:absolute;left:50%;translate:-50% 0;bottom:2.25rem;z-index:2;
  width:2.75rem;height:2.75rem;display:grid;place-items:center;
}
.hero__cue span{display:block;width:1px;height:2.5rem;background:var(--fg-faint);position:relative;overflow:hidden}
.hero__cue span::after{
  content:'';position:absolute;inset:0;background:var(--accent);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{0%{translate:0 -100%}60%,100%{translate:0 100%}}

/* ── chapters + spreads ────────────────────────────────── */
.chapter{background:var(--bg);color:var(--fg);padding-block:var(--section-y)}
.chapter--flush{padding-bottom:0}

/* Соседи с одним фоном: весь шаг даёт нижний отступ предыдущей секции. */
.chapter + .chapter{padding-top:0}

/* На границе смены фона воздух нужен с обеих сторон, иначе заголовок
   прижимается к цветному краю: цветная секция держит полный шаг внутри,
   соседняя со своей стороны — половину. Порядок важен: эти правила
   перебивают обнуление выше. */
.chapter:has(+ .chapter--dark),
.chapter:has(+ .chapter--tint){padding-bottom:calc(var(--section-y) / 2)}
.chapter--dark + .chapter,
.chapter--tint + .chapter{padding-top:calc(var(--section-y) / 2)}
.chapter + .chapter--dark,
.chapter + .chapter--tint{padding-top:var(--section-y)}

.chapter__head{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding-bottom:1.35rem;border-bottom:1px solid var(--rule);
  margin-bottom:var(--spread-y);
  font-family:var(--ff-ui);font-size:var(--fs-label);
  letter-spacing:.185em;text-transform:uppercase;color:var(--fg-faint);
}
.chapter__no{font-weight:500;color:var(--accent-ink)}
.chapter__dash{opacity:.6}
.chapter__title{color:var(--fg-muted)}
.chapter__head--sub{margin-bottom:2.25rem}

.spread{padding-bottom:var(--spread-y)}
.spread:last-child{padding-bottom:0}
.spread .mark + .display{margin-top:1.6rem}
.spread .display{margin-top:0}
.spread .prose{margin-top:1.9rem}
.spread .kicker + .prose{margin-top:1.6rem}
.spread .deck + .prose{margin-top:1.6rem}
.chapter__head--sub + .mark{margin-top:0}

.spread--centred{display:flex;flex-direction:column;align-items:center;text-align:center}
.spread--centred .prose{text-align:center}
.spread--centred .display{max-width:20ch}
.spread--quiet{padding-block:clamp(1rem,3vw,3rem) var(--spread-y)}

/* Развороты на тёплом белом. Сам разворот ограничен контейнером, поэтому
   подложку рисуем псевдоэлементом во всю ширину окна: isolation даёт
   собственный контекст наложения, и z-index:-1 уводит её под текст,
   но не под фон главы. */
.spread--tint{position:relative;isolation:isolate;padding-top:var(--spread-y)}
.spread--tint::before{
  content:'';position:absolute;z-index:-1;
  top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:var(--warm-white);
}
/* два тонированных разворота подряд читаются одной полосой */
.spread--tint + .spread--tint{padding-top:0}
/* .spread:last-child обнуляет нижний отступ — для тонированного разворота это
   означало бы обрыв полосы прямо по последней строке */
.spread--tint:last-child{padding-bottom:var(--spread-y)}
/* Если глава заканчивается тонированной полосой, а следом идёт секция
   другого цвета, нижний отступ главы оставлял между ними тонкую прослойку
   основного фона. Полоса должна доходить до смены цвета вплотную —
   воздух ей даёт собственный отступ. */
.chapter:has(> .spread--tint:last-child):has(+ .chapter--dark),
.chapter:has(> .spread--tint:last-child):has(+ .chapter--tint){padding-bottom:0}

.spread--split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.25rem,5vw,5.5rem);align-items:center;
}
.spread__text{max-width:var(--measure)}
.spread--flip .spread__text{order:2}
.spread--flip .plate{order:1}

/* ── plates (image slots) ──────────────────────────────── */
.plate{
  position:relative;overflow:hidden;background:var(--plate-bg);
  aspect-ratio:4/5;
}
.plate img{width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .7s var(--ease)}
.plate--long{aspect-ratio:2/3}
.plate--tall{aspect-ratio:3/4}
.plate--portrait{aspect-ratio:4/5}
.plate--square{aspect-ratio:1/1}
.plate--wide{aspect-ratio:3/2}
.plate--form{aspect-ratio:3/4}
.plate--bleed{
  aspect-ratio:16/9;width:100%;margin-block:0 var(--spread-y);
}

/* знак Castle Bera поверх кадра дома */
.plate__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Радиальное пятно гасит фасад ровно под знаком — тонкие линии герба
     иначе теряются на белом камне. Края кадра остаются светлыми. */
  background:
    radial-gradient(56% 60% at 50% 48%,
      rgba(29,27,26,.42) 0%, rgba(29,27,26,.22) 58%, rgba(29,27,26,0) 80%),
    linear-gradient(180deg,
      rgba(29,27,26,.34) 0%,
      rgba(29,27,26,.16) 42%,
      rgba(29,27,26,.38) 100%);
}
.plate__mark{
  position:absolute;inset:0;margin:auto;z-index:2;pointer-events:none;
  width:min(42%, 26rem);aspect-ratio:860/592;
  background:var(--warm-white);
  -webkit-mask:url('../castle-bera.svg') center/contain no-repeat;
          mask:url('../castle-bera.svg') center/contain no-repeat;
}
/* пока фотографии нет, ни затемнение, ни знак не нужны */
.plate.is-empty .plate__scrim,
.plate.is-empty .plate__mark{display:none}

/* self-healing placeholder: shown only while the photo is missing */
.plate.is-empty{
  border:1px solid var(--rule);
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--taupe) 12%, transparent) 0 1px,
      transparent 1px 9px),
    var(--plate-bg);
}
.plate.is-empty img{opacity:0}
.plate.is-empty::before{
  content:'';position:absolute;inset:0;
  background:var(--fg);opacity:.13;
  -webkit-mask:url('../crest.svg') center 42%/auto 38% no-repeat;
          mask:url('../crest.svg') center 42%/auto 38% no-repeat;
}
.plate.is-empty::after{
  content:attr(data-slot);position:absolute;left:1rem;right:1rem;bottom:1.35rem;
  text-align:center;font-family:var(--ff-ui);font-weight:500;font-size:0.5625rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);line-height:1.6;
}
.plate--bleed.is-empty::before{-webkit-mask-size:auto 46%;mask-size:auto 46%}

/* ── lineage (05) ──────────────────────────────────────── */
.lineage{
  margin-top:clamp(2.5rem,5vw,3.75rem);display:flex;flex-direction:column;align-items:center;gap:0;
  font-family:var(--ff-display);font-size:var(--fs-h3);letter-spacing:.06em;line-height:1.2;
}
.lineage li{display:flex;flex-direction:column;align-items:center;gap:0}
.lineage li:not(:last-child)::after{
  content:'';width:1px;height:clamp(2rem,4vw,3rem);margin-block:1rem;
  background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 0%,transparent));
}
.lineage li:last-child{color:var(--accent-ink)}

/* ── credo (13) ────────────────────────────────────────── */
.credo{
  margin-block:clamp(2rem,4vw,3rem);display:flex;flex-direction:column;align-items:center;
  font-family:var(--ff-display);font-size:var(--fs-h3);line-height:1.35;
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
  width:min(100%,42rem);gap:.4rem;
}
.credo + .prose{margin-top:0}

/* ── архивные письма (09) ──────────────────────────────── */
.letters{
  margin-top:clamp(2.5rem,5vw,3.5rem);width:100%;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem);align-items:center;
}
.letter{margin:0}
/* Свитки сняты на белом. Умножение убирает белую подложку — она
   становится ровно фоном полосы, а сам документ темнее белого и
   остаётся видимым. Так не нужен PNG с прозрачностью: JPEG весит
   300 КБ вместо 1.8 МБ при том же результате. */
.letters img{width:100%;height:auto;display:block;mix-blend-mode:multiply}

/* ── statement ─────────────────────────────────────────── */
.statement{
  font-family:var(--ff-display);font-size:var(--fs-statement);line-height:1.25;
  letter-spacing:.015em;margin-top:clamp(2rem,4vw,3rem);text-wrap:balance;
}
.statement--centre{text-align:center;padding-block:var(--section-y);margin-top:0}

/* ── duo (16) ──────────────────────────────────────────── */
.duo{
  margin-top:clamp(2.5rem,5vw,3.5rem);width:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(1.25rem,3vw,2.5rem);
}
.duo__item{display:flex;flex-direction:column;gap:1.15rem}
.duo__item figcaption{
  font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.185em;text-transform:uppercase;color:var(--accent-ink);
}
.duo__and{font-family:var(--ff-display);font-style:italic;font-size:var(--fs-deck);color:var(--fg-faint)}

/* ── two forms (18) ────────────────────────────────────── */
.forms-split{
  margin-top:0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--rule);
}
.form-panel{
  position:relative;display:block;padding:clamp(2rem,3.5vw,3.5rem);
  background:var(--warm-white);transition:background .5s var(--ease);
}
.form-panel__label{
  display:block;margin-top:1.5rem;text-align:center;
  font-family:var(--ff-display);font-size:var(--fs-h3);
  letter-spacing:.14em;text-transform:uppercase;
}
.form-panel::after{
  content:'';position:absolute;left:50%;bottom:clamp(1.25rem,2.4vw,2.25rem);translate:-50% 0;
  width:0;height:1px;background:currentColor;opacity:.5;transition:width .5s var(--ease);
}
.form-panel:hover::after{width:min(40%,8rem)}
.form-panel--day:hover{background:var(--ivory)}

/* ── specs list (20, 22) ───────────────────────────────── */
.specs{margin-top:1.75rem;border-top:1px solid var(--rule)}
.specs li{
  display:flex;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--rule);
  color:var(--fg-muted);
}
.specs li::before{
  content:'';flex:none;width:.3125rem;height:.3125rem;rotate:45deg;
  background:var(--accent);translate:0 -.2rem;
}
.specs + .prose{margin-top:1.75rem}
.spread__text .btn{margin-top:2rem}

/* ── steps (24) ────────────────────────────────────────── */
.steps{
  margin-top:clamp(2.5rem,5vw,4rem);width:100%;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.steps li{
  background:var(--bg);padding:clamp(1.75rem,3.2vw,2.5rem);
  display:flex;flex-direction:column;gap:.85rem;align-items:flex-start;text-align:left;
  min-height:clamp(8rem,14vw,11rem);justify-content:center;
}
.steps__no{
  font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.2em;color:var(--accent-ink);
}
.steps__label{font-family:var(--ff-display);font-size:var(--fs-h3);line-height:1.2}

/* ── colophon ──────────────────────────────────────────── */
.colophon{
  background:var(--navy);color:var(--warm-white);
  --fg:var(--warm-white);
  --fg-muted:color-mix(in srgb,var(--warm-white) 72%,var(--navy));
  --fg-faint:color-mix(in srgb,var(--warm-white) 46%,var(--navy));
  --rule:color-mix(in srgb,var(--warm-white) 18%,transparent);
  --rule-strong:color-mix(in srgb,var(--warm-white) 38%,transparent);
  --accent:color-mix(in srgb,var(--gold) 86%,var(--warm-white));
  --accent-ink:color-mix(in srgb,var(--gold) 86%,var(--warm-white));
  padding-block:clamp(4rem,8vw,7rem) clamp(.75rem,2vw,1.5rem);
}
.colophon__inner{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(2.5rem,5vw,4rem);align-items:start;
}
.colophon__logo{
  display:block;height:clamp(4.9rem,6.9vw,6.4rem);aspect-ratio:1562/608;
  background:currentColor;
  -webkit-mask:url('../lockup-h.svg') left center/contain no-repeat;
          mask:url('../lockup-h.svg') left center/contain no-repeat;
}
.colophon__house{
  font-family:var(--ff-display);font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  letter-spacing:.1em;text-transform:uppercase;line-height:1.25;text-wrap:balance;
}
.colophon__line{margin-top:.65rem;color:var(--fg-muted);font-size:1rem}
.colophon__contact{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.colophon__actions{display:flex;flex-direction:column;gap:.75rem;align-self:stretch;max-width:23rem}

/* Подписи на кнопках не называют площадку, поэтому знак соцсети —
   единственный указатель, куда ведёт переход. Рисуем его волосяной
   линией той же толщины, что и линейки на странице. */
.btn--wide{
  justify-content:flex-start;gap:.85rem;
  padding-inline:1.35rem;text-align:left;
}
.btn__icon{width:1.15rem;height:1.15rem;flex:none;opacity:.9}
.btn__label{flex:1}
/* стрелка — микровзаимодействие: сдвигается на 4px при наведении */
.btn__arrow{
  flex:none;width:1.25rem;height:1px;background:currentColor;opacity:.5;
  position:relative;transition:width .25s var(--ease), opacity .25s var(--ease);
}
.btn__arrow::after{
  content:'';position:absolute;right:0;top:50%;width:.4rem;height:.4rem;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  translate:0 -50%;rotate:45deg;
}
.btn--wide:hover .btn__arrow{width:1.75rem;opacity:1}

.colophon .btn{--btn-bg:var(--warm-white);--btn-fg:var(--navy);--btn-bd:var(--warm-white)}
.colophon .btn:hover{--btn-bg:var(--accent);--btn-bd:var(--accent);--btn-fg:var(--navy)}
.colophon .btn--outline{--btn-bg:transparent;--btn-fg:var(--warm-white);--btn-bd:var(--rule-strong)}
.colophon .btn--outline:hover{--btn-bg:transparent;--btn-fg:var(--accent);--btn-bd:var(--accent)}
.colophon__handles{
  font-family:var(--ff-ui);font-size:var(--fs-meta);letter-spacing:.06em;
  color:var(--fg-faint);line-height:1.6;
}
.contact{
  display:flex;flex-direction:column;gap:.3rem;padding:.65rem 0;
  border-bottom:1px solid var(--rule);transition:border-color .35s var(--ease);
}
.contact:hover{border-bottom-color:var(--accent)}
.contact.is-pending{cursor:default}
.contact.is-pending:hover{border-bottom-color:var(--rule)}
.contact__label{
  font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.185em;text-transform:uppercase;color:var(--accent-ink);
}
.contact__value{font-family:var(--ff-display);font-size:var(--fs-h3);letter-spacing:.05em}
.colophon__place{
  text-align:right;
  /* Оптическое выравнивание верха: у логотипа и кнопки верх — это край
     фигуры, а у заголовка над прописными есть интерлиньяж. Поднимаем
     колонку на его величину, иначе правый край визуально проседает. */
  margin-top:-.2em;
}
.colophon__site{
  display:inline-block;margin-top:1.1rem;padding-bottom:.2rem;
  font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.185em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid color-mix(in srgb, currentColor 40%, transparent);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.colophon__site:hover{color:var(--warm-white);border-bottom-color:currentColor}

/* В трёхколоночном футере заголовок вытянут разрядкой ровно по ширине
   строки под ним — обе заканчиваются на одной вертикали. Размер
   зафиксирован, иначе соотношение с подписью плыло бы вместе с vw.
   Отрицательный margin убирает хвостовой пробел разрядки: без него
   правый край текста не дошёл бы до края колонки. */
@media (min-width:1240px){
  .colophon__house{
    font-size:1.5rem;
    letter-spacing:.163em;
    margin-right:-.163em;
  }
}

.colophon__base{
  margin-top:clamp(3rem,6vw,5rem);padding-block:1.75rem;
  border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.colophon__tag{font-family:var(--ff-display);font-style:italic;color:var(--fg-muted);font-size:1rem}
.to-top{
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.185em;text-transform:uppercase;color:var(--fg-muted);
  transition:color .3s var(--ease);
}
.to-top:hover{color:var(--accent)}

/* ── motion ────────────────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(1.5rem)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:640px){
  /* «Private commissions» живёт в меню — в шапке на телефоне не нужна */
  .masthead__cta{display:none}
  /* подпись у кнопки меню убираем: знаку нужна ширина под разрядку */
  .burger__label{display:none}
}
@media (max-width:860px){
  .spread--split{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,6vw,3rem)}
  .spread--flip .spread__text{order:0}
  .spread--flip .plate{order:0}
  .spread__text{max-width:none}
  .duo{grid-template-columns:minmax(0,1fr);justify-items:center}
  .duo__item{width:100%}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .colophon__inner{grid-template-columns:minmax(0,1fr);gap:2.75rem}
  .colophon__place{text-align:left}
  .plate--bleed{aspect-ratio:3/2}
  .letters{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,5vw,2rem)}
  /* знак не должен перекрывать сам дом — оставляем его сдержанным */
  .plate__mark{width:min(46%, 12rem)}
  .plate--long,.plate--tall,.plate--portrait,.plate--form{max-height:74svh}
}
@media (max-width:640px){
  .forms-split{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li{min-height:0;flex-direction:row;align-items:baseline;gap:1.25rem;padding:1.35rem clamp(1.5rem,5vw,2rem)}
  .plate--bleed{aspect-ratio:4/3}
  .prose{max-width:none}
  .colophon__base{flex-direction:column;align-items:flex-start;gap:1rem}
}
/* ── титульный кадр на вертикальном экране ─────────────────
   Снимок снят в 16:9. Как только экран становится выше своей
   ширины (телефон, планшет в портрете), обрезка «под обложку»
   раздувает герб и подпись налезает на него. В этом случае
   показываем кадр лентой целиком, на тёмном поле, надпись — под ним.
   Условие по пропорциям экрана, а не по ширине: у планшета в
   портрете ширина большая, а проблема ровно та же. */
/* ── титульный кадр на вертикальном экране ─────────────────
   Подача та же, что на широком: снимок во весь экран, строка внизу.
   На вертикальном экране кадр обрезается по бокам, поэтому важна
   горизонтальная позиция. Герб занимает 0.368-0.623 ширины снимка,
   его центр — 49.6%. Ставим окно так, чтобы он оказался ровно
   посередине: при 49% запас с каждой стороны одинаковый. */
@media (max-aspect-ratio: 1/1){
  .has-hero-media .hero__media{object-position:49% 50%}
}

/* ── мобильная версия: всё по центру ───────────────────── */
@media (max-width:640px){

  /* шапка главы: номер, золотая черта-разделитель, название — в столбик */
  .chapter__head{
    flex-direction:column;align-items:center;text-align:center;
    gap:.85rem;padding-bottom:1.5rem;
  }
  .chapter__dash{
    /* дефис из текста брошюры остаётся в разметке, но на узком экране
       показывается как тонкая золотая черта — она делит тему лучше */
    display:block;width:2.75rem;height:1px;background:var(--accent);
    font-size:0;line-height:0;color:transparent;opacity:.8;
  }
  .chapter__title{max-width:22ch}

  .spread__text,
  .spread .prose,
  .spread .display,
  .spread .deck,
  .spread .kicker,
  .statement{text-align:center}

  .mark{margin-inline:auto}
  .spread__text > .btn,
  .spread__text p{text-align:center}

  /* Списки опций забираем в рамку, как шаги «From Measure to Garment»:
     на узком экране одни горизонтальные линейки читаются как обрывки,
     замкнутая рамка держит перечень единым блоком. Разделители даёт
     сетка через gap:1px поверх подложки — отдельные border не нужны. */
  .specs{
    display:grid;grid-template-columns:minmax(0,1fr);
    gap:1px;background:var(--rule);
    border:1px solid var(--rule);border-top:1px solid var(--rule);
    margin-top:clamp(2rem,5vw,2.5rem);
  }
  .specs li{
    display:block;text-align:center;border-bottom:0;
    background:var(--bg);
    padding:1.35rem clamp(1.25rem,4vw,1.75rem);
  }
  .specs li::before{display:none}

  /* Под полноширинным кадром не должно оставаться полоски уходящего
     фона. Разворот, который заканчивается фотографией, отдаёт свой
     нижний отступ следующему блоку — и пространство под кадром
     красится уже новым цветом. То же на стыке глав. */
  .spread:has(> .plate:last-child){padding-bottom:0}
  .spread:has(> .plate:last-child) + .spread{padding-top:var(--spread-y)}
  .chapter:has(> .spread:last-child > .plate:last-child){padding-bottom:0}
  .chapter:has(> .spread:last-child > .plate:last-child) + .chapter{padding-top:var(--section-y)}

  /* Снимки на телефоне идут от края до края: разворот ограничен
     контейнером, поэтому вытягиваем плиту на всю ширину окна
     отрицательными полями. Работает и внутри панелей Two Forms,
     и внутри пары подкладок — расчёт идёт от родителя. */
  .plate{width:100vw;margin-inline:calc(50% - 50vw)}

  /* «From Measure to Garment» — по левому краю: нумерованные шаги
     так читаются как последовательность, а не как набор строк */
  .spread--steps{align-items:flex-start;text-align:left}
  .spread--steps .display,
  .spread--steps .prose{text-align:left}
  .spread--steps .mark{margin-inline:0}
  .steps li{justify-content:flex-start;text-align:left}

  .duo__item figcaption{text-align:center}

  .colophon__inner,
  .colophon__place,
  .colophon__mark{text-align:center}
  .colophon__logo{
    margin-inline:auto;-webkit-mask-position:center;mask-position:center;
    /* Оптическая поправка: геометрически знак стоит ровно по центру, но
       герб слева — плотное пятно, а надпись справа воздушная и почти
       вдвое шире его. Из-за разной плотности знак читается смещённым
       вправо. Сдвигаем на 4% ширины влево; раскладку это не трогает. */
    translate:-.5rem 0;
  }
  .colophon__contact{align-items:center}
  /* ссылка была 23px по высоте — пальцем не попасть, доводим до 44 */
  .colophon__site{padding-block:.95rem .8rem;margin-top:.4rem}
  .colophon__actions{width:100%;max-width:none;align-self:auto}
  /* Содержимое кнопок прижато влево — на широком экране это читается
     как ряд, но в центрованной мобильной вёрстке выбивается. Ставим
     значок, подпись и стрелку одной группой по центру. */
  .colophon .btn--wide{justify-content:center}
  .colophon .btn--wide .btn__label{flex:0 1 auto}
  .colophon__base{align-items:center;text-align:center}
}

@media (max-width:400px){
  .brand__name{font-size:1rem;letter-spacing:.24em;text-indent:.24em}
  .brand__author{font-size:.72rem;letter-spacing:.18em;text-indent:.18em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero__cue span::after{animation:none;translate:0 0}
  .btn--wide:hover .btn__arrow{width:1.25rem;opacity:.5}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

@media print{
  .masthead,.menu,.hero__cue,.to-top{display:none}
  body{background:#fff;color:#000}
  .js .reveal{opacity:1;transform:none}
}