/* ===========================================================
   РАСТР — мастерская шелкографии. Риисо/силкскрин дизайн-система.
   Кремовая бумага + чернильные плашки (синий/красный/жёлтый),
   жирный гротеск-display, регистровые метки.
   =========================================================== */

:root{
  /* бумага и чернила */
  --paper:      #f4ecd8;
  --paper-deep: #e9ddc1;
  --soot:       #181410;
  --soot-soft:  #4a4034;

  --ink-blue:   #1f3df0;
  --ink-red:    #ec2b3b;
  --ink-yellow: #f7c615;

  --line:       #d6c8a6;
  --line-hard:  #181410;

  /* типографика: жирный гротеск-display + гротеск-body, системные стеки */
  --display: "Arial Black", "Helvetica Neue", Impact, "Franklin Gothic Heavy", system-ui, sans-serif;
  --body:    ui-sans-serif, "Segoe UI", "Helvetica Neue", "Trebuchet MS", system-ui, sans-serif;

  --shell: 1180px;
  --gap:   clamp(1.4rem, 4vw, 3.4rem);

  --shadow: 6px 6px 0 var(--soot);
  --shadow-sm: 3px 3px 0 var(--soot);

  --ease: cubic-bezier(.2,.7,.2,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  font-family:var(--body);
  color:var(--soot);
  background-color:var(--paper);
  /* атмосфера: бумажная текстура + растровая точка + чернильные сполохи */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(31,61,240,.10), transparent 42%),
    radial-gradient(circle at 88% 8%,  rgba(236,43,59,.10), transparent 40%),
    radial-gradient(rgba(24,20,16,.05) 1px, transparent 1.6px);
  background-size:auto, auto, 7px 7px;
  line-height:1.6;
  font-size:clamp(1rem, .96rem + .25vw, 1.12rem);
  overflow-x:hidden;
}

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

.shell{ width:min(var(--shell), 92vw); margin-inline:auto; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* skip-link */
.bypass{
  position:absolute; left:1rem; top:-100px; z-index:200;
  background:var(--soot); color:var(--paper);
  padding:.7rem 1.1rem; font-family:var(--display); text-decoration:none;
  border:2px solid var(--soot);
}
.bypass:focus{ top:1rem; }

:focus-visible{
  outline:3px solid var(--ink-blue);
  outline-offset:3px;
}

/* ---------- reveal (gated за .js — без JS контент виден) ---------- */
.js [data-rise]{
  opacity:0;
  transform:translateY(26px);
}
.js [data-rise].is-on{
  opacity:1;
  transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:2px solid var(--line-hard);
  transition:box-shadow .25s var(--ease), background .25s var(--ease);
}
.topbar.is-stuck{ box-shadow:0 6px 0 -3px var(--soot); }
.topbar__row{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px; gap:1rem;
}
.mark{
  display:inline-flex; align-items:baseline; gap:.5rem;
  text-decoration:none; font-family:var(--display);
}
.mark__crop{
  font-family:var(--display); color:var(--ink-red);
  font-size:1.4rem; line-height:1; transform:translateY(2px);
}
.mark__word{
  font-size:1.5rem; letter-spacing:.14em; text-transform:uppercase;
}
.mark__tag{
  font-family:var(--body); font-weight:700; font-size:.66rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-blue);
  align-self:center; padding:.18rem .4rem; border:1.5px solid var(--ink-blue);
}

.nav{ display:flex; align-items:center; }
.nav__list{
  list-style:none; display:flex; align-items:center; gap:1.6rem;
  margin:0; padding:0;
}
.nav__list a{
  text-decoration:none; font-weight:700; font-size:.95rem;
  letter-spacing:.02em; padding:.3rem 0; position:relative;
}
.nav__list a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:-2px; height:3px; width:0;
  background:var(--ink-red); transition:width .25s var(--ease);
}
.nav__list a:not(.nav__cta):hover::after,
.nav__list a:not(.nav__cta):focus-visible::after{ width:100%; }
.nav__cta{
  background:var(--soot); color:var(--paper);
  padding:.6rem 1.1rem; border:2px solid var(--soot);
  box-shadow:var(--shadow-sm);
}
.nav__cta:hover{ background:var(--ink-blue); border-color:var(--ink-blue); }

.nav__toggle{
  display:none; width:48px; height:44px;
  background:var(--paper); border:2px solid var(--line-hard); cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__bars, .nav__bars::before, .nav__bars::after{
  content:""; display:block; width:22px; height:3px; background:var(--soot);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__bars{ position:relative; }
.nav__bars::before{ position:absolute; top:-7px; }
.nav__bars::after{ position:absolute; top:7px; }
.nav.is-open .nav__bars{ background:transparent; }
.nav.is-open .nav__bars::before{ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__bars::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---------- opener ---------- */
.opener{
  position:relative; padding:clamp(2.4rem,6vw,5rem) 0 clamp(2rem,5vw,4rem);
  border-bottom:2px solid var(--line-hard);
}
.opener__marks{ position:absolute; inset:0; pointer-events:none; }
.reg{
  position:absolute; font-family:var(--display); font-size:1.5rem;
  color:var(--soot-soft); opacity:.5;
}
.reg--tl{ left:2vw; top:1.2rem; color:var(--ink-blue); }
.reg--tr{ right:2vw; top:1.2rem; color:var(--ink-red); }
.reg--bl{ left:2vw; bottom:1.2rem; color:var(--ink-yellow); }
.reg--br{ right:2vw; bottom:1.2rem; color:var(--soot); }

.opener__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--gap); align-items:center;
}
.kick{
  font-family:var(--body); font-weight:800; font-size:.78rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-red);
  margin:0 0 1rem;
}
.opener__head{
  font-family:var(--display); margin:0 0 1.3rem;
  font-size:clamp(2.7rem, 7vw, 5.2rem); line-height:.95;
  letter-spacing:-.01em; text-transform:uppercase;
}
.ink{
  display:inline-block; padding:.02em .22em; color:var(--paper);
  transform:rotate(-1.2deg);
}
.ink--blue{ background:var(--ink-blue); }
.ink--red{ background:var(--ink-red); transform:rotate(1.4deg); }

.opener__lead{
  margin:0 0 1.8rem; font-size:1.1rem; max-width:46ch; color:var(--soot-soft);
}
.opener__act{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.2rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em;
  font-size:.95rem; text-decoration:none; cursor:pointer;
  padding:.85rem 1.6rem; border:2px solid var(--soot);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.btn--solid{ background:var(--ink-blue); color:var(--paper); border-color:var(--soot); box-shadow:var(--shadow); }
.btn--line{ background:var(--paper); color:var(--soot); box-shadow:var(--shadow); }
.btn--solid:hover, .btn--line:hover{ transform:translate(3px,3px); box-shadow:var(--shadow-sm); }
.btn--solid:active, .btn--line:active{ transform:translate(6px,6px); box-shadow:none; }
.btn--block{ width:100%; }

.tally{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin:0;
  padding-top:1.4rem; border-top:2px solid var(--line-hard);
}
.tally dt{ font-family:var(--display); font-size:1.7rem; line-height:1; }
.tally dd{ margin:.25rem 0 0; font-size:.82rem; color:var(--soot-soft);
  text-transform:uppercase; letter-spacing:.08em; }

.opener__shot{ margin:0; position:relative; }
.opener__shot img{
  border:3px solid var(--soot); box-shadow:10px 10px 0 var(--ink-yellow);
  width:100%; object-fit:cover;
}
.opener__shot figcaption{
  margin-top:.9rem; font-size:.82rem; color:var(--soot-soft);
  text-transform:uppercase; letter-spacing:.06em;
}

/* ---------- begущая лента ---------- */
.band{
  background:var(--soot); color:var(--paper); overflow:hidden;
  border-bottom:2px solid var(--line-hard);
}
.band__track{
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
  padding:1rem 0; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.06em; font-size:clamp(1rem,2.4vw,1.5rem);
}
.band__dot{ color:var(--ink-yellow); font-size:.7em; }

/* ---------- общие заголовки секций ---------- */
.lead-row{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem); }
.title{
  font-family:var(--display); text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(2rem,5vw,3.4rem); line-height:1; margin:.4rem 0 1rem;
}
.title--center{ text-align:center; margin-inline:auto; }
.title__sub{ font-size:1.06rem; color:var(--soot-soft); margin:0; }

section{ padding:clamp(3rem,7vw,6rem) 0; border-bottom:2px solid var(--line-hard); }

/* ---------- works / gallery ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(1rem,2.5vw,1.8rem);
}
.card{
  grid-column:span 3; margin:0; background:var(--paper-deep);
  border:3px solid var(--soot); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card--lg{ grid-column:span 4; }
.card--wide{ grid-column:span 6; }
.card:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink-blue); }
.card__pic{ overflow:hidden; border-bottom:3px solid var(--soot); }
.card__pic img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:3/2;
  transition:transform .4s var(--ease); filter:saturate(1.05) contrast(1.03);
}
.card--lg .card__pic img{ aspect-ratio:3/2.1; }
.card:hover .card__pic img{ transform:scale(1.04); }
.card__cap{ padding:1.2rem 1.3rem 1.4rem; }
.card__no{
  font-family:var(--display); color:var(--ink-red); font-size:1.1rem;
  letter-spacing:.1em;
}
.card__cap h3{ font-family:var(--display); text-transform:uppercase;
  font-size:1.25rem; margin:.3rem 0 .5rem; line-height:1.05; }
.card__cap p{ margin:0; font-size:.95rem; color:var(--soot-soft); }

/* ---------- flow / process ---------- */
.flow__grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--gap);
  align-items:start;
}
.flow__shot{ margin:2rem 0 0; }
.flow__shot img{
  border:3px solid var(--soot); box-shadow:8px 8px 0 var(--ink-red);
  width:100%; object-fit:cover; aspect-ratio:3/4;
}
.steps{ list-style:none; counter-reset:none; margin:0; padding:0;
  display:grid; gap:1rem; }
.step{
  position:relative; padding:1.4rem 1.5rem 1.4rem 1.5rem;
  background:var(--paper-deep); border:3px solid var(--soot);
  box-shadow:var(--shadow-sm);
}
.step__no{
  position:absolute; top:-.9rem; left:1.2rem;
  font-family:var(--display); font-size:1.5rem; color:var(--paper);
  background:var(--ink-blue); padding:.1rem .5rem; border:2px solid var(--soot);
}
.step:nth-child(2) .step__no{ background:var(--ink-red); }
.step:nth-child(3) .step__no{ background:var(--ink-yellow); color:var(--soot); }
.step:nth-child(4) .step__no{ background:var(--soot); }
.step:nth-child(5) .step__no{ background:var(--ink-blue); }
.step h3{ font-family:var(--display); text-transform:uppercase;
  font-size:1.2rem; margin:.5rem 0 .4rem; }
.step p{ margin:0; color:var(--soot-soft); font-size:.96rem; }

/* ---------- offer / rates ---------- */
.rates{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,1.8rem);
}
.rate{
  position:relative; background:var(--paper); border:3px solid var(--soot);
  padding:1.8rem 1.5rem; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.rate--mark{ background:var(--soot); color:var(--paper); }
.rate--mark .rate__list li{ color:var(--paper); }
.rate--mark .rate__list li::marker{ color:var(--ink-yellow); }
.rate__flag{
  position:absolute; top:-1rem; right:1.2rem;
  font-family:var(--display); text-transform:uppercase; font-size:.72rem;
  letter-spacing:.12em; background:var(--ink-yellow); color:var(--soot);
  padding:.3rem .6rem; border:2px solid var(--soot);
}
.rate h3{ font-family:var(--display); text-transform:uppercase;
  font-size:1.3rem; margin:0 0 .8rem; line-height:1; }
.rate__price{
  font-family:var(--display); font-size:2.4rem; line-height:1; margin:0 0 1rem;
}
.rate__price span{ font-family:var(--body); font-size:.9rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-red);
  display:block; margin-bottom:.2rem; }
.rate--mark .rate__price span{ color:var(--ink-yellow); }
.rate__price small{ font-family:var(--body); font-size:.95rem; font-weight:600;
  color:var(--soot-soft); }
.rate--mark .rate__price small{ color:#cdbf9d; }
.rate__list{ list-style:none; margin:0; padding:0; }
.rate__list li{ position:relative; padding-left:1.4rem; margin-bottom:.6rem;
  font-size:.95rem; color:var(--soot-soft); }
.rate__list li::before{ content:"+"; position:absolute; left:0;
  font-family:var(--display); color:var(--ink-blue); }
.rate--mark .rate__list li::before{ color:var(--ink-yellow); }
.offer__note{
  margin:2.4rem 0 0; padding:1.4rem 1.6rem; border:3px dashed var(--soot);
  background:var(--paper-deep); font-size:1.02rem; text-align:center;
}

/* ---------- studio ---------- */
.studio__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);
  align-items:center;
}
.studio__shot{ margin:0; }
.studio__shot img{
  border:3px solid var(--soot); box-shadow:10px 10px 0 var(--ink-blue);
  width:100%; object-fit:cover; aspect-ratio:3/2;
}
.studio__copy p{ color:var(--soot-soft); }
.crew{ list-style:none; margin:1.6rem 0 0; padding:1.4rem 0 0;
  border-top:2px solid var(--line-hard); display:grid; gap:.9rem; }
.crew li{ display:flex; flex-direction:column; }
.crew strong{ font-family:var(--display); text-transform:uppercase;
  font-size:1.05rem; }
.crew span{ font-size:.85rem; color:var(--soot-soft);
  text-transform:uppercase; letter-spacing:.06em; }

/* ---------- voices ---------- */
.voices{ background:var(--paper-deep); }
.voices__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.5vw,1.8rem); margin-top:2.5rem;
}
.voice{
  margin:0; background:var(--paper); border:3px solid var(--soot);
  padding:1.6rem 1.5rem; box-shadow:var(--shadow-sm); position:relative;
}
.voice::before{
  content:"”"; position:absolute; top:-.4rem; right:.8rem;
  font-family:var(--display); font-size:3.4rem; color:var(--ink-red);
  line-height:1; opacity:.55;
}
.voice p{ margin:0 0 1.1rem; font-size:1rem; }
.voice footer{ font-size:.9rem; color:var(--soot-soft); }
.voice footer strong{ color:var(--soot); }

/* ---------- order / form ---------- */
.order__grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--gap);
  align-items:start;
}
.order__copy p{ color:var(--soot-soft); max-width:42ch; }
.contacts{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1rem; }
.contacts li{ display:grid; grid-template-columns:7rem 1fr; gap:.6rem;
  align-items:baseline; border-bottom:1.5px solid var(--line); padding-bottom:.8rem; }
.contacts span{ font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  font-size:.74rem; color:var(--ink-blue); }
.contacts a, .contacts address, .contacts time{
  font-style:normal; text-decoration:none; font-size:1rem; }
.contacts a:hover{ color:var(--ink-red); }

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
  background:var(--paper-deep); border:3px solid var(--soot);
  box-shadow:var(--shadow); padding:clamp(1.4rem,3vw,2.2rem);
}
.field{ display:flex; flex-direction:column; }
.field--full{ grid-column:1 / -1; }
.field label{ font-weight:800; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:.45rem; }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:1rem; color:var(--soot);
  background:var(--paper); border:2px solid var(--soot); padding:.7rem .8rem;
  width:100%;
}
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ink-blue); box-shadow:3px 3px 0 var(--ink-blue);
}
.field__err{
  display:none; margin-top:.4rem; font-size:.82rem; font-weight:700;
  color:var(--ink-red);
}
.field.is-bad input, .field.is-bad select{ border-color:var(--ink-red);
  box-shadow:3px 3px 0 var(--ink-red); }
.field.is-bad .field__err{ display:block; }
.form .btn--block{ grid-column:1 / -1; margin-top:.4rem; }
.form__ok{
  grid-column:1 / -1; margin:0; padding:.9rem 1rem; font-weight:700;
  background:var(--ink-yellow); color:var(--soot); border:2px solid var(--soot);
}

/* ---------- footer ---------- */
.foot{ background:var(--soot); color:var(--paper); border-bottom:none; }
.foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--gap);
  padding:clamp(2.6rem,5vw,4rem) 0 2rem;
}
.foot__brand{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.foot__word{ font-family:var(--display); font-size:1.6rem; letter-spacing:.14em;
  text-transform:uppercase; }
.foot__brand p{ flex-basis:100%; margin:.6rem 0 0; color:#cdbf9d;
  font-size:.92rem; max-width:34ch; }
.foot__nav{ display:grid; gap:.6rem; align-content:start; }
.foot__nav a, .foot__meta a, .foot__meta address{
  color:var(--paper); text-decoration:none; font-style:normal; font-size:.95rem; }
.foot__nav a:hover, .foot__meta a:hover{ color:var(--ink-yellow); }
.foot__meta{ display:grid; gap:.6rem; align-content:start; }
.foot__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  padding:1.2rem 0 1.6rem; border-top:1.5px solid #3a322a;
  font-size:.82rem; color:#a89a7c; text-transform:uppercase; letter-spacing:.08em;
}

/* ---------- адаптив ---------- */
@media (max-width: 980px){
  .opener__grid, .flow__grid, .studio__grid, .order__grid{
    grid-template-columns:1fr;
  }
  .flow__shot{ order:-1; margin-top:1.4rem; }
  .flow__shot img{ aspect-ratio:3/2; }
  .studio__shot{ order:-1; }
  .rates, .voices__grid{ grid-template-columns:1fr; }
  .gallery .card,
  .card--lg, .card--wide{ grid-column:span 6; }
}

@media (max-width: 720px){
  .nav__toggle{ display:inline-flex; }
  .nav__list{
    position:absolute; top:72px; right:0; left:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:2px solid var(--line-hard);
    padding:.4rem 6vw 1.2rem;
    transform:translateY(-130%); transition:transform .3s var(--ease);
    box-shadow:0 12px 0 -6px var(--soot);
  }
  .nav.is-open .nav__list{ transform:translateY(0); }
  .nav__list li{ border-top:1.5px solid var(--line); }
  .nav__list a{ display:block; padding:.9rem .2rem; }
  .nav__cta{ margin-top:.7rem; text-align:center; box-shadow:var(--shadow-sm); }
  .form{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  .tally{ gap:1.2rem 1.6rem; }
}

@media (max-width: 420px){
  .opener__head{ font-size:2.4rem; }
  .reg{ display:none; }
}