@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400&family=Archivo:wght@100;200;300;400&display=swap");

/* ==========================================================================
   Tokens — from the design system (tokens/*.css). Do not invent new values.
   ========================================================================== */
:root{
  --ink-1000:#000000;
  --ink-900:#111111;
  --ink-700:#3D3D3D;
  --ink-500:#767676;
  --ink-300:#B4B4B4;
  --ink-200:#D8D6D3;
  --ink-100:#EDEBE7;
  --paper:#FFFFFF;
  --paper-cream:#F7F5F1;
  --paper-warm:#EFEAE3;

  --surface-page:var(--paper);
  --surface-page-alt:var(--paper-cream);
  --surface-card:var(--paper);
  --surface-invert:var(--ink-1000);
  --surface-sunken:var(--paper-warm);

  --text-primary:var(--ink-1000);
  --text-secondary:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-invert:var(--paper);
  --text-invert-muted:rgba(255,255,255,.62);

  --line-ink:var(--ink-1000);
  --line-soft:var(--ink-200);
  --line-invert:rgba(255,255,255,.55);

  --focus-ring:var(--ink-1000);
  --focus-ring-invert:var(--paper);

  --font-display:"Jost","Helvetica Neue",Helvetica,sans-serif;
  --font-body:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --font-logotype:"Jost","Helvetica Neue",Helvetica,sans-serif;

  --text-3xs:10px; --text-2xs:11px; --text-xs:12px; --text-sm:14px;
  --text-base:16px; --text-md:18px; --text-lg:22px; --text-xl:28px;
  --text-2xl:36px; --text-3xl:48px; --text-4xl:64px; --text-5xl:88px;

  --weight-hair:100; --weight-thin:200; --weight-light:300; --weight-regular:400;

  --leading-tight:1.05; --leading-snug:1.25; --leading-normal:1.55; --leading-loose:1.8;

  --tracking-logotype:.42em;
  --tracking-display:.22em;
  --tracking-label:.3em;
  --tracking-body:.02em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  --hairline:1px;
  --border-hairline:var(--hairline) solid var(--line-ink);
  --border-soft:var(--hairline) solid var(--line-soft);
  --border-invert:var(--hairline) solid var(--line-invert);

  --radius-none:0px;
  --radius-xs:2px;

  --ease-standard:cubic-bezier(.2,.6,.25,1);
  --duration-fast:120ms; --duration-base:220ms; --duration-slow:420ms;

  /* layout */
  --wrap:1160px;
  --gutter:40px;
  --header-h:132px; /* jen záloha — skript ji přepíše skutečnou výškou */
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-page);
  font-family:var(--font-body);
  font-weight:var(--weight-light);
  font-size:var(--text-base);
  letter-spacing:var(--tracking-body);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--text-primary);transition:color var(--duration-base) var(--ease-standard)}
a:hover{color:var(--text-muted)}
h1,h2,h3{text-wrap:pretty;font-weight:var(--weight-thin)}
p{text-wrap:pretty}
button{font-family:var(--font-body)}
:focus-visible{outline:var(--hairline) solid var(--focus-ring);outline-offset:2px}
.invert :focus-visible{outline-color:var(--focus-ring-invert)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.mt-72{margin-top:72px}
.mt-80{margin-top:80px}
.mt-96{margin-top:96px}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Button ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);
  font-size:var(--text-xs);
  font-weight:var(--weight-light);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  padding:12px 20px;
  border:var(--hairline) solid transparent;
  border-radius:var(--radius-none);
  background:transparent;
  color:var(--text-primary);
  cursor:pointer;
  transition:background-color var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard),
             opacity var(--duration-base) var(--ease-standard);
}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.38;cursor:not-allowed;pointer-events:none}

.btn--solid{background:var(--ink-1000);color:var(--text-invert);border-color:var(--ink-1000)}
.btn--solid:hover{background:transparent;color:var(--text-primary)}

.btn--outline{border-color:var(--line-ink);color:var(--text-primary)}
.btn--outline:hover{background:var(--ink-1000);color:var(--text-invert)}

.btn--quiet{border-color:transparent;color:var(--text-secondary)}
.btn--quiet:hover{border-color:var(--line-ink);color:var(--text-primary)}

.btn--invert{border-color:var(--line-invert);color:var(--text-invert)}
.btn--invert:hover{background:var(--paper);color:var(--text-primary);border-color:var(--paper)}

.btn--sm{font-size:var(--text-3xs);padding:8px 14px}
.btn--lg{padding:16px 28px}

/* --- Tag ---------------------------------------------------------------- */
.tag{
  display:inline-flex;align-items:center;
  border:var(--border-soft);
  padding:7px 12px;
  font-size:var(--text-3xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-primary);
}
.tag--muted{border-color:transparent;color:var(--text-muted);padding-left:0}

/* --- Divider ------------------------------------------------------------ */
.divider{height:0;border:0;border-top:var(--border-soft);margin:0}
.divider--invert{border-top:var(--border-invert)}

/* --- SectionTitle ------------------------------------------------------- */
.st__eyebrow{
  font-size:var(--text-3xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
}
.st__title{
  margin:18px 0 0;
  font-family:var(--font-display);
  font-weight:var(--weight-thin);
  font-size:var(--text-2xl);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);
  text-transform:uppercase;
}
.st__sub{
  margin:18px 0 0;
  font-size:15px;
  line-height:var(--leading-normal);
  color:var(--text-secondary);
  max-width:52ch;
}
.st__rule{margin-top:24px;height:0;border:0;border-top:var(--border-soft)}
.st--invert .st__eyebrow{color:var(--text-invert-muted)}
.st--invert .st__sub{color:var(--text-invert-muted)}
.st--invert .st__rule{border-top:var(--border-invert)}

/* --- PriceRow ----------------------------------------------------------- */
.price-row{
  display:flex;align-items:baseline;gap:10px;
  padding:14px 0;
  border-bottom:var(--border-soft);
}
.pr__name{font-size:var(--text-sm);white-space:nowrap}
.pr__note{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}
.pr__leader{
  flex:1 1 auto;min-width:16px;
  height:1px;align-self:flex-end;margin-bottom:5px;
  background-image:radial-gradient(circle,var(--ink-300) 1px,transparent 1px);
  background-size:5px 1px;background-repeat:repeat-x;
}
.pr__price{
  font-family:var(--font-display);font-weight:var(--weight-thin);
  font-size:var(--text-md);letter-spacing:.06em;white-space:nowrap;
}
.pr__unit{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}

/* --- Fields ------------------------------------------------------------- */
.field{display:grid;gap:10px;min-width:0}
.field__label{
  font-size:var(--text-3xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
}
.field__control{
  font-family:var(--font-body);
  font-weight:var(--weight-light);
  font-size:var(--text-sm);
  letter-spacing:var(--tracking-body);
  color:var(--text-primary);
  background:var(--paper);
  border:var(--border-soft);
  border-radius:var(--radius-none);
  padding:12px 14px;
  width:100%;
  transition:border-color var(--duration-base) var(--ease-standard);
}
.field__control::placeholder{color:var(--ink-300)}
.field__control:hover{border-color:var(--ink-300)}
.field__control:focus{outline:none;border-color:var(--line-ink)}
textarea.field__control{resize:vertical;line-height:var(--leading-normal)}
select.field__control{appearance:none;-webkit-appearance:none;padding-right:36px}
/* šipka výběru je jen dvě vlásové linky — žádná ikona navíc */
.field__select{position:relative;display:block}
.field__select::after{
  content:"";position:absolute;right:15px;top:50%;
  width:7px;height:7px;margin-top:-6px;
  border-right:var(--hairline) solid var(--line-ink);
  border-bottom:var(--hairline) solid var(--line-ink);
  transform:rotate(45deg);
  pointer-events:none;
}

.checkbox{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--text-xs);color:var(--text-secondary)}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox__box{
  flex:none;width:16px;height:16px;
  border:var(--border-hairline);
  background:transparent;
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.checkbox input:checked + .checkbox__box{background:var(--ink-1000)}
.checkbox input:focus-visible + .checkbox__box{outline:var(--hairline) solid var(--focus-ring);outline-offset:2px}

/* --- Photo -------------------------------------------------------------- */
.photo{position:relative;background:var(--paper-warm);overflow:hidden;aspect-ratio:4 / 5}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo--1x1{aspect-ratio:1 / 1}
.photo--4x3{aspect-ratio:4 / 3}
.photo--4x5{aspect-ratio:4 / 5}

/* --- Reveal ------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity 520ms var(--ease-standard),transform 520ms var(--ease-standard)}
.reveal.is-seen{opacity:1;transform:translateY(0)}

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:5;
  background:var(--paper);
  border-bottom:var(--hairline) solid transparent;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  transition:border-color 320ms var(--ease-standard);
}
.header.is-open{border-bottom-color:var(--line-soft)}
.header__logo{display:flex;align-items:center;line-height:0;text-decoration:none}
/* Logotyp je čtvercový (PIECE / of / CAKE nad sebou) — nikdy mu nevnucovat jiný poměr. */
.header__logo img{width:96px;height:auto;display:block}
.header__right{display:flex;align-items:center;gap:28px}
.header__nav{display:flex;gap:28px;align-items:center}
.header__link{
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  color:var(--text-muted);
  border-bottom:var(--hairline) solid transparent;
  padding-bottom:4px;
  transition:color var(--duration-base) var(--ease-standard);
}
.header__link:hover{color:var(--text-primary)}
.header__link.is-active{color:var(--text-primary);border-bottom-color:var(--line-ink)}
/* Kousek dortu — na desktopu jen glyf, na mobilu spouštěč menu */
.header__slice-btn{
  display:flex;align-items:center;justify-content:center;
  flex:none;
  padding:0;border:0;background:none;line-height:0;
  pointer-events:none;
}
/* Bez CSS přechodu — úhel dopočítává skript po jednotlivých snímcích,
   jinak se každý přechod restartuje při každé události scrollu a trhá se to. */
.header__slice{width:26px;height:auto;display:block;transform-origin:50% 50%;will-change:transform}

/* Home-only staggered reveal of the nav out of the spinning slice */
.header--gated .header__item{opacity:0;transform:translateX(-14px);pointer-events:none;
  transition:opacity var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-standard)}
.header--gated.is-open .header__item{opacity:1;transform:translateX(0);pointer-events:auto}
.header__item:nth-child(1){transition-delay:0ms}
.header__item:nth-child(2){transition-delay:70ms}
.header__item:nth-child(3){transition-delay:140ms}
.header__item:nth-child(4){transition-delay:210ms}
.header__item:nth-child(5){transition-delay:280ms}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--ink-1000);color:var(--text-invert);padding:64px var(--gutter) 40px;margin-top:96px}
.footer__cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;align-items:start;max-width:var(--wrap);margin:0 auto}
.footer__logo{width:150px;height:auto;display:block}
.footer__contact{display:grid;gap:10px;font-size:13px}
.footer__contact a,.footer__contact span{color:var(--text-invert);text-decoration:none}
.footer__contact a:hover{color:var(--text-invert-muted)}
.footer__nav{display:grid;gap:10px}
.footer__nav a{
  font-size:var(--text-xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-invert-muted);text-decoration:none;
}
.footer__nav a:hover{color:var(--text-invert)}
.footer__strip{
  max-width:var(--wrap);margin:48px auto 0;padding-top:20px;
  border-top:var(--border-invert);
  display:flex;justify-content:space-between;gap:20px;
  font-size:var(--text-3xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-invert-muted);
}

/* ==========================================================================
   Home
   ========================================================================== */
.hero{position:relative;height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));
  min-height:520px;background:var(--paper-warm);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.hero__hint{
  position:absolute;left:0;right:0;bottom:32px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  pointer-events:none;transition:opacity var(--duration-base) linear;
}
.hero__hint span:first-child{
  font-size:var(--text-3xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-primary);
}
.hero__rule{width:1px;height:56px;background:var(--line-ink)}

.plate{background:var(--ink-1000);color:var(--text-invert)}
.plate__inner{max-width:var(--wrap);margin:0 auto;padding:88px var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end}
.plate__eyebrow{font-size:var(--text-3xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-invert-muted)}
.plate h1{
  margin:22px 0 0;font-family:var(--font-display);font-weight:var(--weight-thin);
  font-size:52px;line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);text-transform:uppercase;
}
.plate p{margin:0;font-size:15px;line-height:var(--leading-normal);
  color:var(--text-invert-muted);max-width:44ch}
.plate__actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.duo--center{align-items:center}

.facts{margin-top:28px;max-width:420px}
.facts__row{padding:14px 0;display:flex;justify-content:space-between;gap:20px;font-size:13px}
.facts__row span:last-child{color:var(--text-muted);text-align:right}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px}
.card h3{
  margin:20px 0 10px;font-family:var(--font-display);font-weight:var(--weight-thin);
  font-size:20px;letter-spacing:var(--tracking-display);text-transform:uppercase;
}
.card p{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-secondary)}
.card__action{margin-top:16px}

.band{background:var(--ink-1000);color:var(--text-invert);padding:56px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}

/* ==========================================================================
   Dorty — gallery
   ========================================================================== */
.filters{display:flex;gap:8px;margin-top:52px;border-bottom:var(--border-soft);
  padding-bottom:16px;flex-wrap:wrap;align-items:center}
.filters__item{position:relative;display:inline-flex;align-items:center}
.filters__mark{position:absolute;left:50%;bottom:calc(100% + 8px);width:20px;height:auto;
  margin-left:-10px;pointer-events:none;
  animation:sliceIn 260ms var(--ease-standard) both}
.filters__count{margin-left:auto;align-self:center;
  font-size:var(--text-3xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
@keyframes sliceIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.gallery{margin-top:32px}
.gal-group + .gal-group{margin-top:72px}
.gal-group__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:14px;border-bottom:var(--border-soft);
}
.gal-group__title{
  margin:0;font-family:var(--font-display);font-weight:var(--weight-thin);
  font-size:20px;line-height:var(--leading-tight);
  letter-spacing:var(--tracking-display);text-transform:uppercase;
}
.gal-group__count{
  font-size:var(--text-3xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;
}
.grid-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.tile{cursor:pointer;min-width:0;display:block;border:0;padding:0;background:none;text-align:left;width:100%}
.tile__cap{margin-top:10px;font-size:var(--text-3xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:20;
  display:flex;align-items:center;justify-content:center;padding:48px;cursor:pointer}
.lightbox[hidden]{display:none}
.lightbox__box{max-width:720px;width:100%}
/* v lightboxu musí být vidět celý dort — proto contain, ne cover */
.lightbox .photo{background:transparent;aspect-ratio:auto;max-height:calc(100vh - 160px)}
.lightbox .photo img{object-fit:contain;height:auto;max-height:calc(100vh - 160px)}
.lightbox__cap{margin-top:14px;font-size:var(--text-3xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-invert-muted)}

.split{margin-top:96px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.note{margin-top:20px;font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-normal)}

/* --- FAQ ---------------------------------------------------------------- */
.faq{border-bottom:var(--border-soft)}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:0;padding:16px 0;cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-light);
  text-align:left;color:var(--text-primary);
}
.faq__sign{font-size:var(--text-md);font-weight:var(--weight-thin);line-height:1;flex:none}
.faq__a{margin:0 0 18px;font-size:13px;line-height:var(--leading-normal);
  color:var(--text-secondary);max-width:52ch}
.faq__a[hidden]{display:none}

/* ==========================================================================
   Kroužek
   ========================================================================== */
.kv{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.kv__row{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:var(--border-soft)}
.kv__k{font-size:var(--text-3xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.kv__v{font-size:var(--text-sm);text-align:right}

.pricebar{margin-top:24px;display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.pricebar .price-row{flex:1 1 420px}

.list-two{margin:20px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.list-two li{font-size:var(--text-sm);padding-bottom:10px;border-bottom:var(--border-soft)}

.seasonal{margin-top:32px}
.seasonal__row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-bottom:var(--border-soft);font-size:var(--text-sm)}
.seasonal__row span:last-child{color:var(--text-muted);text-align:right}

.block-invert{background:var(--ink-1000);color:var(--text-invert);padding:48px 44px}
.block-invert ul{margin:28px 0 0;padding:0;list-style:none}
.block-invert li{font-size:var(--text-sm);padding:14px 0;border-bottom:var(--border-invert)}
.block-invert p{margin:28px 0 0;font-size:13px;line-height:var(--leading-normal);color:var(--text-invert-muted)}

.cream{margin-top:80px;background:var(--paper-cream);padding:48px 56px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px}
.steps{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.steps li{display:flex;gap:16px;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-secondary)}
.steps b{font-family:var(--font-display);font-weight:var(--weight-thin);font-size:var(--text-sm);
  letter-spacing:var(--tracking-label);color:var(--text-primary);min-width:20px}

/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.form{margin-top:36px;display:grid;gap:24px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form__msg{font-size:var(--text-xs);color:var(--text-secondary)}
.thanks{margin-top:36px;border:var(--border-hairline);padding:32px 28px}
.thanks__title{font-family:var(--font-display);font-weight:var(--weight-thin);font-size:var(--text-lg);
  letter-spacing:var(--tracking-display);text-transform:uppercase}
.thanks p{margin:14px 0 20px;font-size:var(--text-sm);color:var(--text-secondary)}
.rows{margin-top:32px}
.rows__row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;font-size:13px}
.rows__k{font-size:var(--text-3xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.rows__row a{text-decoration:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px){
  .st__title{font-size:var(--text-xl)}
  .plate h1{font-size:42px}
  .plate__inner{gap:40px;padding:64px var(--gutter)}
  .duo,.split,.contact,.cream{gap:40px}
}

@media (max-width:900px){
  :root{--gutter:24px}

  /* Menu se rozbaluje z kousku dortu — ten se točí se scrollováním jako na desktopu. */
  .header__slice-btn{
    pointer-events:auto;cursor:pointer;
    padding:10px;margin:-10px -10px -10px 0;   /* větší plocha pro prst, obrázek se nedeformuje */
  }
  .header__slice{width:28px}
  .header__right{gap:0}

  .header__nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:var(--hairline) solid transparent;
    padding:4px var(--gutter) 24px;
    overflow:hidden;
    max-height:0;
    visibility:hidden;
    transition:max-height var(--duration-slow) var(--ease-standard),
               border-color var(--duration-base) var(--ease-standard),
               visibility 0s linear var(--duration-slow);
  }
  .header.is-menu-open .header__nav{
    max-height:80vh;visibility:visible;
    border-bottom-color:var(--line-soft);
    transition:max-height var(--duration-slow) var(--ease-standard),
               border-color var(--duration-base) var(--ease-standard),
               visibility 0s;
  }
  .header__nav .header__item{
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity 300ms var(--ease-standard),transform 300ms var(--ease-standard);
  }
  .header.is-menu-open .header__nav .header__item{opacity:1;transform:translateY(0);pointer-events:auto}

  .header__link{padding:16px 0;border-bottom:var(--border-soft);font-size:13px}
  .header__link.is-active{border-bottom-color:var(--line-ink)}
  .header__item--btn{padding-top:20px}
  .header__item--btn .btn{width:100%}

  .plate__inner,.duo,.split,.contact,.cream,.kv,.list-two{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .band{grid-template-columns:minmax(0,1fr);padding:40px 28px;gap:28px}
  .footer__cols{grid-template-columns:1fr 1fr;gap:32px}
  .split{margin-top:64px}
  .cream{padding:36px 28px}
  .block-invert{padding:36px 28px}
  .kv__row:last-child{border-bottom:var(--border-soft)}
}

@media (max-width:620px){
  :root{--gutter:20px;--header-h:100px}
  .header{padding:14px var(--gutter)}
  .header__logo img{width:72px}
  .plate h1{font-size:34px}
  .st__title{font-size:26px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .grid-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .form__row{grid-template-columns:minmax(0,1fr)}
  .footer__cols{grid-template-columns:1fr;gap:28px}
  .footer__strip{flex-direction:column;gap:8px}
  .lightbox{padding:20px}
  .mt-96{margin-top:64px}
  .mt-80{margin-top:64px}
  .split{margin-top:56px}
  .kv__row{gap:12px}
  .kv__v{font-size:13px}
  .price-row{flex-wrap:wrap}
  .pr__leader{display:none}
  .pricebar .price-row{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .header--gated .header__item{opacity:1;transform:none;pointer-events:auto}
}