:root {
    --side: 16vw;          /* left column reserved for logo + menu */
    --top: 60px;
    --gap: 24px;
    --w: 55vw;             /* content column width, overridden per page */
    --ink: #111;
    --muted: #7a7a7a;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video, iframe { display: block; max-width: 100%; }
figure { margin: 0; }

/* ---------- loader ---------- */
#loader[hidden] { display: none; }
#loader { position: fixed; inset: 0; z-index: 100; background: #fff; display: grid; place-items: center; }
#loader img { width: min(38vw, 260px); opacity: 0; }

/* ---------- side ---------- */
.side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side); z-index: 10; pointer-events: none; }
.side a { pointer-events: auto; }
.logo { position: absolute; top: var(--top); left: 3.6vw; width: 7.2vw; min-width: 80px; }
.logo img { width: 100%; will-change: transform, opacity; }
.page-toro .logo img { filter: drop-shadow(0 0 .6px rgba(0,0,0,.65)) drop-shadow(0 0 .6px rgba(0,0,0,.65)); }
.menu { position: absolute; top: 50%; left: 4.4vw; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.55; }
.menu a { position: relative; opacity: 0; }
.menu a.active { font-weight: 600; }
.lang { margin-top: 22px; font-size: 14px; color: var(--muted); opacity: 0; }
.lang a { opacity: 1; display: inline; }
.lang a.active { color: var(--ink); }
.lang a::after { display: none; }

/* ---------- main ---------- */
.main { min-height: 100vh; padding: var(--top) 0 12vh; }
.col { width: var(--w); margin-left: calc(var(--side) + (100vw - var(--side) - var(--w)) / 2); }
.page-toro  { --w: 55vw; }
.page-work  { --w: 66vw; }
.page-film  { --w: 74vw; }
.page-about { --w: 74vw; }

.item { position: relative; overflow: hidden; background: #f2f2f2; cursor: pointer; }
.item img, .item video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Toro: vertical stack, same width */
.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* Work: 3 equal columns, rows sized by tallest photo */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }

/* Film: same height, cropped on the sides */
.films { display: flex; flex-direction: column; gap: var(--gap); }
.film { height: 74vh; background: #000; }
.film iframe { width: 100%; height: 100%; border: 0; }
.film figcaption { position: absolute; left: 0; bottom: 0; padding: 14px 18px; color: #fff; font-size: 14px; background: linear-gradient(transparent, rgba(0,0,0,.55)); width: 100%; opacity: 0; transition: opacity .5s; }
.film:hover figcaption { opacity: 1; }
.film.is-video { cursor: default; }

/* About */
.about { position: relative; background: #0b0b0b; color: #d9d9d9; }
.about-media { aspect-ratio: 16 / 10; cursor: default; }
.about-media img { transform-origin: center; }
.about-text { position: absolute; top: 7%; left: 8.5%; max-width: min(480px, 42%); font-size: 15px; line-height: 1.4; }
.about-text p { margin: 0 0 1.3em; }
.contact { font-style: normal; display: flex; flex-direction: column; gap: 4px; margin-top: 2.5em; }
.contact a { position: relative; width: max-content; }
.contact a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.77,0,.18,1); }
.contact a:hover::after { transform: scaleX(1); }

/* ---------- lightbox ---------- */
#lb { position: fixed; inset: 0; z-index: 50; background: #fff; display: grid; place-items: center; cursor: zoom-out; }
#lb[hidden] { display: none; }
#lb figure { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 86vw; max-height: 90vh; }
#lb img { max-width: 86vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; }
#lb figcaption { font-size: 14px; color: var(--ink); }
#lb figcaption:empty { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    :root { --side: 0px; --top: 88px; }
    .side { position: fixed; bottom: auto; width: 100%; height: var(--top); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); pointer-events: auto; }
    .page-toro .side { background: transparent; backdrop-filter: none; }
    .logo { top: 22px; left: 16px; width: 84px; }
    .menu { top: 28px; left: auto; right: 16px; transform: none; flex-direction: row; gap: 18px; font-size: 15px; align-items: baseline; }
    .lang { margin: 0 0 0 8px; }
    .col { width: auto; margin: 0 16px; }
    .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .film { height: 56vw; }
    /* About on phones: photo fills the block, text stays on top of it */
    .about { min-height: calc(100svh - var(--top) - 16px); display: flex; }
    .about-media { position: absolute; inset: 0; aspect-ratio: auto; }
    .about-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.15) 55%, rgba(0,0,0,.35)); }
    .about-text { position: relative; top: auto; left: auto; max-width: none; padding: 28px 20px 40px; font-size: 15px; line-height: 1.45; }
}
@media (max-width: 560px) {
    .grid { grid-template-columns: 1fr; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
img, video { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }