/* scentglade.com — концепт-бренд ботанической парфюмерии.
   Идея страницы: поляна. Свет пересекает её по мере прокрутки — меняет
   положение, цвет и температуру от рассвета к полудню и закату, а по краям
   экрана лежит тень листвы. Цвета света и тени живут в CSS-переменных,
   которые пересчитывает js/scentglade.js. */

@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/bodoni.fe710b15e2.woff2) format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url(../fonts/bodoni-italic.3fac62d55a.woff2) format("woff2"); }
@font-face { font-family: "Karla"; font-weight: 300 700; font-display: swap;
  src: url(../fonts/karla.4527ba8df1.woff2) format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap;
  src: url(../fonts/plexmono.c36f509c0a.woff2) format("woff2"); }

:root {
  /* Пересчитываются скриптом; значения здесь — рассвет, он же вид без JS. */
  --paper: #EEF3EE;
  --shade: #14403C;
  --glow:  #DCEBE4;
  --lx: 18%;
  --ly: 76%;

  --ink: #101913;
  --muted: #55665A;
  --rule: rgba(16, 25, 19, .16);

  --display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1040px;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .3s linear;
}
p, ul, ol { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.skip { position: absolute; left: -999px; top: 0; z-index: 20; padding: .5rem .75rem; background: var(--ink); color: var(--paper); }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- свет и листва ---------- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky__canopy { position: absolute; inset: -12%; opacity: .55; }
.sky__leaves {
  position: absolute; inset: 0;
  background-color: var(--shade);
  -webkit-mask-image: url(../img/canopy.8f62d16052.png); mask-image: url(../img/canopy.8f62d16052.png);
  -webkit-mask-size: 620px 620px; mask-size: 620px 620px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  transition: background-color .3s linear;
  animation: wind 52s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes wind {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-26px, 12px, 0) scale(1.035); }
  100% { transform: translate3d(16px, -14px, 0) scale(1.01); }
}
/* Просвет: закрашивает тень светом в середине, оставляя листву по краям. */
.sky__glade {
  position: absolute; inset: 0;
  /* Свет широкий, а не пятно: под ним текст всегда остаётся читаемым,
     а заметен в первую очередь сдвиг цвета и стороны, откуда он падает. */
  background: radial-gradient(85vmax 85vmax at var(--lx) var(--ly),
      var(--glow) 0%, var(--glow) 34%, transparent 88%);
  transition: background .3s linear;
}

/* ---------- шапка ---------- */
.top { padding-top: 1.5rem; }
.top__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mark { font: 400 1.125rem/1 var(--display); letter-spacing: .04em; }
.data {
  font: 400 .75rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ---------- хиро ---------- */
.hero { padding: clamp(4rem, 16vh, 9rem) 0 clamp(4rem, 12vh, 7rem); }
.hero__eyebrow { margin-bottom: 2rem; }
h1 {
  font-size: clamp(2.5rem, 7.4vw, 5.75rem); line-height: 1.03; letter-spacing: -.015em;
  max-width: 15ch; text-wrap: balance;
}
h1 em { font-style: italic; }
.lead {
  margin-top: 2rem; max-width: 40rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6; color: var(--ink);
}

/* ---------- секции ---------- */
.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.eyebrow { margin-bottom: 1.25rem; }
h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.12; letter-spacing: -.01em;
  text-wrap: balance; margin-bottom: 1.5rem;
}
.measure p + p { margin-top: 1rem; }
.measure > p { color: var(--ink); }

/* ---------- три записи ---------- */
.records { list-style: none; padding: 0; margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 0; }
.record { padding-block: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--rule); display: grid; gap: .75rem; }
.record:last-child { border-bottom: 1px solid var(--rule); }
.record__time { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.record__clock {
  font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); text-transform: none;
  font-variant-numeric: tabular-nums;
}
.record h3 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-style: italic; line-height: 1.15; }
.record > p:not(.record__time) { max-width: var(--measure); color: var(--ink); }
.notes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .35rem; }
.notes li {
  font: 400 .8125rem/1 var(--mono); letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 999px; padding: .4rem .7rem;
}
@media (min-width: 800px) {
  .record { grid-template-columns: 15rem 1fr; column-gap: 2.5rem; align-items: start; }
  .record__time { grid-row: 1 / span 3; flex-direction: column; gap: .4rem; }
  .record h3 { grid-column: 2; }
  .record > p:not(.record__time), .notes { grid-column: 2; }
}

/* ---------- две колонки ---------- */
.cols { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 6vw, 3.5rem); }
@media (min-width: 760px) { .cols { grid-template-columns: 1fr 1fr; } }
.col h3 { font-size: 1.0625rem; font-family: var(--body); font-weight: 700; letter-spacing: .01em; margin-bottom: 1rem; }
.col p { color: var(--ink); }
.col em { font-family: var(--display); font-style: italic; font-size: 1.08em; }
.list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.list li { padding-left: 1.15rem; position: relative; }
.list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  background: var(--ink); border-radius: 50% 0; transform: rotate(-20deg);
}

/* ---------- вопросы ---------- */
.faq { border-top: 1px solid var(--rule); margin-top: 2rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding-block: 1.1rem; font: 400 1.125rem/1.35 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.25rem/1 var(--mono); color: var(--muted); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 2.5rem 1.35rem 0; color: var(--muted); max-width: var(--measure); }

/* ---------- подвал ---------- */
.foot { padding-block: clamp(4rem, 10vw, 7rem) 3rem; border-top: 1px solid var(--rule); }
.mark--foot { font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: .01em; margin-bottom: .75rem; }
.foot__line { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--ink); }
.foot__meta { margin-top: 2.5rem; }

/* ---------- появление ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 700px) { .sky__canopy { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  .sky__leaves { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}