/* ============================================================
   tugbaev.com — personal site of Artem Tugbaev
   Palette: porcelain enamel + ink navy + logo amber + enamel blue
   Type: Archivo (display) · IBM Plex Sans (body) · IBM Plex Mono (labels)
   ============================================================ */

:root{
  --porcelain:#F6F3EE;
  --ink:#152A3E;
  --ink-2:#0F2131;
  --amber:#F0A63E;
  --amber-deep:#D9871B;
  --blue:#63C3E6;
  --steel:#DFD8CC;
  --mist:#EFEBE3;
  --white:#FFFFFF;
  --text:#22313F;
  --muted:#5C6B79;
  --radius:22px;
  --max:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

body{
  background:var(--porcelain);
  color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--amber-deep);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- type roles ---------- */
.display{
  font-family:"Archivo","Arial Black",Arial,sans-serif;
  font-weight:800;
  font-stretch:118%;
  letter-spacing:.01em;
  line-height:1.02;
  color:var(--ink);
  text-transform:uppercase;
}
.mono{
  font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.eyebrow{color:var(--amber-deep);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--amber);border-radius:2px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(246,243,238,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--steel)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brandmark{color:var(--ink);font-weight:600;letter-spacing:.16em}
.brandmark:hover{text-decoration:none;color:var(--amber-deep)}
.nav{display:flex;gap:26px}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--ink);text-decoration:none}
@media(max-width:760px){.nav a{display:none}.nav a.nav-contact{display:inline}}

/* ---------- hero ---------- */
.hero{padding:72px 0 96px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(44px,6.4vw,84px);margin:18px 0 22px}
.hero .lead{font-size:19.5px;max-width:560px;color:var(--text)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:14px 26px;font-weight:600;font-size:16px;border:2px solid transparent;transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--amber);color:var(--ink);box-shadow:0 6px 18px rgba(240,166,62,.35)}
.btn-primary:hover{box-shadow:0 8px 22px rgba(240,166,62,.45)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--porcelain)}

.portrait{position:relative;justify-self:stretch;width:100%}
.portrait::before{
  content:"";position:absolute;inset:auto -26px -26px auto;width:190px;height:190px;
  border:3px solid var(--amber);border-radius:50%;opacity:.85;z-index:0;
}
.portrait img{
  position:relative;z-index:1;width:100%;border-radius:26px;border:6px solid var(--white);
  box-shadow:0 24px 60px rgba(21,42,62,.18);
}
.portrait figcaption{margin-top:14px;color:var(--muted);text-align:right}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .portrait{justify-self:center;max-width:440px}
  .portrait figcaption{text-align:center}
}

/* ---------- the pour (signature divider) ---------- */
.pour{display:block;width:100%;height:auto;margin-bottom:-1px;background:var(--porcelain)}

/* ---------- method band ---------- */
.method{background:var(--ink);color:#DCE6EE;padding:0 0 96px}
.method .inner{padding-top:56px}
.method .mono{color:var(--blue)}
.method h2{font-size:clamp(34px,4.6vw,58px);color:var(--porcelain);margin:16px 0 20px}
.method .method-lead{max-width:640px;font-size:18.5px;color:#C4D2DE}
.plaques{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.plaque{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px 22px}
.plaque .mono{color:var(--amber);display:block;margin-bottom:10px}
.plaque p{color:#C4D2DE;font-size:15.5px}
@media(max-width:820px){.plaques{grid-template-columns:1fr}}

/* ---------- shared section chrome ---------- */
.section{padding:96px 0}
.section h2{font-size:clamp(32px,4.2vw,52px);margin:16px 0 18px}
.section .section-lead{max-width:620px;color:var(--muted);font-size:18px}

/* ---------- story timeline ---------- */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;position:relative}
.timeline::before{content:"";position:absolute;top:7px;left:8px;right:8px;height:2px;background:var(--steel)}
.milestone{position:relative;padding-top:28px}
.milestone::before{content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--amber);border:3px solid var(--porcelain);box-shadow:0 0 0 2px var(--amber)}
.milestone .year{color:var(--ink);font-weight:600;display:block;margin-bottom:8px}
.milestone p{font-size:15.5px;color:var(--text)}
@media(max-width:820px){
  .timeline{grid-template-columns:1fr;gap:30px;padding-left:26px}
  .timeline::before{top:8px;bottom:8px;left:7px;right:auto;width:2px;height:auto}
  .milestone{padding-top:0;padding-left:8px}
  .milestone::before{top:4px;left:-26px}
}

/* ---------- brands ---------- */
.brands{background:var(--mist);border-top:1px solid var(--steel);border-bottom:1px solid var(--steel)}
.brands .head-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brands .citytub-logo{width:96px;height:96px;flex:0 0 auto}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.card{background:var(--white);border:1px solid var(--steel);border-radius:var(--radius);padding:28px 26px;transition:border-color .15s ease, transform .15s ease}
.card:hover{border-color:var(--amber);transform:translateY(-2px)}
.card .mono{color:var(--muted);display:block;margin-bottom:6px}
.card h3{font-family:"Archivo",Arial,sans-serif;font-weight:800;font-size:24px;color:var(--ink);margin-bottom:10px}
.card p{font-size:15.5px;color:var(--text);margin-bottom:16px}
.card .domain{font-family:"IBM Plex Mono",monospace;font-size:14px}
@media(max-width:820px){
  .cards{grid-template-columns:1fr}
  .brands .head-row{flex-direction:column-reverse;align-items:flex-start}
}

/* ---------- contact / footer ---------- */
.contact{background:var(--ink-2);color:#C4D2DE;padding:96px 0 0}
.contact .mono{color:var(--blue)}
.contact h2{font-size:clamp(32px,4.2vw,52px);color:var(--porcelain);margin:16px 0 26px}
.email-link{
  font-family:"Archivo",Arial,sans-serif;font-weight:800;font-size:clamp(22px,3.6vw,40px);
  color:var(--amber);word-break:break-all;
}
.email-link:hover{color:var(--blue);text-decoration:none}
.contact .service-line{margin-top:22px;max-width:560px;font-size:16px}
.contact .service-line a{color:var(--blue)}
.foot{margin-top:70px;border-top:1px solid rgba(255,255,255,.14);padding:26px 0 34px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.foot .brand-links{display:flex;flex-wrap:wrap;gap:18px}
.foot a{color:#8FA6B8}
.foot a:hover{color:var(--porcelain)}
.foot .copy{color:#6E8496;font-size:13px;letter-spacing:.08em}

/* ---------- reveal (progressive enhancement) ---------- */
.pre{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease}
.pre.in{opacity:1;transform:none}

/* ---------- Cyrillic helper for МосАкрил (Archivo has no Cyrillic) ---------- */
.cyr{font-family:"Russo One","Arial Black",Arial,sans-serif;font-weight:400;letter-spacing:.03em}