/* lab.tori-hq.ru — sait-vizitka */
:root{
  --bg:#FAF6F0;
  --bg-card:#FFFFFF;
  --text:#1A1A1A;
  --text-soft:#5A5A5A;
  --text-mute:#8A8A8A;
  --accent:#E07A2F;
  --accent-dark:#B85F1E;
  --border:#E8E0D3;
  --max-w:880px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent-dark);text-decoration:none;border-bottom:1px solid rgba(184,95,30,.25);transition:all .15s}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.container{max-width:var(--max-w);margin:0 auto;padding:48px 24px}
@media (max-width:600px){.container{padding:32px 20px}}

/* Hero */
.hero{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center;padding:32px 0 48px;border-bottom:1px solid var(--border)}
@media (max-width:700px){.hero{grid-template-columns:1fr;gap:24px;text-align:center}.hero img{margin:0 auto}}
.hero img{width:240px;height:300px;object-fit:cover;border-radius:8px;display:block;filter:saturate(.95)}
.hero-text h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:48px;line-height:1.05;font-weight:500;letter-spacing:-.5px;margin-bottom:8px}
.hero-text .role{font-size:15px;color:var(--accent-dark);font-weight:500;letter-spacing:.5px;text-transform:uppercase;margin-bottom:20px}
.hero-text p{font-size:17px;color:var(--text-soft);margin-bottom:14px;max-width:48ch}

/* Sections */
section{padding:48px 0;border-bottom:1px solid var(--border)}
section:last-of-type{border-bottom:none}
section h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:500;margin-bottom:24px;letter-spacing:-.3px}

/* Что делаю */
.skills{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;list-style:none}
@media (max-width:600px){.skills{grid-template-columns:1fr}}
.skills li{padding-left:22px;position:relative;font-size:15px;color:var(--text-soft)}
.skills li::before{content:'→';position:absolute;left:0;top:0;color:var(--accent);font-weight:600}
.skills li strong{color:var(--text);font-weight:600;display:block}

/* Cases grid */
.cases{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
@media (max-width:800px){.cases{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cases{grid-template-columns:1fr}}
.case{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px 20px;color:inherit;border-bottom:1px solid var(--border);transition:all .2s}
.case:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:var(--accent)}
.case-tag{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-dark);font-weight:600;margin-bottom:10px}
.case h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:500;line-height:1.2;margin-bottom:10px;color:var(--text)}
.case p{font-size:14px;color:var(--text-mute);line-height:1.5}

/* Footer / contacts */
.contacts{font-size:15px;color:var(--text-soft)}
.contacts p{margin-bottom:8px}
.contacts strong{color:var(--text);font-weight:600;margin-right:8px}

footer{padding:32px 0;text-align:center;color:var(--text-mute);font-size:13px;border-top:1px solid var(--border)}

/* Case page */
.case-page .back{display:inline-block;margin-bottom:24px;font-size:14px;color:var(--text-mute);border:none}
.case-page .back:hover{color:var(--accent-dark)}
.case-page h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:42px;font-weight:500;line-height:1.1;margin-bottom:12px}
.case-page .meta{font-size:13px;color:var(--text-mute);letter-spacing:.3px;text-transform:uppercase;margin-bottom:32px}
.case-page .meta span{display:inline-block;margin-right:18px}
.case-page section{padding:24px 0;border:none}
.case-page section h2{font-size:22px;margin-bottom:12px}
.case-page p{font-size:16px;color:var(--text-soft);margin-bottom:14px;max-width:62ch}
.case-page ul,.case-page ol{padding-left:28px;margin-bottom:14px;color:var(--text-soft);list-style-position:outside}
.case-page ul li,.case-page ol li{margin-bottom:10px;font-size:15px;line-height:1.55;padding-left:4px}
.case-page .stack{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.case-page .stack span{display:inline-block;padding:5px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--text-soft)}
.case-page .gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media (max-width:600px){.case-page .gallery{grid-template-columns:1fr}}
.case-page .gallery img{width:100%;border:1px solid var(--border);border-radius:8px;display:block;background:#fff}
.case-page .live-demo{display:inline-block;margin-top:12px;padding:12px 20px;background:var(--accent);color:#fff;border-radius:8px;font-weight:600;border:none}
.case-page .live-demo:hover{background:var(--accent-dark);color:#fff;border:none}