/* =========================================================
   Sandro Asatiani — site styles
   System modelled on SPIN Studio (spin.co.uk):
   12-column grid · 10px gutter · 20px side padding · one 14px text size
   ========================================================= */

@font-face { font-family: "16Q"; src: url("fonts/16Questions-ExtraLight.otf") format("opentype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "16Q"; src: url("fonts/16Questions-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "16Q"; src: url("fonts/16Questions-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "16Q"; src: url("fonts/16Questions-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "16Q"; src: url("fonts/16Questions-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "SU"; src: url("fonts/SandroUniversal-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SU"; src: url("fonts/SandroUniversal-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "SU"; src: url("fonts/SandroUniversal-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SU"; src: url("fonts/SandroUniversal-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --gray: #f2f1f1;
  --paper: #ffffff;
  --ink: #000000;
  --mute: #9a9a9a;
  --gap: 10px;          /* grid gutter (SPIN: 10px) */
  --horz: 20px;         /* side padding (SPIN: 20px) */
  --header: 48px;       /* bar height (SPIN: 48px) */
  --t: 14px;            /* the one text size (SPIN: 14px) */
  --lh: 21px;           /* more air than SPIN: 16Questions has tall ascenders and descenders */
  --f: "16Q", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--paper); color: var(--ink); font-family: var(--f); font-weight: 300; font-size: var(--t); line-height: var(--lh); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.up { text-transform: uppercase; font-weight: 400; letter-spacing: .02em; }
.mute { color: var(--mute); }

/* The grid every block sits on */
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ---------- Bar ---------- */
.bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: 0 var(--horz); pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar-menu { grid-column: 1 / span 10; height: var(--header); display: flex; align-items: center; padding: 0 var(--horz); background: var(--gray); }
.bar-logo { grid-column: 11 / span 2; height: var(--header); display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
.bar .up { font-size: var(--t); }
.burger { display: none; }

/* ---------- Menu panel (drops down from the bar) ---------- */
.menu { position: fixed; z-index: 45; top: 0; left: var(--horz); width: calc((100% - 2 * var(--horz) - 11 * var(--gap)) / 12 * 10 + 9 * var(--gap));
        background: var(--gray); padding: calc(var(--header) + 4px) var(--horz) 40px; max-height: 100vh; overflow-y: auto;
        display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gap);
        clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s cubic-bezier(.7,0,.2,1), visibility 0s .55s; }
body.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s cubic-bezier(.7,0,.2,1); }
.menu .m-projects { grid-column: 1 / span 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); align-content: start; }
.menu .m-about { grid-column: 6 / span 2; }
.m-group + .m-group { margin-top: var(--lh); }
.m-label { color: var(--mute); margin-top: calc(var(--lh) / 2); }
.m-label:first-child { margin-top: 0; }
.m-head + .m-label { margin-top: 0; }
.menu .m-about p + p { margin-top: var(--lh); }
.menu ul + ul { margin-top: var(--lh); }
.menu li a { display: inline-block; transition: color .15s; }
.menu li a:hover, .menu li a[aria-current="page"] { color: var(--mute); }
.menu .m-contact { margin-top: calc(var(--lh) * 2); }
.m-peek { position: fixed; z-index: 46; right: calc(var(--horz) + (100% - 2 * var(--horz) - 11 * var(--gap)) / 12 * 2 + 3 * var(--gap)); top: calc(var(--header) + 4px); width: calc((100% - 2 * var(--horz) - 11 * var(--gap)) / 12 * 3 + 2 * var(--gap)); max-height: calc(100vh - var(--header) - 40px); pointer-events: none; opacity: 0; transition: opacity .2s; }
.m-peek img { max-height: calc(100vh - var(--header) - 40px); width: auto; max-width: 100%; margin-left: auto; }
.m-peek.on { opacity: 1; }

/* ---------- Home: one full-screen featured project ---------- */
.feature { position: fixed; inset: 0; background: #111; }
.feature a { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.feature a.on { opacity: 1; z-index: 1; }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature a.fit img { object-fit: contain; padding: calc(var(--header) + 6vh) 12vw 6vh; }

/* ---------- Home: field of drawings (assets/drawings.js) ---------- */
.home-draw { position: fixed; inset: 0; background: #fff; }
.home-draw svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Project page ---------- */
.p-intro { position: fixed; z-index: 10; top: calc(var(--header) + 20px); left: 0; right: 0; padding: 0 var(--horz); transition: opacity .4s; }
.p-intro.gone { opacity: 0; pointer-events: none; }
.p-intro .txt { grid-column: 1 / span 3; max-height: calc(100vh - var(--header) - 200px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 8px; }
.p-intro .txt::-webkit-scrollbar { display: none; }
.p-intro .txt p + p { margin-top: var(--lh); }
.p-intro .txt h1 { font: inherit; font-weight: 400; }
.p-intro .txt .p-links a { text-decoration: underline; }  /* connections between projects: work ↔ exhibition */

.p-media { padding: calc(var(--header) + 72px) 0 72px; display: flex; flex-direction: column; row-gap: var(--gap); }
.row { padding: 0 var(--horz); align-items: start; }
.row.big { padding-top: 140px; }
.row.end { align-items: end; }
.row:first-child { padding-top: 96px; }
.row:first-child img, .row:first-child video { width: auto; max-width: 100%; max-height: calc(100vh - var(--header) - 72px - 96px - 150px); }  /* first image never runs under the footer */
.row > figure { grid-column: var(--cs) / span var(--sp); margin: 0; }
.row img { width: 100%; height: auto; cursor: zoom-in; }
.row video { display: block; width: 100%; height: auto; background: #000; }

.p-foot { position: sticky; bottom: 0; z-index: 10; padding: 24px var(--horz) 28px; row-gap: 0; background: var(--paper); }  /* white band so the text never sits on an image (SPIN has none) */
.p-foot h2 { font: inherit; font-weight: 400; }
.p-foot .h-scope { grid-column: 1 / span 2; padding-left: 0; }
.p-foot .l-scope { grid-column: 3 / span 5; }
.p-foot .h-rel { grid-column: 8 / span 2; }
.p-foot .l-rel { grid-column: 10 / span 3; }
.p-foot a:hover { color: var(--mute); }
.p-foot.on-img { color: #fff; mix-blend-mode: difference; }

/* ---------- Text sections (AI & Automation, Education) ---------- */
.tl-page .prose h1 { font: inherit; font-weight: 400; }
.tl { grid-column: 5 / span 8; }
.tl-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); padding: 14px 0 22px; border-top: 1px solid #e3e2e2; }
.tl-row:first-child { padding-top: 0; border-top: 0; }
.tl-d { grid-column: 1 / span 2; color: var(--mute); }
.tl-c { grid-column: 3 / span 6; max-width: 62ch; }
.tl-c h2 { font: inherit; font-weight: 400; }
.tl-c p { margin-top: 6px; }
.tl-c a, .p-intro .txt .p-links a { text-decoration: underline; }
.tile { display: block; }
.t-grid { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gap); margin-top: 18px; }
.t-img { display: block; background: var(--gray); aspect-ratio: 4 / 3; overflow: hidden; }
.t-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.t-type { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 72px; }
.t-cap { display: block; margin-top: 8px; }
.tile:hover .t-cap { color: var(--mute); }

/* ---------- About ---------- */
.page .prose h1 { font: inherit; font-weight: 400; }
.page .prose .p-links a { text-decoration: underline; }
.ab-photo img { width: min(100%, 360px); display: block; }
.ab-sec { margin-top: 56px; }
.ab-sec h2 { font: inherit; font-weight: 400; padding-bottom: 10px; border-bottom: 1px solid #e3e2e2; margin-bottom: 12px; }
.ab-r { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gap); padding: 2px 0; }
.ab-d { grid-column: 1 / span 2; color: var(--mute); }
.ab-t { grid-column: 3 / span 6; max-width: 66ch; }
.ab-t a { text-decoration: underline; }

/* ---------- Book series pages ---------- */
.books { padding: calc(var(--header) + 72px) var(--horz) 120px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.b-grid { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; }
.book h3 { font: inherit; font-weight: 400; margin-top: 12px; }
.book p { color: var(--mute); }
.book .b-read { margin-top: 6px; color: #000; }
.book .b-read a { text-decoration: underline; margin-right: .5em; }
.b-img { display: block; background: var(--gray); }
.b-img img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 280; object-fit: contain; }
.hub { padding: calc(var(--header) + 72px) var(--horz) 120px; }
.h-theme { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 28px 0 40px; border-top: 1px solid #e3e2e2; }
.h-theme:first-child { border-top: 0; }
.h-theme h2 { grid-column: 4 / span 9; font: inherit; font-weight: 400; }
.h-theme h2 span { color: var(--mute); margin-left: .5em; }
.h-theme h2 a { text-decoration: underline; }
.h-theme p { grid-column: 4 / span 5; color: var(--mute); margin-top: 6px; }
.h-covers { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 20px; }
.h-covers a { background: var(--gray); display: block; }
.h-covers img { display: block; width: 100%; aspect-ratio: 300 / 280; object-fit: contain; }

/* ---------- Type specimen (typeface pages) ---------- */
.specimen { padding: calc(var(--header) + 72px) var(--horz) 96px; }
.spec { padding: 28px 0; border-top: 1px solid #e3e2e2; align-items: baseline; }
.spec-l { grid-column: 4 / span 2; color: var(--mute); }
.spec-big { grid-column: 6 / span 7; font-size: clamp(36px, 5.2vw, 84px); line-height: 1.15; word-break: break-word; }
.spec-txt { grid-column: 6 / span 7; font-size: 22px; line-height: 1.5; word-break: break-word; }

/* ---------- Simple text pages (About, sections) ---------- */
.page { padding: calc(var(--header) + 20px) var(--horz) 72px; }
.page .prose { grid-column: 1 / span 3; }
.page .prose p + p { margin-top: var(--lh); }
.page .media { grid-column: 4 / span 8; }
.contact { padding: 32px var(--horz); }
.contact > div { grid-column: span 3; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(255,255,255,.98); display: grid; place-items: center; padding: 64px clamp(16px, 6vw, 96px); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 128px); width: auto; height: auto; cursor: default; }
.lightbox button { position: absolute; padding: 14px var(--horz); text-transform: uppercase; }
.lb-close { top: 0; right: 0; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 22px; }
.lb-prev { left: 0; } .lb-next { right: 0; }

@media (prefers-reduced-motion: reduce) {
  .menu, .feature a, .p-intro { transition: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .p-intro .txt { grid-column: 1 / span 4; }
  .menu .m-projects { grid-column: 1 / span 6; }
  .menu .m-about { grid-column: 7 / span 4; }
  .m-peek { display: none; }
}

/* ---------- Mobile (SPIN: bar 50px, logo left, burger right) ---------- */
@media (max-width: 767px) {
  :root { --header: 50px; }
  .bar { padding: 0; background: var(--gray); display: flex; justify-content: space-between; }
  .bar-menu { display: none; }
  .bar-logo { order: -1; padding: 0 var(--horz); justify-content: flex-start; }
  .burger { display: block; position: relative; width: 50px; height: 50px; }
  .burger i { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: #000; transition: transform .3s; }
  .burger i:nth-of-type(1) { transform: translate(-50%, calc(-50% - 3px)); }
  .burger i:nth-of-type(2) { transform: translate(-50%, calc(-50% + 3px)); }
  body.menu-open .burger i:nth-of-type(1) { transform: translate(-50%, -50%) rotate(45deg); }
  body.menu-open .burger i:nth-of-type(2) { transform: translate(-50%, -50%) rotate(-45deg); }
  .menu { left: 0; width: 100%; grid-template-columns: 1fr; row-gap: calc(var(--lh) * 2); padding-bottom: 60px; height: 100vh; }
  .menu .m-projects, .menu .m-about { grid-column: 1; }
  .menu .m-projects { grid-template-columns: 1fr; row-gap: var(--lh); }
  .m-col .m-group + .m-group { margin-top: var(--lh); }
  .m-peek { display: none; }
  .feature a.fit img, .feature a.fit-m img { object-fit: contain; padding: calc(var(--header) + 4vh) 8vw 4vh; }

  .p-intro { position: static; padding-top: calc(var(--header) + 40px); }
  .p-intro .txt { grid-column: 1 / -1; max-height: none; mask-image: none; -webkit-mask-image: none; max-width: 90%; }
  .p-media { padding-top: 40px; }
  .row, .row.big, .row:first-child { padding-top: 0; }
  .row.big { padding-top: 40px; }
  .row > figure { grid-column: 1 / -1; }
  .row:first-child img, .row:first-child video { width: 100%; max-height: none; }
  .row > figure.half-m { grid-column: span 6; }
  .p-foot { position: static; row-gap: 24px; }
  .p-foot .h-scope, .p-foot .h-rel { grid-column: 1 / span 4; }
  .p-foot .l-scope, .p-foot .l-rel { grid-column: 5 / span 8; }
  .tl { grid-column: 1 / -1; margin-top: 32px; }
  .ab-d, .ab-t { grid-column: 1 / -1; }
  .ab-d { margin-top: 10px; }
  .tl-d { grid-column: 1 / -1; }
  .tl-c { grid-column: 1 / -1; }
  .t-grid { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .books, .hub { padding-top: 40px; }
  .b-grid { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .h-theme h2, .h-theme p, .h-covers { grid-column: 1 / -1; }
  .specimen { padding-top: 40px; }
  .spec-l, .spec-big, .spec-txt { grid-column: 1 / -1; }
  .spec-big { font-size: 34px; }
  .spec-txt { font-size: 18px; }
  .page .prose, .page .media { grid-column: 1 / -1; }
  .page .media { margin-top: 32px; }
  .contact > div { grid-column: 1 / -1; padding-top: 24px; }
}