@charset "UTF-8";

@font-face{
  font-family:'Inria Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inria-serif/inria-serif-v18-latin-ext-italic-400.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;
}
@font-face{
  font-family:'Inria Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inria-serif/inria-serif-v18-latin-italic-400.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;
}
@font-face{
  font-family:'Inria Serif';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/inria-serif/inria-serif-v18-latin-ext-300.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;
}
@font-face{
  font-family:'Inria Serif';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/inria-serif/inria-serif-v18-latin-300.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;
}
@font-face{
  font-family:'Inria Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inria-serif/inria-serif-v18-latin-ext-regular.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;
}
@font-face{
  font-family:'Inria Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inria-serif/inria-serif-v18-latin-regular.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;
}
@font-face{
  font-family:'Inria Serif';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/inria-serif/inria-serif-v18-latin-ext-700.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;
}
@font-face{
  font-family:'Inria Serif';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/inria-serif/inria-serif-v18-latin-700.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;
}

/* ===========================================================
   PORTFOLIO — sistema de diseño
   Concepto: el "datum" — la línea de tierra que en toda sección
   arquitectónica marca el nivel del suelo. Aquí es el elemento
   gráfico recurrente: un hairline grueso bajo cada título, del
   que "cuelga" o sobre el que "se apoya" la tipografía, como un
   edificio dibujado en sección.
   =========================================================== */

:root{
  --paper: #ffffff;
  --paper-dim: #f7f7f5;
  --ink: #14140f;
  --graphite: #6b6a62;
  --graphite-light: #9c9a90;
  --line: #e5e2dc;
  --line-strong: #14140f;
  --terra: #a9552e;
  --aire: #66808f;

  --serif: 'Inria Serif', Georgia, serif;
  --sans: 'Inria Serif', Georgia, serif;
  --mono: 'Inria Serif', Georgia, serif;

  --wrap: 1240px;
  --gutter: clamp(24px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
picture{ display:block; max-width:100%; }
.card-figure picture,
.p-photo picture,
.figure-frame picture{
  width:100%;
  height:100%;
  background:var(--paper);
}

a{ color:inherit; text-decoration:none; }

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- layout shell ---------- */
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}
.nav-mark{
  display:inline-flex;
  align-items:center;
  width:clamp(170px, 18vw, 238px);
  max-width:48vw;
}
.nav-mark img{
  width:100%;
  height:auto;
}
.nav-links{
  display:flex;
  gap:clamp(18px,3vw,40px);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--graphite);
}
.nav-links a{ position:relative; padding-bottom:3px; transition:color .25s; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s ease;
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- the datum line — signature element ---------- */
.datum{
  border:none;
  border-top:2px solid var(--line-strong);
  margin:0;
}
.datum-thin{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

.section-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--graphite);
  display:flex;
  align-items:center;
  gap:10px;
}
.section-label::before{
  content:"";
  width:6px; height:6px;
  background:var(--terra);
  border-radius:50%;
  display:inline-block;
}

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  border-top:2px solid var(--line-strong);
  margin-top:96px;
  padding:clamp(44px,7vw,84px) 0 34px;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("images/brand/logo-horizontal-jaime.png") left 50% center / min(82vw, 920px) auto no-repeat;
  opacity:0.08;
  pointer-events:none;
}
.footer-main{
  position:relative;
  z-index:1;
  min-height:clamp(150px,22vw,260px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:clamp(32px,6vw,88px);
}
.footer-brand{
  flex:0 0 auto;
}
.footer-brand img{
  width:clamp(112px, 14vw, 178px);
  height:auto;
  opacity:1;
  filter:none;
}
.footer-contact{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:end;
  gap:10px;
  font-family:var(--mono);
  font-size:clamp(18px,2.7vw,34px);
  line-height:1.05;
  letter-spacing:0.06em;
  text-align:right;
  text-transform:uppercase;
}
.footer-label{
  margin-bottom:12px;
  font-size:12px;
  color:var(--graphite-light);
}
.footer-contact a{
  color:var(--ink);
  border-bottom:1px solid transparent;
}
.footer-contact a:hover{ border-color:var(--ink); }
.footer-bottom{
  position:relative;
  z-index:1;
  font-family:var(--mono);
  font-size:11px;
  color:var(--graphite-light);
  margin-top:clamp(28px,4vw,54px);
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
}

/* ---------- home ---------- */
.hero{
  height:calc(100svh - 76px);
  max-height:none;
  padding:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
}
.hero-layout{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  width:100%;
  height:100%;
  max-width:none;
  padding:0;
}
.hero-brand{
  display:block;
  width:100vw;
  height:100%;
  max-width:none;
}
.hero-brand img{
  display:block;
  width:100%;
  height:100%;
  max-height:100%;
  object-fit:cover;
  object-position:center top;
}
.hero-copy{
  padding-bottom:clamp(12px,2svh,28px);
}
.hero-kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--graphite);
  margin:0 0 clamp(18px,4svh,34px);
}
.hero-statement{
  font-family:var(--serif);
  font-weight:300;
  font-size:112px;
  line-height:0.86;
  margin:0;
}
.hero-statement span{ display:block; }
.hero-sub{
  max-width:430px;
  margin:clamp(18px,3svh,28px) 0 0;
  color:var(--graphite);
  font-size:16px;
  line-height:1.62;
}
.hero-tags{
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:clamp(48px,7svh,76px);
  display:flex;
  flex-direction:row;
  justify-content:center;
  gap:clamp(14px,3vw,28px);
  margin-top:0;
  font-family:var(--mono);
  font-size:12px;
  color:var(--graphite);
  letter-spacing:0.04em;
}
.hero-tags b{ color:var(--ink); font-weight:500; }
.hero-archive{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:minmax(76px, 8.8svh);
  gap:10px;
  align-items:stretch;
  padding-bottom:clamp(12px,2svh,24px);
}
.hero-tile{
  position:relative;
  display:block;
  grid-column:span 2;
  overflow:hidden;
  background:#f7f7f2;
  border:1px solid var(--line);
  color:inherit;
}
.hero-tile-large{
  grid-column:1 / span 3;
  grid-row:1 / span 3;
}
.hero-tile-wide{
  grid-column:4 / span 3;
}
.hero-tile picture,
.hero-tile img{
  width:100%;
  height:100%;
}
.hero-tile img{
  object-fit:contain;
  padding:clamp(12px,1.5vw,22px);
  filter:saturate(0.92);
  transition:transform .65s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
.hero-tile:hover img{
  transform:scale(1.035);
  filter:saturate(1);
}
.tile-index,
.tile-title{
  position:absolute;
  z-index:2;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--graphite);
  background:rgba(255,255,255,0.84);
}
.tile-index{
  top:10px;
  left:10px;
  padding:4px 7px;
}
.tile-title{
  right:10px;
  bottom:10px;
  max-width:calc(100% - 20px);
  padding:5px 8px;
  text-align:right;
}
.hero-baseline{
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:clamp(18px,3svh,32px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--graphite);
}
.hero-baseline a{
  color:var(--ink);
  border-bottom:1px solid var(--ink);
}

.index-section{ padding-top:22px; }
.index-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 0;
}
.index-count{
  font-family:var(--mono);
  font-size:12px;
  color:var(--graphite-light);
}
.project-card{
  display:grid;
  grid-template-columns:minmax(190px, 0.42fr) minmax(0, 1fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  padding:44px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
.project-card:first-of-type{ border-top:1px solid var(--line); }
.card-figure{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  aspect-ratio:4/3;
}
.card-figure img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:22px;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.project-card:hover .card-figure img{ transform:scale(1.04); }
.card-figure .card-hint{
  position:absolute;
  bottom:12px;
  right:12px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--graphite);
  background:var(--paper);
  border:1px solid var(--line);
  padding:6px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.project-card:hover .card-hint{ opacity:1; transform:translateY(0); }
.card-hint .arrow{ transition:transform .3s ease; }
.project-card:hover .card-hint .arrow{ transform:translateX(4px); }
.card-body .card-eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--graphite-light);
  margin:0 0 14px;
}
.card-body .card-name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(28px,4vw,52px);
  line-height:1.05;
  margin:0 0 18px;
  transition:color .25s;
}
.project-card:hover .card-name{ color:var(--terra); }
.card-body .card-desc{
  font-family:var(--sans);
  color:var(--graphite);
  font-size:15.5px;
  line-height:1.75;
  max-width:58ch;
  margin:0 0 22px;
}
.card-meta-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--graphite);
}
.card-meta-list dt{ color:var(--graphite-light); display:inline; }
.card-meta-list div{ display:flex; gap:6px; }
.coming-next{
  padding:36px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  opacity:0.4;
}
.coming-next .card-name{
  font-style:italic;
  font-weight:300;
  font-size:22px;
  margin:0;
}

/* ---------- project pages ---------- */
.back-link{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--graphite);
}
.back-link:hover{ color:var(--ink); }
.p-hero{ padding:56px 0 0; }
.p-eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--graphite);
  margin:0 0 22px;
}
.p-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(34px,6vw,72px);
  line-height:1.06;
  letter-spacing:-0.01em;
  margin:0;
}
.project-terra .p-title{
  font-size:clamp(38px,7vw,88px);
  line-height:1.02;
}
.p-title em,
.p-title .terra{
  color:var(--terra);
  font-style:italic;
  font-weight:400;
}
.p-title .aire{
  color:var(--aire);
  font-style:italic;
  font-weight:400;
}
.p-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(28px,5vw,64px);
  padding:40px 0 36px;
}
.p-meta-item dt{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--graphite-light);
  margin:0 0 6px;
}
.p-meta-item dd{
  font-family:var(--sans);
  font-size:15px;
  margin:0;
  max-width:26ch;
}
.p-photo{
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
}
.project-page .p-photo{
  max-height:calc(100svh - 150px);
  background:var(--paper);
}
.p-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.project-terra .p-photo{
  background:var(--paper);
  border:1px solid var(--line);
}
.project-terra .p-photo img{ object-fit:cover; }
.p-photo-cap{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--graphite);
  padding:12px 0 0;
}
.p-intro{
  padding:72px 0 40px;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(32px,6vw,80px);
}
.p-intro-label{ padding-top:6px; }
.p-intro-label .p-photo{ margin-top:20px; max-width:280px; }
.p-intro-text p{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(21px,2.4vw,28px);
  line-height:1.45;
  margin:0 0 22px;
  color:var(--ink);
}
.p-intro-text p.small{
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  color:var(--graphite);
}
.phase{ padding-top:60px; }
.project-terra .phase{ padding-top:100px; }
.phase-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-bottom:28px;
  flex-wrap:wrap;
  gap:12px;
}
.phase-num{
  font-family:var(--mono);
  font-size:12px;
  color:var(--graphite-light);
  letter-spacing:0.08em;
}
.phase-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3.2vw,38px);
  margin:6px 0 0;
}
.phase-status{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--terra);
  border:1px solid var(--terra);
  padding:6px 12px;
  border-radius:100px;
  align-self:flex-start;
}
.phase-status.is-muted{
  color:var(--graphite-light);
  border-color:var(--line);
}
.figure{
  margin:56px 0;
  background:var(--paper);
}
.figure img{ width:100%; }
.project-page .figure > picture{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
}
.project-page .figure > picture img{
  width:auto;
  max-width:100%;
  max-height:calc(100svh - 150px);
  object-fit:contain;
  margin:0 auto;
}
.figure-cap{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-top:14px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--graphite);
}
.figure-cap .num{ color:var(--graphite-light); flex-shrink:0; }
.figure-sm{ max-width:80%; margin:56px auto; }
.project-pedralbes .figure-sm{ max-width:78%; }
.figure-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin:56px 0;
}
.figure-pair .figure{ margin:0; }
.figure-pair .figure-frame{
  aspect-ratio:5/4;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  max-height:calc(100svh - 150px);
  background:var(--paper);
}
.project-pedralbes .figure-pair .figure-frame{ aspect-ratio:4/3; }
.project-terra .figure-pair .figure-frame{ aspect-ratio:4/5; }
.figure-pair .figure-frame img{
  width:100%;
  height:100%;
  max-height:calc(100svh - 150px);
  object-fit:contain;
}
.project-terra .figure-pair .figure-frame img{ border:none; }
.figure-group-label{ margin:64px 0 24px; }
.figure-grid3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin:0 0 56px;
}
.figure-grid3 .figure{ margin:0; }
.figure-grid3 .figure-frame{
  aspect-ratio:4/3;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  max-height:calc(100svh - 150px);
  background:var(--paper);
}
.figure-grid3 .figure-frame img,
.figure-grid5 .figure-frame img{
  width:100%;
  height:100%;
  max-height:calc(100svh - 150px);
  object-fit:contain;
}
.figure-grid5{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:22px;
  margin:0 0 56px;
}
.figure-grid5 .figure{ margin:0; }
.figure-grid5 .figure:nth-child(-n+3){ grid-column:span 2; }
.figure-grid5 .figure:nth-child(n+4){ grid-column:span 3; }
.figure-grid5 .figure-frame{
  aspect-ratio:6/5;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  max-height:calc(100svh - 150px);
  background:var(--paper);
}
.figure-grid5 .figure-frame img{ border:none; }
.p-note{
  background:var(--paper-dim);
  border-left:2px solid var(--terra);
  padding:24px 28px;
  margin:56px 0;
  font-size:15px;
  color:var(--graphite);
  line-height:1.7;
}
.p-note b{ color:var(--ink); }
.phase-placeholder{
  margin:56px 0 0;
  border:1px dashed var(--line);
  padding:48px clamp(24px,4vw,48px);
  text-align:center;
  color:var(--graphite-light);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.04em;
}
.subphase-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--terra);
  margin:64px 0 8px;
}
.project-nav{
  display:flex;
  justify-content:space-between;
  padding:64px 0 0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--graphite);
}
.project-nav a:hover{ color:var(--ink); }

@media (max-width:1100px){
  .hero-layout{
    align-items:center;
    gap:clamp(18px,3svh,28px);
    text-align:center;
  }
  .hero-copy{ padding-bottom:0; }
  .hero-kicker{ margin-bottom:20px; }
  .hero-statement{ font-size:92px; }
  .hero-sub{
    max-width:620px;
    margin-top:18px;
  }
  .hero-tags{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:clamp(12px,3vw,22px);
    margin-top:0;
  }
  .hero-archive{
    grid-auto-rows:minmax(64px, 8svh);
    padding-bottom:12px;
  }
}

@media (max-width:900px){
  .figure-grid5{ grid-template-columns:1fr; }
  .figure-grid5 .figure{ grid-column:auto; }
  .figure-grid5 .figure-frame{ aspect-ratio:4/3; }
}

@media (max-width:800px){
  .nav .wrap{
    height:68px;
    gap:18px;
  }
  .nav-mark{ width:178px; }
  .nav-links{ gap:18px; font-size:11px; }
  .hero{
    height:calc(100svh - 68px);
    padding-top:0;
  }
  .hero-brand img{
    height:100%;
    max-height:100%;
  }
  .hero-statement{ font-size:72px; }
  .hero-sub{
    max-width:36rem;
    margin-top:14px;
    font-size:15px;
    line-height:1.5;
  }
  .hero-tags{
    gap:10px;
    font-size:11px;
    margin-top:0;
  }
  .hero-archive{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:minmax(62px, 9.5svh);
    gap:8px;
  }
  .hero-tile,
  .hero-tile-large,
  .hero-tile-wide{
    grid-column:auto;
    grid-row:auto;
  }
  .hero-tile-large{ grid-row:span 2; }
  .tile-title{ font-size:10px; }
  .hero-baseline{
    gap:12px;
    padding-top:10px;
    padding-bottom:10px;
  }
  .project-card{ grid-template-columns:1fr; padding:40px 0; }
  .card-figure{ aspect-ratio:4/3; }
  .figure-grid3{ grid-template-columns:1fr; }
  .figure-pair{ grid-template-columns:1fr; }
  .p-intro{ grid-template-columns:1fr; }
  .footer-main{
    min-height:auto;
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-brand img{
    width:132px;
    opacity:1;
  }
  .footer-contact{
    justify-items:start;
    text-align:left;
  }
  .footer-bottom{
    gap:12px;
  }
  .project-page .figure > picture img,
  .figure-pair .figure-frame,
  .figure-pair .figure-frame img,
  .figure-grid3 .figure-frame,
  .figure-grid3 .figure-frame img,
  .figure-grid5 .figure-frame,
  .figure-grid5 .figure-frame img,
  .project-page .p-photo{
    max-height:calc(100svh - 118px);
  }
}

@media (max-width:700px){
  .figure-sm{ max-width:100%; }
}

@media (max-width:520px){
  .nav-mark{
    width:156px;
    max-width:52vw;
  }
  .hero{
    height:calc(100svh - 68px);
    max-height:none;
    overflow:hidden;
  }
  .hero-layout{ gap:20px; }
  .hero-brand img{
    height:100%;
    max-height:100%;
  }
  .hero-statement{ font-size:50px; }
  .hero-sub{ font-size:14.5px; }
  .hero-archive{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:86px;
  }
  .hero-tile-large{ grid-row:span 2; }
  .hero-tile img{ padding:14px; }
  .hero-baseline{
    flex-direction:column;
    align-items:flex-start;
  }
  .project-card{ padding:34px 0; }
  .card-body .card-name{ font-size:clamp(28px,10vw,42px); }
  .card-meta-list{ display:grid; gap:8px; }
  .footer-contact{ font-size:clamp(20px,8vw,30px); }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-height:700px){
  .hero{
    padding-top:16px;
    max-height:none;
  }
  .hero-kicker{ margin-bottom:14px; }
  .hero-statement{ font-size:76px; }
  .hero-sub{
    margin-top:14px;
    font-size:15px;
    line-height:1.48;
  }
  .hero-tags{
    margin-top:14px;
    gap:6px 18px;
  }
  .hero-archive{
    grid-auto-rows:minmax(56px, 7.2svh);
    gap:8px;
    padding-bottom:8px;
  }
  .hero-baseline{
    padding-top:8px;
    padding-bottom:8px;
  }
}

@media (max-width:520px) and (max-height:700px){
  .hero-statement{ font-size:44px; }
  .hero-sub{ font-size:14px; }
  .hero-archive{ grid-auto-rows:72px; }
  .tile-index,
  .tile-title{ font-size:9px; }
}

@media (max-width:520px) and (max-height:620px){
  .hero-layout{ gap:14px; }
  .hero-kicker{ margin-bottom:10px; }
  .hero-statement{ font-size:40px; }
  .hero-sub{
    margin-top:10px;
    line-height:1.4;
  }
  .hero-tags{ margin-top:10px; }
  .hero-archive{ grid-auto-rows:62px; }
  .hero-baseline{ font-size:10px; }
  .hero-brand img{
    height:100%;
    max-height:100%;
  }
}