/* ===========================================================
   Тёплый угол — направление B «Раннее утро»
   ДНК: 01-severnaya-redakciya · линза: minimalist-ui (вторичный слой)
   =========================================================== */

/* ---------- Шрифты (self-hosted, кириллица + латиница раздельно) ---------- */
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/spectral-cyrillic-500.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/spectral-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/spectral-cyrillic-600.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/spectral-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/spectral-cyrillic-700.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/spectral-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}

@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/manrope-cyrillic-400.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/manrope-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/manrope-cyrillic-500.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/manrope-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-cyrillic-600.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/manrope-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/manrope-cyrillic-700.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/manrope-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;}

/* ---------- Токены ---------- */
:root{
  /* палитра — холодная, из мира клиента (предрассветное небо / холст / печная тень) */
  --bg:            #F3F5F7; /* фон 60% — холодный off-white, свет через окно мастерской до рассвета */
  --surface:       #E7EAEE; /* поверхности/карточки 30% — холст/лён */
  --text:          #171A1F; /* текст — холодный почти-чёрный */
  --text-secondary:#52585F; /* вторичный текст */
  --accent:        #2A3F5F; /* акцент 10% — чернильно-синий предрассветный час */
  --accent-text:   #F7F8FA; /* текст на акцентной кнопке */
  --inverse-bg:    #16222E; /* инвертированный блок — подвал, глубокий холодный почти-чёрный */
  --inverse-text:  #EDEFF2;
  --inverse-text-secondary:#A9B1BA;
  --line:          rgba(23,26,31,.10);

  /* типографика */
  --font-display: 'Spectral', Georgia, serif;
  --font-body:    'Manrope', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* модульная шкала ×1.333, база 17px */
  --step-sm:   14px;
  --step-base: 17px;
  --step-md:   23px;
  --step-lg:   30px;
  --step-xl:   40px;
  --step-2xl:  54px;
  --step-hero: clamp(40px, 5vw + 1rem, 72px);

  /* 8pt-сетка */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  --radius: 2px;
  --shadow-ambient: 0 1px 2px rgba(15,20,28,.06);
  --shadow-key: 0 12px 24px -8px rgba(15,20,28,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Сброс / основа ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope', var(--font-body);
  font-weight:400;
  font-size:var(--step-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
::selection{background:var(--accent);color:var(--accent-text);}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--text);
  margin:0;
  text-wrap:balance;
}

p{margin:0;}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

.skip-link{
  position:absolute;
  left:var(--sp-2);
  top:-60px;
  background:var(--accent);
  color:var(--accent-text);
  padding:var(--sp-1) var(--sp-2);
  border-radius:var(--radius);
  z-index:100;
  transition:top .2s var(--ease);
  text-decoration:none;
  font-weight:600;
}
.skip-link:focus{top:var(--sp-2);}

/* ---------- Каркас editorial-rail ---------- */
.rail-shell{
  max-width:1600px;
  margin-inline:auto;
  padding-inline:var(--sp-3);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--sp-3);
}
@media (min-width:768px){
  .rail-shell{padding-inline:var(--sp-6);gap:var(--sp-4);}
}
@media (min-width:1200px){
  .rail-shell{padding-inline:var(--sp-12);}
}

/* ---------- Хедер ---------- */
.site-header{
  padding-block:var(--sp-3);
  border-bottom:1px solid var(--line);
}
.site-header .rail-shell{
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:var(--sp-3);
}
.wordmark{
  grid-column:1;
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-md);
  text-decoration:none;
  letter-spacing:-0.01em;
}
.top-nav{
  grid-column:2;
  display:none;
  gap:var(--sp-4);
}
.top-nav a{
  text-decoration:none;
  font-size:var(--step-sm);
  color:var(--text-secondary);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.top-nav a:hover{color:var(--text);border-color:var(--line);}
@media (min-width:768px){
  .top-nav{display:flex;}
}
.header-cta{
  grid-column:3;
  justify-self:end;
  font-size:var(--step-sm);
  font-weight:600;
  text-decoration:none;
  color:var(--accent-text);
  background:var(--accent);
  padding:12px var(--sp-2);
  border-radius:var(--radius);
  white-space:nowrap;
  transition:background-color .2s var(--ease);
}
.header-cta:hover{background:#233551;}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 var(--sp-3);
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--step-base);
  text-decoration:none;
  border-radius:var(--radius);
  transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn:active{transform:scale(.98);}
.btn-primary{
  background:var(--accent);
  color:var(--accent-text);
}
.btn-primary:hover{background:#233551;}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-inverse.btn-ghost{
  color:var(--inverse-text);
  border-color:rgba(237,239,242,.25);
}
.btn-inverse.btn-ghost:hover{border-color:var(--inverse-text);color:var(--inverse-text);}
.btn-inverse.btn-primary{
  background:var(--inverse-text);
  color:var(--inverse-bg);
}
.btn-inverse.btn-primary:hover{background:#D7DBE1;}

/* ---------- Вертикальный рельс (сигнатура ДНК) ---------- */
.hero-rail,
.section-rail{
  display:none;
}
@media (min-width:1024px){
  .hero-rail,.section-rail{
    display:flex;
    grid-column:1 / span 1;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
    padding-block:var(--sp-2) 0;
  }
  .rail-text{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:var(--step-sm);
    letter-spacing:.04em;
    color:var(--text-secondary);
    white-space:nowrap;
  }
  .section-number{
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    font-size:var(--step-sm);
    color:var(--text-secondary);
    margin-bottom:var(--sp-2);
  }
}

/* ---------- Hero ---------- */
.hero{
  padding-block:var(--sp-8) var(--sp-8);
}
.hero-shell{
  align-items:center;
}
.hero-copy{
  grid-column:1 / span 12;
  padding-block:var(--sp-4) 0;
}
@media (min-width:1024px){
  .hero-copy{grid-column:2 / span 5;}
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--step-sm);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--sp-2);
}
.hero-title{
  font-size:var(--step-hero);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin-bottom:var(--sp-3);
}
.hero-lead{
  max-width:52ch;
  font-size:var(--step-md);
  line-height:1.5;
  color:var(--text-secondary);
  margin-bottom:var(--sp-4);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}

.hero-media{
  grid-column:1 / span 12;
  margin:var(--sp-4) 0 0;
}
@media (min-width:1024px){
  .hero-media{grid-column:7 / span 6;margin-top:0;}
}
.media-frame{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-ambient), var(--shadow-key);
}
.media-frame > img:first-child{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* диптих: деталь-инсёрт поверх основного кадра — редакционный приём, не карусель */
.hero-detail{
  position:absolute;
  left:var(--sp-2);
  bottom:var(--sp-2);
  width:34%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  border:3px solid var(--bg);
  box-shadow:var(--shadow-key);
}
figcaption{
  margin-top:var(--sp-1);
  font-size:var(--step-sm);
  color:var(--text-secondary);
}

.rail-texture{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:var(--radius);
  margin-bottom:var(--sp-2);
}

/* ---------- Каталог «Что я пеку» ---------- */
.catalog{
  padding-block:var(--sp-8);
  border-top:1px solid var(--line);
}
.catalog-body{
  grid-column:1 / span 12;
}
@media (min-width:1024px){
  .catalog-body{grid-column:2 / span 11;}
}
.section-title{
  font-size:var(--step-2xl);
  letter-spacing:-0.02em;
  margin-bottom:var(--sp-6);
}

.catalog-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}
@media (min-width:640px){
  .catalog-list{grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
}

.catalog-item{
  display:flex;
  flex-direction:column;
}
.catalog-media{
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:var(--sp-2);
  box-shadow:var(--shadow-ambient);
}
.catalog-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.catalog-text h3{
  font-size:var(--step-lg);
  margin-bottom:var(--sp-1);
}
.catalog-desc{
  color:var(--text-secondary);
  font-size:var(--step-base);
  margin-bottom:var(--sp-2);
}
.catalog-price{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--step-md);
  color:var(--accent);
}
.price-num{font-weight:600;}
.price-cur{font-size:var(--step-base);}

/* ---------- О пекарне ---------- */
.about{
  padding-block:var(--sp-8);
  border-top:1px solid var(--line);
}
.about-media{
  grid-column:1 / span 12;
  margin:0;
}
.about-media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-ambient), var(--shadow-key);
}
.about-body{
  grid-column:1 / span 12;
  margin-top:var(--sp-4);
}
@media (min-width:1024px){
  .about-media{grid-column:2 / span 5;}
  .about-body{grid-column:7 / span 6;margin-top:0;align-self:center;}
}
.about-lead{
  font-size:var(--step-md);
  color:var(--text-secondary);
  margin-block:var(--sp-2) var(--sp-3);
}
.about-text{
  max-width:64ch;
  color:var(--text-secondary);
  margin-bottom:var(--sp-3);
}
.about-text:last-child{margin-bottom:0;}

/* ---------- Процесс ---------- */
.process{
  padding-block:var(--sp-8);
  border-top:1px solid var(--line);
  background:var(--surface);
}
.process-body{
  grid-column:1 / span 12;
}
.process-media{
  grid-column:1 / span 12;
  margin:var(--sp-4) 0 0;
}
@media (min-width:1024px){
  .process-body{grid-column:2 / span 6;align-self:center;}
  .process-media{grid-column:8 / span 5;margin-top:0;}
}
.process-media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-ambient), var(--shadow-key);
}
.process-lead{
  font-size:var(--step-md);
  color:var(--text-secondary);
  margin-block:var(--sp-2) var(--sp-3);
}
.process-text{
  max-width:64ch;
  color:var(--text-secondary);
}

/* ---------- География ---------- */
.geo{
  padding-block:var(--sp-8);
  border-top:1px solid var(--line);
}
.geo-content{
  grid-column:1 / span 12;
}
@media (min-width:1024px){
  .geo-content{grid-column:2 / span 10;}
}
.geo-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  margin-block:var(--sp-4);
}
@media (min-width:640px){
  .geo-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6);}
}
.geo-item h3{
  font-size:var(--step-md);
  margin-bottom:var(--sp-1);
}
.geo-item p{
  color:var(--text-secondary);
  max-width:48ch;
}
.geo-note{
  color:var(--text-secondary);
  font-style:italic;
}

/* ---------- Как заказать ---------- */
.order{
  padding-block:var(--sp-8);
  border-top:1px solid var(--line);
}
.order-body{
  grid-column:1 / span 12;
}
.order-card{
  grid-column:1 / span 12;
  margin-top:var(--sp-4);
  background:var(--surface);
  border-radius:var(--radius);
  padding:var(--sp-4);
}
@media (min-width:1024px){
  .order-body{grid-column:2 / span 6;}
  .order-card{grid-column:8 / span 5;margin-top:0;align-self:start;}
}
.order-steps{
  list-style:none;
  margin:0 0 var(--sp-4);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  max-width:56ch;
}
.order-steps li{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  color:var(--text-secondary);
}
.step-num{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-text);
  font-family:var(--font-mono);
  font-size:var(--step-sm);
}
.order-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-3);
  margin:0 0 var(--sp-4);
  max-width:56ch;
}
.order-facts dt{
  font-family:var(--font-mono);
  font-size:var(--step-sm);
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.order-facts dd{
  margin:0;
}
.order-direct{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}
.order-card-lead{
  color:var(--text-secondary);
  margin-bottom:var(--sp-3);
}

/* Форма заказа */
.order-form{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form-row label{
  font-size:var(--step-sm);
  color:var(--text-secondary);
}
.order-form input[type="text"],
.order-form input[type="tel"],
.order-form textarea{
  font:inherit;
  font-size:var(--step-base);
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px var(--sp-2);
  min-height:48px;
}
.order-form textarea{
  min-height:auto;
  resize:vertical;
}
.order-form input:focus-visible,
.order-form textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent);
}
/* honeypot: скрыт от людей и из AT, доступен автозаполнению ботов */
.form-honeypot{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.form-consent{
  flex-direction:row;
  align-items:flex-start;
  gap:var(--sp-2);
}
.form-consent input[type="checkbox"]{
  flex:none;
  width:20px;
  height:20px;
  margin-top:2px;
  accent-color:var(--accent);
}
.form-consent label{
  font-size:var(--step-sm);
  color:var(--text-secondary);
}
.form-consent a{
  color:var(--accent);
  text-decoration:underline;
}
.form-submit{
  align-self:flex-start;
}
.form-status{
  margin:0;
  font-size:var(--step-sm);
  min-height:1.4em;
}
.form-status--ok{color:#1F6B3A;}
.form-status--error{color:#A32B2B;}

/* ---------- Подвал ---------- */
.site-footer{
  background:var(--inverse-bg);
  color:var(--inverse-text);
  padding-block:var(--sp-8) var(--sp-6);
}
.footer-shell{
  align-items:start;
}
.footer-media{
  grid-column:1 / span 12;
  margin:0 0 var(--sp-4);
}
.footer-media img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radius);
}
.footer-main{
  grid-column:1 / span 12;
}
@media (min-width:1024px){
  .footer-media{grid-column:1 / span 4;margin-bottom:0;}
  .footer-media img{aspect-ratio:4/5;}
  .footer-main{grid-column:6 / span 7;}
}
.footer-eyebrow{
  font-family:var(--font-mono);
  font-size:var(--step-sm);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--inverse-text-secondary);
  margin-bottom:var(--sp-2);
}
.footer-title{
  font-size:var(--step-xl);
  color:var(--inverse-text);
  letter-spacing:-0.02em;
  margin-bottom:var(--sp-3);
}
.footer-text{
  color:var(--inverse-text-secondary);
  margin-bottom:var(--sp-3);
}
.footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.footer-geo{
  color:var(--inverse-text-secondary);
  max-width:56ch;
}
.footer-legal{
  grid-column:1 / span 12;
  margin-top:var(--sp-6);
  padding-top:var(--sp-3);
  border-top:1px solid rgba(237,239,242,.14);
  color:var(--inverse-text-secondary);
  font-size:var(--step-sm);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer-legal a{
  color:var(--inverse-text);
}
@media (min-width:1024px){
  .footer-legal{grid-column:2 / span 10;}
}

/* ---------- Движение: единая система reveal (ОДИН момент бюджета) ---------- */
.reveal{
  animation:rise linear both;
  animation-timeline:view();
  animation-range:entry 0% cover 30%;
}
@keyframes rise{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;}
  .btn{transition:none;}
}