/* Itziar Echebarrieta — architecture portfolio
   Desktop first. On desktop, sheets reproduce the deck's 16:9 slides: positions
   come from the slides in "slide units" (1 unit = 1% of the slide width = 1cqw). */

/* ---------- fonts (self-hosted; Source Sans 3: OFL, Caladea: Apache 2.0) ---------- */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
  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;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-wght-italic.woff2") format("woff2-variations");
  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;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
/* stands in for the deck's Cambria italic (same metrics) */
@font-face {
  font-family: "Caladea";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/caladea-latin-400-italic.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;
}

/* ---------- tokens (sampled from the deck) ---------- */
:root {
  --paper: #f8f5e8;
  --paper-deep: #ece5cb;    /* textured paper of the cover and contents */
  --beige: #e3dbba;         /* milestones, the faded project numbers */
  --beige-light: #ebe4c9;   /* "independent projects" band */
  --sand: #d8cfa8;          /* small numbers and labels on slate */
  --slate: #5e6879;         /* names, "Contents", numerals, text on paper */
  --slate-bg: #5d6370;      /* slate sheets (under the texture) */
  --slate-num: #9fa5b1;     /* huge divider numerals */
  --cream: #f3ecd6;         /* text on slate */
  --brown: #72664e;         /* subtitles, labels */
  --ink: #3f424d;           /* typology names */
  --grey: #6b6e78;          /* body text: deck #70737d, nudged to reach WCAG AA on paper */
  --rail-bg: #dcdbd2;
  --rail-ink: #666f7f;

  --sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --serif: "Caladea", Cambria, Georgia, serif;
  --label: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --rail: clamp(26px, 1.45vw, 36px);
  --ease: cubic-bezier(.2, .6, .2, 1);

  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--paper);   /* Safari tints its toolbars from this */
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--grey);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  container-type: inline-size;
  max-width: 2560px;
  margin-inline: auto;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
:is(.divider, .thanks, .cv__side) :focus-visible { outline-color: var(--cream); }

/* thin underline that grows from the left */
:is(.project__text, .cv, .thanks, .pager, .missing, .contents__list, .divider__list) a, a.sheet__label {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease);
}
:is(.project__text, .cv, .thanks, .pager, .missing, .contents__list, .divider__list) a:is(:hover, :focus-visible),
a.sheet__label:is(:hover, :focus-visible) { background-size: 100% 1px; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 50;
  padding: 10px 14px; background: var(--brown); color: var(--paper);
  font: 600 14px/1 var(--sans);
}
.skip:focus { top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.dot { letter-spacing: 0; margin-inline: .4em; }

/* spaced uppercase labels, the deck's small caps lines */
.spaced, .cover__cities, .cover__title, .cover__types, .contents__meta, .contents__name,
.divider__count, .divider__caption, .project__section, .palette__label, .thanks__name,
.cv__heading, .cv__role, .timeline__own-label {
  text-transform: uppercase;
  letter-spacing: .32em;
}

/* ---------- shared deck motifs ---------- */
.sheet { position: relative; }

/* grey strip on the right with rotated labels (the deck's section rail) */
.rail {
  position: fixed; inset: 0 0 0 auto; z-index: 20;
  view-transition-name: rail;   /* stays put while pages change */
  width: var(--rail);
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding-top: 14px;
  background: var(--rail-bg);
  font: 700 clamp(10px, .62vw, 13px)/1 var(--label);
  text-transform: uppercase;
  letter-spacing: .02em;
  /* menu links are buttons: a tap must not highlight or select the text */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.rail__link {
  writing-mode: vertical-rl;
  rotate: 180deg;
  color: color-mix(in srgb, var(--rail-ink) 55%, var(--rail-bg));
}
.rail__link[aria-current="page"], .rail__link:hover { color: var(--rail-ink); }
/* tap/click feedback: a slight dip and fade while pressed */
.rail__link, .rail__home {
  transition: color .3s var(--ease), scale .35s var(--ease), opacity .35s var(--ease);
}
.rail__link:active, .rail__home:active {
  scale: .97; opacity: .7; color: var(--rail-ink);
  transition-duration: .08s;
}
.rail__home {
  color: var(--slate);
  font: italic 400 clamp(14px, .95vw, 19px)/1 var(--serif);
}

.sheet__label {
  position: absolute; left: 1.8cqw; bottom: 1cqw;
  font: clamp(10px, .7cqw, 15px)/1 var(--label);
  text-transform: uppercase;
  color: var(--rail-ink);
}

/* slate sheets: the deck's texture, a touch darker so light text keeps AA contrast */
.divider, .thanks, .cv__side {
  background:
    linear-gradient(rgb(20 24 34 / .1), rgb(20 24 34 / .1)),
    var(--slate-img) center / cover,
    var(--slate-bg);
  color: var(--cream);
}

/* ---------- images that open in the lightbox ---------- */
.shot {
  position: absolute;
  left: calc(var(--x) * 1cqw);
  top: calc(var(--y) * 1cqw);
  width: calc(var(--w) * 1cqw);
  height: calc(var(--h) * 1cqw);
  overflow: hidden;
  background: var(--tone, transparent);
  cursor: zoom-in;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
.shot--drawing { background: none; }
.shot--drawing img { object-fit: contain; }
@media (hover: hover) {
  .shot:hover img { scale: 1.02; }
}

/* ---------- home: cover (deck P1) ---------- */
.cover {
  /* the 16:9 slide, trimmed evenly top and bottom when the screen is shorter */
  --cover-h: clamp(49.4cqw, 100svh, 56.25cqw);
  --crop: calc((56.25cqw - var(--cover-h)) / 2);
  height: var(--cover-h);
  background: var(--paper-deep);
  overflow: hidden;
}
.cover__art img {
  width: 100%; height: 100%; object-fit: cover;
  animation: settle 1.6s var(--ease) both;
}
.cover__text > * { position: absolute; left: 5.4cqw; animation: rise 1s var(--ease) both; }
.cover__cities {
  top: calc(4.9cqw - var(--crop));
  font: 700 clamp(10px, .87cqw, 22px)/1 var(--sans);
  letter-spacing: .4em;
  color: var(--slate);
  animation-delay: .35s;
}
.cover__name {
  top: calc(20.4cqw - var(--crop));
  display: flex; flex-direction: column;
  font: italic 400 5.6cqw/1.06 var(--serif);
  color: var(--slate);
  animation-delay: .5s;
}
.cover__title {
  top: calc(35cqw - var(--crop));
  font: 600 clamp(13px, 1.34cqw, 34px)/1 var(--sans);
  letter-spacing: .3em;
  color: var(--brown);
  animation-delay: .7s;
}
.cover__types {
  top: calc(49.4cqw - var(--crop));
  font: 400 clamp(10px, .8cqw, 20px)/1.65 var(--sans);
  letter-spacing: .21em;
  color: var(--brown);
  animation-delay: .85s;
}
/* each typology name links to its section: no underline until hovered or focused */
.cover__types a {
  padding-block: .35em; /* a bigger target without moving the lines */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .4s var(--ease), color .3s var(--ease);
}
.cover__types a:hover, .cover__types a:focus-visible { color: var(--slate); background-size: 100% 1px; }

/* ---------- home: contents (deck P3) ---------- */
.contents {
  padding: 4.6cqw calc(var(--rail) + 4.3cqw) 6cqw 5.8cqw;
  background: var(--paper-img) center / cover, var(--paper);
}
.contents__title {
  font: italic 400 clamp(44px, 5.5cqw, 140px)/1 var(--serif);
  color: var(--slate);
}
.contents__meta {
  position: absolute; right: calc(var(--rail) + 4.3cqw); top: 6.3cqw;
  display: grid; gap: .9em; justify-items: end;
  font: 400 clamp(10px, .78cqw, 19px)/1 var(--sans);
  color: var(--grey);
}
.contents__meta b { font-weight: 700; color: var(--brown); }
.contents__cols {
  display: flex; gap: 2.1cqw;
  margin-top: 5.4cqw;
}
.contents__col { flex: 1 1 0; max-width: 26cqw; }
.contents__link { display: block; }
.contents__no {
  display: block;
  font: italic 400 clamp(32px, 3.9cqw, 100px)/1 var(--serif);
  color: var(--slate);
}
.contents__img {
  display: block; overflow: hidden;
  margin-top: 1.7cqw;
  aspect-ratio: 16 / 20;
  background: var(--tone);
}
.contents__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
@media (hover: hover) {
  .contents__link:hover img { scale: 1.03; }
}
.contents__name {
  display: block;
  margin-top: 1.7cqw;
  font: 700 clamp(12px, .95cqw, 24px)/1 var(--sans);
  color: var(--ink);
}
.contents__list {
  margin-top: 1.2cqw;
  font-size: clamp(13px, .8cqw, 20px);
  line-height: 1.5;
  color: var(--brown);
}
.contents__list .no { font-weight: 700; font-size: .85em; }

/* ---------- home: typology divider (deck P4, P9…) ---------- */
.typology { scroll-margin-top: 0; }
.divider { height: 51cqw; overflow: hidden; }
.divider__no {
  position: absolute; left: 4cqw; top: -2.4cqw;
  font: italic 400 25cqw/1 var(--serif);
  color: var(--slate-num);
  user-select: none;
}
.divider__list, .divider__title { position: absolute; left: 4.7cqw; }
.divider__list {
  bottom: 13.6cqw;
  display: grid; gap: .45cqw;
  font-size: clamp(13px, .95cqw, 24px);
}
.divider__list a { display: inline-flex; align-items: baseline; gap: .7em; }
.divider__list .no { width: 1.4em; font-weight: 700; font-size: .85em; color: var(--sand); }
.divider__list .name { font: italic 400 1.65em/1.15 var(--serif); }
.divider__list .sub { font-weight: 300; color: color-mix(in srgb, var(--cream) 85%, var(--slate-bg)); }
.divider__title {
  bottom: 5.3cqw;
  font: 300 clamp(36px, 4.6cqw, 118px)/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.divider__count {
  position: absolute; left: 52.6cqw; top: 2.9cqw;
  font: 700 clamp(10px, .75cqw, 19px)/1 var(--sans);
  word-spacing: .6em;
}
.divider__count span { margin-left: 1.6em; }
.divider__photo {
  position: absolute;
  left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw);
  width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw);
  background: var(--tone);
}
.divider__photo img { width: 100%; height: 100%; object-fit: cover; }
.divider__photo--1::before {   /* the thin frame around the main photo */
  content: ""; position: absolute; inset: -.85cqw;
  border: max(1px, .1cqw) solid var(--cream);
  pointer-events: none;
}
.divider__caption {
  position: absolute; left: 0; top: calc(100% + 1.1cqw);
  font: 700 clamp(9px, .7cqw, 18px)/1 var(--sans);
  white-space: nowrap;
}
.divider__photo--1 .divider__caption { top: calc(100% + 1.8cqw); }

/* project cards under each divider */
.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.4cqw 2.6cqw;
  padding: 5cqw calc(var(--rail) + 5cqw) 7cqw 5cqw;
}
.card a { display: block; color: var(--brown); }
.card__img {
  display: block; overflow: hidden;
  aspect-ratio: 57.8 / 30.8;
  background: var(--tone);
}
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
@media (hover: hover) {
  .card a:hover .card__img img { scale: 1.03; }
}
.card__head { display: flex; align-items: baseline; gap: .6em; margin-top: .7em; }
.card__no { font: 700 clamp(12px, .78cqw, 19px)/1 var(--sans); color: var(--brown); }
.card__title {
  font: italic 400 clamp(26px, 1.9cqw, 48px)/1 var(--serif); color: var(--slate);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.card a:is(:hover, :focus-visible) .card__title { background-size: 100% 1px; }
.card__subtitle {
  display: block; margin-top: .3em;
  font: italic 700 clamp(14px, .92cqw, 22px)/1.2 var(--sans);
}

/* ---------- slate "thank you" (deck P31) ---------- */
.thanks {
  position: relative;
  min-height: 44cqw;
  padding: 12cqw 0 6cqw 6cqw;
  overflow: hidden;
}
.thanks__word {
  width: fit-content;   /* so the write-on wipe follows the letters */
  font: italic 400 clamp(52px, 6.4cqw, 160px)/1 var(--serif);
  color: var(--beige);
}
.thanks__contact {
  margin-top: 4.4cqw;
  display: grid; justify-items: start; gap: .4em;
  font: 400 clamp(14px, .95cqw, 24px)/1.3 var(--sans);
}
.thanks__name {
  margin-bottom: .9em;
  font: 700 clamp(11px, .8cqw, 20px)/1 var(--sans);
}
.thanks__art {
  position: absolute; right: calc(var(--rail) + 2.5cqw); top: 2cqw;
  width: auto; height: calc(100% - 4cqw); max-width: 34cqw;
  object-fit: contain;
}
.thanks__legal {
  position: absolute; left: 6cqw; bottom: 2.4cqw;
  font: clamp(11px, .65cqw, 14px)/1 var(--label);
  color: color-mix(in srgb, var(--cream) 75%, var(--slate-bg));
}

/* ---------- project sheet (deck P5…P30) ---------- */
.project { min-height: 56.25cqw; padding-bottom: 4cqw; display: flow-root; }
.project__media, .project__thumbs { display: contents; }
.project__section {
  position: absolute; left: 2.3cqw; top: 3.3cqw;
  display: flex; gap: 3em;
  font: 400 clamp(10px, .78cqw, 19px)/1 var(--sans);
  color: var(--grey);
}
.project__section b { font-weight: 700; color: var(--slate); }
.project__stages {
  position: absolute; left: 0; width: 57.6cqw; top: 52.4cqw;
  text-align: right;
  font: italic 400 clamp(11px, .72cqw, 17px)/1 var(--sans);
  text-transform: lowercase;
  color: var(--grey);
}
.project__no {
  position: absolute; left: 58.2cqw; top: 31.6cqw;
  font: italic 400 12.4cqw/1 var(--serif);
  color: var(--beige);
  user-select: none;
}
.palette { position: absolute; left: 58.5cqw; top: 48.2cqw; }
.palette__label {
  font: 700 clamp(9px, .62cqw, 15px)/1 var(--sans);
  color: var(--ink);
}
.palette__dots { display: flex; gap: .55cqw; margin-top: .9cqw; }
.palette__dots li {
  position: relative;
  width: clamp(14px, 1.55cqw, 38px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 max(1px, .1cqw) color-mix(in srgb, var(--c) 60%, var(--paper));
}
@media (hover: hover) {   /* hovering a dot shows its colour code */
  .palette__dots li { transition: scale .35s var(--ease); }
  .palette__dots li::after {
    content: attr(data-hex) / "";   /* the hidden span already reads it out */
    position: absolute; left: 50%; top: calc(100% + .7em);
    translate: -50% 4px; opacity: 0;
    font: 600 clamp(9px, .6cqw, 13px)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
    color: var(--grey); white-space: nowrap; pointer-events: none;
    transition: opacity .3s var(--ease), translate .3s var(--ease);
  }
  .palette__dots li:hover { scale: 1.12; }
  .palette__dots li:hover::after { opacity: 1; translate: -50% 0; }
}
.project__text {
  position: relative; z-index: 1;
  margin-left: 74cqw;
  width: 20.6cqw;
  padding-top: 30.4cqw;
}
.project__title {
  font: italic 400 clamp(34px, 2.6cqw, 66px)/1 var(--serif);
  color: var(--slate);
}
.project__subtitle {
  margin-top: .35em;
  font: italic 700 clamp(16px, 1.05cqw, 26px)/1.15 var(--sans);
  color: var(--brown);
}
.project__text > p:not(.project__subtitle) {
  margin-top: 1em;
  font-size: clamp(15px, .93cqw, 21px);
  line-height: 1.3;
  text-align: justify;
  hyphens: auto;
}
.project__subtitle + p { margin-top: 2.4em !important; }

.facts {
  margin-top: 2.2em;
  display: grid; gap: .55em;
  font-size: clamp(13px, .78cqw, 18px);
}
.facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 1em; }
.facts dt {
  font: 700 clamp(9px, .58cqw, 13px)/1.7 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--slate);
}
.facts dd { font-style: italic; }

.pager {
  margin-top: 2.6em;
  display: flex; justify-content: space-between; gap: 1em;
  font: clamp(10px, .66cqw, 14px)/1 var(--label);
  text-transform: uppercase;
  color: var(--rail-ink);
}
.pager span, .sheet__label span { display: inline-block; transition: translate .35s var(--ease); }
.pager a[rel="next"]:hover span, .sheet__label:hover span { translate: 4px 0; }
.pager a[rel="prev"]:hover span { translate: -4px 0; }

/* narrower desktops: give the text column more room */
@container (max-width: 1500px) {
  .project__text { margin-left: 68.5cqw; width: 26.5cqw; }
  .project__no { font-size: 9.4cqw; top: 33.4cqw; }
  .palette__dots { gap: .4cqw; }
  .palette__dots li { width: 1.3cqw; min-width: 12px; }
}

/* ---------- curriculum (deck P2) ---------- */
.cv {
  display: grid;
  grid-template-columns: 22.4cqw 1fr;
  min-height: 56.25cqw;
}
.cv__side {
  display: flex; flex-direction: column; gap: 2.2cqw;
  padding: 3.4cqw 2.6cqw 3.6cqw 3cqw;
  font-size: clamp(13px, .82cqw, 20px);
  line-height: 1.45;
}
.cv__name { display: grid; gap: .25em; font: 300 clamp(26px, 2.3cqw, 58px)/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.cv__name b { font-weight: 700; font-size: .78em; letter-spacing: .26em; }
.cv__role { font-size: .9em; line-height: 1.6; letter-spacing: .4em; color: var(--sand); }
.cv__bio { display: grid; gap: .6em; color: color-mix(in srgb, var(--cream) 82%, var(--slate-bg)); }
.cv__block:first-of-type { margin-top: auto; padding-top: 1.4cqw; }
.cv__heading { font: 700 clamp(11px, .8cqw, 20px)/1 var(--sans); letter-spacing: .45em; color: var(--sand); }
.cv__heading--minor { margin-top: 1.8em; }
.cv__langs { display: grid; gap: .6em; margin-top: 1.3em; }
.cv__langs div { display: flex; justify-content: space-between; gap: 1em; }
.chips { display: flex; flex-wrap: wrap; gap: .55em; margin-top: 1.3em; }
.chips li { padding: .35em .9em; border: 1.5px solid color-mix(in srgb, var(--cream) 70%, var(--slate-bg)); letter-spacing: .06em; }
.cv__certs { display: grid; gap: .3em; margin-top: 1em; font-size: .92em; }

.cv__main {
  padding: 3.6cqw calc(var(--rail) + 2.6cqw) 4cqw 2.6cqw;
  color: var(--grey);
  font-size: clamp(12px, .78cqw, 19px);
  line-height: 1.3;
}
.cv__heading--main { color: var(--brown); }
.cv a:hover { color: var(--slate); }
.cv__side a:hover { color: #fff; }

/* timeline: ten year columns; rows = milestone, year, projects, independent projects */
.timeline {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  margin-top: 1.8cqw;
}
.timeline__years { display: contents; }
.timeline::before {   /* the axis */
  content: ""; grid-column: 1 / -1; grid-row: 2;
  height: max(2px, .14cqw); margin-top: calc(.6cqw - 1px);
  background: var(--slate);
}
.timeline::after {    /* the "independent projects" band */
  content: ""; grid-column: 1 / -1; grid-row: 4;
  margin-top: .8cqw;
  background: var(--beige-light);
  z-index: -1;
}
.year { display: grid; grid-column: var(--col); grid-row: 1 / -1; grid-template-rows: subgrid; }
.year__head { display: contents; }   /* milestone + year; one sticky block on smaller screens */
.year__milestone {
  margin: 0 .5cqw .9cqw 0; padding: .7em .8em;
  background: var(--beige);
  color: var(--brown); font-weight: 600; line-height: 1.2;
}
.year__milestone--empty { background: none; }
.year--now .year__milestone { background: var(--brown); color: var(--cream); }
.year__label {
  position: relative;
  padding-top: 2.1cqw;
  font: 700 clamp(13px, 1.05cqw, 26px)/1 var(--sans);
  letter-spacing: .14em;
  color: var(--ink);
}
.year__label::before {   /* dot on the axis: filled for milestones */
  content: ""; position: absolute; left: .1cqw; top: 0;
  width: 1.2cqw; min-width: 11px; aspect-ratio: 1; border-radius: 50%;
  translate: 0 calc(-50% + .67cqw);
  background: var(--paper);
  border: max(1.5px, .14cqw) solid var(--slate);
}
.year--milestone .year__label::before { background: var(--brown); border-color: var(--brown); }
.year__jobs, .year__own { display: grid; align-content: start; gap: .8em; padding: 1.6cqw .6cqw .8cqw 0; }
.year__jobs { border-right: 1px dashed color-mix(in srgb, var(--grey) 45%, var(--paper)); margin-right: .4cqw; }
.year:last-child .year__jobs { border-right: 0; }
.year__own { grid-row: 4; padding-top: 1.8cqw; padding-bottom: 1cqw; }
.job { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; }   /* only long words like "refurbishment" */
.job h4 { font-weight: 700; color: var(--ink); }
.job__years::before { content: "· "; }
.timeline__own-label {
  grid-column: 1 / 6; grid-row: 4; align-self: end;
  padding: 0 0 1.2cqw 1.2cqw;
  font: 700 clamp(10px, .78cqw, 19px)/1 var(--sans);
  letter-spacing: .45em;
  color: var(--brown);
}

.education { margin-top: 2.6cqw; padding-top: 2cqw; border-top: 1px solid var(--beige); }
.education__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 3cqw;
  margin-top: 1.4cqw;
}
.education__list li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1em;
  padding: 1em 0;
}
.education__list li:not(:nth-child(3n + 1)) { border-top: 1px solid var(--beige); }
.education__list h3 { font: 700 1.1em/1.25 var(--sans); color: var(--ink); }
.education__list p:not(.education__years) { grid-column: 1; }
.education__years { grid-column: 2; grid-row: 1; color: color-mix(in srgb, var(--grey) 80%, var(--paper)); }

/* ---------- 404 ---------- */
.missing { min-height: 70vh; display: grid; place-content: center; gap: 1.5em; text-align: center; color: var(--brown); }
.missing__title { font: italic 400 clamp(40px, 4cqw, 90px)/1 var(--serif); color: var(--slate); }

/* ---------- lightbox ---------- */
.lightbox {
  --max-h: calc(100dvh - 120px);   /* tallest a picture may be */
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  color: var(--brown);
  opacity: 0;
  transition: opacity .35s var(--ease), overlay .35s allow-discrete, display .35s allow-discrete;
}
.lightbox[open] { opacity: 1; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: transparent; }
.lightbox figure {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 56px 72px 28px;
  touch-action: pan-y;        /* vertical scroll stays native; sideways drags are the swipe */
}
.lightbox img {
  -webkit-user-drag: none; user-select: none;
  /* sized from the picture's aspect ratio, so a small preview and the full file fill the same box */
  width: min(100%, var(--max-h) * var(--ar, 1.5));
  height: auto; aspect-ratio: var(--ar, auto);
  object-fit: contain;
  transition: opacity .3s var(--ease), scale .5s var(--ease), translate .35s var(--ease);
}
.lightbox[open] img { scale: 1; }
@starting-style { .lightbox[open] img { scale: .97; } }
.lightbox img.is-waiting { opacity: 0; }
.lightbox figcaption {
  max-width: 70ch; text-align: center;
  font: italic 400 15px/1.3 var(--sans);
}
.lightbox button {
  position: absolute;
  width: 48px; height: 48px;
  border: 0; background: none; color: var(--brown);
  font: 300 34px/1 var(--sans);
  cursor: pointer;
}
.lightbox__close { top: 10px; right: 14px; }
.lightbox__prev { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 12px; top: 50%; translate: 0 -50%; }

/* ---------- motion ---------- */
@keyframes settle { from { opacity: 0; scale: 1.025; } }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }

.js [data-reveal] {
  opacity: 0;
  translate: 0 12px;
  transition: opacity .8s var(--ease), translate .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; translate: none; }
}

/* =========================================================
   Smaller screens (secondary): stacked layouts
   ========================================================= */
/* Mid-size screens: the ten-column timeline no longer fits beside the sidebar,
   so each year becomes a row (year + milestone | its projects) */
@media (max-width: 1359px) {
  .cv { grid-template-columns: clamp(260px, 22.4cqw, 320px) 1fr; }
  .cv__main { font-size: 14px; line-height: 1.35; }
  .timeline { display: block; margin-top: 28px; }
  .timeline::before { position: absolute; left: 6px; top: 8px; bottom: 0; width: 2px; height: auto; margin: 0; }
  .timeline::after, .timeline__own-label, .year__milestone--empty { display: none; }
  .timeline__years { display: grid; }
  .year {
    display: grid; grid-column: auto; grid-row: auto;
    grid-template-columns: minmax(150px, 13rem) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "head jobs" ". own";
    column-gap: 32px;
    padding: 0 0 28px 34px;
  }
  .year + .year {   /* rule between years, kept clear of the axis */
    padding-top: 28px;
    background: linear-gradient(var(--beige), var(--beige)) 34px 0 / calc(100% - 34px) 1px no-repeat;
  }
  /* the year and its milestone stay in view while its projects scroll past */
  .year__head {
    grid-area: head; align-self: start;
    display: grid; justify-items: start; gap: 12px;
    position: sticky; top: 24px; z-index: 1;
  }
  .year__label { order: -1; padding-top: 0; font-size: 18px; }
  .year__label::before { left: -34px; top: 50%; translate: 0 -50%; width: 14px; }
  .year__milestone { margin: 0; }
  .year__jobs, .year__own {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px 28px; padding: 0; border: 0; margin: 0;
  }
  .year__jobs { grid-area: jobs; }
  .year__own { grid-area: own; margin-top: 18px; padding: 14px 16px 16px; background: var(--beige-light); }
  .year__own::before { content: "Independent work"; grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--brown); }
}

@media (max-width: 1100px) {
  .works__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 28px; }
  .contents__cols { flex-wrap: wrap; row-gap: 40px; }
  .contents__col { flex: 1 1 calc(33% - 2.1cqw); max-width: none; }

  /* CV: side panel on top (the year rows come from the 1359px block) */
  .cv { display: block; }
  .cv__side { padding: 48px calc(var(--rail) + 32px) 48px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
  .cv__name, .cv__role, .cv__contact, .cv__bio { grid-column: 1; }
  .cv__block:first-of-type { grid-column: 2; grid-row: 1 / 3; margin-top: 0; padding-top: 0; }
  .cv__block { grid-column: 2; }
  .cv__main { padding: 48px calc(var(--rail) + 32px) 64px 32px; font-size: 15px; }
  .education__list { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .education__list li:not(:nth-child(3n + 1)) { border-top: 0; }
  .education__list li { border-top: 1px solid var(--beige); }
  .education { margin-top: 48px; padding-top: 28px; }
}

@container (max-width: 1000px) {
  .project {
    display: flex; flex-direction: column;
    min-height: 0;
    padding: 28px 0 72px;
  }
  .project__section { position: static; order: 0; padding-inline: 20px; margin-bottom: 18px; gap: 2em; }
  .project__no { position: static; order: 1; padding-inline: 20px; font-size: 76px; line-height: .9; }
  .project__text { display: contents; }
  .project__title { order: 2; padding-inline: 20px; }
  .project__subtitle { order: 3; padding-inline: 20px; margin-bottom: 24px; }
  .project__media { order: 4; display: block; }
  .project__text > p:not(.project__subtitle) { order: 5; padding-inline: 20px; max-width: 68ch; }
  .project__subtitle + p { margin-top: 24px !important; }
  .palette { order: 6; position: static; padding: 28px 20px 0; }
  .palette__dots li { width: 22px; }
  .palette__dots { gap: 8px; margin-top: 10px; }
  .facts { order: 7; padding-inline: 20px; }
  .shot--drawing { order: 8; }
  .pager { order: 9; padding-inline: 20px; margin-top: 40px; }

  .shot { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: var(--w) / var(--h); }
  .project__thumbs {
    display: flex; gap: 8px;
    margin-top: 8px; padding-inline: 0 20px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .project__thumbs::-webkit-scrollbar { display: none; }
  .shot--thumb { flex: none; width: auto; height: 46cqw; scroll-snap-align: start; }
  .project__stages { position: static; width: auto; padding: 12px 20px 0; }
  .shot--drawing { margin: 48px 20px 0; width: auto; }
  .sheet__label { display: none; }
}

@media (max-width: 760px) {
  /* rail becomes a top bar */
  .rail {
    position: sticky; inset: 0 auto auto 0;
    width: 100%; height: 48px;
    flex-direction: row; justify-content: flex-end; gap: 22px;
    padding: 0 20px;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rail-bg);
    font-size: 11px;
  }
  .rail__home { margin-right: auto; font-size: 18px; }
  .rail__link { writing-mode: horizontal-tb; rotate: none; }

  /* cover: the lettering on paper, then the drawing on slate */
  .cover { height: auto; display: flex; flex-direction: column; background: var(--paper-img) center / cover, var(--paper-deep); }
  .cover__text { order: -1; display: grid; gap: 14px; padding: 36px 20px 40px; }
  .cover__text > * { position: static; }
  .cover__cities { font-size: 10px; letter-spacing: .3em; }
  .cover__name { margin-top: 26px; font-size: clamp(46px, 15vw, 72px); }
  .cover__title { font-size: 14px; margin-top: 4px; }
  .cover__types { margin-top: 22px; font-size: 10.5px; letter-spacing: .16em; }
  .cover__art img { height: auto; aspect-ratio: 1.07; }

  .contents { padding: 48px 20px 56px; }
  .contents__meta { position: static; justify-items: start; margin-top: 18px; gap: .7em; font-size: 10.5px; }
  .contents__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 16px; margin-top: 36px; }
  .contents__col { max-width: none; }
  .contents__no { font-size: 34px; }
  .contents__img, .contents__name { margin-top: 12px; }
  .contents__name { font-size: 12px; letter-spacing: .24em; }
  .contents__list { margin-top: 8px; font-size: 14px; }

  .divider { height: auto; display: flex; flex-direction: column; padding: 8px 20px 48px; }
  .divider__no, .divider__list, .divider__title, .divider__count, .divider__photo { position: static; }
  .divider__no { order: 0; font-size: 150px; line-height: .95; }
  .divider__title { order: 1; margin-top: 4px; font-size: clamp(30px, 10vw, 44px); }
  .divider__list { order: 2; margin-top: 22px; gap: 6px; font-size: 14px; }
  .divider__count { order: 3; margin-top: 36px; font-size: 10px; }
  .divider__photos { order: 4; display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-top: 18px; }
  .divider__photo { width: auto; height: auto; }
  .divider__photo--1 { grid-row: span 2; aspect-ratio: 22.6 / 40.5; }
  .divider__photo--1::before { inset: -6px; border-width: 1px; }
  .divider__caption { display: none; }

  .works__grid { grid-template-columns: 1fr; gap: 44px; padding: 40px 20px 64px; }

  .thanks { min-height: 0; padding: 56px 20px 64px; }
  .thanks__contact { margin-top: 32px; }
  .thanks__art { position: static; width: 72%; height: auto; max-width: none; margin: 36px 0 0 auto; }
  .thanks__legal { position: static; margin-top: 32px; }

  /* viewer: full-width pictures, arrows below them */
  .lightbox { --max-h: calc(100dvh - 160px); }
  .lightbox figure { padding: 56px 0 76px; }
  .lightbox figcaption { padding-inline: 20px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 14px; translate: none; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }

  .cv__side { display: flex; padding: 40px 20px; }
  .cv__block:first-of-type { margin-top: 12px; }
  .cv__main { padding: 40px 20px 64px; }
  .year { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: none; row-gap: 12px; }
  .year__head { display: contents; }   /* only the year sticks here; milestones would take too much of the screen */
  .year__label {   /* full-width bar under the top bar, so projects slide beneath it */
    justify-self: stretch; align-self: start;
    position: sticky; top: 48px; z-index: 1;
    margin-left: -34px; padding: 10px 0 10px 34px;
    background: var(--paper);
  }
  .year__milestone { justify-self: start; }
  .year__label::before { left: 0; }
  .year__jobs, .year__own { grid-area: auto; }
  .year__jobs { margin-top: 4px; }
  .year__own { margin-top: 6px; }
  .education__list { grid-template-columns: 1fr; }
}

/* =========================================================
   Motion extras. Every hidden starting state lives inside
   prefers-reduced-motion: no-preference, so reduced motion
   (and browsers without the feature) simply show everything.
   ========================================================= */
@keyframes fade { from { opacity: 0; } }
@keyframes rise-far { from { opacity: 0; translate: 0 4cqw; } }
@keyframes pop { from { opacity: 0; scale: .5; } }
@keyframes progress-y { from { scale: 1 0; } }
@keyframes progress-x { from { scale: 0 1; } }
@keyframes drift { from { translate: 0 calc(var(--drift) * -1); } to { translate: 0 var(--drift); } }
@keyframes slide-out { to { opacity: 0; translate: calc(var(--dir) * -40px) 0; } }
@keyframes slide-in { from { opacity: 0; translate: calc(var(--dir) * 40px) 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* in-page links (Contents → typology) glide */
  html { scroll-behavior: smooth; }

  /* lazy pictures fade in over their tone colour instead of popping */
  .js img[loading="lazy"]:not([data-reveal]) { transition: opacity .6s var(--ease), scale .9s var(--ease); }
  /* (not the card pictures that morph into a project's hero: they must be there when the page is captured) */
  .js img[loading="lazy"]:not([data-reveal], [style*="view-transition-name"], .is-loaded) { opacity: 0; }

  /* project to project: "next" slides in from the right, "previous" from the left */
  html:active-view-transition-type(forward) { --dir: 1; }
  html:active-view-transition-type(backward) { --dir: -1; }
  html:active-view-transition-type(forward, backward)::view-transition-old(*) { animation: slide-out .45s var(--ease) both; }
  html:active-view-transition-type(forward, backward)::view-transition-new(*) { animation: slide-in .45s var(--ease) both; }
  html:active-view-transition-type(forward, backward)::view-transition-old(rail),
  html:active-view-transition-type(forward, backward)::view-transition-new(rail) { animation: none; }

  /* project sheet entrance: number, words, palette, drawing (fill backwards, so hover styles still apply after) */
  .project__section { animation: fade .8s var(--ease) .1s backwards; }
  .project__no { animation: rise-far 1.2s var(--ease) .2s backwards; }
  .project__text > * { animation: rise .8s var(--ease) backwards; }
  .project__text > :nth-child(1) { animation-delay: .25s; }
  .project__text > :nth-child(2) { animation-delay: .32s; }
  .project__text > :nth-child(3) { animation-delay: .39s; }
  .project__text > :nth-child(4) { animation-delay: .46s; }
  .project__text > :nth-child(5) { animation-delay: .53s; }
  .project__text > :nth-child(n + 6) { animation-delay: .6s; }
  .palette__label { animation: fade .6s var(--ease) .45s backwards; }
  .palette__dots li { animation: pop .55s var(--ease) backwards; animation-delay: calc(.55s + var(--k, 0) * 80ms); }
  .project__thumbs .shot, .project__stages { animation: fade .9s var(--ease) .35s backwards; }
  .shot--drawing { animation: fade 1.2s var(--ease) .6s backwards; }

  /* divider photos are unveiled from the top, one after another */
  .js [data-reveal="unveil"] { translate: none; transition: opacity .5s var(--ease); transition-delay: calc(var(--i, 0) * 160ms); }
  .js .divider__photo[data-reveal] img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.2s cubic-bezier(.6, 0, .2, 1), opacity .6s var(--ease);
    transition-delay: calc(.15s + var(--i, 0) * 160ms);
  }
  .js .divider__photo[data-reveal].is-in img { clip-path: inset(0); }

  /* "Thank you" is written on, then the engraving surfaces. The wipe sits on the inner span:
     IntersectionObserver applies the target's own clip-path, so a clipped target may never report in. */
  .js [data-reveal="write"] { translate: none; opacity: 1; }
  .js [data-reveal="write"] > span {
    display: block;
    clip-path: inset(-20% 100% -20% -5%);
    transition: clip-path 1.5s cubic-bezier(.45, 0, .15, 1) .1s;
  }
  .js [data-reveal="write"].is-in > span { clip-path: inset(-20% -5% -20% -5%); }
  .js .thanks__art[data-reveal] { transition-duration: 1.4s; transition-delay: .6s; }

  /* curriculum: the axis draws itself, the years drop onto it, then the milestones */
  .js .timeline[data-reveal]::before { scale: 0 1; transform-origin: left; transition: scale 1.4s var(--ease) .2s; }
  .js .timeline[data-reveal] .year__label::before { scale: 0; transition: scale .5s var(--ease); transition-delay: calc(.3s + var(--col, 1) * 100ms); }
  .js .timeline[data-reveal] .year__milestone { opacity: 0; transition: opacity .7s var(--ease); transition-delay: calc(.5s + var(--col, 1) * 100ms); }
  @media (max-width: 1359px) { .js .timeline[data-reveal]::before { scale: 1 0; transform-origin: top; } }
  .js .timeline.is-in::before { scale: 1; }
  .js .timeline.is-in .year__label::before { scale: 1; }
  .js .timeline.is-in .year__milestone { opacity: 1; }
}

/* scroll-driven extras (Chrome, Safari 26+); other browsers just don't get them */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* reading progress along the rail */
    .rail::after {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
      background: var(--brown); transform-origin: top;
      animation: progress-y linear both; animation-timeline: scroll(root);
    }
    @media (max-width: 760px) {
      .rail::after { top: auto; right: 0; bottom: -1px; width: auto; height: 2px; transform-origin: left; animation-name: progress-x; }
    }

    /* slate dividers: the big numeral lags behind the page a little */
    @media (min-width: 761px) {
      .divider__no { --drift: 1.6cqw; animation: drift linear both; animation-timeline: view(); }
    }

    /* curriculum year rows: the axis fills in as you read down the years */
    @media (max-width: 1359px) {
      .timeline::after {
        display: block; content: "";
        position: absolute; left: 6px; top: 8px; bottom: 0; width: 2px; margin: 0;
        background: var(--brown); z-index: 0;
        transform-origin: top;
        animation: progress-y linear both; animation-timeline: view(); animation-range: cover 10% cover 90%;
      }
    }
  }
}

/* ---------- selections (generated by build.mjs from content/site.json) ---------- */
html[data-sel]:not([data-sel~="commercial"]) [data-typology="commercial"],
html[data-sel]:not([data-sel~="residential"]) [data-typology="residential"],
html[data-sel]:not([data-sel~="landscape"]) [data-typology="landscape"],
html[data-sel]:not([data-sel~="industrial"]) [data-typology="industrial"],
html[data-sel]:not([data-sel~="cultural"]) [data-typology="cultural"] { display: none !important; }
html:not([data-ref]) [data-v]:not([data-v="*"]) { display: none !important; }
html[data-ref="k4"] [data-v]:not([data-v="*"], [data-v="k4"]),
html[data-ref="k4"] [data-v="*"]:has(~ [data-v="k4"]) { display: none !important; }
html[data-ref="m7"] [data-v]:not([data-v="*"], [data-v="m7"]),
html[data-ref="m7"] [data-v="*"]:has(~ [data-v="m7"]) { display: none !important; }
html[data-ref="a2"] [data-v]:not([data-v="*"], [data-v="a2"]),
html[data-ref="a2"] [data-v="*"]:has(~ [data-v="a2"]) { display: none !important; }