/* 00-fonts.css */
/* Generated by tools/fetch-fonts.js — do not edit by hand.
   Noto Serif Display & Manrope, SIL Open Font License 1.1. */
/* greek */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/noto-serif-display-greek.d17bb2b5.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/noto-serif-display-latin-ext.14e12a97.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/noto-serif-display-latin.cb23a8ec.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/noto-serif-display-greek.0c19f35e.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/noto-serif-display-latin-ext.a907f11d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/noto-serif-display-latin.5343443b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-serif-display-greek.0c19f35e.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-serif-display-latin-ext.a907f11d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-serif-display-latin.5343443b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-greek.2fb2e8cb.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.3911b66d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-latin.a30ddcd3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-greek.2fb2e8cb.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.3911b66d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-latin.a30ddcd3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 00b-font-fallback.css */
/* Metric-matched fallback for the display serif, so the hero does not jump when the
   web font finishes loading. Measured in the browser at 100px, weight 300:
   Noto Serif Display is 13.1% wider than Times New Roman in Latin but 0.8% narrower
   in Greek, so each script gets its own size-adjust through unicode-range.
   Ascent/descent come from Noto's font bounding box (107% / 29%).
   Hand-written — tools/fetch-fonts.js only generates 00-fonts.css. */
@font-face {
  font-family: 'Noto Serif Display Fallback';
  src: local('Times New Roman'), local('Liberation Serif'), local('Georgia'), local('serif');
  size-adjust: 113.1%;
  ascent-override: 107%;
  descent-override: 29%;
  line-gap-override: 0%;
  unicode-range: U+0000-024F, U+0259, U+2000-206F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif Display Fallback';
  src: local('Times New Roman'), local('Liberation Serif'), local('Georgia'), local('serif');
  size-adjust: 99.2%;
  ascent-override: 107%;
  descent-override: 29%;
  line-gap-override: 0%;
  unicode-range: U+0370-03FF, U+1F00-1FFF;
}

/* 01-tokens.css */
/* Design tokens — "Gallery White + Walnut", drawn from the BALKAM logo.
   The page stays neutral white so the renders are judged against a true field — a tinted
   background would shift how their whites and greys read. The warmth of the logo lives in
   the text (espresso), in actions, state and focus (walnut) and in the closing band (linen). */
:root {
  --bg: #ffffff;
  --surface: #f5f2ee;
  --ink: #221d1a;
  --muted: #6b625a;
  --line: #e7e1da;
  --line-on-surface: #dad2c9;
  --accent: #7b5e45;
  --accent-hover: #5a4332;
  --on-accent: #ffffff;
  --focus: #5a4332;
  --selection: #ece2d6;
  /* The signature hero light stays pure white whatever the page tint. */
  --flash: #ffffff;

  --serif: 'Noto Serif Display', 'Noto Serif Display Fallback', 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --step--2: clamp(0.72rem, 0.7rem + 0.08vw, 0.76rem);
  --step--1: clamp(0.8rem, 0.77rem + 0.12vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.42vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.95vw, 2rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.7vw, 2.9rem);
  --step-4: clamp(2.3rem, 1.6rem + 3.3vw, 4.8rem);
  --step-5: clamp(2.7rem, 1.7rem + 5vw, 7rem);

  --gutter: clamp(1rem, 0.55rem + 2.2vw, 2.75rem);
  --space-s: clamp(0.75rem, 0.65rem + 0.5vw, 1.1rem);
  --space-m: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --space-l: clamp(3rem, 2.2rem + 4vw, 6rem);
  --space-xl: clamp(4.5rem, 3rem + 7.5vw, 11rem);
  /* Normal distance between sections; --space-xl is reserved for the hero and the statement. */
  --space-section: clamp(4rem, 2.6rem + 5vw, 8rem);
  --max: 100rem;

  /* Desktop header height: the home hero subtracts it from 100svh. */
  --header-h: clamp(4.5rem, 2.5rem + 4svh, 6rem);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-light: cubic-bezier(0.5, 0, 0.15, 1);
}

/* 02-base.css */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection { background: var(--selection); color: var(--ink); }

main { display: block; outline: none; }

[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: 0.7em 1em;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--step--1);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-s); }

.eyebrow,
.section-label {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--ink); text-decoration: underline; }

/* 03-chrome.css */
/* Header, footer and contact block. */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'brand lang' 'nav nav';
  align-items: center;
  gap: 0.35rem var(--space-s);
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-s) var(--gutter);
  position: relative;
  z-index: 10;
}

.brand {
  grid-area: brand;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { grid-area: nav; }
.site-nav ul { display: flex; gap: clamp(1rem, 0.6rem + 1.6vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.site-nav a,
.lang-switch {
  display: inline-block;
  padding-block: 0.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.site-nav a:hover,
.site-nav a[aria-current='page'],
.lang-switch:hover { color: var(--ink); }
.site-nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.lang-switch {
  grid-area: lang;
  text-align: center;
  border: 1px solid var(--line);
  padding-inline: 0.7rem;
  padding-block: 0.35rem;
}
.lang-switch:hover { border-color: var(--accent); }

@media (width >= 48em) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: 'brand nav lang';
    gap: 0.35rem var(--space-m);
  }
}
@media (width >= 64em) {
  /* min-height, not height: larger text or a longer brand name grows the bar
     instead of overlapping the hero, which subtracts this token from 100svh. */
  .site-header { min-height: var(--header-h); padding-block: 0; }
}

/* Footer — the one pale band on every page; it never sits behind a render. */
.site-footer {
  max-width: var(--max);
  margin: var(--space-section) auto 0;
  padding: var(--space-l) var(--gutter) var(--space-m);
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax);
}

.contact { display: grid; gap: var(--space-l) var(--gutter); }
.contact__lead { container-type: inline-size; }
.contact__kicker { margin-bottom: var(--space-s); }
.contact__invite {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 20ch;
}
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: var(--space-m);
}
/* The address always sets on one line: it shrinks to the column when it would not fit.
   The build passes its length as --chars; 0.56em per character is a little wider than
   the measured average (0.52em) of this light serif, so the address keeps a margin. */
.contact__email {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  font-size: min(var(--step-2), calc(100cqi / (var(--chars, 28) * 0.56)));
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.18em;
}
.contact__email:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.contact__facts {
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-on-surface);
}
.contact__facts li {
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line-on-surface);
  font-size: var(--step--1);
  color: var(--muted);
}

@media (width >= 64em) {
  .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .contact__lead { grid-column: 1 / span 7; }
  .contact__facts { grid-column: 9 / -1; }
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line-on-surface);
  font-size: var(--step--2);
  color: var(--muted);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-nav a { color: var(--muted); text-decoration: none; padding-block: 0.25rem; }
.footer-nav a:hover { color: var(--ink); text-decoration: underline; }

/* 04-components.css */
/* Shared components: buttons, links, plates, captions, section heads, prose. */
.button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.8em 1.6em;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 3rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--accent);
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.85em) / 100% 1px no-repeat;
}
.link-arrow:hover { color: var(--accent-hover); }
.link-arrow::after { content: '→'; font-family: var(--sans); transition: transform 0.35s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(0.3em); }

.plate {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface);
}
.plate img,
.plate picture { width: 100%; }
.plate__img { width: 100%; height: auto; }

.caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 1rem;
  align-items: baseline;
  padding-top: 0.85rem;
  font-size: var(--step--1);
}
.caption__num,
.feature__num,
.card__num,
.index-row__num,
.step__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.caption__title { font-weight: 500; }
.caption__sub { grid-column: 2; color: var(--muted); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  margin-bottom: var(--space-m);
}
.section-head__meta { color: var(--muted); font-size: var(--step--1); }

.page-head {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-l) var(--gutter) var(--space-l);
}
.page-head__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-block: 0.5rem 0.25em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.page-head__lede {
  max-width: 40ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--ink);
}
.page-head__meta { color: var(--muted); font-size: var(--step--1); }

.prose { max-width: 66ch; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.2;
  margin: 2.2em 0 0.6em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); font-weight: 500; margin: 1.6em 0 0.4em; }
.prose p, .prose ul { margin-bottom: 1em; }
.prose ul { padding-left: 1.2em; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose--page {
  margin-inline: auto;
  padding-inline: var(--gutter);
  max-width: calc(66ch + 2 * var(--gutter));
}
.prose__updated { color: var(--muted); font-size: var(--step--1); margin-top: 2.5em; }

.empty-state {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-m) var(--gutter);
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  color: var(--muted);
}

.demo-note {
  max-width: 60ch;
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--muted);
}

/* 05-home.css */
/* Home: hero, selected work, statement, index, approach. */
.hero {
  display: grid;
  gap: var(--space-m) var(--gutter);
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-s) var(--gutter) var(--space-xl);
}
/* A size container at every width: the headline is then measured against this column
   (cqi), and the column can never be widened by the headline itself. */
.hero__text { display: grid; align-content: end; gap: var(--space-s); container-type: inline-size; }
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin-block: 0.35rem 0.5rem;
  text-wrap: balance;
}
/* Greek needs more leading (tonos + descenders stack above 1.04em) and less tracking.
   The bound phrase «εσωτερικών χώρων» is 8.6em wide, so on narrow phones the headline
   shrinks until that phrase fits the text column, with a little room to spare. */
:lang(el) .hero__title {
  font-size: min(var(--step-4), calc(100cqi / 8.9));
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
  hyphens: manual;
}
.hero__lede { max-width: 42ch; color: var(--muted); font-size: var(--step-1); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: var(--space-s); }

/* Portrait phones lead with the render, as the calmest studio sites do. Only the visual
   order changes: the headline still comes first in the markup, for screen readers and search. */
@media (width < 48em) and (orientation: portrait) {
  .hero { padding-top: 0; }
  .hero__plate { order: -1; }
  /* Only the render goes edge to edge; the caption keeps the page margin, so the
     column is never widened by the caption text. */
  .hero__plate .plate { margin-inline: calc(-1 * var(--gutter)); }
}

/* Landscape phones and tablets: keep the render inside the screen there too. */
@media (width < 64em) and (orientation: landscape) {
  .hero__plate { width: min(100%, calc(max(12rem, 100svh - 6rem) * var(--ratio, 1.5))); }
}

@media (width >= 64em) {
  /* First screen budget: header + padding + stage + caption reserve + fold gap = 100svh. */
  .hero {
    --hero-pad: clamp(1rem, 3svh, 2.5rem);
    --hero-fold: clamp(1.25rem, 4svh, 3rem);
    --hero-caption: clamp(2.25rem, 6svh, 3.75rem);
    --hero-stage: max(18rem, calc(100svh - var(--header-h) - var(--hero-pad) - var(--hero-fold) - var(--hero-caption)));
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    padding-top: var(--hero-pad);
  }
  .hero__text {
    grid-column: 1 / span 5;
    grid-row: 1;
    padding-bottom: var(--hero-caption);
  }
  /* Size from the smaller of the column width and the screen height: EN sets in 3 lines, EL in 4. */
  .hero__title {
    font-size: clamp(2rem, min(10.6cqi, 27.4svh - 6.2rem), 4.8rem);
    max-width: none;
  }
  :lang(el) .hero__title {
    font-size: clamp(2rem, min(9cqi, 19.8svh - 4.47rem), 4.25rem);
    max-width: none;
  }
  .hero__lede { font-size: clamp(var(--step-0), min(0.35rem + 2svh, 4.6cqi), var(--step-1)); }
  /* The render is sized by the stage height and its own ratio, so it is never cropped. */
  .hero__plate {
    grid-column: 6 / -1;
    grid-row: 1;
    justify-self: end;
    width: min(100%, calc(var(--hero-stage) * var(--ratio, 1.5)));
  }
  .hero__plate .caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: start;
    gap: 0.15rem 1rem;
    min-height: var(--hero-caption);
    padding-top: 0.75rem;
    line-height: 1.45;
  }
  .hero--text .hero__text { grid-column: 1 / span 9; }
}

/* Selected work: every project in one 3:2 frame, image and text alternating sides.
   The frame crops only this teaser — the project page shows the whole render. */
.selected { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.feature-list { display: grid; gap: var(--space-section); }
.feature__link {
  /* Widest frame whose height still fits the screen below a little breathing room
     (same 12rem floor as the hero). vh first: a custom property is not checked when
     parsed, so browsers without svh need a value that is valid for them. */
  --frame-cap: calc(max(12rem, 100vh - 8rem) * 1.5);
  display: grid;
  gap: var(--space-s);
  text-decoration: none;
}
@supports (height: 1svh) {
  .feature__link { --frame-cap: calc(max(12rem, 100svh - 8rem) * 1.5); }
}
.feature__media { width: min(100%, var(--frame-cap)); aspect-ratio: 3 / 2; }
.feature__media picture { height: 100%; }
.feature__media .plate__img { height: 100%; object-fit: cover; }
.feature__meta { display: grid; gap: 0.15rem; align-self: end; }
.feature__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
:lang(el) .feature__title { line-height: 1.1; letter-spacing: -0.015em; }
.feature__sub { color: var(--muted); font-size: var(--step--1); }
.feature__link:hover .feature__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }

/* Side by side from 64em, and on landscape phones and tablets, which have the width for it.
   (SIZES.feature in build/components/works.js mirrors these rules.) */
@media (width >= 64em), (width >= 40em) and (orientation: landscape) {
  /* The frame spans eight of twelve columns unless the screen is too short for that;
     the text column takes the rest, so it always sits right beside the image. */
  .feature__link {
    --frame: min(calc((100% - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter)), var(--frame-cap));
    grid-template-columns: var(--frame) minmax(0, 1fr);
    column-gap: var(--gutter);
  }
  .feature__meta { padding-bottom: 0.5rem; }
  .feature--right .feature__link { grid-template-columns: minmax(0, 1fr) var(--frame); }
  .feature--right .feature__media { grid-column: 2; grid-row: 1; }
  /* Mirror of the left variant: the caption hugs its own plate, not the page margin. */
  .feature--right .feature__meta { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
  /* Below the hero H1 in the hierarchy, also on short, wide screens (the Greek H1 shrinks with svh). */
  .feature__title { font-size: clamp(1.6rem, 2.6vw, 2.75rem); font-size: clamp(1.6rem, min(2.6vw, 19.8svh - 5rem), 2.75rem); }
}

/* Statement */
.statement {
  max-width: var(--max);
  margin: var(--space-xl) auto;
  padding-inline: var(--gutter);
}
.statement__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 24ch;
  text-wrap: balance;
}
:lang(el) .statement__text { line-height: 1.12; letter-spacing: -0.02em; }
@media (width >= 64em) {
  .statement__text {
    font-size: clamp(1.6rem, 2.6vw, 2.75rem);
    font-size: clamp(1.6rem, min(2.6vw, 19.8svh - 5rem), 2.75rem);
    max-width: 28ch;
    margin-left: calc((100% + var(--gutter)) / 12 * 5);
  }
}

/* Index */
.index { max-width: var(--max); margin: var(--space-section) auto 0; padding-inline: var(--gutter); }
.index .section-head { border-top: 0; padding-top: 0; margin-bottom: var(--space-s); }
.index-list { border-top: 1px solid var(--ink); }
.index-row { border-bottom: 1px solid var(--line); }
.index-row__link {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  grid-template-areas: 'num title thumb' 'num meta thumb';
  column-gap: 1rem;
  align-items: center;
  padding-block: 1rem;
  text-decoration: none;
  transition: color 0.3s ease, padding 0.5s var(--ease-out);
}
.index-row__num { grid-area: num; align-self: start; padding-top: 0.2rem; }
.index-row__title {
  grid-area: title;
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.15;
}
.index-row__meta,
.index-row__loc,
.index-row__cat,
.index-row__year { font-size: var(--step--1); color: var(--muted); }
.index-row__meta { grid-area: meta; }
.index-row__loc,
.index-row__cat,
.index-row__year { display: none; }
.index-row__thumb { grid-area: thumb; width: 5.5rem; background: var(--surface); }

@media (width >= 48em) {
  .index-row__link {
    grid-template-columns: 3rem minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) 4rem;
    grid-template-areas: 'num title loc cat year';
    padding-block: 1.25rem;
  }
  .index-row__num { align-self: center; padding-top: 0; }
  .index-row__meta { display: none; }
  .index-row__loc { display: block; grid-area: loc; }
  .index-row__cat { display: block; grid-area: cat; }
  .index-row__year { display: block; grid-area: year; text-align: right; }
  .index-row__thumb { display: none; }
}
@media (width >= 48em) and (hover: none) {
  .index-row__link { grid-template-columns: 3rem minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 4rem 5.5rem; grid-template-areas: 'num title loc cat year thumb'; }
  .index-row__thumb { display: block; }
}
@media (hover: hover) and (pointer: fine) {
  .index-list:hover .index-row__link { color: var(--muted); }
  .index-list .index-row__link:hover { color: var(--ink); }
}

.index-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: clamp(14rem, 20vw, 22rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;
}
.index-preview.is-visible { opacity: 1; }
.index-preview img { width: 100%; height: auto; }

/* Approach — on the home page it opens the closing band the footer continues. */
.approach { max-width: var(--max); margin: var(--space-section) auto 0; padding-inline: var(--gutter); }
.page--home .approach {
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax);
  padding-block: var(--space-l);
}
.page--home .approach .section-head { border-top-color: var(--line-on-surface); }
.page--home .site-footer { margin-top: 0; }
.steps { display: grid; gap: var(--space-m) var(--gutter); }
@media (width >= 40em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 64em) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: grid; align-content: start; gap: 0.5rem; }
.step__num { font-size: var(--step-2); line-height: 1; }
.step__title { font-size: var(--step-0); font-weight: 500; }
.step__text { color: var(--muted); font-size: var(--step--1); line-height: 1.6; max-width: 34ch; }
.approach__design {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  margin-top: var(--space-l);
  max-width: 60ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.4;
}
.approach__design .link-arrow { font-family: var(--sans); }

/* 06-works.css */
/* Works page: filter and asymmetric card grid. */
.works { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: var(--space-s);
  margin-bottom: var(--space-l);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.filter__buttons { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.filter__button {
  min-height: 2.75rem;
  padding: 0.4rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.filter__button:hover,
.filter__button[aria-pressed='true'] { color: var(--ink); }
.filter__button[aria-pressed='true'] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.filter__status { color: var(--muted); font-size: var(--step--1); }

.works-grid { display: grid; gap: var(--space-l) var(--gutter); }
@media (min-width: 40em) {
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-grid .card:nth-child(even) { margin-top: var(--space-xl); }
}
.card__link { display: grid; gap: var(--space-s); text-decoration: none; }
.card__meta { display: grid; gap: 0.15rem; }
.card__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.card__sub { color: var(--muted); font-size: var(--step--1); }
.card__link:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }

/* 07-project.css */
/* Project page: head, cover, intro, gallery rows, credits, next project. */
.project-head {
  display: grid;
  gap: var(--space-s) var(--gutter);
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-l) var(--gutter) var(--space-m);
}
.project-head__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.project-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s) var(--gutter);
  margin-top: var(--space-s);
}
.project-meta__item { padding-top: 0.6rem; border-top: 1px solid var(--line); }
.project-meta dt { font-size: var(--step--2); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.project-meta dd { font-size: var(--step--1); }
@media (min-width: 64em) {
  /* Compact head so the cover arrives inside the first screen. */
  .project-head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .project-head .eyebrow { grid-column: 1 / span 8; grid-row: 1; }
  .project-head__title { grid-column: 1 / span 7; grid-row: 2; }
  .project-meta { grid-column: 9 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .project-head .demo-note { grid-column: 1 / span 8; grid-row: 3; }
}

.project-cover { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.project-intro {
  display: grid;
  gap: var(--space-m) var(--gutter);
  max-width: var(--max);
  margin: var(--space-l) auto;
  padding-inline: var(--gutter);
}
.project-intro__summary {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.25;
  max-width: 30ch;
}
.project-intro .prose { color: var(--muted); }
@media (min-width: 64em) {
  .project-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .project-intro__summary { grid-column: 1 / span 7; }
  .project-intro .prose { grid-column: 9 / -1; padding-top: 0.35rem; }
}

/* No render taller than the screen: width comes from the image ratio. */
@media (width >= 48em) {
  .g-figure--cover,
  .g-figure--full { width: min(100%, calc(max(18rem, 100svh - 8rem) * var(--ratio, 1.5))); margin-inline: auto; }
}

.gallery {
  display: grid;
  gap: var(--space-l);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.g-row { display: grid; gap: var(--gutter); }
.g-figure { display: grid; gap: 0.6rem; }
.zoom { cursor: zoom-in; }
.g-caption { font-size: var(--step--1); color: var(--muted); max-width: 60ch; }
@media (min-width: 48em) {
  .g-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .g-row--pair .g-figure:nth-child(2) { margin-top: var(--space-l); }
  .g-row--wide,
  .g-row--detail { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .g-row--wide .g-figure { grid-column: 2 / span 10; }
  .g-row--detail .g-figure { grid-column: 7 / -1; }
}

.credits {
  max-width: var(--max);
  margin: var(--space-xl) auto 0;
  padding-inline: var(--gutter);
}
.credits__list {
  display: grid;
  gap: var(--space-s) var(--gutter);
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}
@media (min-width: 40em) { .credits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.credits dt { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.next-project {
  max-width: var(--max);
  margin: var(--space-xl) auto 0;
  padding-inline: var(--gutter);
}
.next-project__link {
  display: grid;
  gap: var(--space-m) var(--gutter);
  padding-top: var(--space-s);
  border-top: 1px solid var(--ink);
  text-decoration: none;
}
.next-project__text { display: grid; align-content: start; gap: 0.5rem; }
.next-project__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.next-project__sub { color: var(--muted); font-size: var(--step--1); }
.next-project__link:hover .next-project__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.1em; }
@media (min-width: 64em) {
  .next-project__link { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .next-project__text { grid-column: 1 / span 6; }
  .next-project__media { grid-column: 7 / -1; }
}

/* PhotoSwipe tuned to the white-cube palette ("html" outranks photoswipe.css, which loads later). */
html .pswp { --pswp-bg: var(--bg); --pswp-placeholder-bg: var(--surface); --pswp-icon-color: var(--ink); --pswp-icon-color-secondary: var(--on-accent); --pswp-icon-stroke-color: var(--on-accent); --pswp-icon-stroke-width: 2px; --pswp-error-text-color: var(--ink); }

/* 08-studio.css */
/* Studio, legal and 404 pages. */
.studio-intro,
.studio-block {
  display: grid;
  gap: var(--space-m) var(--gutter);
  max-width: var(--max);
  margin: 0 auto var(--space-section);
  padding: var(--space-s) var(--gutter) 0;
}
.studio-intro .section-label,
.studio-block > .section-label { padding-top: var(--space-s); border-top: 1px solid var(--line); }
.studio-intro__body { display: grid; gap: var(--space-l); }
.studio-intro__text {
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 54ch;
}
.facts { display: grid; gap: 0; max-width: 70ch; border-top: 1px solid var(--ink); }
.facts li { padding-block: 0.9rem; border-bottom: 1px solid var(--line); font-size: var(--step-0); }

@media (min-width: 64em) {
  .studio-intro,
  .studio-block { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .studio-intro .section-label,
  .studio-block > .section-label { grid-column: 1 / span 3; }
  .studio-intro__body,
  .studio-block > .service-list,
  .studio-block > .steps,
  .studio-block > .ledger { grid-column: 4 / -1; }
  .studio-block > .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-block .section-label { border-top: 1px solid var(--line); }
}

.service-list { display: grid; gap: var(--space-m) var(--gutter); }
@media (min-width: 40em) { .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80em) { .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service { display: grid; align-content: start; gap: 0.5rem; padding-top: var(--space-s); border-top: 1px solid var(--line); }
.service__title { font-size: var(--step-0); font-weight: 500; line-height: 1.3; }
.service-list--primary .service__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.15;
}
.service__text { color: var(--muted); font-size: var(--step--1); max-width: 40ch; }

.ledger { display: grid; border-top: 1px solid var(--ink); }
.ledger__item {
  display: grid;
  gap: 0.25rem var(--gutter);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--line);
}
.ledger__org {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.2;
}
.ledger__role { font-weight: 500; font-size: var(--step--1); }
.ledger__period { font-weight: 400; color: var(--muted); }
.ledger__period::before { content: '· '; }
.ledger__summary { color: var(--muted); font-size: var(--step--1); max-width: 60ch; }
.ledger__year { font-family: var(--serif); font-style: italic; color: var(--muted); }
@media (min-width: 48em) {
  .ledger__item { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: baseline; }
  .ledger__org { grid-row: span 2; }
}

.not-found {
  display: grid;
  gap: var(--space-s);
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter);
}

/* 09-motion.css */
/* Motion. Everything here is scoped to html.motion-ok, which the head script only
   sets when JavaScript runs and the visitor has not asked for reduced motion. */

/* Signature: the hero render develops out of bright light (once per session).
   From 48em it plays on arrival, with the text rising beside the render. On phones the
   render sits below the text, so it waits until the render scrolls into view (intro-plate)
   and plays a shorter develop that never touches the text the reader is already on. */
.motion-ok.intro .hero__plate .plate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--flash);
  pointer-events: none;
  animation: cb-glare 2.4s ease-out both;
}
.motion-ok.intro .hero__plate .plate__img { animation: cb-develop 3s var(--ease-light) both; }
.motion-ok.intro .hero__plate .caption,
.motion-ok.intro .hero__lede,
.motion-ok.intro .hero__actions { animation: cb-rise 1s var(--ease-out) both; }
.motion-ok.intro .hero__plate .caption { animation-delay: 1.9s; }
.motion-ok.intro .hero__lede { animation-delay: 0.6s; }
.motion-ok.intro .hero__actions { animation-delay: 0.85s; }
.motion-ok.intro-plate .hero__plate .plate__img { animation: cb-develop-short 1.5s var(--ease-light) both; }

/* Short version on project covers, skipped when the cover arrives by view transition. */
.motion-ok:not(.via-vt) .project-cover .plate__img { animation: cb-develop-short 1.5s var(--ease-light) both; }

@keyframes cb-glare { from { opacity: 1; } to { opacity: 0; } }
@keyframes cb-develop {
  from { filter: brightness(1.8) contrast(0.5) saturate(0); }
  45% { filter: brightness(1.25) contrast(0.8) saturate(0.55); }
  to { filter: none; }
}
@keyframes cb-develop-short {
  from { filter: brightness(1.45) contrast(0.7) saturate(0.3); }
  to { filter: none; }
}
@keyframes cb-rise { from { opacity: 0; transform: translateY(0.9rem); } to { opacity: 1; transform: none; } }

/* A slow band of light crosses a plate on hover. */
@media (hover: hover) and (pointer: fine) {
  .motion-ok .plate::after {
    content: '';
    position: absolute;
    inset: -10% -70%;
    z-index: 2;
    background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.34) 50%, transparent 58%);
    transform: translateX(-45%);
    opacity: 0;
    pointer-events: none;
  }
  .motion-ok a:hover > .plate::after,
  .motion-ok a:hover .plate::after,
  .motion-ok .plate:hover::after { animation: cb-sweep 1.5s var(--ease-light) both; }
  .motion-ok .plate__img { transition: transform 1.6s var(--ease-out); }
  .motion-ok a:hover .plate__img,
  .motion-ok .zoom:hover .plate__img { transform: scale(1.02); }
}
@keyframes cb-sweep {
  0% { opacity: 0; transform: translateX(-45%); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(45%); }
}

/* Page morphs between a plate and its project cover (Chromium, Safari). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.45s; }
::view-transition-group(project-media) {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
}
/* A home teaser is a 3:2 crop of its cover: both snapshots fill the morphing box, so the
   crop changes smoothly instead of the two images sliding out of register. */
::view-transition-old(project-media),
::view-transition-new(project-media) { height: 100%; object-fit: cover; }

/* Belt and braces: the OS setting always wins, even if a class was set earlier. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-force) *,
  html:not(.motion-force) *::before,
  html:not(.motion-force) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}