/* Portfolio — strict architectural system: grid, hairlines, restrained 6–8px corners. */
.hero h1{font-size:clamp(52px,6.2vw,96px);max-width:15ch}
.hero .hero-directions{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding-top:22px}
.hero-directions a{display:grid;gap:8px;min-height:44px;padding:6px 0;color:#fff;text-decoration:none;transition:opacity 160ms ease}
.hero-directions a+a{border-left:1px solid #ffffff40;padding-left:32px}
.hero-directions strong{font-size:clamp(22px,2.3vw,34px);font-weight:500;line-height:1.15;letter-spacing:-.03em}
.hero-directions a>span:last-child{font-size:13px;color:#e3e7e2}.hero-directions a:hover{opacity:.72}

#portfolio .portfolio-tabs{display:inline-flex;gap:0;align-self:flex-start;margin:0 0 18px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper)}
#portfolio .portfolio-tabs[hidden]{display:none}.portfolio-tabs::before{display:none}
.portfolio-tabs button{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 18px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink-soft);font:500 14px/1.25 var(--sans);cursor:pointer;transition:background 180ms ease,color 180ms ease}
.portfolio-tabs button:last-child{border-right:0}.portfolio-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
/* The counter stays secondary, but .76 blended it down to 3.8:1 on paper — .86 keeps the
   same hierarchy at 4.8:1. */
.portfolio-tabs button span{font-size:11px;font-variant-numeric:tabular-nums;opacity:.86}
#portfolio-panel{min-width:0}

#portfolio .projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#portfolio .project{position:relative;display:grid;padding:18px;gap:8px 20px;background:var(--paper-soft);border:1px solid var(--line);border-radius:8px;box-shadow:none;transition:border-color 180ms ease,background 180ms ease}
.project:focus-within{outline:2px solid var(--ink);outline-offset:3px}
#portfolio .project h3{position:relative;max-width:26ch;font-size:clamp(20px,1.65vw,28px)}
#portfolio .project-swatch{isolation:isolate;display:flex;align-items:end;min-height:132px;border-radius:6px;overflow:hidden}.project-swatch::after{z-index:-1}.project-photo-label{position:relative;z-index:1;display:block;width:100%;padding:5px 7px;background:#f4f3efed;color:var(--ink-soft);font-size:10px;line-height:1.3;font-style:normal}
#portfolio .project-swatch img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover}.project-index{z-index:0;color:#858c81}.project-meta,.project-tags{position:relative;pointer-events:none}
#portfolio .project-tags li{display:inline-block;margin:0 4px 4px 0;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:transparent;font-size:11px}
#portfolio .project-open{grid-area:more;justify-self:start;min-height:40px;padding:0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:none;color:var(--ink);font:500 13px/1.4 var(--sans);cursor:pointer;text-align:left;transition:color 160ms ease,border-color 160ms ease}.project-open::after{content:'';position:absolute;inset:0;z-index:2}.project-open:hover{color:var(--muted);border-color:var(--muted)}.project-open:active{transform:none}
#brief select{width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:inherit}

html.portfolio-dialog-open{overflow:hidden}
#project-dialog{position:fixed;inset:0;margin:auto;width:min(1120px,calc(100% - 64px));max-width:none;height:calc(100dvh - 48px);max-height:none;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);overflow:hidden;overscroll-behavior:contain;box-shadow:0 20px 64px rgba(0,0,0,.18);font-family:var(--sans);opacity:0;transform:translateY(12px);transition:opacity 220ms ease,transform 280ms var(--ease-out-quint,cubic-bezier(.23,1,.32,1)),display 220ms allow-discrete}
#project-dialog[open]{opacity:1;transform:none}#project-dialog::backdrop{background:rgba(16,19,21,.62);opacity:0;transition:opacity 220ms ease}#project-dialog[open]::backdrop{opacity:1}@starting-style{#project-dialog{opacity:0;transform:translateY(12px)}}
.project-dialog-bar{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 28px;border-bottom:1px solid var(--line);background:var(--paper)}
.project-close{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:6px 0 6px 12px;border:0;background:none;color:var(--ink);font:500 13px var(--sans);cursor:pointer}.project-close svg{display:block}.project-close:hover{color:var(--muted)}
.project-dialog-content{height:100%;padding:76px 28px 28px;overflow:auto;box-sizing:border-box;overscroll-behavior:contain}.project-dialog-content h2{max-width:30ch;margin:10px 0 28px;font-size:clamp(28px,3.4vw,46px);overflow-wrap:anywhere}#project-disclaimer{max-width:70ch;font-size:12px;color:var(--muted)}
.project-detail-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start;padding-bottom:28px}.project-gallery{display:flex;flex-direction:column;gap:10px;min-width:0;padding:0}.project-photo{margin:0}
#project-photo-slot{position:relative;display:flex;flex-direction:column;aspect-ratio:4/3;max-height:min(46vh,400px);align-items:center;justify-content:center;gap:8px;overflow:hidden;padding:24px;border:1px solid #c9cdc3;border-radius:6px;background:#e4e5df;color:var(--ink-soft);text-align:center}.photo-in{animation:photo-in 260ms var(--ease-out-quint,cubic-bezier(.23,1,.32,1)) both}@keyframes photo-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#project-photo-slot .photo-placeholder-title{margin-bottom:12px;font-size:clamp(22px,2.3vw,30px);line-height:1.15;color:var(--ink)}#project-photo-slot>span:not(.photo-placeholder-title),#project-photo-slot small{font-size:12px}#project-photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#project-photo-caption{min-height:24px;padding-top:2px;font-size:12px;color:var(--muted)}
.project-gallery-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;border-block:1px solid var(--line);padding:8px 0}.project-gallery-nav button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);cursor:pointer;transition:background 160ms ease,border-color 160ms ease}.project-gallery-nav .gallery-next{justify-self:end}.project-gallery-nav button:hover{border-color:var(--ink);background:#eceee8}.project-gallery-nav button:disabled{opacity:.35;cursor:default}.project-gallery-nav button:disabled:hover{border-color:var(--line);background:transparent}.project-gallery-nav svg{display:block;pointer-events:none}#project-photo-count{justify-self:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.project-thumbnails{display:flex;gap:6px;flex-wrap:wrap}.project-thumbnails button{flex:0 1 132px;min-height:36px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink-soft);font:400 11px/1.3 var(--sans);cursor:pointer;text-align:left;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}.project-thumbnails button:hover{border-color:#8e948a}.project-thumbnails button[aria-pressed="true"]{border-color:var(--ink);background:#eceee8;color:var(--ink)}
.project-detail-copy{min-width:0;font-size:15px;line-height:1.55}.project-detail-copy h3{margin:18px 0 10px;font-size:23px}.project-details-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.project-details-meta dt{font-size:12px;color:var(--muted)}.project-details-meta dd{margin:2px 0 0;overflow-wrap:anywhere}.project-volumes{margin:0 0 10px;border-top:1px solid var(--line)}.project-volumes>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}.project-volumes dt{font-size:14px}.project-volumes dd{margin:0;font-size:12px;color:var(--muted)}.project-detail-copy .note{font-size:12px}.project-detail-copy .btn{margin-top:18px}
#project-dialog :where(button,a):focus-visible,.portfolio-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media(min-width:901px) and (max-height:850px){#portfolio .project{padding:12px 16px;gap:6px 18px}#portfolio .project h3{font-size:20px}#portfolio .project-swatch{min-height:108px}#portfolio .portfolio-tabs{margin-bottom:12px}}
@media(max-width:900px){#portfolio .projects{grid-template-columns:1fr}}
@media(max-width:600px){.hero h1{margin-block:18px 22px;font-size:clamp(42px,10.5vw,62px)}.hero .hero-directions{grid-template-columns:1fr;gap:14px;padding-top:18px}.hero-directions a{grid-template-columns:1fr auto;gap:4px 12px}.hero-directions a .mono{grid-column:1/-1;font-size:10px}.hero-directions strong{font-size:23px}.hero-directions a>span:last-child{align-self:center;font-size:11px}.hero-directions a+a{padding:14px 0 0;border-top:1px solid #ffffff40;border-left:0}
#portfolio .portfolio-tabs{display:flex;width:100%;align-self:stretch}.portfolio-tabs button{flex:1;justify-content:space-between;padding-inline:14px}#portfolio .project{padding:16px;gap:8px 16px}#portfolio .project h3{font-size:21px}
#project-dialog{width:100%;height:100dvh;border:0;border-radius:0}.project-dialog-bar{padding:8px 20px;padding-top:max(8px,env(safe-area-inset-top))}.project-dialog-content{padding:calc(env(safe-area-inset-top) + 70px) 20px max(28px,env(safe-area-inset-bottom))}.project-detail-grid{grid-template-columns:1fr;gap:26px;padding-bottom:22px}.project-dialog-content h2{margin-bottom:22px;font-size:30px}.project-volumes>div{grid-template-columns:1fr;gap:4px}.project-detail-copy .btn{width:100%}}
@media(max-width:359px){.hero-directions a{grid-template-columns:1fr}.hero-directions a>span:last-child{font-size:12px}.project-dialog-bar{padding-inline:16px}.project-dialog-content{padding-inline:16px}.project-details-meta{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hero-directions a,.portfolio-tabs button,#portfolio .project,.project-gallery-nav button,.project-thumbnails button,#project-dialog,#project-dialog::backdrop{transition:none}.photo-in{animation:none}}

/* ---------- Phone / tablet layout (<900px) ----------
   "One screen per block" is a desktop rhythm. On a phone a short block (#zayavka) centred inside
   100svh reads as a hole in the page, so blocks take their natural height and start at the top.
   The CTA hairline duplicated the section rule right above it — one line is enough. */
@media(max-width:899px){
  main>section:not(.cine):not(.hero){min-height:0;justify-content:flex-start;padding-block:clamp(36px,7svh,56px)}
  /* Project card: six facts in ONE column made every card ~1100px tall. Two columns; the two
     long values (address, dates) span the row so they never wrap into a 4-line tower. */
  #portfolio .project-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
  #portfolio .project-meta div:nth-child(5),#portfolio .project-meta div:nth-child(6){grid-column:1/-1}
  #portfolio .project-meta dd{font-size:14px;overflow-wrap:anywhere}
  #portfolio .project-scope{font-size:14px}
  #portfolio .projects{gap:12px}
}
@media(max-width:480px){
  #portfolio .project-swatch{min-height:0;height:72px}
  #portfolio .project-index{top:82px}
}

/* ---------- Фильтр по классу здания ---------- */
/* Второй уровень навигации после табов направления: пилюли, а не сегмент-контрол,
   чтобы визуально не спорить с основным переключателем «Фасады / Отделка». */
#portfolio .portfolio-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 18px}
#portfolio .portfolio-controls .portfolio-tabs,#portfolio .portfolio-controls .portfolio-filters{margin:0}
#portfolio .portfolio-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 18px}
#portfolio .portfolio-filters[hidden]{display:none}
/* Вторая группа (статус) отделена тонкой линией, чтобы два ряда пилюль читались как разные оси. */
#portfolio .portfolio-filters--status{padding-left:18px;border-left:1px solid var(--line)}
.portfolio-filter{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink-soft);font:500 13px/1.2 var(--sans);cursor:pointer;transition:background 180ms ease,color 180ms ease,border-color 180ms ease}
.portfolio-filter i{font-style:normal;font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;opacity:.7}
.portfolio-filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.portfolio-filter:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.portfolio-filter:disabled{opacity:.42;cursor:default}
@media(hover:hover) and (pointer:fine){.portfolio-filter:not([aria-pressed="true"]):hover{border-color:var(--ink);color:var(--ink)}}
/* Карточка скрыта фильтром: `hidden` сам по себе проигрывает display:grid у .project. */
#portfolio .project[hidden]{display:none}
@media(max-width:600px){#portfolio .portfolio-filters{gap:6px;margin-bottom:14px}#portfolio .portfolio-filters--status{padding-left:0;border-left:0}.portfolio-filter{min-height:40px;padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.portfolio-filter{transition:none}}

/* Client-supplied complex render: show the real crop, not the material swatch. */
#portfolio .project:has(.project-swatch--photo){grid-template-columns:clamp(134px,14vw,180px) minmax(0,1fr)}
#portfolio .project-swatch--photo{width:100%;min-height:176px;display:block;background:#293438}
#portfolio .project-swatch--photo::after{display:none}
#portfolio .project-swatch--photo img{object-position:center 48%}
#portfolio .project-swatch--photo .project-photo-label{position:absolute;inset:0 0 auto;width:auto;padding:6px 8px;background:#1c2529e8;color:#fff;font-size:10px;line-height:1.3}
/* Три превью в карточке: мини-полоска поверх обложки. */
#portfolio .project-swatch .project-thumbs{position:absolute;z-index:3;inset:auto 6px 6px;display:flex;gap:4px;pointer-events:none}
#portfolio .project-swatch .project-thumbs img{position:static;flex:1;min-width:0;height:26px;object-fit:cover;border:1px solid #ffffff70;border-radius:3px;opacity:.72;transition:opacity 220ms ease,border-color 220ms ease}
#portfolio .project-swatch .project-thumbs img.is-on{opacity:1;border-color:#fff;box-shadow:0 0 0 1px #fff}
#portfolio .project-swatch>img.swap-in{animation:swap-in 420ms ease both}@keyframes swap-in{from{opacity:.25;transform:scale(1.03)}to{opacity:1;transform:none}}
#portfolio .project-swatch--photo::before{content:'';position:absolute;inset:auto 0 0;z-index:2;height:48px;background:linear-gradient(transparent,#10181bb0);pointer-events:none}
@media(prefers-reduced-motion:reduce){#portfolio .project-swatch>img.swap-in{animation:none}}
#project-photo-slot .project-render{position:relative;width:100%;aspect-ratio:2560/1333;flex:none;max-height:100%;overflow:hidden;background:#1b282e}
#project-photo-slot .project-render img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.project-render svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.project-render svg path{fill:#efc34422;stroke:#f5cf58;stroke-width:12;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 5px #151b1dcc)}
#project-photo-slot .project-render-label{position:absolute;z-index:1;top:11%;left:35%;transform:translateX(-50%);white-space:nowrap;max-width:75%;padding:6px 9px;border-radius:3px;background:#efc344;color:#13191a;font-size:clamp(10px,1.1vw,13px);font-weight:700;line-height:1.2;box-shadow:0 2px 12px #161d1a66}
@media(max-width:900px){#portfolio .project:has(.project-swatch--photo){grid-template-columns:140px minmax(0,1fr)}}
@media(max-width:480px){#portfolio .project:has(.project-swatch--photo){grid-template-columns:1fr;grid-template-areas:'swatch' 'tags' 'main' 'meta' 'more'}#portfolio .project-swatch--photo{height:158px;min-height:0}#portfolio .project-swatch--photo img{object-position:center 43%}#portfolio .project:has(.project-swatch--photo) .project-index{top:166px}#project-photo-slot .project-render-label{top:7%;left:35%;font-size:10px;padding:4px 6px}}

/* Five partner marks occupy one desktop row, not a second mostly-empty row.
   Keep photo columns proportional so long project facts retain readable line lengths. */
@media (min-width: 1100px) {
  #portfolio .partners-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1100px) and (max-height: 1100px) {
  #portfolio .project:has(.project-swatch--photo) {
    grid-template-columns: clamp(120px, 10vw, 160px) minmax(0, 1fr);
  }
  #portfolio .project { gap: 8px 16px; }
  #portfolio .project h3 { font-size: clamp(20px, 1.4vw, 24px); }
}