/* LAStudia · палитра «Латунь».
   Каталог мастерской: каждый проект — лист чертежа со штампом. */
:root {
  --paper: #E6E4E0;  --sheet: #F4F3F0;
  --ink: #1D1C1A;    --ink-2: #5A5650;   --line: #CBC7BF;
  --accent: #86600F; --accent-soft: #EEE3C8;
  --ok: #2F7A4D;     --warn: #A3470C;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --s-1: .75rem; --s-2: .875rem; --s-3: 1rem; --s-4: 1.25rem; --s-5: 1.75rem;
  --s-6: clamp(2rem, 5vw, 3.5rem);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121212; --sheet: #1B1A19;
    --ink: #ECE8E0;   --ink-2: #A39D92;  --line: #302E2B;
    --accent: #D6A84A; --accent-soft: #2E2614;
    --ok: #6CC48F;    --warn: #E5874A;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--s-3)/1.6 var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
img, video { max-width: 100%; display: block }
a { color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
h1, h2, h3 { text-wrap: balance; margin: 0 }
.wrap { max-width: 1180px; margin: 0 auto }
.mono { font-family: var(--f-mono); font-size: var(--s-1); letter-spacing: .04em }
.label { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Шапка */
.top { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line);
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: 14px }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none }
.mark .sq { width: 34px; height: 34px; border: 2px solid var(--ink); display: grid; place-items: center; font: 700 13px/1 var(--f-display) }
.mark .word { font: 700 1.05rem/1 var(--f-display); letter-spacing: -.01em }
.mark .word b { color: var(--accent) }
.nav { display: flex; gap: var(--s-4); font-size: var(--s-2) }
.nav a { text-decoration: none; color: var(--ink-2) }
.nav a:hover { color: var(--ink) }
@media (max-width: 640px) { .nav { display: none } }

/* Первый экран */
.hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-6); padding-block: var(--s-6) var(--s-5) }
.hero > * { min-width: 0 }
.hero h1 { font: 700 clamp(2rem, 5.2vw, 3.6rem)/1.04 var(--f-display); letter-spacing: -.025em; margin-block: var(--s-3) }
.hero h1 span { color: var(--accent) }
.hero .lede { max-width: 56ch; color: var(--ink-2); font-size: 1.0625rem; margin: 0 }
.facts { display: flex; gap: var(--s-5); margin-top: var(--s-5); flex-wrap: wrap }
.facts div { display: flex; flex-direction: column; gap: 2px }
.facts strong { font: 500 var(--s-4)/1.2 var(--f-body); font-variant-numeric: tabular-nums }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr } }

/* Указатель */
.index { border: 1.5px solid var(--ink); background: var(--sheet); align-self: start }
.index .head { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1.5px solid var(--ink) }
.index ul { list-style: none; margin: 0; padding: 0 }
.index li + li { border-top: 1px solid var(--line) }
.index a { display: grid; grid-template-columns: 4.2em 1fr auto; gap: 10px; align-items: baseline; padding: 7px 14px; font-size: var(--s-2); text-decoration: none }
.index a:hover { background: var(--accent-soft) }
.index a[aria-current="true"] { background: var(--ink); color: var(--sheet) }
.index a[aria-current="true"] .n, .index a[aria-current="true"] .code { color: var(--sheet) }
.index .code { font-family: var(--f-mono); font-size: .6875rem; color: var(--accent); letter-spacing: .05em }
.index .n { font-family: var(--f-mono); font-size: var(--s-1); color: var(--ink-2); font-variant-numeric: tabular-nums }

/* Заголовки разделов */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  border-top: 1.5px solid var(--ink); padding-top: var(--s-3); margin-top: var(--s-4); scroll-margin-top: 80px }
.sec-head h2 { font: 700 var(--s-4)/1.2 var(--f-display); letter-spacing: -.01em }

.note { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; border: 1.5px solid var(--accent);
  background: var(--accent-soft); padding: 14px 16px; font-size: var(--s-2); line-height: 1.5 }
.note > * { min-width: 0 }
.note .ic { width: 36px; height: 36px; display: grid; place-items: center; background: var(--accent); color: var(--sheet); font: 700 15px/1 var(--f-display) }

.flash { border: 1.5px solid var(--ok); color: var(--ok); padding: 10px 14px; margin-top: var(--s-3); font-size: var(--s-2) }

/* Сетка проектов */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); padding-block: var(--s-4) var(--s-6) }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr } }
.card { background: var(--sheet); border: 1px solid var(--line); display: flex; flex-direction: column; text-decoration: none; transition: border-color .15s, transform .15s }
a.card:hover { border-color: var(--ink); transform: translateY(-2px) }
.ph { position: relative; aspect-ratio: 4/3; max-width: 100%; overflow: hidden; background-color: var(--accent-soft); color: var(--accent);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 22px 22px }
.ph > svg { position: absolute; inset: 14% 22%; width: 56%; height: 72% }
.ph > img { width: 100%; height: 100%; object-fit: cover }
.ph .tag { position: absolute; left: 10px; top: 10px; background: var(--sheet); color: var(--ink); border: 1px solid var(--ink); padding: 2px 7px }
.ph .fund { position: absolute; right: 10px; top: 10px; background: var(--accent); color: var(--sheet); padding: 2px 7px }
.ph .count { position: absolute; right: 10px; bottom: 8px; color: var(--ink-2); background: var(--sheet); padding: 1px 6px }
.card .body { padding: var(--s-3) var(--s-3) 0; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.card h3 { font: 600 1.0625rem/1.3 var(--f-body) }
.card p { margin: 0; color: var(--ink-2); font-size: var(--s-2); line-height: 1.5 }
.stamp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: var(--s-3) }
.stamp > div { padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.stamp > div + div { border-left: 1px solid var(--line) }
.stamp .v { font-family: var(--f-mono); font-size: var(--s-1); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.st { display: inline-flex; align-items: center; gap: 5px }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none }
.st.active { color: var(--accent) } .st.done { color: var(--ok) } .st.plan, .st.paused { color: var(--warn) }

.card.empty { border-style: dashed; border-color: var(--ink-2); background: transparent }
.card.empty .ph { background-color: transparent; color: var(--ink-2) }
.card.empty .ph > svg { opacity: .55 }
.card.empty .ph .tag { background: var(--paper); border-style: dashed }
.card.empty .stamp { border-top-style: dashed }

/* Страница проекта */
.back { display: inline-flex; gap: 8px; margin-top: var(--s-5); font-size: var(--s-2); color: var(--ink-2); text-decoration: none }
.back:hover { color: var(--ink) }
.sheet { background: var(--sheet); border: 1.5px solid var(--ink); margin-block: var(--s-4) var(--s-6) }
.d-head, .d-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px }
.d-head { border-bottom: 1.5px solid var(--ink) }
.d-title { padding: var(--s-5) }
.d-title h1 { font: 700 clamp(1.6rem, 3.6vw, 2.6rem)/1.08 var(--f-display); letter-spacing: -.02em; margin-top: 10px }
.d-title p { max-width: 60ch; color: var(--ink-2); margin: var(--s-3) 0 0 }
.gost { display: grid; grid-template-columns: 1fr 1fr; border-left: 1.5px solid var(--ink); align-content: start }
.gost > div { padding: 9px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.gost > div:nth-child(odd) { border-right: 1px solid var(--line) }
.gost .v { font-family: var(--f-mono); font-size: var(--s-2); font-variant-numeric: tabular-nums }
.gost .wide { grid-column: 1 / -1; border-right: 0 !important }
.bar { height: 6px; background: var(--line); margin-top: 6px }
.bar i { display: block; height: 100% ; background: var(--accent) }
.d-main { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); min-width: 0 }
.d-side { border-left: 1.5px solid var(--ink); padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0 }
.d-main h2, .d-side h2 { font: 700 var(--s-3)/1.2 var(--f-display); margin-bottom: 10px }
@media (max-width: 860px) {
  .d-head, .d-body { grid-template-columns: 1fr }
  .gost { border-left: 0; border-top: 1.5px solid var(--ink) }
  .d-side { border-left: 0; border-top: 1.5px solid var(--ink) }
}
.prose p { margin: 0 0 .8em; max-width: 66ch }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.gallery figure { margin: 0 }
.gallery a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper) }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s }
.gallery a:hover img { transform: scale(1.03) }
.gallery figcaption { font-size: var(--s-1); color: var(--ink-2); padding-top: 4px }
@media (max-width: 520px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.video { position: relative; aspect-ratio: 16/9; max-width: 100%; background: #000; overflow: hidden }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.video-meta { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; font-size: var(--s-2) }
.videos { display: flex; flex-direction: column; gap: var(--s-4) }
.locked { display: flex; flex-direction: column; gap: 8px }
.lv { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); padding: 8px; background: var(--paper) }
.lv .thumb { aspect-ratio: 16/9; background: var(--ink); color: var(--sheet); display: grid; place-items: center; font-size: 18px; overflow: hidden }
.lv .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .4 }
.lv .t { font-weight: 600; font-size: var(--s-2); line-height: 1.3 }
.lv .price { font-family: var(--f-mono); font-size: var(--s-1); white-space: nowrap; border: 1px solid var(--ink); padding: 3px 8px }
@media (max-width: 520px) { .lv { grid-template-columns: 90px minmax(0, 1fr) } .lv .price { grid-column: 2; justify-self: start } }

.res { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.res a { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; min-width: 0 }
.res a:hover { border-color: var(--accent) }
.res .ic { width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); color: var(--sheet); font: 700 13px/1 var(--f-display); overflow: hidden }
.res .ic img { width: 100%; height: 100%; object-fit: cover }
.res .nm { font-weight: 600; font-size: var(--s-2); line-height: 1.2 }
.res .dm { font-family: var(--f-mono); font-size: .6875rem; color: var(--ink-2); overflow-wrap: anywhere }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chips span { font-family: var(--f-mono); font-size: .6875rem; border: 1px solid var(--line); padding: 3px 8px }

.fundbox { border: 1.5px solid var(--accent); padding: var(--s-3); display: flex; flex-direction: column; gap: 10px; background: var(--accent-soft) }
.fundbox h2 { margin: 0 }
.fundbox .what { font-weight: 600; line-height: 1.35 }
.fundbox .nums { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-mono); font-size: var(--s-1); font-variant-numeric: tabular-nums }
.fundbox .bar { background: var(--sheet); height: 8px; margin: 0 }
.fundbox small { color: var(--ink-2); font-size: var(--s-1); line-height: 1.4 }
.pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px }
.pay a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; background: var(--sheet); border: 1px solid var(--line); text-decoration: none; font-size: .75rem; text-align: center; line-height: 1.2 }
.pay a:hover { border-color: var(--accent) }
.pay .ic { width: 34px; height: 34px; display: grid; place-items: center; background: var(--accent); color: var(--sheet); font: 700 11px/1 var(--f-display) }

/* Контакты */
.contacts { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-5); padding-block: var(--s-4) var(--s-6) }
.contacts > * { min-width: 0 }
.ch .row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line) }
.ch .ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--ink); font: 700 12px/1 var(--f-display) }
.ch .val { font-family: var(--f-mono); font-size: var(--s-2); overflow-wrap: anywhere }
.ch .val a { text-decoration: none }
.ch .note-s { font-size: var(--s-1); color: var(--ink-2) }
.btn { appearance: none; cursor: pointer; font-family: var(--f-mono); font-size: var(--s-1); padding: 6px 10px; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0 }
.btn:hover { background: var(--ink); color: var(--sheet) }
.btn.primary { background: var(--ink); color: var(--sheet); padding: 12px 18px; font-size: var(--s-2) }
.btn.primary:hover { background: var(--accent); border-color: var(--accent) }
form.msg { background: var(--sheet); border: 1.5px solid var(--ink); padding: var(--s-4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) }
form.msg .full { grid-column: 1 / -1 }
form.msg label { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
form.msg input, form.msg select, form.msg textarea { font: inherit; font-size: var(--s-2); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 0; padding: 9px 10px; width: 100% }
form.msg input:focus, form.msg select:focus, form.msg textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px }
form.msg textarea { min-height: 120px; resize: vertical }
form.msg .err { color: var(--warn); font-size: var(--s-1) }
form.msg .trap { position: absolute; left: -9999px }
@media (max-width: 860px) { .contacts { grid-template-columns: 1fr } }
@media (max-width: 520px) { form.msg { grid-template-columns: 1fr } }

.foot { border-top: 1.5px solid var(--ink); padding-block: var(--s-4) var(--s-6); display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; color: var(--ink-2); font-size: var(--s-2) }

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