:root{--bg:#f4f2ed;--ink:#1e201b;--accent:#4a5a34;--muted:#5c5f54;--line:rgba(30,32,27,.2)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Commissioner,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px max(40px,calc((100vw - 1600px)/2));border-bottom:1px solid var(--line)}
header a{font-size:17px;font-weight:600;white-space:nowrap}
header .brand{font-size:24px;letter-spacing:.18em;color:var(--ink)}
main{max-width:1600px;margin:auto;padding:48px 40px 88px}
.back{display:inline-flex;align-items:center;min-height:44px}
h1{font-size:clamp(32px,4vw,60px);font-weight:400;line-height:1.1;letter-spacing:-.025em;margin:28px 0 18px;text-wrap:balance}
.project-meta{font-size:20px;color:var(--ink);margin:0 0 40px;line-height:1.5}
.project-mobile-cover{display:none}
.project-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:start}
.project-gallery{display:grid;gap:20px;min-width:0}
.project-gallery a{display:block;background:#e2dfd6}
.project-gallery a,.project-mobile-cover{cursor:zoom-in}
.project-mobile-cover img{display:block;width:100%;height:auto}
.project-gallery img{display:block;width:100%;height:auto}
.project-description{min-width:0}
.project-description p{font-size:18px;line-height:1.7;margin:0 0 20px;text-wrap:pretty}
.project-features{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 30px}
.project-features li{border:1px solid var(--line);padding:10px 14px;font-size:15px;line-height:1.4}
.project-cta{display:block;margin-top:32px;padding:20px;background:var(--accent);color:var(--bg);font-size:17px;font-weight:600;line-height:1.5}
.project-attachments{margin-top:24px;line-height:1.6}

/* подчёркивание при наведении: появляется слева направо, уходит тоже слева направо */
.back,header a:not(.brand){position:relative}
.back::after,header a:not(.brand)::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s cubic-bezier(.25,.6,.2,1)}
.back:hover::after,.back:focus-visible::after,header a:not(.brand):hover::after,header a:not(.brand):focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.btn-txt{position:relative;display:inline-block}
.btn-txt::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s cubic-bezier(.25,.6,.2,1)}
.project-cta:hover .btn-txt::after,.project-cta:focus-visible .btn-txt::after{transform:scaleX(1);transform-origin:0 50%}
footer{padding:32px 40px;background:var(--ink);color:#cfd1c4;font-size:14px;line-height:1.8}
.photo-dialog{position:fixed;inset:0;margin:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:rgba(12,16,10,.96);color:#f4f2ed;overflow:hidden}
.photo-dialog[open]{display:flex;flex-direction:column}
.photo-dialog::backdrop{background:#0c100a}
body:has(.photo-dialog[open]){overflow:hidden}
.photo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 20px;padding-top:max(12px,env(safe-area-inset-top));flex-shrink:0}
.photo-counter{font-size:16px;font-variant-numeric:tabular-nums}
.photo-dialog button{width:48px;height:48px;border:1px solid rgba(244,242,237,.4);background:transparent;color:inherit;font:24px/1 system-ui;cursor:pointer}
.photo-dialog button:hover{background:rgba(244,242,237,.12)}
.photo-dialog button:focus-visible{outline:3px solid #a9b48d;outline-offset:3px}
.photo-dialog button:disabled{opacity:.3;cursor:default}
.photo-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 20px;touch-action:pan-y pinch-zoom}
.photo-full{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none}
.photo-full[hidden],.photo-error[hidden]{display:none}
.photo-error{font-size:17px;text-align:center}
.photo-controls{display:flex;justify-content:center;gap:16px;padding:12px 20px;padding-bottom:max(12px,env(safe-area-inset-bottom));flex-shrink:0}
@media(max-width:900px){
  .project-mobile-cover{display:block;width:100%;height:auto;margin-bottom:28px}
  .project-gallery>a:first-child{display:none}
  .project-layout{display:flex;flex-direction:column;gap:32px}
  .project-description{display:contents}
  .project-gallery{order:1;width:100%}
  .project-cta{order:2}
}
@media(max-width:600px){
  header{padding:20px;gap:12px}
  header .brand{font-size:19px}
  header a{font-size:14px}
  main{padding:24px 20px 56px}
  h1{margin-top:20px}
  .project-meta{font-size:17px;margin-bottom:28px}
  .project-description p{font-size:17px}
  .project-features li{font-size:14px;padding:8px 12px}
  footer{padding:28px 20px}
}