/* Layout: вузька колонка вітрини; сітка карток 2/3/4 колонки; сторінка виробу, галерея в одну колонку, шириною як екран телефона */
:root{
  --bg:#f4f5f7; --surface:#ffffff; --fg:#181b22; --muted:#5e6572; --line:#dfe2e8;
  --accent:#2c4a8a; --accent-fg:#ffffff; --ok:#1f6b4a; --ok-bg:#e3f2ea;
  --display:'Cormorant','Times New Roman',serif; --body:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1218; --surface:#171b23; --fg:#eceef2; --muted:#9aa2b1; --line:#262c38;
  --accent:#8fa9e6; --accent-fg:#0f1218; --ok:#7fd1a5; --ok-bg:#17302a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1218; --surface:#171b23; --fg:#eceef2; --muted:#9aa2b1; --line:#262c38;
  --accent:#8fa9e6; --accent-fg:#0f1218; --ok:#7fd1a5; --ok-bg:#17302a; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:max(40px,env(safe-area-inset-bottom,0px))}
img,video{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

header{display:flex;flex-direction:column;gap:22px;padding-top:8px;align-items:flex-start}
.who{display:flex;gap:16px;align-items:center}
.who img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex:none}
.who small{display:block;color:var(--muted);font-size:13px;letter-spacing:.04em}
h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,8vw,56px);line-height:1.02;margin:0;text-wrap:balance}
.lead{max-width:56ch;margin:0;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;
  background:var(--accent);color:var(--accent-fg);font-weight:600;text-decoration:none}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.meta{color:var(--muted);font-size:13px;margin:0}

nav.jump{display:flex;gap:8px;flex-wrap:wrap}
nav.jump a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:14px;background:var(--surface)}

h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,6vw,38px);margin:0;line-height:1.1}
.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.sec-head p{margin:0;color:var(--muted);max-width:56ch}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}}
@media(min-width:980px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{min-width:0;text-decoration:none;display:block}
.ph{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.ph img,.ph video{width:100%;height:100%;object-fit:cover;display:block}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--ok-bg);color:var(--ok)}
.ph .tag{position:absolute;left:8px;top:8px}
.out .tag{background:var(--surface);color:var(--muted)}
.out .ph img,.out .ph video{filter:saturate(.55)}
.vid-badge{position:absolute;right:8px;bottom:8px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(0,0,0,.62);color:#fff}
.card h3{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.15;margin:10px 0 4px;text-wrap:balance}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.4}
.card:hover h3{text-decoration:underline;text-underline-offset:3px}

.contact{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}
.contact p{margin:0;color:var(--muted);max-width:56ch}
footer{color:var(--muted);font-size:13px}

/* сторінка виробу */
.item{max-width:640px;gap:28px}
.back{display:inline-block;padding:8px 0;text-decoration:none;color:var(--muted);font-size:14px}
.gallery{display:flex;flex-direction:column;gap:14px}
.media{margin:0;position:relative;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.media img,.media video{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;background:var(--surface)}
.sound{position:absolute;right:10px;bottom:10px;min-height:36px;padding:0 14px;border:0;border-radius:999px;
  background:rgba(0,0,0,.62);color:#fff;font:600 13px var(--body);cursor:pointer}
.next{display:block;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;font-weight:500}

.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:560px){.links{grid-template-columns:minmax(0,1fr)}}
.link-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 48px 18px 18px;min-width:0;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);text-decoration:none;transition:border-color .15s}
.link-card:hover{border-color:var(--accent)}
.lc-name{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.1}
.lc-sub{color:var(--muted);font-size:14px;line-height:1.4}
.lc-go{position:absolute;right:16px;top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-fg);font-size:15px}