/* =========================================================
   Nikoloz Tse. - styles.css
   1. TOKENS - change colours, fonts, spacing here
   2. BASE
   3. LAYOUT
   4. COMPONENTS (header, intro, philosophy, work, skills,
      experience, contact form, footer)
   5. MOTION + DESIGN CURSOR
   6. PHONE / TABLET
   ========================================================= */


/* ===== 1. TOKENS ===== */
/* Dark is the default theme. Light values are below it. */
:root,
:root[data-theme="dark"] {
  --bg:      #0e0e0d;  /* page background (near-black, never pure #000) */
  --surface: #171715;  /* placeholders, form fields */
  --fg:      #ecebe6;  /* main text (off-white, never pure #fff) */
  --muted:   #8d8a82;  /* secondary text */
  --line:    #2a2926;  /* hairline rules */
  --accent:  #5b8cff;  /* "selection blue" - the design-tool accent: everything clickable */
  --accent-hover: #86a9ff;
  --accent-press: #3a68e0;  /* pressed: a bit deeper blue */
  --on-accent: #0b0b0a; /* text on blue: dark text reads best on this light blue */
  --warn:    #f2a33a;  /* form: incomplete / check this */
  --error:   #ff6b5e;  /* form: wrong */
  --edge-axis: 42px;   /* distance from the right edge to the shared centre line of the back-to-top button and the section rail */
  /* project covers at rest: black and white, pushed darker so they sink into the dark page */
  --cover-rest: grayscale(1) brightness(.62) contrast(1.05);
  --key-rest: grayscale(1) brightness(.85) contrast(1.05);   /* key image (portrait) at rest */
  color-scheme: dark;
}
:root[data-theme="light"] {
  /* light mode: covers rest lighter and softer so they sit on the pale page */
  --cover-rest: grayscale(1) brightness(1.4) contrast(.62);
  --key-rest: grayscale(1) brightness(1.12) contrast(.9);
  --bg:      #f2f1ec;
  --surface: #e6e4dd;
  --fg:      #121211;
  --muted:   #4e4b46;  /* darker grey: ~7:1 on the light background */
  --line:    #bdb9ae;  /* outlines visible on light */
  --accent:  #2451cc;  /* deeper blue for light mode: readable as text */
  --accent-hover: #1c41a8;
  --accent-press: #14327f;
  --on-accent: #ffffff; /* on the darker light-mode blue, white reads best */
  --warn:    #b06400;
  --error:   #c62828;
  color-scheme: light;
}

:root {
  /* Fonts. Georgian letters fall through automatically to the Noto Georgian faces. */
  --sans:  "Noto Sans", "Noto Sans Georgian", system-ui, sans-serif;   /* main */
  --serif: "Noto Serif", "Noto Serif Georgian", Georgia, serif;        /* contrast */

  /* Type scale (fluid: clamp(min, preferred, max)) */
  --fs-xs:   0.75rem;                          /* labels, 12px */
  --fs-sm:   0.875rem;                         /* small text, 14px */
  --fs-base: 1rem;                             /* body, 16px */
  --fs-lg:   clamp(1.2rem, 1.5vw, 1.4rem);     /* card titles */
  --fs-xl:   clamp(1.75rem, 3vw, 2.5rem);      /* section titles */
  --fs-hero: clamp(2.4rem, 6vw, 5.25rem);      /* intro statement */
  --fs-name: clamp(2.75rem, 8vw, 7.5rem);      /* big name band (max ~120px) */

  /* Grid (same numbers as in Figma - see docs/LAYOUT-BLOCKS.md) */
  --max:    1280px;
  --gutter: 24px;
  --margin: 80px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ----- Large screens -----
   Sizes are in CSS pixels, not physical pixels: a 4K monitor at Windows' usual 150% scaling
   behaves like 2560 wide, the same as a 2K (1440p) monitor. Up to 1920 the layout stays as designed.
   Above that, text and the content column grow together, so the page doesn't look like a small
   strip in the middle of a big screen. */
@media (min-width: 2200px) {          /* 2K / 1440p, and 4K at 150% */
  html { font-size: 18px; }
  :root { --max: 1680px; --margin: 96px; --gutter: 28px; }
}
@media (min-width: 3000px) {          /* ultrawide 3440×1440 */
  html { font-size: 19px; }
  /* section dots and back-to-top move in from the far screen edge to sit beside the content */
  :root { --max: 1840px; }
  :root, :root[data-theme] { --edge-axis: calc((100vw - var(--max)) / 2 - 56px); }   /* [data-theme] beats the theme token block */
}
@media (min-width: 3600px) {          /* 4K at 100% (3840×2160) */
  html { font-size: 20px; }
  :root { --max: 2000px; --margin: 120px; --gutter: 32px; }
}


/* ===== 2. BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

/* Section-to-section scrolling is handled in main.js (section 6c). */

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}

/* very faint film grain over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

[hidden] { display: none !important; }   /* hidden always wins, even over display: flex */
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }   /* avoids a single word alone on the last line */
.philosophy-lede, .philosophy-sub { text-wrap: balance; }

/* Light mode: thin text loses contrast on a light background, so text gets one step heavier */
:root[data-theme="light"] body { font-weight: 400; }
:root[data-theme="light"] .label { font-weight: 500; }          /* small caps labels */
:root[data-theme="light"] .philosophy-lede { font-weight: 400; }

/* The serif is only for contrast: italic accents inside headings */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }

.label {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ===== 3. LAYOUT ===== */
.container {
  max-width: calc(var(--max) + 2 * var(--margin));
  margin: 0 auto;
  padding-inline: var(--margin);
}

.section { padding-block: clamp(72px, 10vw, 140px) 0; }
section[id] { scroll-margin-top: var(--header-h, 72px); }   /* anchor jumps stop below the sticky header */

/* Blue lines that mark the section you jumped to from the header.
   main.js adds .flash-lines inside the section, sized to its content. */
section[id] { position: relative; }
.flash-lines { position: absolute; left: var(--margin); right: var(--margin); pointer-events: none; animation: flash-out .4s ease-in-out 1.1s forwards; }
.flash-lines::before,
.flash-lines::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  animation: draw .45s ease-in-out forwards;    /* draws out from the centre */
}
.flash-lines::before { top: 0; }
.flash-lines::after  { bottom: 0; animation-delay: .06s; }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes flash-out { to { opacity: 0; } }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.section-head h2 { font-size: var(--fs-xl); font-weight: 400; letter-spacing: -0.02em; }
.section-head h2 .serif { color: var(--accent); }   /* "Work", "Do", "Done", "Talk" in blue */


/* ===== 4. COMPONENTS ===== */

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  padding-top: env(safe-area-inset-top, 0px);   /* on phones with a notch the header also covers the status-bar strip */
}
/* phones: a solid header that also fills the space above it, so nothing scrolls visibly above or behind it */
@media (max-width: 760px) {
  .site-header { background: var(--bg); box-shadow: 0 -100px 0 100px var(--bg); }
}
.site-header .container {
  /* three columns: logo | links | switches. The two side columns are equal (1fr), so the links sit
     exactly in the middle of the page whatever the language, and the logo slot is always reserved
     (the logo only fades/slides, it never leaves its space). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding-block: 18px;
}
.site-header .wordmark { grid-column: 1; justify-self: start; }
.site-header .nav { grid-column: 2; }
.site-header .toggles { grid-column: 3; justify-self: end; }   /* stays right even when the links are hidden */
.wordmark { display: block; color: var(--fg); line-height: 0; text-decoration: none; }
.wordmark .logo { display: block; height: 2.1rem; width: auto; }   /* logo size: change the height */
.nav { display: flex; gap: 4px; font-size: var(--fs-sm); }
/* Large invisible hit area: hover starts when the mouse is near a link, not only on the letters */
.nav a {
  position: relative;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--muted);
  transition: color .25s ease-in-out;
}
/* Same link positions in both languages: each link keeps the width of its Georgian word
   (measured in em, so it scales with the text). English words sit centred in those slots. */
.nav a { text-align: center; white-space: nowrap; box-sizing: content-box; }   /* width = the word; padding (hover area) is added around it */
.nav a:nth-child(1) { width: 4.27em; }   /* მიდგომა / Approach */
.nav a:nth-child(2) { width: 5.32em; }   /* პროექტები / Projects */
.nav a:nth-child(3) { width: 3.9em; }    /* უნარები / Skills */
.nav a:nth-child(4) { width: 6.92em; }   /* გამოცდილება / Experience */
.nav a:nth-child(5) { width: 4.68em; }   /* კონტაქტი / Contact */
.nav a:hover, .nav a[aria-current="true"] { color: var(--fg); }   /* current section = white */
.nav a:active { color: var(--accent); }
/* Dots left and right of the current section's link */
.nav a::before,
.nav a::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%) scale(0);
  transition: transform .3s ease-in-out;
}
.nav a::before { left: 4px; }
.nav a::after  { right: 4px; }
.nav a[aria-current="true"]::before,
.nav a[aria-current="true"]::after { transform: translateY(-50%) scale(1); }

.toggles { display: flex; align-items: center; gap: 12px; }
.switch {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
/* the white pill that slides between the two options (ease-in-out) */
.switch::before {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 48px; height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--fg);                     /* active option = white pill on dark, black pill on light */
  transition: transform .35s ease-in-out, background .2s ease-in-out;
}
.switch[data-active="1"]::before { transform: translateX(52px); }   /* 48px option + 4px gap */
.switch button,
.switch a,
.switch span {
  position: relative;          /* sits above the sliding pill */
  font: 500 var(--fs-xs)/1 var(--sans);
  letter-spacing: .08em;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  width: 48px;
  padding: 9px 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color .35s ease-in-out, border-color .2s ease-in-out;
}
.switch [aria-pressed="true"],
.switch [aria-current="page"] { color: var(--bg); }                 /* active = white pill, black text (reversed in light mode) */
/* hover on the active option: the pill turns blue, text/icon keep the page colour */
.switch:has(> [aria-pressed="true"]:hover, > [aria-current="page"]:hover)::before { background: var(--accent); }
/* the other option: white outline + white text on hover (black in light mode), blue outline + blue text while pressed */
.switch :not([aria-pressed="true"]):not([aria-current="page"]):hover { color: var(--fg); border-color: var(--fg); }
.switch :not([aria-pressed="true"]):not([aria-current="page"]):active { color: var(--accent); border-color: var(--accent); }
.switch button svg { display: block; margin: -2px auto; }   /* Moon / Sun icons */

/* ----- Intro (greeting) ----- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;                    /* text and key image share the same top and bottom */
  padding-block: min(clamp(56px, 9vw, 120px), 8svh) min(clamp(40px, 6vw, 80px), 6svh);   /* less space on shorter screens */
}
@media (min-width: 761px) {
  .intro { padding-top: min(clamp(24px, 3.5vw, 64px), 4svh); }   /* computers: Hello sits higher, closer to the header */
}
.intro .eyebrow { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.intro time { font-variant-numeric: tabular-nums; }
.statement {
  font-size: min(var(--fs-hero), 8svh);       /* also limited by screen height, so greeting + name fit the first screen */
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-top: 24px;
}
.statement .serif { color: var(--accent); letter-spacing: -0.01em; }
@media (min-width: 761px) { .statement .line { display: block; } }   /* fixed line breaks on computers */
.intro .lead { max-width: 46ch; color: var(--muted); margin: 24px 0 0; }
.key-image {
  aspect-ratio: 4 / 5;
  position: absolute; top: 0; bottom: 0; right: 0;   /* fills the cell's height = the text's height */
  max-width: 100%;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
}
.key-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ----- Key illustration (two versions, one per theme) ----- */
.key-image.is-art { aspect-ratio: 1 / 1; background: none; overflow: visible; }
@media (max-width: 760px) { .key-image.is-art { container-type: size; } }          /* phones: sized by the image box */
@media (min-width: 761px) { .key-cell:has(.is-art) { container-type: size; } }    /* computers: sized by the cell (text height × column width) */
/* the square stage: as big as fits in the cell, so the shape boxes always sit on the drawing */
.key-art { position: absolute; inset: 0; margin: auto; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
/* computers: the illustration is about 65% bigger than the text height, right edge and vertical
   centre unchanged. It never reaches into the text: at most the column width plus the gap.
   --art-scale = how much bigger (1 = as tall as the text) */
@media (min-width: 761px) {
  /* Same size and place in both languages: the drawing follows the Georgian text height
     (measured: about 3.92 × the Georgian greeting size + 153px), not the text actually on the page */
  .key-image.is-art { --art-scale: 1.65; --text-h: calc(min(var(--fs-hero) * .58, 5.4svh) * 3.92 + 153px); }
  .key-image.is-art .key-art {
    --art: min(var(--text-h) * var(--art-scale), 100cqw + clamp(32px, 5vw, 80px));   /* + the column gap */
    left: auto; right: 0; top: calc(var(--text-h) / 2); bottom: auto; margin: 0;
    width: var(--art); height: var(--art);
    transform: translateY(-50%);
  }
}
.key-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.art-light { display: none; }
:root[data-theme="light"] .art-dark { display: none; }
:root[data-theme="light"] .art-light { display: block; }

/* shape boxes, like selecting layers in a design tool (main.js section 12):
   on hover every shape shows a faint outline, the one under the mouse a full selection
   with corner handles, its name and its size. Rectangles, and a round one for the circle. */
.art-box {
  position: absolute;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease-in-out;
}
.art-box.round { border-radius: 50%; }
.art-box i { position: absolute; width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--accent); }
.art-box i:nth-child(1) { left: -4px; top: -4px; }
.art-box i:nth-child(2) { right: -4px; top: -4px; }
.art-box i:nth-child(3) { left: -4px; bottom: -4px; }
.art-box i:nth-child(4) { right: -4px; bottom: -4px; }
/* the circle: handles on its edge (top, right, bottom, left) instead of corners */
.art-box.round i:nth-child(1) { left: calc(50% - 4px); top: -4px; }
.art-box.round i:nth-child(2) { right: -4px; top: calc(50% - 4px); }
.art-box.round i:nth-child(3) { left: calc(50% - 4px); bottom: -4px; }
.art-box.round i:nth-child(4) { left: -4px; top: calc(50% - 4px); }
.art-box .art-name, .art-box .art-size {
  position: absolute;
  font: 500 10px/1 var(--sans); letter-spacing: .04em; white-space: nowrap;
  opacity: 0; transition: opacity .2s ease-in-out;
}
.art-box .art-name { left: -1px; bottom: calc(100% + 6px); color: var(--accent); }
.art-box .art-size { left: 50%; top: calc(100% + 7px); transform: translateX(-50%); color: var(--on-accent); background: var(--accent); padding: 3px 5px; border-radius: 2px; }
.key-image:hover .art-box,
.key-image.touching .art-box { opacity: .28; }
.key-image .art-box.on { opacity: 1; }
.key-image .art-box.on .art-name, .key-image .art-box.on .art-size { opacity: 1; }
.key-image .art-box:not(.on) i { display: none; }        /* faint outlines: no handles */

/* Colour spot: the colour copy shows only inside a soft circle around the mouse.
   --mx / --my = mouse position (set in main.js), --r = circle size (grows in on hover). */
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.key-image:hover .select-frame { opacity: 1; }


/* ----- Big name band ----- */
.name-band {
  position: relative;
  font-size: min(var(--fs-name), 13svh);   /* limited by screen height so the whole name shows on the first screen */
  font-family: 'Manrope', var(--sans);       /* matches the logo */
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  padding: 28px 0 24px;          /* room above for the selection label */
  border-bottom: 1px solid var(--line);
  margin: 0;
  user-select: none;
  touch-action: pan-y;           /* a finger drag across it plays the effect, vertical scroll still works */
}
.name-band .ch { display: inline-block; will-change: transform; transition: color .25s; }
.name-band .sp { display: inline-block; width: .22em; }
.intro .name-band { grid-column: 1 / -1; }          /* the name spans the full width above the text and image */
.key-cell { position: relative; min-height: 220px; }
/* "Tse." like the logo: Georgia italic (Noto Serif italic if Georgia is missing), blue full stop */
.name-band .tse { font-family: Georgia, 'Noto Serif', 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
.name-band .dot { color: #668CFF; }

/* header logo: hidden on the Hello section, fades in from "How I Think" onwards (main.js, updateNav) */
.wordmark { transition: opacity .35s ease-in-out, transform .35s ease-in-out; }
.wordmark.is-hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }   /* hidden just below: rises up into place, sinks down when hiding */

/* name hover: selection frame on the letter under the cursor (same style as project tiles) */
.name-sel {
  position: absolute;
  border: 1px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.name-sel i { position: absolute; width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--accent); }
.name-sel i:nth-child(1) { left: -4px;  top: -4px; }
.name-sel i:nth-child(2) { right: -4px; top: -4px; }
.name-sel i:nth-child(3) { left: -4px;  bottom: -4px; }
.name-sel i:nth-child(4) { right: -4px; bottom: -4px; }
.name-sel b {
  position: absolute; left: -1px; top: -22px;
  font: 500 10px/1 var(--sans); letter-spacing: .04em;
  color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* [404]: the connector between the 0 and 4 frames: down from both bottom corners, joined underneath */
.name-joint {
  position: absolute;
  border: 1px solid var(--accent); border-top: 0;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.name-joint i { position: absolute; bottom: -4px; width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--accent); }
.name-joint i:first-child { left: -4px; }
.name-joint i:last-child { right: -4px; }
/* live spacing values between the selected letter and its neighbours */
.name-kern {
  position: absolute;
  top: 34px;
  transform: translateX(-50%);
  font: 500 10px/1 var(--sans); letter-spacing: 0;
  color: var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  font-variant-numeric: tabular-nums;
}

/* ----- Philosophy ----- */
.philosophy-lede {
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 24ch;
  margin: 0 0 20px;
}
.philosophy-sub { font-size: var(--fs-lg); color: var(--muted); max-width: 48ch; margin: 0 0 56px; }
/* computers: fixed break before "and what they do next" (the first part stays on one line); phones wrap naturally */
@media (min-width: 761px) { .philosophy-sub { max-width: none; } .philosophy-sub .keep { white-space: nowrap; } }
@media (max-width: 760px) { .desk-br { display: none; } }
.philosophy-lede .serif { color: var(--accent); }
.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.principles li { border-top: 1px solid var(--line); padding-top: 20px; }
.principles li { padding-top: 28px; }
/* Subgrid: all three titles share one row and all three descriptions share the next,
   so descriptions start on the same line even when a title wraps to two lines */
@supports (grid-template-rows: subgrid) {
  .principles { grid-template-rows: auto auto; }
  .principles li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px; }
  .principles li h3 { margin-bottom: 0; }
}
.principles h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 14px; }
.principles p { color: var(--muted); font-size: 1.0625rem; line-height: 1.65; margin: 0; max-width: 40ch; }

/* ----- Selected work (block: Work tile) ----- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 56px var(--gutter);
}
.work-tile { grid-column: span 7; display: flex; flex-direction: column; gap: 14px; text-decoration: none;
  align-self: start; }   /* the link is only as tall as its own content, not the whole grid row (fixes HILLFA's oversized hit area) */
.work-tile.narrow { grid-column: span 5; }
.work-tile.half { grid-column: span 6; }
.work-tile.wide { grid-column: 1 / -1; }
.work-tile.wide .media { aspect-ratio: 16 / 9; }
.work-tile.quarter { grid-column: span 3; }
.work-tile.quarter h3 { font-size: 1.1rem; }
.work-tile.quarter .meta { flex-direction: column; gap: 6px; }       /* narrow tiles: category under the name */
.work-tile.quarter .meta .label { padding-top: 0; text-align: left; }
.work-tile .media {
  aspect-ratio: 3 / 2;
  background: var(--surface);
  border-radius: 2px;
  position: relative;
}
.work-tile.narrow .media { aspect-ratio: 4 / 5; }
.work-tile .media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
  filter: var(--cover-rest);                   /* covers rest in black and white (darker in dark mode, lighter in light mode)… */
  transition: filter .5s ease-in-out;
}
/* Cannes: the square Young Lions poster sits in the middle of the tile; the sides are filled
   with the poster's own blue so it reads as one image. Rests in grey like the other covers.
   (BIG LOVE merch image kept as a spare: assets/img/covers/cannes-young-lions.webp) */
.work-tile .media .poster {
  position: absolute; inset: 0;
  display: flex; justify-content: center;      /* centres the square image left-to-right */
  background: #1fb0ec;                          /* sampled from the poster's edge - change here if the image changes */
  border-radius: inherit;
  overflow: hidden;
  filter: var(--cover-rest);
  transition: filter .5s ease-in-out;
}
.work-tile .media .poster img { width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: none; border-radius: 0; }
a.work-tile:hover .media img,
a.work-tile:focus-visible .media img,
a.work-tile:hover .media .poster,
a.work-tile:focus-visible .media .poster { filter: grayscale(0) brightness(1) contrast(1); }   /* …and get their colour back with the blue selection frame */
/* touch screens (no hover): the project in the middle of the screen gets its colour (main.js section 10) */
@media (hover: none) {
  .work-tile.centered .media img, .work-tile.centered .media .poster { filter: grayscale(0) brightness(1) contrast(1); }
}

/* "View more projects" - phones only */
.view-more { display: none; }
@media (max-width: 760px) {
  .view-more { display: inline-block; margin-top: 40px; }
  #work.collapsed:not(.filtering) .work-tile.quarter,
  #work.collapsed:not(.filtering) #more-work,
  #work.collapsed:not(.filtering) #drafts { display: none; }
  #work.filtering .view-more { display: none; }       /* a filter shows every match, no button needed */
}
.work-tile .meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.work-tile .title { display: flex; flex-direction: column; gap: 4px; }   /* name with "View project" right under it */
.work-tile .meta .label { padding-top: .45em; }
.work-tile h3 { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.01em; }
.work-tile h3, .work-tile .view { white-space: nowrap; }   /* project name and "View project →" never break onto two lines */
/* smaller screens (tablets, small laptops): category label goes under the name, like on phones */
@media (max-width: 1100px) {
  .work-tile .meta { flex-direction: column; gap: 6px; }
  .work-tile .meta .label { padding-top: 0; text-align: left; }
}
.work-tile .meta .label { text-align: right; }
.work-tile .view { font-size: var(--fs-sm); color: var(--muted); transition: color .2s; }
.work-tile h3, .work-tile .meta .label { transition: color .2s; }
.arrow { display: inline-block; transition: transform .25s var(--ease); }
/* hover / keyboard focus: name turns blue, category and "View project" brighten */
a.work-tile:hover h3, a.work-tile:focus-visible h3 { color: var(--accent); }
a.work-tile:hover .meta .label, a.work-tile:focus-visible .meta .label { color: var(--fg); }
a.work-tile:hover .view, a.work-tile:focus-visible .view { color: var(--fg); }
a.work-tile:hover .arrow, a.work-tile:focus-visible .arrow { transform: translateX(6px); }
a.work-tile:focus-visible { outline: none; }

/* "More work" compact list */
.more-work { margin-top: 88px; }
.more-work ul { list-style: none; margin: 0; padding: 0; }
.more-work li { border-bottom: 1px solid var(--line); }
.more-work .row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 12px;
  text-decoration: none;
}
.more-work .row-name { font-size: var(--fs-lg); font-weight: 400; transition: color .2s; }
.more-work .row-cat { color: var(--muted); font-size: var(--fs-sm); text-align: right; transition: color .2s; }
.more-work .row:hover .row-name, .more-work .row:focus-visible .row-name { color: var(--accent); }
.more-work .row:hover .row-cat, .more-work .row:focus-visible .row-cat { color: var(--fg); }
.more-work .row:focus-visible { outline: none; }
.more-work .row .select-frame { inset: 4px 0; }
.more-work .row:hover .select-frame, .more-work .row:focus-visible .select-frame { opacity: 1; }

/* Drafts: same list style, not clickable */
.drafts { margin-top: 56px; }
.drafts .row { cursor: default; }
.draft-tag { color: var(--accent); }

/* ----- Focus: sections you are not reading step back -----
   main.js marks the section in the middle of the screen; the others fade
   (same in dark and light). Hovering a faded section brings it back. */
.focus-ready main > section { transition: opacity .6s ease-in-out, filter .6s ease-in-out; }
/* faded sections also lose most of their colour, so their blue doesn't compete with the section in focus */
.focus-ready main > section.is-dim { opacity: .28; filter: grayscale(.9); }
.focus-ready main > section.is-dim:hover { opacity: .75; filter: grayscale(.4); }

/* ----- Work filter ----- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 40px; }

/* when filtered, every tile gets the same size so the grid stays tidy */
.work-grid.filtered .work-tile { grid-column: span 6; }
.work-grid.filtered .work-tile .media { aspect-ratio: 3 / 2; }
[data-hidden="true"] { display: none !important; }

/* ----- Skills ----- */
.skills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
.skills h3 { font-size: var(--fs-lg); font-weight: 500; margin-bottom: 10px; }
/* "What I do" links: clearly clickable at rest (white text, blue arrow, thin underline),
   underline turns white on hover, everything blue when pressed or when it is the active project filter */
.skill-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color .2s, text-decoration-color .2s;
}
.skill-link .arrow { display: inline-block; color: var(--accent); transition: transform .25s var(--ease); }
.skill-link:hover, .skill-link:focus-visible { text-decoration-color: var(--fg); }
.skill-link:hover .arrow, .skill-link:focus-visible .arrow { transform: translateX(6px); }
.skill-link:active, .skill-link[aria-current="true"] { color: var(--accent); text-decoration-color: var(--accent); }
.skills p { color: var(--muted); font-size: var(--fs-sm); margin: 0; transition: color .2s; }
/* the whole block (headline + description) is clickable: the link's invisible layer covers the description too */
.skills > div { position: relative; }
.skill-link::after { content: ""; position: absolute; inset: -10px; }
/* hovering anywhere on the block: headline gets its hover look, description brightens */
.skills > div:hover .skill-link { text-decoration-color: var(--fg); }
.skills > div:hover .skill-link .arrow { transform: translateX(6px); }
.skills > div:hover p { color: var(--fg); }
.tools-wrap { margin-top: 56px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
/* tool pills in "What I do": brighter at rest than other pills, so they read as buttons */
.tools .pill { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 28%, transparent); }
.tools .pill:hover { border-color: var(--fg); }
.tools .pill[aria-pressed="true"] { color: var(--on-accent); border-color: var(--accent); }
.tools { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tools-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* "View N projects" stands out: white outline + text at rest (dark in light mode) */
.pill.pill-go { color: var(--fg); border-color: var(--fg); font-weight: 500; }
.pill.pill-go:hover, .pill.pill-go:focus-visible { background: var(--fg); color: var(--bg); }
.pill.pill-go:active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }


/* ----- Experience / education / recognition ----- */
.sub-head { margin: 40px 0 4px; }   /* space between Recognition / Experience / Education / Courses */
.sub-head:first-of-type { margin-top: 0; }
.exp { list-style: none; margin: 0; padding: 0; }
.exp li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 7.5rem;  /* fixed year column = every row lines up */
  column-gap: calc(var(--gutter) * 2);    /* more air between name, description and years */
  padding-block: 12px;                    /* space between rows inside each list */
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.exp .role { font-weight: 500; }
.exp .what { color: var(--muted); }
.exp .years { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; text-align: right; }
.inline-link { color: var(--fg); text-decoration: none; transition: color .2s; }
.inline-link:hover, .inline-link:focus-visible { color: var(--accent); }

/* ----- Contact form ----- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 6vw, 96px);
}
.contact-intro p { color: var(--muted); max-width: 36ch; }
.contact-intro .direct { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
.contact-intro .direct a {        /* underlined so they read as links; blue on hover */
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color .2s, text-decoration-color .2s;
  align-self: flex-start;
}
.contact-intro .direct a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gutter); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field .req { color: var(--accent); }   /* "*" = required field (the input itself has "required" for screen readers) */
.field label, .field legend { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  font: 300 var(--fs-base)/1.5 var(--sans);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 14px 16px;
  width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; }   /* keeps the hidden checkbox inside its chip */
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; pointer-events: none; }   /* invisible, but no longer 700px wide sticking out past the page edge */

.hp { position: absolute; left: -9999px; }   /* hidden spam trap */

/* selected needs, shown as removable tags above the message */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags:empty { display: none; }
.tag {
  font: 400 var(--fs-xs)/1 var(--sans);
  letter-spacing: .04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
}
.tag:hover { background: var(--accent); color: var(--on-accent); }

/* phone: fixed +995 prefix inside the field */
.phone-wrap { position: relative; }
.phone-wrap .prefix {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: var(--fs-base); pointer-events: none;
}
.phone-wrap input { padding-left: 64px; font-variant-numeric: tabular-nums; }
.field-msg { min-height: 1.2em; font-size: var(--fs-xs); color: var(--muted); }
/* field states (name, email, phone): red = needs fixing, blue = looks good */
.field.is-warn input, .field.is-warn textarea { border-color: var(--warn); }
.field.is-warn .field-msg { color: var(--warn); }
.field.is-error input, .field.is-error textarea { border-color: var(--error); }
.field.is-error .field-msg { color: var(--error); }
.field.is-ok .field-msg { color: var(--accent); }
.btn-send {
  grid-column: 1 / -1;
  justify-self: start;
  font: 600 var(--fs-base)/1 var(--sans);
  color: var(--bg);                  /* white button, dark text (dark mode); inverted in light mode */
  background: var(--fg);
  border: 0;
  border-radius: 999px;
  padding: 18px 34px;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.btn-send:hover { background: var(--accent); color: var(--on-accent); }
.btn-send:active { background: var(--accent-press); color: #fff; transform: scale(.98); }
.btn-send .arrow { display: inline-block; margin-left: 4px; transition: transform .25s var(--ease); }
.btn-send:hover .arrow { transform: translateX(6px); }
.form-note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* ----- Footer ----- */
.site-footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: clamp(72px, 10vw, 140px) 32px;
}
.site-footer a { text-decoration: none; transition: color .2s; }
.site-footer .footer-name { color: var(--fg); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--accent); }

/* floating back-to-top button */
.to-top.to-top {
  padding: 0;
  position: fixed;
  right: calc(var(--edge-axis) - 26px + env(safe-area-inset-right, 0px));   /* 52px button, centred on the axis of the section dots */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  color: var(--muted);
  text-decoration: none;
  font-size: 1.3rem;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease), color .2s, border-color .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }



/* ===== INTERACTION SYSTEM - one rule for every pill-shaped control =====
   (filters, tools, "What you need", buttons, back-to-top)
   default: grey text, hairline outline
   hover:   white text, white outline
   press:   blue text, blue outline
   active:  filled blue, like "All"
   Exceptions: header switches and the Send button have their own styles. */
.pill, .filter, .chip span {
  font: 400 var(--fs-sm)/1 var(--sans);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s ease-in-out, border-color .25s ease-in-out, background .25s ease-in-out;
}
.chip span { display: inline-block; }
.pill:hover, .filter:hover, .chip span:hover, .to-top:hover,
.pill:focus-visible, .filter:focus-visible, .to-top:focus-visible,
.chip input:focus-visible + span { color: var(--fg); border-color: var(--fg); outline: none; }
.pill:active, .filter:active, .chip span:active, .to-top:active { color: var(--accent); border-color: var(--accent); }
.pill[aria-pressed="true"], .filter[aria-pressed="true"], .chip input:checked + span {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.pill .arrow, .filter .arrow { transition: transform .25s var(--ease); }
.pill:hover .arrow { transform: translateX(6px); }
.tool-chips { display: contents; }

/* empty filter result */
.filter-empty { border: 1px dashed var(--line); border-radius: 2px; padding: 48px 24px; text-align: center; margin: 0 0 40px; }
.void-title { font-size: var(--fs-xl); letter-spacing: -0.02em; margin: 0 0 8px; }
.void-sub { color: var(--muted); margin: 0; }
.void-sub code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .9em; color: var(--accent); }

/* "Back to What I do" - floats on the right after jumping from the skills */
.back-skills {
  position: fixed;
  right: calc(var(--edge-axis) + 34px + env(safe-area-inset-right, 0px));    /* bottom row, 8px left of the round back-to-top button */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  animation: slide-in .4s ease-in-out both;
}
@keyframes slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* Section rail - right edge, vertically centred */
.rail {
  position: fixed;
  right: calc(var(--edge-axis) - 13.5px + env(safe-area-inset-right, 0px));  /* dots (8px padding + half of 11px) centred on the same axis as back-to-top */
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rail::before {                          /* thin guide line behind the dots */
  content: "";
  position: absolute;
  right: 13px; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--line);
}
/* Projects progress: the line from the Projects dot to the next dot fills blue as you scroll through Projects */
.rail-progress {
  position: absolute;
  right: 12.5px; width: 2px;
  background: var(--line);
  pointer-events: none;
  overflow: hidden;
  transition: opacity .3s ease-in-out;
}
.rail-progress.is-off { opacity: 0; }        /* hidden outside the Projects section */
.rail-progress i {
  position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  transition: transform .15s linear;
}
.rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 8px;                      /* comfortable hit area around each dot */
  text-decoration: none;
}
.rail .dot {
  position: relative;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: var(--bg);
  transition: border-color .25s ease-in-out, background .25s ease-in-out, transform .25s ease-in-out;
}
.rail .rail-label {
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(6px);
  padding: 5px 8px;
  border-radius: 2px;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
  white-space: nowrap;
}
.rail a:hover .rail-label, .rail a:focus-visible .rail-label { opacity: 1; transform: none; }
/* when a new section becomes current, its name shows briefly next to the blue dot (main.js, updateNav) */
.rail a.flash .rail-label { opacity: 1; transform: none; transition: opacity .35s ease-in-out, transform .35s ease-in-out; }
.rail a.flash-out .rail-label { transition: opacity .12s ease-in, transform .12s ease-in; }   /* previous name leaves fast */
.rail a:hover .dot, .rail a:focus-visible .dot { border-color: var(--fg); transform: scale(1.15); }
.rail a:active .dot { border-color: var(--accent); }
.rail a[aria-current="true"] .dot { background: var(--accent); border-color: var(--accent); }
.rail a:focus-visible { outline: none; }
@media (max-width: 1024px) { .rail { display: none; } }


/* Project description popup - follows the cursor, like an inspector panel */
/* "Message sent" popup */
.sent-modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .35s ease-in-out;
}
.sent-modal.show { opacity: 1; }
.sent-box {
  position: relative;
  width: min(640px, 100%);
  padding: clamp(28px, 5vw, 56px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  transform: translateY(12px);
  transition: transform .35s ease-in-out;
}
.sent-modal.show .sent-box { transform: none; }
.sent-title { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; margin: 18px 0 32px; }
.sent-title .serif { color: var(--accent); }        /* "in touch" in blue, like the other accents */
.sent-close { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--muted); font-size: 1.5rem; line-height: 1; padding: 4px 8px; transition: color .2s; }
.sent-close:hover { color: var(--fg); }
.sent-close:active { color: var(--accent); }

.project-pop {
  position: fixed;
  left: 0; top: 0;
  z-index: 95;
  width: min(300px, 70vw);
  padding: 14px 16px 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}
.project-pop.show { opacity: 1; transform: none; }
/* small preview image on top of the description (More work rows with data-preview) */
.project-pop .pop-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 12px; border-radius: 2px; }
.project-pop .pop-label { display: block; margin-bottom: 6px; color: var(--accent); }
.project-pop p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
@media (hover: none) { .project-pop { display: none; } }

/* Keyboard hint (arrow keys) - small note at the bottom centre, once per visit */
.key-hint {
  position: fixed;
  left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 96;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  font-size: var(--fs-sm);
  color: var(--fg);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity .35s ease-in-out, transform .35s ease-in-out,
              bottom .5s cubic-bezier(.3, .7, .25, 1);   /* glides back down when the cookie banner closes: quick start, soft landing */
}
.key-hint.show { opacity: 1; transform: translate(-50%, 0); }
.key-hint .keys { display: flex; gap: 4px; }
.key-hint kbd {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 500 .8rem/1 var(--sans);
  color: var(--accent);
}
.key-hint-close {
  background: none; border: 0; padding: 0 6px;
  color: var(--muted); font-size: 1.1rem; line-height: 1;
  transition: color .2s;
}
.key-hint-close:hover { color: var(--fg); }
.key-hint-close:active { color: var(--accent); }

/* ===== 5. MOTION + DESIGN CURSOR ===== */

/* Intro words rise once on load (words are wrapped by main.js) */
.statement .w { display: inline-block; animation: rise .9s var(--ease) both; }
@keyframes rise { from { opacity: .15; transform: translateY(.25em); } to { opacity: 1; transform: none; } }

/* Scroll fade-up - only when JS has loaded (html.js), so content never gets stuck hidden */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Design cursor, part 1: a crosshair with live X / Y coordinates, like a design tool */
.cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.cursor .cross { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; transition: transform .25s ease-in-out; }
/* over a text field the crosshair turns into an X */
.cursor.on-text .cross,
.cursor.on-link .cross { transform: rotate(45deg); }   /* over a field or anything clickable: + becomes × */
.cursor.typing .coords { opacity: 0; }     /* coordinates stay while hovering a field, hide once you type in it */
.cursor .cross::before,
.cursor .cross::after { content: ""; position: absolute; background: var(--fg); }
.cursor .cross::before { left: 8.5px; top: 0; width: 1px; height: 18px; }
.cursor .cross::after  { top: 8.5px; left: 0; height: 1px; width: 18px; }
.cursor .coords {
  position: absolute;
  left: 14px; top: 12px;
  font: 400 10px/1 var(--sans);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
}
.cursor.on-tile .coords { opacity: 0; }
/* hide the system pointer everywhere (labels and form text otherwise bring back the Windows arrow) */
.has-cursor, .has-cursor * { cursor: none !important; }

/* Design cursor, part 2: hovering a project selects it like a layer in Figma */
.select-frame {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.select-frame i {                  /* the four corner handles */
  position: absolute;
  width: 7px; height: 7px;
  background: var(--bg);
  border: 1px solid var(--accent);
}
.select-frame i:nth-child(1) { left: -4px;  top: -4px; }
.select-frame i:nth-child(2) { right: -4px; top: -4px; }
.select-frame i:nth-child(3) { left: -4px;  bottom: -4px; }
.select-frame i:nth-child(4) { right: -4px; bottom: -4px; }
.select-frame .layer,
.select-frame .size {
  position: absolute;
  font: 500 10px/1 var(--sans);
  letter-spacing: .04em;
  padding: 4px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.select-frame .layer { left: -1px; top: -24px; color: var(--accent); padding-left: 0; }
.select-frame .size  { left: 50%; bottom: -26px; transform: translateX(-50%); background: var(--accent); color: #fff; font-variant-numeric: tabular-nums; }
.work-tile:hover .select-frame,
.work-tile:focus-visible .select-frame { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .statement .w { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .arrow, .to-top { transition: none; }
  .flash-lines::before, .flash-lines::after { animation: none; transform: none; }
  .focus-ready main > section { transition: none; }
}


/* ===== 6. PHONE / TABLET ===== */
@media (max-width: 1024px) {
  :root { --margin: 48px; }
  .work-tile.quarter { grid-column: span 6; }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .principles { grid-template-columns: 1fr; row-gap: 32px; grid-template-rows: none; }
  .principles li { grid-row: auto; display: block; }        /* one column: plain stacking, so the heading never overlaps its text */
  .principles li h3 { margin-bottom: 10px; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* Header on smaller computers and tablets: same rules in English and Georgian.
   First the space around the links gets smaller (text size stays the same),
   then, once the longer Georgian links no longer fit between logo and switches,
   the links hide in both languages (the right-side dots still move between sections). */
@media (max-width: 1365px) {
  .nav a { padding-inline: 11px; }
  .nav a::before { left: 2px; }
  .nav a::after  { right: 2px; }
  .site-header .container { gap: 16px; }
}
@media (max-width: 1179px) {
  .nav { display: none; }
}

@media (max-width: 760px) {
  :root { --margin: 20px; }
  .nav { display: none; }
  .site-header .container { padding-block: 14px; }
  .intro { grid-template-columns: 1fr; }
  .key-cell { min-height: 0; }
  .key-image { position: relative; top: auto; bottom: auto; right: auto; width: 100%; max-width: 320px; }
  .key-image.is-art { max-width: 420px; height: auto; }   /* phones: normal flow under the text */
  .work-tile, .work-tile.narrow, .work-tile.half, .work-tile.quarter { grid-column: 1 / -1; }
  /* phones: no cropping. Each cover shows whole, at its own shape (3:2, Leader Pack 4:5, the square Cannes poster) */
  .work-tile .media,
  .work-tile.narrow .media,
  .work-grid.filtered .work-tile .media { aspect-ratio: auto; }
  .work-tile .media img { height: auto; }
  .work-tile .media .poster { position: static; display: block; }
  .work-tile .media .poster img { width: 100%; height: auto; max-width: none; }
  /* phones: category label goes under the title, so names never wrap into two lines */
  .work-tile .meta { flex-direction: column; gap: 6px; }
  .work-tile .meta .label { padding-top: 0; text-align: left; }
  .exp li { grid-template-columns: minmax(0, 1fr) auto; }
  .exp .years { text-align: right; }
  .work-grid.filtered .work-tile { grid-column: 1 / -1; }
  .more-work .row { flex-direction: column; gap: 4px; }
  .more-work .row-cat { text-align: left; }
  .exp .what { grid-column: 1 / -1; grid-row: 2; }
  .exp li { row-gap: 2px; column-gap: 16px; padding-block: 10px; }   /* phones: role/years and the description sit close together */
  .exp .sep { display: none; }
  .exp .exp-link { display: table; margin-top: 6px; }   /* phones: the View ↗ link on its own line under the text */
  .sub-head { margin-top: 32px; }
  .form { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .wordmark .logo { height: 1.9rem; }
  .toggles { gap: 6px; }
}
@media (max-width: 340px) {
  .wordmark .logo { height: 1.7rem; }
  .toggles { gap: 4px; }
}


/* ===== GEORGIAN PAGE (/ka/, <html lang="ka">) =====
   Georgian letters use Noto Sans Georgian / Noto Serif Georgian (loaded in the <head>).
   Latin words (project names, software) keep Noto Sans. */
:root:lang(ka) body { font-weight: 400; }                       /* regular for body copy */
/* the blue accent words: Noto Serif Georgian has no italic, so no fake slanting */
:lang(ka) .serif { font-style: normal; }
/* headings: medium weight, looser tracking and line height (Georgian letters are tall) */
:lang(ka) .statement { font-weight: 500; line-height: 1.16; letter-spacing: -0.015em; }
/* Georgian words are much longer: a smaller hero so each of the 3 lines fits beside the key image */
@media (min-width: 761px) { :lang(ka) .statement { font-size: min(calc(var(--fs-hero) * .58), 5.4svh); } }   /* 3 lines; the longest is "და სივრცეებს ვაერთიანებ" */
/* Georgian description under the hero: wider, so it takes 4 lines instead of 5 on computers */
@media (min-width: 761px) { :lang(ka) .intro .lead { max-width: 58ch; } }
:lang(ka) .statement .serif,
:lang(ka) .section-head h2 .serif,
:lang(ka) .sent-title .serif { font-weight: 400; letter-spacing: 0; }
:lang(ka) .section-head h2,
:lang(ka) .sent-title,
:lang(ka) .void-title { font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
:lang(ka) .philosophy-lede { line-height: 1.3; letter-spacing: -0.01em; max-width: 20em; }   /* wider: two lines on computers */
/* "მცირე დეტალებს უკავშირდება." stays on one line where there is room; phones wrap naturally */
@media (min-width: 761px) { :lang(ka) .philosophy-lede .keep { white-space: nowrap; } }
:lang(ka) .principles h3,
:lang(ka) .work-tile h3 { letter-spacing: 0; }
/* uppercase labels become მთავრული (main.js section 15 swaps the letters).
   CSS "uppercase" must be off here: browsers would turn მთავრული back into small letters. */
:lang(ka) .label,
:lang(ka) .field label,
:lang(ka) .field legend,
:lang(ka) .rail .rail-label { text-transform: none; letter-spacing: .06em; }
/* long Georgian words: allow a break inside only if a word can't fit at all */
:lang(ka) .skills h3,
:lang(ka) .exp .what,
:lang(ka) .exp .role { overflow-wrap: anywhere; }


/* ===== PROJECT PAGES (work/*.html) =====
   Editorial layout: about 1200px wide, large images in their natural proportions, short text. */
.project {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 40px;
  padding-bottom: 96px;
}
.project figure { margin: 0; }
.project img { display: block; width: 100%; height: auto; border-radius: 2px; }   /* never cropped */
.p-section { margin-top: 96px; }                                   /* space between sections */

/* 1. intro: title + short description left, project facts right */
.p-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  padding-top: clamp(32px, 6vw, 72px);
}
.p-intro h1 { margin: 0; line-height: 0; }
.p-logo { display: block; height: clamp(7rem, 14vw, 12rem); width: auto; color: var(--fg); }   /* project logo instead of a text title */
.p-logo-wide { height: auto; width: min(100%, 21rem); }   /* wide logos (Furnimal): sized by width; red stays red, the dark part follows the theme */
@media (max-width: 760px) { .p-logo-wide { width: 60%; } }
.p-kicker { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.25; margin: 18px 0 0; }
.p-intro .p-title-text { line-height: 1; }   /* the logo rule above sets 0; text titles need a real line height */
.p-title-text { font: 500 clamp(3rem, 8vw, 6.5rem)/1 'Manrope', var(--sans); letter-spacing: -0.035em; margin: 0; }   /* project name when there is no logo */
:lang(ka) .p-title-text { font-size: min(clamp(3rem, 8vw, 6.5rem), 10.5vw); overflow-wrap: anywhere; }   /* long Georgian names (ფოტომანიპულაცია) fit a phone */
/* project text: brighter and a touch heavier than the home page grey, so longer text reads easily */
.project { --p-text: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.p-lede { color: var(--p-text); font-weight: 400; max-width: 65ch; margin: 14px 0 0; }
.p-info { margin: 0; display: grid; gap: 14px; }
.p-info dt { margin-bottom: 4px; }
.p-info dd { margin: 0; }
.p-info strong { font-weight: 500; color: var(--fg); }               /* the year stands out */
.project .p-hero { margin-top: clamp(48px, 7vw, 88px); }   /* breathing room before the project starts */
.p-hero.natural img { width: auto; max-width: 100%; }   /* small source images: shown at their own size, never stretched */

/* text blocks: small label, heading, short paragraph */
.p-text h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
/* the small heading above a section title ("The idea"): bigger than a normal label */
.p-text > .label { font-size: var(--fs-sm); letter-spacing: .16em; color: var(--fg); }
.p-text .label + h2 { margin-top: 14px; }
.p-text p:not(.label) { color: var(--p-text); font-weight: 400; max-width: 65ch; margin: 14px 0 0; }

/* image groups */
.p-media { display: grid; gap: 24px; margin-top: 28px; }
.p-media + .p-media { margin-top: 24px; }
.p-media.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.p-media.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.tier h3 { font-size: var(--fs-lg); font-weight: 500; letter-spacing: .02em; margin: 0 0 12px; }
.p-tall, .p-closing { max-width: 880px; margin-inline: auto; }   /* tall webpage + square closing image: large, but not a full screen of one picture */

/* 4. visual language: text left, construction drawing right */
.p-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: center; }

/* 8. back to projects + previous / next project */
.p-nav { display: flex; gap: 24px 40px; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
.p-nav .pill { text-decoration: none; }
.p-steps { display: flex; gap: 40px; }
.p-step { display: grid; gap: 6px; color: var(--fg); text-decoration: none; }
.p-step.next { text-align: right; }
.p-step-name { font-size: var(--fs-lg); transition: color .2s; }
.p-step:hover .p-step-name, .p-step:focus-visible .p-step-name { color: var(--accent); }

/* photography: one small heading per series */
.p-series .p-text h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.project video { display: block; width: 100%; height: auto; border-radius: 2px; background: #000; }

/* IMAGE PLACEHOLDERS (.slot): hold an image's space until the file arrives.
   Hidden by default; the page adds "show-ph" to <html> everywhere except the live site.
   On the live site a row (or first image) that has only placeholders is removed, so no empty gaps. */
.slot { display: none; }
.show-ph .slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; border-radius: 2px;
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  border: 1px dashed color-mix(in srgb, var(--fg) 22%, var(--bg));
}
.show-ph .slot::after { content: attr(data-ph) "  ·  " attr(data-label); font-size: var(--fs-xs); color: var(--muted); text-align: center; max-width: 40ch; line-height: 1.45; }
.show-ph .slot-video::before { content: "\25B6\FE0E"; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fg) 30%, var(--bg)); color: var(--muted); padding-left: 4px; }
html:not(.show-ph) .p-media:not(:has(img, video, picture)),
html:not(.show-ph) .p-hero:not(:has(img, video, picture)) { display: none; }
html:not(.show-ph) .p-series:not(:has(img, video, picture)) { display: none; }   /* a photo series with no photos yet */
.p-hero > .p-media { margin-top: 0; }   /* first image as a pair (book covers) */

@media (max-width: 760px) {
  .project { padding-inline: 20px; padding-bottom: 56px; }
  .p-section { margin-top: 56px; }
  .p-intro { grid-template-columns: 1fr; gap: 24px; }
  .p-media { gap: 16px; }
  .p-media + .p-media { margin-top: 16px; }
  .p-media.cols-2, .p-media.cols-3 { grid-template-columns: 1fr; }
  .p-media.m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }   /* pages and spreads stay side by side on phones */
  .p-split { grid-template-columns: 1fr; gap: 24px; }
  .p-nav { align-items: stretch; flex-direction: column; }
  .p-steps { justify-content: space-between; gap: 24px; }
}


/* Project return control: same surface as the homepage's up button. */
.to-top.project-back { right: auto; left: max(12px, calc((100vw - 1360px) / 2)); bottom: auto; top: 50%; transform: translateY(-50%); }
.project-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.work-tile[id], .more-work .row[id] { scroll-margin-top: calc(var(--header-h, 72px) + 24px); }
@media (max-width: 1359px) {
  .to-top.project-back { top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); transform: none; }
}

/* ===== STATUS PAGES: 404 and "work in progress" (404.html, work/progress-film.html) =====
   Same header and footer as the site; one calm block in the middle of the screen. */
.status-page { min-height: 100svh; display: flex; flex-direction: column; }
.status-main {
  flex: 1;
  width: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;   /* everything centred */
  padding-block: clamp(32px, 6vh, 72px) clamp(56px, 10vh, 120px);
}
/* the big [404] / [WIP]: the "Nikoloz Tse." band from Hello, bigger, with the same line underneath */
.status-code { font-size: min(clamp(5.5rem, 20vw, 16rem), 30svh); align-self: stretch; text-align: center; margin-bottom: 32px; }
.name-band .br { color: var(--accent); font-weight: 300; }
/* [WIP]: the heading word that matches the hovered letter turns blue (W -> Work, I -> in, P -> progress) */
[data-w] { transition: color .2s ease-in-out; }
body[data-hover-letter="W"] [data-w="W"],
body[data-hover-letter="I"] [data-w="I"],
body[data-hover-letter="P"] [data-w="P"],
body[data-hover-letter="R"] [data-w="R"],
body[data-hover-letter="N"] [data-w="N"] { color: var(--accent); }
.status-request { font: 500 var(--fs-lg)/1.3 'Manrope', var(--sans); letter-spacing: .01em; margin: -12px 0 28px; }   /* "Request by you, Not found." under [404] */
:lang(ka) .status-request { font-family: var(--sans); }
/* "[Request by you, not found.]" and "[Work in progress.]": hidden until a letter of [404] / [WIP] is hovered.
   Phones and tablets can't hover, so there they always show. Screen readers always read them. */
.status-reveal .br { color: var(--accent); }
@media (hover: hover) {
  .status-reveal { opacity: 0; transform: translateY(6px); transition: opacity .3s ease-in-out, transform .3s ease-in-out; }
  body[data-hover-letter]:not([data-hover-letter=""]) .status-reveal { opacity: 1; transform: none; }
}
.status-main h1 { font-size: var(--fs-xl); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.status-description { color: var(--muted); max-width: 60ch; margin: 14px auto 36px; }
.status-main .pill { text-decoration: none; display: inline-flex; gap: 10px; align-items: center; font-size: var(--fs-base); padding: 14px 26px; }   /* a bit bigger than other pills */
.status-main .pill:hover .arrow { transform: translateX(-6px); }
:lang(ka) .status-main h1 { font-weight: 500; letter-spacing: -0.01em; }

/* The in-progress film is now a navigable project, with the same hover states. */
.drafts a.row { cursor: pointer; }

/* ----- HILLFA: website sheet with notes beside it (js/project.js section 6) -----
   The site image sits in the middle; each note is placed at its height (top: …%) on the left or right,
   with a short line pointing at the image. Notes fade in as they scroll into view. */
.p-ui { margin: 0; }
.ui-stage { position: relative; width: min(680px, 100%); margin: 24px auto 0; }
.ui-site { display: block; width: 100%; height: auto; }
.ui-top { display: flex; justify-content: center; gap: clamp(24px, 4vw, 64px); width: min(680px, 100%); margin: 0 auto; flex-wrap: wrap; }
.ui-note { font-size: var(--fs-sm); line-height: 1.3; color: var(--fg); }
.ui-note b { display: block; font-weight: 500; }
.ui-note small { display: block; color: var(--p-text, var(--muted)); font-size: var(--fs-xs); margin-top: 3px; }
.ui-note.top { text-align: center; }
.ui-stage .ui-note { position: absolute; width: 190px; transform: translateY(-50%); }
.ui-stage .ui-note.l { right: calc(100% + 40px); text-align: right; }
.ui-stage .ui-note.r { left: calc(100% + 40px); }
.ui-stage .ui-note::after {                     /* the pointer line towards the image */
  content: ""; position: absolute; top: .65em; width: 28px; height: 1px; background: var(--accent);
}
.ui-stage .ui-note.l::after { left: calc(100% + 8px); }
.ui-stage .ui-note.r::after { right: calc(100% + 8px); }
/* appear on scroll (only when the script runs, and not for visitors who prefer less motion) */
.ui-anim .ui-note { opacity: 0; transition: opacity .6s ease-out, translate .6s ease-out; translate: 0 14px; }
.ui-anim .ui-note.in { opacity: 1; translate: 0 0; }
/* too narrow for notes beside the image: only the image (and the top notes) */
@media (max-width: 1099px) { .ui-stage .ui-note, .ui-top { display: none; } }   /* notes need room beside the image: hidden on tablets and phones */
.p-ui-intro { margin-top: 40px; }
.p-ui-intro h3, .p-series .p-text h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.p-fig { margin: 0; }
.p-media.align-c { align-items: center; }
.p-fig figcaption { margin-top: 10px; color: var(--p-text); }   /* short factual captions (Front cover, Back cover) */

/* HILLFA catalogue: the cover on its own, a bit smaller than the spreads */
.p-cover { max-width: 520px; margin-inline: auto; }

/* ----- Cookie banner (js/consent.js) -----
   A selected frame with corner handles, bottom left. Both buttons have the same size:
   saying no is as easy as saying yes. */
.consent {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 99;   /* bottom centre, under the design cursor (100) */
  transform: translateX(-50%);
  width: min(380px, calc(100vw - 32px));
  padding: 20px 20px 18px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--accent);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  animation: consent-in .4s var(--ease) both;
}
.consent[hidden] { display: none; }
.consent > i { position: absolute; width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--accent); }
.consent > i:nth-child(1) { left: -4px;  top: -4px; }
.consent > i:nth-child(2) { right: -4px; top: -4px; }
.consent > i:nth-child(3) { left: -4px;  bottom: -4px; }
.consent > i:nth-child(4) { right: -4px; bottom: -4px; }
.consent-label { display: block; color: var(--accent); margin-bottom: 10px; }
.consent p { margin: 0 0 16px; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.consent-actions { display: flex; gap: 8px; }
.consent-actions .pill { flex: 1; justify-content: center; }
.consent-actions .pill:not(.pill-go) { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 40%, transparent); }   /* Decline is as easy to read as Allow */
.consent-actions .pill:not(.pill-go):hover { border-color: var(--fg); }
.consent-link { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); cursor: pointer; transition: color .2s; }
.consent-link:hover, .consent-link:focus-visible { color: var(--fg); }
@keyframes consent-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
/* while the banner is open, the arrow-keys note moves up above it */
.consent-open .key-hint { bottom: calc(var(--consent-h, 0px) + 32px + env(safe-area-inset-bottom, 0px)); }