/* ============================================================
   Светлая комната — студия каллиграфии
   Эстетика: минимал-редакторская, тёплый off-white, чернила/синь,
   высококонтрастный serif-display, много воздуха, тонкие линии.
   ============================================================ */

:root{
  /* палитра */
  --paper:        #f6f2e9;   /* тёплый off-white */
  --paper-deep:   #efe9db;
  --ink:          #14213d;   /* глубокий чернильно-синий */
  --ink-soft:     #2b3a5c;
  --ink-faint:    #5c6b86;
  --rule:         #cfc7b4;   /* тонкая линия по бумаге */
  --rule-ink:     rgba(20,33,61,.16);
  --accent:       #1f4ea3;   /* королевский синий-акцент */
  --accent-warm:  #b8693d;   /* охра/сангина для штрихов */
  --cream-card:   #fbf8f1;

  /* типографика */
  --serif: "Iowan Old Style","Palatino Linotype","Palatino","Hoefler Text","Times New Roman",Georgia,serif;
  --grotesk: "Avenir Next","Avenir","Segoe UI","Helvetica Neue",system-ui,-apple-system,sans-serif;

  /* шкала отступов */
  --s1: .35rem;  --s2: .65rem; --s3: 1rem;  --s4: 1.6rem;
  --s5: 2.4rem;  --s6: 3.6rem; --s7: 5.5rem; --s8: 8rem;

  --measure: 1180px;
  --shadow-plate: 0 26px 60px -34px rgba(20,33,61,.55);
  --shadow-soft:  0 14px 34px -22px rgba(20,33,61,.4);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(31,78,163,.10), transparent 60%),
    radial-gradient(900px 520px at -5% 12%, rgba(184,105,61,.09), transparent 55%),
    var(--paper);
  color:var(--ink);
  font-family:var(--grotesk);
  font-size:clamp(16px,1.05vw + 13px,18px);
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none!important; transition:none!important; }
}

img{ display:block; max-width:100%; height:auto; }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.01em; margin:0; }

a{ color:inherit; }

::selection{ background:var(--accent); color:var(--paper); }

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

.jump-to-text{
  position:absolute; left:var(--s3); top:-3rem; z-index:200;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  border-radius:6px; text-decoration:none; font-family:var(--grotesk);
  font-size:.9rem; transition:top .2s ease;
}
.jump-to-text:focus{ top:var(--s3); }

/* ---------- общие элементы ---------- */
.kicker{
  font-family:var(--grotesk); font-size:.74rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--accent-warm);
  margin:0 0 var(--s3);
}

.press{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--grotesk); font-size:.94rem; font-weight:600;
  letter-spacing:.02em; text-decoration:none; cursor:pointer;
  padding:.85rem 1.7rem; border:1.5px solid var(--ink); border-radius:2px;
  background:var(--bg); color:var(--fg);
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.press--filled:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); background:var(--accent); border-color:var(--accent); }
.press--hollow{ background:transparent; color:var(--ink); }
.press--hollow:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.press--block{ width:100%; padding:1.05rem; font-size:1rem; }

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:120;
  background:rgba(246,242,233,.78);
  backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.masthead[data-pinned="true"]{
  border-bottom-color:var(--rule);
  box-shadow:0 8px 26px -24px rgba(20,33,61,.7);
  background:rgba(246,242,233,.94);
}
.masthead__inner{
  max-width:var(--measure); margin:0 auto;
  padding:.85rem clamp(1.1rem,4vw,2.6rem);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
}
.signet{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.signet__glyph{
  font-family:var(--serif); font-size:1.5rem; font-weight:600; font-style:italic;
  color:var(--paper); background:var(--ink);
  width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:50%;
  letter-spacing:-.04em;
}
.signet__words{ display:flex; flex-direction:column; line-height:1.12; }
.signet__name{ font-family:var(--serif); font-size:1.18rem; font-weight:600; letter-spacing:.01em; }
.signet__sub{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

.quill-nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.1rem); }
.quill-nav a{
  font-family:var(--grotesk); font-size:.95rem; font-weight:500; text-decoration:none;
  color:var(--ink-soft); position:relative; padding:.25rem 0;
}
.quill-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--accent-warm); transition:width .28s ease;
}
.quill-nav a:hover{ color:var(--ink); }
.quill-nav a:hover::after{ width:100%; }

.ink-toggle{
  display:none; flex-direction:column; gap:5px; width:42px; height:38px;
  background:transparent; border:1px solid var(--rule-ink); border-radius:4px;
  padding:9px 8px; cursor:pointer;
}
.ink-toggle span{ height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .25s ease; }
.ink-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ink-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ink-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- overture (hero) ---------- */
.overture{
  max-width:var(--measure); margin:0 auto;
  padding:clamp(2.4rem,6vw,var(--s7)) clamp(1.1rem,4vw,2.6rem) var(--s6);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.overture__plate{ position:relative; }
.overture__plate img{
  width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:3px;
  box-shadow:var(--shadow-plate);
  filter:saturate(.92) contrast(1.04);
}
.overture__plate::before{
  content:""; position:absolute; inset:14px -14px -14px 14px; z-index:-1;
  border:1px solid var(--rule); border-radius:3px;
}
.overture__title{
  font-size:clamp(2.7rem,5.6vw,4.4rem);
  margin:0 0 var(--s4);
}
.overture__title{ font-style:normal; }
.overture__lede{ font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--ink-soft); margin:0 0 var(--s5); max-width:34ch; }
.overture__row{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s6); }

.tally{ display:flex; gap:clamp(1.4rem,4vw,3rem); margin:0; padding-top:var(--s4); border-top:1px solid var(--rule); }
.tally div{ display:flex; flex-direction:column; }
.tally dt{ font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:600; color:var(--accent); line-height:1; }
.tally dd{ margin:.4rem 0 0; font-size:.82rem; color:var(--ink-faint); max-width:14ch; }

/* ---------- manifesto ---------- */
.manifesto{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--paper-deep);
}
.manifesto p{
  max-width:48rem; margin:0 auto;
  padding:clamp(2.4rem,5vw,var(--s6)) clamp(1.1rem,4vw,2.6rem);
  font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.5;
  text-align:center; color:var(--ink-soft);
}
.manifesto em{ color:var(--ink); font-style:italic; }

/* ---------- leaf-head (section header) ---------- */
.leaf-head{ max-width:var(--measure); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.6rem); margin-bottom:var(--s5); }
.leaf-head h2{ font-size:clamp(2rem,3.6vw,3rem); max-width:18ch; }
.leaf-head__note{ margin:var(--s3) 0 0; color:var(--ink-faint); max-width:46ch; }
.leaf-head--center{ text-align:center; }
.leaf-head--center h2,.leaf-head--center .leaf-head__note{ margin-left:auto; margin-right:auto; }

/* ---------- courses ---------- */
.courses{ padding:var(--s7) 0 var(--s6); }
.ledger{
  max-width:var(--measure); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.6rem);
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
}
.entry{
  background:var(--cream-card); padding:clamp(1.6rem,3vw,2.6rem);
  display:flex; flex-direction:column;
  transition:background .3s ease, transform .3s ease;
}
.entry:hover{ background:var(--paper); transform:translateY(-3px); }
.entry__tier{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-warm); margin:0 0 var(--s3); font-weight:600;
}
.entry__name{ font-size:clamp(1.35rem,2.2vw,1.7rem); margin-bottom:var(--s3); max-width:18ch; }
.entry__words{ color:var(--ink-soft); margin:0 0 var(--s4); }
.entry__facts{ list-style:none; margin:0 0 var(--s4); padding:0; display:flex; flex-direction:column; gap:.4rem; }
.entry__facts li{ font-size:.92rem; color:var(--ink-faint); padding-left:1.3rem; position:relative; }
.entry__facts li::before{ content:"·"; position:absolute; left:.35rem; color:var(--accent); font-weight:700; font-size:1.3rem; line-height:1; top:-.15rem; }
.entry__sum{ margin:auto 0 0; padding-top:var(--s3); border-top:1px solid var(--rule-ink); font-size:.92rem; color:var(--ink-faint); }
.entry__sum span{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--ink); margin-right:.4rem; }

/* ---------- diptych ---------- */
.diptych{
  max-width:var(--measure); margin:0 auto; padding:var(--s5) clamp(1.1rem,4vw,2.6rem) var(--s7);
  display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.4rem,3vw,2.4rem);
}
.diptych__cell{ margin:0; }
.diptych__cell img{ width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; border-radius:3px; box-shadow:var(--shadow-soft); }
.diptych__cell:last-child img{ aspect-ratio:1/1; }
.diptych__cell figcaption{ margin-top:var(--s3); font-size:.88rem; color:var(--ink-faint); font-style:italic; }

/* ---------- folio ---------- */
.folio{ padding:var(--s7) 0; border-top:1px solid var(--rule); }
.folio__rail{
  max-width:var(--measure); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.6rem);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.2rem);
}
.plate{ margin:0; position:relative; }
.plate--wide{ grid-column:1 / -1; }
.plate img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:3px; box-shadow:var(--shadow-soft); transition:filter .4s ease; filter:saturate(.95); }
.plate--wide img{ aspect-ratio:21/9; }
.plate:hover img{ filter:saturate(1.05) contrast(1.03); }
.plate figcaption{
  margin-top:var(--s3); font-size:.92rem; color:var(--ink-soft);
  display:flex; flex-direction:column; gap:.2rem;
}
.plate figcaption strong{ font-family:var(--serif); font-size:1.12rem; font-weight:600; color:var(--ink); }

/* ---------- process ---------- */
.process{ padding:var(--s7) clamp(1.1rem,4vw,2.6rem); background:var(--paper-deep); border-top:1px solid var(--rule); }
.staves{
  max-width:var(--measure); margin:var(--s5) auto 0; padding:0;
  list-style:none; counter-reset:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2rem);
}
.stave{ position:relative; padding-top:var(--s4); border-top:2px solid var(--ink); }
.stave__mark{
  font-family:var(--serif); font-style:italic; font-size:2.4rem; font-weight:600;
  color:var(--accent-warm); display:block; line-height:1; margin-bottom:var(--s3);
}
.stave h3{ font-size:1.25rem; margin-bottom:var(--s2); }
.stave p{ font-size:.95rem; color:var(--ink-soft); margin:0; }

/* ---------- atelier ---------- */
.atelier{
  max-width:var(--measure); margin:0 auto; padding:var(--s7) clamp(1.1rem,4vw,2.6rem);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.atelier__view{ margin:0; }
.atelier__view img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:3px; box-shadow:var(--shadow-plate); }
.atelier__words h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); margin:var(--s2) 0 var(--s4); max-width:16ch; }
.atelier__words p{ color:var(--ink-soft); margin:0 0 var(--s3); }
.atelier__sign{ font-family:var(--serif); font-style:italic; color:var(--ink); font-size:1.1rem; margin-top:var(--s4)!important; }

/* ---------- voices ---------- */
.voices{ padding:var(--s7) clamp(1.1rem,4vw,2.6rem); border-top:1px solid var(--rule); }
.voices__set{
  max-width:var(--measure); margin:var(--s5) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem);
}
.murmur{
  margin:0; padding:clamp(1.6rem,3vw,2.2rem);
  background:var(--cream-card); border:1px solid var(--rule); border-radius:3px;
  position:relative;
}
.murmur::before{
  content:"“"; font-family:var(--serif); font-size:4rem; color:var(--accent);
  position:absolute; top:-.5rem; left:1rem; line-height:1; opacity:.4;
}
.murmur p{ font-family:var(--serif); font-size:1.08rem; line-height:1.55; color:var(--ink-soft); margin:var(--s3) 0 var(--s4); }
.murmur footer{ font-size:.92rem; font-weight:600; color:var(--ink); display:flex; flex-direction:column; }
.murmur footer span{ font-weight:400; color:var(--ink-faint); font-size:.84rem; margin-top:.15rem; }

/* ---------- summons (CTA + form) ---------- */
.summons{
  max-width:var(--measure); margin:0 auto;
  padding:var(--s7) clamp(1.1rem,4vw,2.6rem) var(--s8);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start;
}
.summons__text h2{ font-size:clamp(1.9rem,3.4vw,2.8rem); margin:var(--s2) 0 var(--s4); max-width:16ch; }
.summons__text > p{ color:var(--ink-soft); margin:0 0 var(--s4); }
.summons__perks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.summons__perks li{ position:relative; padding-left:1.7rem; color:var(--ink-soft); }
.summons__perks li::before{
  content:""; position:absolute; left:0; top:.55rem; width:.7rem; height:.7rem;
  background:var(--accent-warm); border-radius:50%;
}

.petition{
  background:var(--cream-card); border:1px solid var(--rule); border-radius:4px;
  padding:clamp(1.6rem,3vw,2.4rem);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);
  box-shadow:var(--shadow-soft);
}
.petition__field{ display:flex; flex-direction:column; gap:.4rem; }
.petition__field--wide{ grid-column:1 / -1; }
.petition label{ font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--ink-soft); }
.petition label span{ font-weight:400; color:var(--ink-faint); }
.petition input,.petition select,.petition textarea{
  font-family:var(--grotesk); font-size:.98rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:3px;
  padding:.8rem .9rem; width:100%; transition:border-color .2s ease, box-shadow .2s ease;
}
.petition textarea{ resize:vertical; }
.petition input:focus,.petition select:focus,.petition textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,78,163,.14);
}
.petition input[aria-invalid="true"]{ border-color:var(--accent-warm); }
.petition__err{ font-size:.78rem; color:var(--accent-warm); min-height:1em; }
.petition button{ grid-column:1 / -1; }
.petition__done{
  grid-column:1 / -1; margin:0; text-align:center; font-weight:600; color:var(--accent);
  background:rgba(31,78,163,.08); border:1px solid rgba(31,78,163,.2); border-radius:3px; padding:.8rem;
}

/* ---------- colophon (footer) ---------- */
.colophon{
  background:var(--ink); color:var(--paper);
  padding:var(--s7) clamp(1.1rem,4vw,2.6rem) var(--s5);
}
.colophon__top{
  max-width:var(--measure); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1.4fr; gap:clamp(2rem,5vw,4rem);
}
.colophon__lead .signet__name{ color:var(--paper); font-size:1.6rem; display:block; margin-bottom:var(--s3); }
.colophon__lead p{ color:rgba(246,242,233,.72); max-width:34ch; margin:0; }
.colophon__cols{ font-style:normal; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.colophon__cols h3{ font-family:var(--grotesk); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-warm); margin:0 0 var(--s3); }
.colophon__cols p{ margin:0; color:rgba(246,242,233,.82); font-size:.95rem; line-height:1.7; }
.colophon__cols a{ color:rgba(246,242,233,.92); text-decoration:none; border-bottom:1px solid rgba(246,242,233,.3); }
.colophon__cols a:hover{ border-bottom-color:var(--accent-warm); color:#fff; }
.colophon__rule{ max-width:var(--measure); margin:var(--s6) auto var(--s4); height:1px; background:rgba(246,242,233,.18); }
.colophon__base{
  max-width:var(--measure); margin:0 auto;
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  font-size:.84rem; color:rgba(246,242,233,.58);
}
.colophon__base p{ margin:0; }

/* ---------- scroll-reveal ---------- */
[data-lift]{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
[data-lift].is-shown{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-lift]{ opacity:1; transform:none; } }

/* ---------- адаптив ---------- */
@media (max-width:980px){
  .overture{ grid-template-columns:1fr; }
  .overture__plate{ order:-1; }
  .diptych,.atelier,.summons,.colophon__top{ grid-template-columns:1fr; }
  .voices__set{ grid-template-columns:1fr; }
  .staves{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px){
  .quill-nav{
    position:fixed; inset:0 0 auto 0; top:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); padding:5.2rem clamp(1.1rem,6vw,2rem) 2rem;
    box-shadow:var(--shadow-plate); transform:translateY(-110%);
    transition:transform .38s cubic-bezier(.2,.7,.3,1);
    height:auto; border-bottom:1px solid var(--rule);
  }
  .quill-nav.is-open{ transform:translateY(0); }
  .quill-nav a{ width:100%; padding:.95rem 0; font-size:1.15rem; border-bottom:1px solid var(--rule); }
  .quill-nav a:last-child{ border-bottom:none; }
  .ink-toggle{ display:flex; z-index:130; }
  .ledger,.folio__rail{ grid-template-columns:1fr; }
  .plate--wide{ grid-column:auto; }
  .plate--wide img{ aspect-ratio:3/2; }
  .petition{ grid-template-columns:1fr; }
  .colophon__cols{ grid-template-columns:1fr; gap:var(--s5); }
  .tally{ flex-wrap:wrap; gap:var(--s4); }
}

@media (max-width:460px){
  .staves{ grid-template-columns:1fr; }
  .signet__sub{ display:none; }
}