/* Концепция B — «Газета»: тёплая бумага, чёрная типографская краска, красный акцент, засечки */
@font-face { font-family: "Playfair"; font-weight: 400 900; font-display: swap; src: url(/static/fonts/playfair-display-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Playfair"; font-weight: 400 900; font-display: swap; src: url(/static/fonts/playfair-display-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Playfair"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(/static/fonts/playfair-display-cyrillic-wght-italic.woff2) format("woff2-variations"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Playfair"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(/static/fonts/playfair-display-latin-wght-italic.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "PT Serif"; font-weight: 400; font-display: swap; src: url(/static/fonts/pt-serif-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-weight: 400; font-display: swap; src: url(/static/fonts/pt-serif-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "PT Serif"; font-weight: 700; font-display: swap; src: url(/static/fonts/pt-serif-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-weight: 700; font-display: swap; src: url(/static/fonts/pt-serif-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/static/fonts/pt-serif-cyrillic-400-italic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/static/fonts/pt-serif-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --paper: #f2ecdf;
  --paper-2: #e9e1cf;
  --ink: #1c1a16;
  --ink-soft: #4d483e;
  --red: #b3261e;
  --rule: #1c1a16;
  --display: "Playfair", "Times New Roman", serif;
  --serif: "PT Serif", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font: 18px/1.6 var(--serif); color: var(--ink);
  background: #d9d1bf;
}
a { color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }
.muted { color: var(--ink-soft); }
.small { font-size: 14px; color: var(--ink-soft); }
.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.section { padding: 40px 0; background: var(--paper); }
.text { max-width: 760px; }
.text h1 { font-family: var(--display); }

/* лист газеты */
.paper {
  max-width: 1180px; margin: 24px auto; padding: 28px 40px 0; position: relative;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 20px 50px -20px rgba(60, 45, 20, .45);
}

/* шапка-«титул» */
.masthead { text-align: center; }
.mast-line { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mast-line a { text-decoration: none; font-weight: 700; white-space: nowrap; }
.mast-mid { flex: 1; text-align: center; }
.mast-title { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 10.5vw, 148px); line-height: .95; letter-spacing: -.02em; margin: 14px 0 12px; }
.mast-sub { border-top: 3px double var(--rule); border-bottom: 3px double var(--rule); }

.rubrics { display: flex; justify-content: center; gap: 36px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; text-transform: uppercase; letter-spacing: .14em; }
.rubrics a { text-decoration: none; }
.rubrics a:hover { color: var(--red); }

/* первая полоса */
.front { display: grid; grid-template-columns: 1fr 300px; gap: 0; padding: 28px 0 8px; }
.story { padding-right: 32px; border-right: 1px solid var(--rule); }
.kicker { display: inline-block; margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .16em; color: #fff; background: var(--red); padding: 3px 10px; }
.headline { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 16px; }
.standfirst { font-family: var(--display); font-style: italic; font-size: clamp(19px, 2vw, 23px); line-height: 1.4; color: var(--ink-soft); margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.photo { width: 100%; margin: 0 0 14px; break-inside: avoid; }
.photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 35% 15%; filter: grayscale(1) contrast(1.15) sepia(.12); }
.photo { position: relative; }
.photo::after { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 4 / 5; background-image: radial-gradient(rgba(28,26,22,.22) 1px, transparent 1.3px); background-size: 4px 4px; mix-blend-mode: multiply; pointer-events: none; }
.photo figcaption { font-size: 13px; font-style: italic; color: var(--ink-soft); padding-top: 6px; border-top: 1px solid var(--rule); margin-top: 6px; }
.columns { column-count: 2; column-gap: 28px; column-rule: 1px solid rgba(28,26,22,.25); text-align: justify; hyphens: auto; }
.columns p { margin: 0 0 12px; }
.columns h3 { font-family: var(--display); font-size: 21px; line-height: 1.2; margin: 18px 0 8px; break-after: avoid; text-align: left; }
.dropcap::first-letter { float: left; font-family: var(--display); font-weight: 900; font-size: 74px; line-height: .8; padding: 6px 8px 0 0; color: var(--red); }
.pullquote { break-inside: avoid; margin: 18px 0; padding: 14px 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.3; text-align: left; }
.columns a { color: var(--red); font-weight: 700; }

.sidebar { padding-left: 24px; display: grid; gap: 20px; align-content: start; }
.box { border-top: 4px solid var(--ink); padding-top: 10px; }
.box h4 { font-family: var(--display); font-size: 24px; margin: 0 0 10px; }
.price-list { list-style: none; padding: 0; margin: 0 0 8px; font-size: 15px; }
.price-list li { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.price-list i { flex: 1; border-bottom: 1px dotted var(--ink); transform: translateY(-4px); }
.price-list b { white-space: nowrap; }
.box-dark { background: var(--ink); color: var(--paper); padding: 14px 16px 16px; border-top: 0; }
.brief { margin: 0; padding-left: 18px; font-size: 15px; display: grid; gap: 6px; }
.brief li::marker { color: #f0a59f; }
.weather p { margin: 0; font-style: italic; font-size: 15px; }
.wx { font-style: normal; font-size: 26px; color: var(--red); vertical-align: -3px; margin-right: 4px; }
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.1) sepia(.12); }
.portrait p { font-size: 14px; margin: 8px 0 0; }

/* разделы */
.sec-title { text-align: center; margin: 0 0 22px; border-top: 3px double var(--rule); position: relative; height: 0; }
.sec-title span { position: relative; top: -0.9em; background: var(--paper); padding: 0 18px; font-family: var(--display); font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.reference, .letters, .classifieds { padding: 34px 0 10px; clear: both; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ref-table th, .ref-table td { padding: 10px 14px; border-bottom: 1px solid rgba(28,26,22,.35); text-align: left; vertical-align: top; }
.ref-table thead th { font-family: var(--display); font-size: 20px; border-bottom: 2px solid var(--ink); }
.ref-table thead th:last-child { color: var(--red); }
.ref-table tbody th { font-weight: 700; width: 22%; }
.ref-table td:nth-child(2) { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(179, 38, 30, .55); }
.ref-table td:last-child { font-weight: 700; }

.letters-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.letters-grid blockquote { margin: 0; padding: 4px 22px; border-right: 1px solid rgba(28,26,22,.3); font-style: italic; }
.letters-grid blockquote:last-child { border-right: 0; }
.letters-grid p { margin: 0 0 8px; }
.letters-grid p::before { content: "«"; } .letters-grid p::after { content: "»"; }
.letters-grid cite { font-style: normal; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }

/* объявления */
.ads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; padding-bottom: 30px; }
.ad { border: 2px solid var(--ink); padding: 20px 20px 0; background: #f7f2e7; box-shadow: 4px 4px 0 rgba(28,26,22,.12); }
.ad-title { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.05; text-transform: uppercase; margin: 0 0 10px; text-align: center; }
.ad-text { margin: 0 0 10px; text-align: center; }
.ad-phone { font-family: var(--display); font-weight: 800; font-size: 32px; text-align: center; margin: 0 0 16px; }
.tabs { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px dashed var(--ink); margin: 0 -20px; }
.tab { position: relative; display: flex; justify-content: center; height: 170px; padding: 12px 0; border-right: 1px dashed var(--ink); text-decoration: none; color: var(--ink); transform-origin: top center; transition: transform .25s; background: #f7f2e7; }
.tab:last-child { border-right: 0; }
.tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.tab:hover { transform: rotate(-4deg); }
.tab.torn { visibility: hidden; }

.coupon { position: relative; border: 2px dashed var(--ink); padding: 26px 24px 20px; background: #f7f2e7; }
.coupon-cut { position: absolute; top: -15px; left: 18px; margin: 0; background: var(--paper); padding: 0 8px; font-size: 20px; }
.coupon-title { font-family: var(--display); font-weight: 800; font-size: 28px; text-transform: uppercase; margin: 0 0 2px; }
.form-done { font-family: var(--display); font-size: 22px; font-weight: 700; margin: 20px 0; }

/* форма (общая разметка _form.html) — как газетный бланк */
.lead-form { display: grid; gap: 12px; margin-top: 12px; position: relative; }
.field { display: grid; gap: 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.field input, .field select { font: 18px var(--serif); color: var(--ink); padding: 6px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; border-radius: 0; width: 100%; }
.field input:focus, .field select:focus { outline: none; border-bottom: 2px solid var(--red); }
.consent { display: flex; gap: 8px; font-size: 13px; color: var(--ink-soft); align-items: flex-start; }
.consent input { accent-color: var(--red); margin-top: 4px; }
.hp { position: absolute; left: -9999px; }
.btn { font: 700 16px var(--serif); text-transform: uppercase; letter-spacing: .14em; padding: 14px; border: 2px solid var(--ink); cursor: pointer; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--red); border-color: var(--red); }
.form-msg { margin: 0; min-height: 1.4em; font-size: 15px; font-style: italic; }
.form-msg.ok { color: #23683a; font-weight: 700; }
.form-msg.err { color: var(--red); }

.paper-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 14px 0 18px; border-top: 3px double var(--rule); font-size: 13px; color: var(--ink-soft); }

/* оторванный листок (создаётся скриптом) */
.tab-fly { position: fixed; z-index: 50; pointer-events: none; display: flex; justify-content: center; padding: 10px 0; background: #f7f2e7; border: 1px dashed var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.tab-fly span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 700; white-space: nowrap; }

.float-call { display: none; }

/* до старта анимаций */
.anim [data-reveal] { opacity: 0; }
.anim .mast-title { visibility: hidden; }

@media (max-width: 960px) {
  .paper { margin: 0; padding: 18px 18px 0; }
  .front { grid-template-columns: 1fr; }
  .story { padding-right: 0; border-right: 0; }
  .sidebar { padding-left: 0; padding-top: 24px; grid-template-columns: 1fr 1fr; }
  .mast-line { font-size: 11px; }
  .mast-line .mast-mid { display: none; }
  .ads-grid { grid-template-columns: 1fr; }
  .letters-grid { grid-template-columns: 1fr; gap: 16px; }
  .letters-grid blockquote { border-right: 0; border-bottom: 1px solid rgba(28,26,22,.3); padding: 0 0 14px; }
  .paper-foot { padding-bottom: 90px; }
  .float-call { display: block; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; padding: 15px; background: var(--ink); color: var(--paper); text-align: center; font: 700 16px var(--serif); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .columns { column-count: 1; }
  .sidebar { grid-template-columns: 1fr; }
  .rubrics { gap: 14px; font-size: 12px; letter-spacing: .08em; flex-wrap: wrap; }
  .tabs { grid-template-columns: repeat(6, 1fr); }
  .tabs .tab:nth-child(n+7) { display: none; }
  .tab { height: 160px; }
  .ref-table { font-size: 14px; }
  .ref-table th, .ref-table td { padding: 8px 6px; }
}