/* ИмяСпеций — временная версия сайта */
:root {
  --spice-bg: #faeddf;
  --spice-text: #050505;
  --spice-primary: #0a5640;
  --spice-primary-dark: #063b2c;
  --spice-accent: #f4a800;
  --spice-red: #b93b24;
  --spice-white: #ffffff;
  --spice-line: #050505;
  --spice-paper: #fff8ee;
  --font-main: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --shadow-hard: 6px 6px 0 #050505;
  --shadow-hard-sm: 3px 3px 0 #050505;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
}

html {
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--spice-bg);
  color: var(--spice-text);
  font-family: var(--font-main);
  font-weight: 600;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--spice-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--spice-red); }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 9999; padding: 10px 16px; background: var(--spice-accent); color: #000; border: 2px solid #000; }
.skip-link:focus { top: 16px; }

.site-header { position: relative; z-index: 30; border-bottom: 2px solid var(--spice-line); background: rgba(250, 237, 223, .96); }
.site-header_logo { display: inline-flex; align-items: center; gap: 10px; color: #000; font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 900; line-height: 1; text-decoration: none; }
.site-header_mark { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid #000; border-radius: 50%; background: var(--spice-accent); font-family: var(--font-main); font-size: 16px; font-weight: 900; box-shadow: 2px 2px 0 #000; }
.site-header_note { color: var(--spice-primary); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.site-header_nav-link { position: relative; color: #000; font-size: .88rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.site-header_nav-link::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 3px; background: var(--spice-accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-header_nav-link:hover, .site-header_nav-link:focus { color: #000; }
.site-header_nav-link:hover::after, .site-header_nav-link:focus::after, .site-header_nav-link.is-active::after { transform: scaleX(1); }
.navbar-toggler { border: 2px solid #000; border-radius: var(--radius-sm); box-shadow: 2px 2px 0 #000; }
.navbar-toggler:focus { box-shadow: 2px 2px 0 #000, 0 0 0 4px rgba(244,168,0,.35); }

.announcement { border-bottom: 2px solid #000; background: var(--spice-primary); color: #fff; }
.announcement_text { margin: 0; padding: 8px 0; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-align: center; }
.announcement_dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--spice-accent); box-shadow: 0 0 0 3px rgba(244,168,0,.18); }

.hero { position: relative; padding: clamp(52px, 8vw, 110px) 0 70px; overflow: hidden; border-bottom: 2px solid #000; }
.hero::before { position: absolute; top: 42px; right: -90px; width: 250px; height: 250px; border: 2px solid #000; border-radius: 50%; background: var(--spice-accent); content: ""; opacity: .92; }
.hero_eyebrow, .page-hero_eyebrow { display: inline-block; margin-bottom: 18px; padding: 7px 12px; border: 2px solid #000; border-radius: 999px; background: var(--spice-accent); color: #000; font-size: .76rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; box-shadow: 3px 3px 0 #000; }
.hero_title, .page-hero_title { max-width: 850px; margin: 0 0 24px; font-family: var(--font-display); font-size: clamp(3.2rem, 9vw, 7.8rem); font-weight: 900; letter-spacing: -.055em; line-height: .89; text-wrap: balance; }
.hero_title-accent { color: var(--spice-primary); font-style: italic; }
.hero_text { max-width: 670px; margin-bottom: 32px; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.55; }
.hero_actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero_collage { position: relative; min-height: 500px; margin-left: 20px; }
.hero_photo { position: absolute; overflow: hidden; border: 3px solid #000; background: var(--spice-paper); box-shadow: var(--shadow-hard); }
.hero_photo img { width: 100%; height: 100%; object-fit: cover; }
.hero_photo--one { top: 0; left: 6%; width: 66%; height: 65%; transform: rotate(-4deg); }
.hero_photo--two { right: 0; bottom: 4%; width: 58%; height: 55%; transform: rotate(5deg); }
.hero_photo--three { bottom: 0; left: 0; width: 38%; height: 39%; transform: rotate(-8deg); }
.hero_stamp { position: absolute; top: 48%; left: 34%; z-index: 3; display: grid; width: 122px; height: 122px; padding: 12px; place-items: center; border: 3px solid #000; border-radius: 50%; background: var(--spice-primary); color: #fff; font-size: .8rem; font-weight: 900; letter-spacing: .08em; line-height: 1.2; text-align: center; text-transform: uppercase; transform: rotate(-8deg); box-shadow: 4px 4px 0 var(--spice-accent); }

.btn-spice { min-height: 50px; padding: 12px 22px; border: 2px solid #000; border-radius: var(--radius-sm); background: var(--spice-primary); color: #fff; font-weight: 900; box-shadow: var(--shadow-hard-sm); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.btn-spice:hover, .btn-spice:focus { border-color: #000; background: var(--spice-accent); color: #000; box-shadow: 1px 1px 0 #000; transform: translate(2px, 2px); }
.btn-spice--light { background: var(--spice-paper); color: #000; }
.btn-spice--light:hover { background: #fff; }

.mission { padding: 85px 0; background: var(--spice-primary); color: #fff; }
.mission_label { color: var(--spice-accent); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mission_title { max-width: 950px; margin: 12px 0 0; color: #fff; font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 5rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.mission_text { margin: 20px 0 0; color: #fff; font-size: 1.05rem; }
.mission_number { color: var(--spice-accent); font-family: var(--font-display); font-size: 3.2rem; font-weight: 900; line-height: 1; }

.catalog-preview { padding: 90px 0 110px; border-bottom: 2px solid #000; }
.section-kicker { margin-bottom: 8px; color: var(--spice-primary); font-size: .78rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.section-title { margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.section-copy { max-width: 620px; margin: 18px 0 0; font-size: 1rem; }
.spice-card { position: relative; height: 100%; overflow: hidden; border: 2px solid #000; border-radius: var(--radius-md); background: var(--spice-paper); box-shadow: 4px 4px 0 #000; transition: transform .2s ease, box-shadow .2s ease; }
.spice-card:hover { box-shadow: 9px 9px 0 #000; transform: translate(-3px, -3px) rotate(-.4deg); }
.spice-card_image-wrap { position: relative; height: 290px; overflow: hidden; border-bottom: 2px solid #000; }
.spice-card_image { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.spice-card:hover .spice-card_image { transform: scale(1.04); }
.spice-card_index { position: absolute; top: 14px; left: 14px; display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid #000; border-radius: 50%; background: var(--spice-accent); color: #000; font-size: .8rem; font-weight: 900; box-shadow: 2px 2px 0 #000; }
.spice-card_body { padding: 24px; }
.spice-card_name { margin: 0 0 6px; font-family: var(--font-display); font-size: 2rem; font-weight: 900; }
.spice-card_alias { color: var(--spice-primary); font-size: .78rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.spice-card_text { margin: 16px 0 22px; }
.spice-card_link { display: inline-flex; align-items: center; gap: 8px; color: #000; font-weight: 900; text-decoration: none; }
.spice-card_link span { transition: transform .18s ease; }
.spice-card_link:hover { color: var(--spice-primary); }
.spice-card_link:hover span { transform: translateX(5px); }

.future { padding: 90px 0; }
.future_panel { position: relative; padding: clamp(30px, 5vw, 70px); overflow: hidden; border: 3px solid #000; border-radius: var(--radius-lg); background: var(--spice-accent); box-shadow: 8px 8px 0 #000; }
.future_panel::after { position: absolute; right: -45px; bottom: -95px; width: 260px; height: 260px; border: 35px solid var(--spice-primary); border-radius: 50%; content: ""; opacity: .95; }
.future_title { position: relative; z-index: 2; max-width: 800px; margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 5.4rem); font-weight: 900; letter-spacing: -.05em; line-height: .98; }
.future_list { position: relative; z-index: 2; margin: 32px 0 0; padding: 0; list-style: none; }
.future_item { display: flex; gap: 12px; margin-bottom: 13px; font-size: 1.02rem; }
.future_bullet { flex: 0 0 25px; width: 25px; height: 25px; border: 2px solid #000; border-radius: 50%; background: var(--spice-bg); text-align: center; line-height: 20px; }

.page-hero { padding: 70px 0 55px; border-bottom: 2px solid #000; }
.page-hero_title { max-width: none; font-size: clamp(3.5rem, 9vw, 8.5rem); }
.page-hero_lead { max-width: 740px; margin: 0; font-size: clamp(1.08rem, 2vw, 1.35rem); }
.page-hero_image-frame { height: min(650px, 65vw); min-height: 350px; margin-top: 45px; overflow: hidden; border: 3px solid #000; border-radius: var(--radius-md); box-shadow: 9px 9px 0 #000; }
.page-hero_image { width: 100%; height: 100%; object-fit: cover; }
.page-hero_image--paprika { object-position: center 52%; }
.page-hero_meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.page-hero_tag { padding: 7px 11px; border: 2px solid #000; border-radius: 999px; background: var(--spice-paper); font-size: .78rem; font-weight: 900; }

.spice-story { padding: 85px 0; border-bottom: 2px solid #000; }
.spice-story_title, .uses_title, .next-spice_title { margin: 0 0 24px; font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 4rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.spice-story_text { max-width: 760px; font-size: 1.05rem; }
.spice-story_fact { position: sticky; top: 25px; padding: 28px; border: 2px solid #000; border-radius: var(--radius-md); background: var(--spice-primary); color: #fff; box-shadow: 6px 6px 0 var(--spice-accent); }
.spice-story_fact-label { color: var(--spice-accent); font-size: .75rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.spice-story_fact-text { margin: 12px 0 0; font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1.25; }

.uses { padding: 85px 0; background: var(--spice-paper); border-bottom: 2px solid #000; }
.uses_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.uses_item { padding: 25px; border: 2px solid #000; border-radius: var(--radius-md); background: var(--spice-bg); box-shadow: 4px 4px 0 #000; }
.uses_number { color: var(--spice-primary); font-family: var(--font-display); font-size: 2.7rem; font-weight: 900; line-height: 1; }
.uses_name { margin: 12px 0 8px; font-size: 1.08rem; font-weight: 900; }
.uses_text { margin: 0; font-size: .92rem; }

.next-spice { padding: 70px 0 90px; }
.next-spice_panel { padding: 32px; border: 2px solid #000; border-radius: var(--radius-md); background: var(--spice-accent); box-shadow: 6px 6px 0 #000; }
.next-spice_title { font-size: clamp(1.8rem, 3vw, 3rem); }

.site-footer { padding: 55px 0 30px; background: var(--spice-primary-dark); color: #fff; }
.site-footer_logo { color: #fff; font-family: var(--font-display); font-size: 2rem; font-weight: 900; text-decoration: none; }
.site-footer_logo:hover { color: var(--spice-accent); }
.site-footer_text { max-width: 520px; margin: 12px 0 0; color: #fff; font-size: .92rem; }
.site-footer_nav { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.site-footer_link { color: #fff; font-size: .87rem; font-weight: 800; }
.site-footer_link:hover { color: var(--spice-accent); }
.site-footer_bottom { margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.35); color: #fff; font-size: .76rem; }
.site-footer_credit { color: #fff; opacity: .8; }
.site-footer_credit:hover { color: var(--spice-accent); opacity: 1; }

:focus-visible { outline: 4px solid var(--spice-accent); outline-offset: 3px; }
@media (max-width: 991.98px) {
  .site-header_note { display: none; }
  .site-header_nav { padding: 18px 0 8px; }
  .site-header_nav-link { display: block; padding: 9px 0; }
  .hero_collage { min-height: 430px; margin: 45px 0 0; }
  .hero::before { width: 180px; height: 180px; }
  .uses_grid { grid-template-columns: 1fr; }
  .spice-story_fact { position: static; margin-top: 32px; }
}
@media (max-width: 575.98px) {
  .hero { padding-top: 42px; }
  .hero_title { font-size: clamp(3rem, 17vw, 4.8rem); }
  .hero_collage { min-height: 360px; }
  .hero_photo--one { left: 2%; width: 75%; height: 62%; }
  .hero_photo--two { width: 63%; height: 50%; }
  .hero_photo--three { width: 42%; height: 34%; }
  .hero_stamp { left: 27%; width: 100px; height: 100px; font-size: .68rem; }
  .spice-card_image-wrap { height: 240px; }
  .future_panel::after { right: -110px; opacity: .45; }
  .page-hero_image-frame { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}