/* ==========================================================================
   OSSKIO — built from the Figma file (page "WEBSITE"): HOMEPAGE, GENERAL WORK PAGE,
   SPECIFIC PROJECT PAGE, ABOUT PAGE. The frames are 1512 × 982.

   THE 6-COLUMN GRID (the guide in the Figma file): 6 equal columns, 20px between them,
   20px margins left and right. Only the column width changes with the window:
     column = (window width - 2 × 20 - 5 × 20) / 6
   Everything sits on these columns: header (OSSKIO col 1, WORK col 4, ABOUT col 5,
   CONTACT col 6, left-aligned), halves = 3 columns, homepage boxes = 2 columns, project
   description = 2 columns, details = 1 column. Boxes keep their exact shape (1:1 or 4:5).

   Type changes only once:
     BIG MODE (1160px and wider)  → 36px header, titles and headings · 20px body text (= work-list rows)
     MOBILE VIEW (under 1160px)   → one size for everything: header, headings, list rows and body text (22px, smaller only to fit)
   The header items, page titles and About headings are 36px in big mode at every width
   (3/4 of the Figma 48px, which still fits CONTACT in its column down to 1160px).
   Lines (header, list rows) are 1.5px in both modes.

   Vertical: like indice.studio, the spacing doesn't change while the window is resized: the
   header line stays at the same height and content starts a fixed distance below it (20px
   on Work and About, the Figma distances on the homepage and project pages). In a short
   window (e.g. a maximised browser on a 14" MacBook) the header's top padding gives up a few
   pixels (--head-pad, js/main.js) so Work and About still fit one screen with a full square.

   Boxes (grey placeholders in Figma = pictures, cropped to fill, never stretched):
     SQUARE 3X3       726 × 726  (1:1)  work page (right), about page, project page
     RECTANGLE        726 × 907  (4:5)  project page, for upright pictures (ELEMENTS frame)
     RECTANGLE 3X2    477 × 596  (4:5)  homepage
     SQUARE 2X2       477 × 477  (1:1)  homepage
   ========================================================================== */

:root {
  --k: 1;

  --bg: #f1f1f1;          /* frame background */
  --ink: #000000;         /* all text and lines */
  --box: #d9d9d9;         /* grey placeholder, shows while a picture loads */
  --tag: #c4c4c4;         /* tag boxes on project pages */
  --green: #00ff09;       /* bottom edge */

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tracking: -0.05em;    /* letter spacing -5% on every text in the file */

  --m: 20px;              /* margin and gutter, always */
  --line: 1.5px;          /* header line and list lines, both modes */
  --head-pad: 54.5px;     /* header top padding (Figma); smaller in short windows */
  --t-nav: 36px;          /* header items in big mode (list mode: js/main.js) */
  --t: 20px;              /* body text everywhere: the work list size (20px big mode, header size in list mode) */

  /* the big square = 3 columns + 2 gutters = half the page (js/main.js sets it exactly) */
  --sq: calc((100vw - 3 * var(--m)) / 2);
  /* the picture frame on Work and About: from 20px under the header line to 20px above the bottom of the
     window. Square on a 14" MacBook (726 × 726); narrower windows crop the picture at the sides */
  --frame-h: calc(100svh - var(--head-pad) - 53.5px - 2 * var(--m));
}



* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  /* no background here: the page colour comes from <html>, so the green fade (z-index -1) shows behind
     the content instead of being covered by the body */
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--t);
  line-height: normal;            /* Figma "auto" line height */
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* work and about are designed as one screen: they fill the window exactly and only scroll
   if the window is too short for the square */

a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; font: inherit; }
img, video { display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- header: OSSKIO in column 1, WORK / ABOUT / CONTACT in columns 4–6, line at y107 ---------- */

.site-header {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--m);
  align-items: start;
  height: calc(var(--head-pad) + 53.5px);   /* 108 in Figma: line at y107 */
  margin: 0 var(--m);
  padding-top: var(--head-pad);
  border-bottom: var(--line) solid var(--ink);   /* same line as under each work-list row */
  font-size: var(--t-nav);
  /* always visible: stays at the top while the page scrolls, on the page colour (also over the side margins) */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  box-shadow: calc(-1 * var(--m)) 0 0 var(--bg), var(--m) 0 0 var(--bg);
}
/* a 20px band in the page colour under the header line, so scrolled content never touches the line */
.site-header::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--m));
  right: calc(-1 * var(--m));
  top: calc(100% + var(--line));
  height: var(--m);
  background: var(--bg);
  pointer-events: none;
  white-space: nowrap;
}
.brand { grid-column: 1 / span 3; justify-self: start; }
.site-nav { display: contents; }
.site-nav a:nth-child(1) { grid-column: 4; }
.site-nav a:nth-child(2) { grid-column: 5; }
.site-nav a:nth-child(3) { grid-column: 6; }
.site-header a { justify-self: start; }

/* ---------- green fade along the bottom of the window (Rectangle 5: 93px, clear at 25% → #00FF09) ---------- */

.edge {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(93px * var(--k));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25%, var(--green) 100%);
  pointer-events: none;
  z-index: -1;                    /* behind everything, as the lowest layer in the Figma frames */
}

/* ---------- boxes: the grey placeholders. Pictures fill them, cropped if needed, never stretched ---------- */

.box {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--box);
  flex: none;
  width: 100%;                    /* the width of its column */
}
/* videos are moving pictures, not players: taps go through to the link around them and never open a
   player interface */
.box video { pointer-events: none; }
.box img,
.box video {
  position: absolute;             /* the box sets the size; the picture never pushes it */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.box-3x3, .box-2x2 { aspect-ratio: 1 / 1; }
.box-tall, .box-3x2 { aspect-ratio: 4 / 5; }

/* ==========================================================================
   HOMEPAGE: three equal columns, 20 apart, boxes from y255, 20 apart vertically.
   Columns 1 and 3 start with RECTANGLE 3X2 (4:5), column 2 with SQUARE 2X2 (1:1); then they alternate.
   ========================================================================== */

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--m);
  align-items: start;
  padding: var(--m) var(--m) calc(120px * var(--k));   /* 20px under the header line, like the other pages */
}
.home-col { display: flex; flex-direction: column; gap: var(--m); }

/* ==========================================================================
   GENERAL WORK PAGE: SQUARE 3X3 in the right half, 20px from the right and bottom edges (at
   1512 × 982 that is exactly y235); the list in the left half from y255 to 20px above the bottom. Rows: name 343 · type 236 · year 107 (right), 2px line under
   each, 20 apart. Longer lists scroll inside their area.
   ========================================================================== */

.work {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* columns 1–3 | 4–6 */
  column-gap: var(--m);
  align-items: start;             /* content starts a fixed 20px below the header line, at every window size */
  padding: var(--m) var(--m) var(--m);
}

/* left half: the filter row level with the picture's top, the list 20px under it, both ending with the picture */
.work-left { display: flex; flex-direction: column; height: var(--frame-h); min-width: 0; }

.filter {
  display: flex;
  align-items: center;
  gap: var(--m);
  font-size: var(--t);            /* same size as the list rows */
  line-height: 1.2;
  position: relative;
  z-index: 5;
}
.filter-wrap { position: relative; }
/* the TYPE button and every category in the menu: the same rounded tag (5px), the same size as FILTER BY */
.filter-button,
.filter-menu button {
  display: block;
  padding: 0.05em 0.3em 0.1em;
  background: var(--tag);
  border-radius: 5px;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  white-space: nowrap;
  text-align: left;
}
/* TYPE is the collapsed menu: clicking it unfolds the category tags from its place, the first one where
   TYPE was and the others sliding out below it, 15px apart; choosing one (or clicking elsewhere) folds
   them back into TYPE */
.filter-menu {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
  pointer-events: none;
}
.filter-menu li {
  --step: calc(-1 * var(--i) * (100% + 15px));   /* folded: every tag sits on top of the first */
  transform: translateY(var(--step));
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}
.filter.is-open .filter-menu { visibility: visible; pointer-events: auto; }
.filter.is-open .filter-menu li { transform: none; opacity: 1; }
.filter.is-open .filter-button { visibility: hidden; }
.filter button { border: 0; cursor: pointer; }

.work-list {
  flex: 1;
  min-height: 0;
  /* 20px under the filter row; the extra room (cancelled by the negative margins) keeps the hover glow
     from being cut off at the edges of the scrolling list */
  margin: calc(20px - 0.5em) -0.8em -0.5em;   /* bottom: the last line sits on the picture's bottom edge */
  padding: 0.5em 0.8em;
  transition: filter 0.3s;
  overflow-y: auto;
  scrollbar-width: none;
  list-style: none;
  /* one column grid shared by all rows (subgrid), so name · type · year line up on every row;
     Figma widths 343 / 236 / 107, the year column grows if a word like ONGOING needs it */
  display: grid;
  grid-template-columns: minmax(0, 343fr) minmax(max-content, 236fr) minmax(max-content, 107fr);   /* type and year never shrink below their words; long names wrap */
  column-gap: var(--m);
  row-gap: calc(20px * var(--k) - var(--line));   /* 49px from row to row, as in the frame */
  align-content: start;   /* rows start 20px under FILTER BY, filtered or not */
}
.work-list > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: start;
  border-bottom: var(--line) solid var(--ink);
  font-size: var(--t);            /* list rows: body text size */
}
.row-year { white-space: nowrap; }
/* hover: a blurred ellipse in the green accent behind the project title (and behind the menu items) */
.row-name, .site-header a { position: relative; isolation: isolate; }
.row-name::before,
.site-header a::before {
  content: "";
  position: absolute;
  inset: -0.3em -0.6em;
  z-index: -1;
  border-radius: 50%;
  background: var(--green);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.row:hover .row-name::before,
.row:focus-visible .row-name::before,
li.is-open .row-name::before,
.site-header a:hover::before,
.site-header a:focus-visible::before,
.site-header a[aria-current="page"]::before { opacity: 1; }   /* the page you're on keeps its glow */
.row-name { justify-self: start; }   /* the ellipse hugs the title, not the whole column */

.work-list.is-blurred { filter: blur(6px); pointer-events: none; }   /* while the type menu is open */
.work-list > li[hidden] { display: none; }
.row-year { text-align: right; }

.work-square { width: 100%; height: var(--frame-h); aspect-ratio: auto; }   /* columns 4–6, from 20px under the header to 20px above the bottom */
.work-square img,
.work-square video {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.work-square .is-active { visibility: visible; }
/* alternating previews (js/main.js → alternating): the pictures are stacked and fade in turn */
.slides { position: absolute; inset: 0; overflow: hidden; }
.work-square .slides { visibility: hidden; }
.work-square .slides.is-active { visibility: visible; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: inherit; }
.work-square { background: none; }   /* empty until a project is hovered */

.reveal { display: none; }   /* mobile view only */

/* ==========================================================================
   SPECIFIC PROJECT PAGE: on the 6 columns, the title on columns 1–3 with the tags under it (rounded
   boxes, 20px apart) and the description on columns 4–6; then 20px below it the pictures in rows of one shape: two squares (3 columns each) or three
   4:5 pictures (2 columns each), so every row has one height and every gap is 20px (js/main.js).
   ========================================================================== */

.project { padding: var(--m) var(--m) calc(120px * var(--k)); }   /* text starts 20px under the header line */

.project-head {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));   /* the 6 columns, 20px apart */
  column-gap: var(--m);
  align-items: start;
}
/* columns 1–3: the project title (header size), with the tags under it */
.project-meta { grid-column: 1 / span 3; }
.project-title { font-size: var(--t-nav); }
/* tags: rounded boxes (5px), body text size, 20px apart; the last one is the year */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m);
  margin: var(--m) 0 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 0.05em 0.3em 0.1em;
  border-radius: 5px;
  background: var(--tag);
  line-height: 1.2;
}
/* the category tag links to the work list filtered by it; it turns green on hover */
.tags li:has(.tag-link) { transition: background-color 0.2s; }
.tags li:has(.tag-link:hover), .tags li:has(.tag-link:focus-visible) { background: var(--green); }
/* columns 4–6: the description */
.project-intro { grid-column: 4 / span 3; }
.project-intro p + p { margin-top: 1.19em; }   /* an empty line between paragraphs */
/* links in the description (text: '[words](url)') and the link under it */
.project-intro a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
.project-intro a:hover { text-decoration: none; }

.project .box img { cursor: zoom-in; }

/* picture rows: one shape per row, so every row has one height and every gap is 20px */
.pic-rows { display: flex; flex-direction: column; gap: var(--m); margin-top: var(--m); }   /* 20px under the text row */
/* BACK / NEXT under the pictures: 20px below them, on the margins, underlined like the other text links */
.project-pager { display: flex; justify-content: space-between; margin: var(--m) 0; }
.project-pager a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
.project-pager a:hover { text-decoration: none; }
.pic-row { display: grid; column-gap: var(--m); align-items: start; }
.pic-row-tall { grid-template-columns: repeat(3, minmax(0, 1fr)); }     /* three 4:5, 2 columns each */
.pic-row-square { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two squares, 3 columns each */
/* editorial projects (layout 'pages'): two per row, every page shown whole at its own proportions (not
   cropped), straight on the page colour; the two share one height, each as wide as its shape needs (js) */
.pic-row-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* photo credit (project `credit`): a tag in the bottom-left corner, 20px in, while the picture is hovered */
.box[data-credit]::after {
  content: attr(data-credit);
  font-size: 0.65em;   /* smaller than the body text */
  position: absolute;
  left: var(--m);
  bottom: var(--m);
  padding: 0.05em 0.3em 0.1em;
  border-radius: 5px;
  background: var(--tag);
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.box[data-credit]:hover::after { opacity: 1; }
.box-page { background: none; }
.box-page img, .box-page video { position: static; height: auto; }


.not-found { display: flex; flex-direction: column; gap: 1.19em; }

/* full screen picture */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--m);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-count { position: absolute; bottom: var(--m); left: 50%; translate: -50% 0; }

/* ==========================================================================
   ABOUT PAGE: SQUARE 3X3 on the left from y235; text over the right half from y235;
   CREDITS / TAGS / CV at y726 in columns 4–6; their lists sit on the bottom line of the square.
   Positions inside the right half follow the square's size (405/726 and 491/726 of it).
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* columns 1–3 | 4–6 */
  column-gap: var(--m);
  align-items: start;             /* content starts a fixed 20px below the header line, at every window size */
  padding: var(--m) var(--m) var(--m);
}
.about-image { width: 100%; height: var(--frame-h); aspect-ratio: auto; }   /* columns 1–3, from 20px under the header to 20px above the bottom */
/* the cut-out spread (three figures, transparent PNG) sits straight on the page colour and scrolls to the left
   without end: two copies side by side, moved by one copy's width, then starting over */
.about-image { background: none; }
.about-track { display: flex; height: 100%; width: max-content; animation: about-scroll 7s linear infinite; }
.about-image .about-track img { position: static; flex: none; width: auto; height: 100%; object-fit: initial; }
@keyframes about-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.about-right { display: flex; flex-direction: column; min-height: var(--frame-h); }   /* as tall as the picture */
.about-text p + p { margin-top: 1.19em; }
.about-cols {
  margin-top: auto;
  min-height: calc(var(--frame-h) * 235 / 726);   /* CREDITS / TAGS / CV, lists on the picture's bottom line */
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* columns 4, 5, 6 */
  column-gap: var(--m);
}
.about-cols > div { display: flex; flex-direction: column; }
.about-cols h2 { font-size: var(--t); }   /* CREDITS / TAGS / CV: body text size */
.about-cols .list { margin-top: auto; }   /* lists sit on the bottom line */
.about-cols .list p + p { margin-top: 1.19em; }
/* CV download: blurred until hovered (or focused with the keyboard), then sharp; clicking downloads the PDF */
.cv-link { filter: blur(4px); transition: filter 0.3s ease; }
.cv-link:hover, .cv-link:focus-visible { filter: none; }

/* ---------- audio page: laid out like a project page (head row, then the players 20px under it) ---------- */

.audio { padding: var(--m) var(--m) calc(120px * var(--k)); }   /* text starts 20px under the header line */
.audio-embeds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: var(--m); }
/* top: the residency picture (square, columns 1–3, two rows tall); on columns 4–6 the text, then the SoundCloud
   playlist filling down to the picture's bottom edge;
   row 2: the two YouTube mixes (16:9, three columns each) */
.audio-pic { grid-column: 1 / span 3; grid-row: 1 / span 2; aspect-ratio: 1 / 1; }
.audio-text { grid-column: 4 / -1; grid-row: 1; }
.audio-embeds iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; grid-column: span 3; }
.audio-embeds .soundcloud { grid-column: 4 / -1; grid-row: 2; aspect-ratio: auto; height: 100%; }

/* ==========================================================================
   MOBILE VIEW (under 1160px): only the list on the work page, one column elsewhere.
   Type stays the same size at every width here; lines are 1px thinner.
   Tapping a project in the list slides its picture open under the row; tapping the picture
   opens the project page (js/main.js).
   ========================================================================== */

@media (max-width: 1159px) {
  :root {
    --t: var(--t-nav);    /* body text = list rows = header items, as on the work page */
    --t-nav: 22px;
  }

  .site-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    padding: 18px 0 8px;
    font-size: var(--t-nav);
  }
  /* WORK starts on the list's type column (COMMUNICATION, POSTER…) and the three spread to the right
     margin; when there isn't room for that, they keep 12px gaps and move left (js/main.js: --nav-left) */
  .site-header { position: sticky; }
  .site-nav {
    position: absolute;
    left: var(--nav-left, auto);
    right: 0;
    top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .edge { height: 48px; }


  .home-grid { grid-template-columns: 1fr; row-gap: var(--m); padding: var(--m) var(--m) 80px; }   /* list mode: one column, frames full width */

  .work { grid-template-columns: 1fr; padding: var(--m) var(--m) 80px; }
  .work-left { height: auto; }
  .filter { font-size: var(--t); }
  .work-list { row-gap: 12px; column-gap: 12px; height: auto; overflow: visible; margin: 20px 0 0; padding: 0; }
  .row { padding-bottom: 2px; font-size: var(--t); }   /* list mode: same size as the header items, shrinks with them */
  .work-square { display: none; }

  /* the picture under a tapped row: height animates from 0 to the square */
  .reveal {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .reveal { min-width: 0; }
  .reveal > a { display: block; overflow: hidden; min-height: 0; min-width: 0; }
  .reveal .box { margin-top: 12px; }
  li.is-open .reveal { grid-template-rows: 1fr; }

  .project { padding: var(--m) var(--m) 80px; }   /* 20px under the header line, as on desktop */
  .project-head { grid-template-columns: 1fr; row-gap: 1.19em; }
  .project-meta, .project-intro { grid-column: 1 / -1; }
  .tags { margin-top: 1.19em; }
  .pic-row-tall, .pic-row-square, .pic-row-pages { grid-template-columns: 1fr; row-gap: var(--m); }
  .pic-row-pages { grid-template-columns: 1fr !important; }   /* overrides the shared-height widths set in js */

  .about { grid-template-columns: 1fr; row-gap: var(--m); padding: var(--m) var(--m) 80px; }
  .audio { padding: var(--m) var(--m) 80px; }
  /* list mode: text first, then the scrolling picture at half the height (2:1), then CREDITS / TAGS / CONTACT */
  .about-image { width: 100%; height: auto; aspect-ratio: 2 / 1; order: 2; }
  .about-right { display: contents; }
  .about-text { order: 1; }
  .about-cols { order: 3; }
  .about-cols { min-height: 0; padding-top: 0; }
  .about-cols .list { margin-top: 8px; }
  .audio-embeds { grid-template-columns: 1fr; }
  .audio-pic, .audio-text, .audio-embeds iframe, .audio-embeds .soundcloud { grid-column: 1 / -1; grid-row: auto; }
  /* list mode, as on About: text first, then the picture at half height (2:1), then the players */
  .audio-embeds { grid-template-rows: none; }
  .audio-text { order: 1; }
  .audio-pic { order: 2; aspect-ratio: 2 / 1; }
  .audio-embeds iframe { order: 3; }
  .audio-embeds .soundcloud { height: 450px; }
}

/* phones: COMMUNICATION doesn't fit a third of the width, so CONTACT / CV move under CREDITS and TAGS */
@media (max-width: 600px) {
  .about-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--m); }
}

@media (prefers-reduced-motion: reduce) {
  .about-track { animation: none; }
  .reveal { transition: none; }
}