/* Branislav Bajbár — portfolio. Self-contained: no framework, no dependencies. */

:root{
  --color-bg:#f3f2f2;
  --color-surface:#eae9e9;
  --color-text:#201e1d;
  --color-accent:#ec3013;
  --color-accent-300:#ffc4b8;
  --color-accent-700:#ae1800;
  --color-neutral-200:#eae7e7;
  --color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6;
  --color-neutral-700:#605d5d;
  --color-neutral-800:#444141;
  --font:Carlito,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding-top:100px;background:var(--color-bg);color:var(--color-text);font-family:var(--font);text-wrap:pretty;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent)}
::selection{background:var(--color-accent-300)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* — type — */
h2.kick{margin:0}
.kick{font:600 13px/1.1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700);margin:0}
.lbl{font:600 11.5px/1.35 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--color-neutral-700);margin:0}
.body{font-size:17px;line-height:1.66;color:var(--color-neutral-800);margin:0}
.h2{font-family:var(--font);font-weight:700;letter-spacing:-.018em;margin:0}
.shot{display:block;width:100%;height:100%;object-fit:cover}

/* — header — */
.nav{display:flex;align-items:center;gap:24px;padding-block:26px;position:fixed;left:0;right:0;top:0;z-index:50;background:var(--color-bg);box-shadow:0 10px 40px -12px rgba(32,30,29,.14)}
.nav-brand{font:700 18px/1.2 var(--font)}

/* — buttons — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;font:700 15px/1 var(--font);padding:18px 28px;border:2px solid transparent;border-radius:8px;background:none;color:inherit;transition:background .15s,border-color .15s,color .15s}
.btn-sm{padding:12px 20px;font-size:13.5px}
.btn-block{width:100%;padding:26px 28px;font-size:17px}
.btn-solid{background:var(--color-text);border-color:var(--color-text);color:var(--color-bg)}
.btn-solid:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.btn-line{color:var(--color-text);border-color:var(--color-neutral-400)}
.btn-line:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.btn-line-strong{color:var(--color-text);border-color:var(--color-text)}
.btn-line-strong:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.btn-inv{color:var(--color-bg);border-color:var(--color-bg)}
.btn-inv:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}

/* — specialisms — */
.spec{display:grid;grid-template-columns:1fr}
.spec-item{display:grid;grid-template-columns:56px minmax(0,320px) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);padding:48px 0;border-top:1px solid var(--color-neutral-300);align-items:baseline}
.spec-n{margin:0;color:var(--color-accent);display:block;width:32px;height:32px;align-self:start;position:relative;top:calc((1.3 * 24px - 32px) / 2)}
.spec-n svg{display:block;width:32px;height:32px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.spec-item .body{font-size:18px;line-height:1.62}
.spec-t{font:700 24px/1.3 var(--font);letter-spacing:-.014em;margin:0 0 8px}

/* — case studies — */
.case{display:grid;grid-template-columns:56px minmax(0,1fr) 320px;gap:clamp(28px,3.4vw,48px);align-items:center;padding:48px 0;border-bottom:1px solid var(--color-neutral-300);text-decoration:none;color:inherit}
.case:hover{background:var(--color-neutral-200)}
.case:hover .cs-t{color:var(--color-accent)}
.case .cs-img{border-radius:8px;overflow:hidden}
.cs-go{font:600 12.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--color-accent-700);margin:16px 0 0}
.case:hover .cs-go{color:var(--color-accent)}

/* — testimonials — */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}

.q-toggle{position:absolute;opacity:0;width:0;height:0}
.q-showmore{display:none}

/* — career table — */
.table{width:100%;border-collapse:collapse;font-size:18px}
.table td{padding:18px 8px;border-bottom:1px solid var(--color-neutral-300);vertical-align:top}
.table tbody tr:hover{background:rgba(32,30,29,.04)}

/* — work archive — */
.grid-arch{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);grid-auto-flow:dense}
.cell{aspect-ratio:16/9;background:var(--color-neutral-200);position:relative;overflow:hidden;display:block;border-radius:8px}
.cell-big{grid-column:span 2;grid-row:span 2;aspect-ratio:16/9}
.cell .shot{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cell:hover .shot{transform:scale(1.07)}
.cell figcaption{position:absolute;inset:auto 0 0 0;padding:8px 10px;background:var(--color-text);color:var(--color-bg);font:600 10.5px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .12s}
.cell:hover figcaption{opacity:1}
.cell-big figcaption{font-size:12px;padding:12px 14px}

/* — brands — */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.brand{background:transparent;border-radius:8px;padding:18px 16px;font:400 18px/1.3 var(--font);color:var(--color-neutral-800);text-decoration:none;display:flex;align-items:center;gap:12px}
.brand:hover{background:var(--color-surface);color:var(--color-text)}

/* — responsive — */
@media (max-width:1080px){
  .case{grid-template-columns:44px minmax(0,1fr);gap:24px}
  .case .cs-img{display:none}
  .spec-item{grid-template-columns:32px minmax(0,240px) minmax(0,1fr);gap:20px}
  .brands{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .quotes{grid-template-columns:1fr;gap:32px}
  .brands{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  body{padding-top:0}
  .nav{position:static;box-shadow:none;border-bottom:1px solid var(--color-neutral-300)}
  .spec-item{grid-template-columns:1fr;gap:8px}
  .spec-item .spec-n{display:block;top:0;margin-bottom:14px}
  .case{grid-template-columns:1fr;gap:16px;padding:28px 0}
  .case .cs-num{display:none}
  .case .cs-img{display:block;order:-1;aspect-ratio:16/9;margin:0 0 4px}
  .grid-arch{grid-template-columns:repeat(2,1fr)}
  .cell-big{grid-column:1 / -1 !important;grid-row:auto}
  h1 .hl{padding:.06em .2em !important;margin-left:0 !important}
  .q-more{display:none}
  .q-showmore{display:inline-flex;margin-top:36px;cursor:pointer}
  .q-toggle:checked ~ .quotes .q-more{display:block}
  .q-toggle:checked ~ .q-showmore{display:none}
  /* career table stacks into rows */
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{padding:18px 0;border-bottom:1px solid var(--color-neutral-300)}
  .table td{padding:0;border:0;font-size:17px}
  .table td:first-child{font-size:13px;letter-spacing:.06em;color:var(--color-neutral-700);margin-bottom:4px}
  .table td:last-child{color:var(--color-neutral-800)}
  .btn{padding:16px 22px;font-size:14.5px}
  .btn-block{padding:20px 22px;font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cell:hover .shot{transform:none}
}