/* The header, artwork and footer share one canvas and the same outer grid. */
html { scrollbar-gutter: stable; }
html.navigation-open, html.navigation-open body,
html.project-dialog-open, html.project-dialog-open body { overflow: hidden; overscroll-behavior: none; }
.portfolio-hero, .supporting-content { max-width: 2000px; margin-inline: auto; }
.portfolio-hero {
  --edge: 40px;
  --column-gap: 24px;
  --copy-size: 12px;
  --copy-leading: 18px;
  --label-gap: 12px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(280px, 1fr) auto;
  column-gap: var(--column-gap);
  row-gap: 32px;
  min-height: max(720px, 100svh);
  padding: var(--edge);
  position: relative;
  isolation: isolate;
  background: var(--paper);
}
.hero-name {
  grid-area: 1 / 1 / 2 / 5;
  font: 400 12px/18px var(--font);
  letter-spacing: -.02em;
  align-self: start;
}
.hero-name a { display: inline-block; }
.hero-menu-toggle { display: none; }
.hero-information {
  grid-area: 1 / 9 / 2 / 13;
  display: grid;
  width: min(100%, 320px);
  justify-self: end;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 3fr);
  gap: 20px;
  align-items: start;
  font-size: var(--copy-size);
  line-height: var(--copy-leading);
  min-height: calc(var(--copy-leading) * 5 + var(--label-gap));
  overflow-wrap: anywhere;
}
.hero-label {
  margin: 0 0 var(--label-gap);
  font: 400 var(--copy-size)/var(--copy-leading) var(--serif);
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: -.025em;
}
.hero-specialities .speciality-single-line { white-space: nowrap; }
.hero-information ul { list-style: none; padding: 0; margin: 0; }
.hero-information p { margin: 0; text-wrap: pretty; }
.hero-artwork {
  grid-area: 2 / 3 / 3 / 11;
  margin: 0;
  min-width: 0;
  display: grid;
  align-self: center;
  justify-items: center;
  pointer-events: none;
  aspect-ratio: 16 / 9;
  max-height: 58svh;
  background: var(--paper);
}
.hero-artwork img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  display: block;
  mix-blend-mode: lighten;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent), linear-gradient(to bottom, transparent, black 3%, black 97%, transparent);
  mask-composite: intersect;
}
.hero-contact {
  grid-area: 3 / 1 / 4 / 5;
  align-self: end;
  font-size: 12px;
  line-height: 18px;
}
.hero-contact .hero-label { --copy-size: 12px; margin-bottom: 8px; }
.hero-contact a { display: inline-block; position: relative; max-width: 100%; overflow-wrap: anywhere; }
.hero-contact a::before { content: ''; position: absolute; inset: -10px 0; }
.hero-navigation {
  grid-area: 3 / 8 / 4 / 13;
  align-self: end;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  font: 400 14px/20px var(--font);
}
.hero-navigation a {
  --cut: 8px;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  white-space: nowrap;
  background: #606060;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.hero-navigation a::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: #171717;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.hero-navigation a span { position: relative; z-index: 1; }
.hero-navigation a:hover { background: #f0f0ed; }
.hero-navigation a:focus-visible { background: #9cc7ff; outline: none; }
.hero-navigation a[aria-current] { background: #f0f0ed; color: #111111; }
.hero-navigation a[aria-current]::before { background: #f0f0ed; }
.hero-navigation a[aria-current]:focus-visible { box-shadow: inset 0 0 0 3px #75aeff; }
.hero-contact a:hover { color: #9cc7ff; }
.hero-scroll {
  grid-area: 3 / 6 / 4 / 8;
  align-self: end;
  justify-self: center;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  min-height: 44px;
  padding-inline: 10px;
  gap: 6px;
  font: 400 .75rem/1rem var(--font);
}
.hero-scroll span:last-child { font: 400 1.25rem/1.4375rem var(--font); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.works-section { border-top: 0; padding: 160px var(--gutter) 120px; scroll-margin-top: 0; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 24px; }
.work-card { min-width: 0; }
.work-cover { display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 0; background: #252525; }
.work-cover-habit { background: #292929; }
.work-cover img { width: 100%; height: 100%; object-fit: cover; transition: filter .4s ease-in-out; }
.work-cover:hover { filter: none; }
@media (hover:hover) and (pointer:fine) { .work-cover:hover img { filter: grayscale(1); } }
.work-card-placeholder .work-cover:hover { filter: none; }
.work-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; margin-top: 16px; font: 400 12px/18px var(--font); }
.work-caption h3 { grid-area: 1 / 1 / 2 / 2; font: 400 14px/20px var(--serif); }
.work-caption h3 button { padding: 0; background: none; position: relative; text-align: left; }
.work-caption h3 button::before { content: ''; position: absolute; inset: -10px -2px; }
.work-caption h3 button:hover { text-decoration: underline; text-underline-offset: 3px; }
.work-discipline { grid-area: 2 / 1 / 3 / 2; color: #b0b0ac; }
.work-year { grid-area: 1 / 2 / 2 / 3; color: #b0b0ac; }

.skip-link { background: var(--ink); color: var(--paper); }
::selection { background: #9cc7ff; color: #111111; }
.supporting-content { padding: 160px var(--gutter) 120px; }
.supporting-content .about-statement { font: 400 1.5rem/1.4 var(--serif); letter-spacing: -.025em; }
.supporting-content .gallery-placeholder > p { font: 400 1.5rem/1.4 var(--serif); letter-spacing: -.025em; }
.supporting-content .gallery-placeholder { border-radius: 0; }
.supporting-content .gallery-note { border: 0; }
@media (max-width: 1100px) {
  .hero-information { grid-column: 7 / 13; }
  .hero-navigation { grid-column: 7 / 13; gap: 10px; }
  .hero-scroll { grid-column: 5 / 7; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .portfolio-hero {
    z-index: 2;
    --edge: 20px;
    --column-gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(220px, 1fr) minmax(24px, .35fr) auto auto;
    row-gap: 24px;
    min-height: max(820px, 100svh);
  }
  .hero-name { grid-area: 1 / 1 / 2 / 5; justify-self: end; margin-bottom: 28px; position: relative; z-index: 4; }
  .hero-menu-toggle {
    display: flex;
    position: fixed;
    z-index: 4;
    left: 10px;
    top: 10px;
    width: 44px;
    height: 44px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: transparent;
    color: #fff;
    mix-blend-mode: difference;
  }
  .hero-menu-toggle span { width: 24px; height: 1px; background: currentColor; transition: transform .18s; }
  .hero-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .hero-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hero-menu-toggle[aria-expanded="true"] { background: transparent; }
  .portfolio-hero[data-menu-open="true"] .home-link { position: fixed; top: 20px; right: 20px; }
  .portfolio-hero[data-menu-open="true"] .hero-name { min-height: 23px; }
  .hero-information {
    grid-area: 2 / 1 / 3 / 5;
    width: 100%;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 24px;
    min-height: calc(var(--copy-leading) * 7 + var(--label-gap));
  }
  .hero-artwork { grid-area: 3 / 1 / 4 / 5; align-self: center; }
  .hero-artwork img { max-height: none; }
  .hero-navigation {
    display: flex;
    position: fixed;
    z-index: 3;
    inset: 0;
    grid-area: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 96px 20px 32px;
    background: #080808;
    font-size: 14px;
    height: 100dvh;
    justify-content: flex-start;
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 320ms cubic-bezier(.22,.61,.36,1), visibility 0s 320ms;
  }
  .portfolio-hero[data-menu-open="true"] .hero-navigation { visibility: visible; transform: none; transition-delay: 0s; }
  .hero-navigation a {
    padding: 14px 0;
    min-height: 52px;
    justify-content: flex-start;
    background: none;
    clip-path: none;
    color: #b0b0ac;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity 220ms ease, transform 280ms ease;
  }
  .hero-navigation a::before { content: none; }
  .hero-navigation a:hover, .hero-navigation a[aria-current] { background: none; color: var(--ink); }
  .hero-navigation a[aria-current] span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .hero-navigation a:focus-visible { background: none; outline: 1px solid #9cc7ff; outline-offset: 3px; box-shadow: none; }
  .portfolio-hero[data-menu-open="true"] .hero-navigation a { opacity: 1; transform: none; transition-delay: 60ms; }
  .portfolio-hero[data-menu-open="true"] .hero-navigation a:nth-child(2) { transition-delay: 110ms; }
  .portfolio-hero[data-menu-open="true"] .hero-navigation a:nth-child(3) { transition-delay: 160ms; }
  .hero-contact { grid-area: 5 / 1 / 6 / 5; }
  .hero-contact .hero-label { --copy-size: 12px; }
  .hero-scroll { display: flex; grid-area: 6 / 1 / 7 / 5; margin-top: 0; gap: 3px; }
  .hero-navigation .project-direction { display: none; }
  .works-section { padding: 88px var(--edge, 20px) 72px; }
  .work-grid { grid-template-columns: 1fr; gap: 48px; }
  .supporting-content { padding: 88px 20px 72px; }
}
@media (max-width: 350px) {
  .hero-information { gap: 16px; grid-template-columns: 1fr 1fr; }
  .hero-navigation { gap: 8px; }
}
@media (min-width: 761px) and (max-height: 600px) {
  .portfolio-hero { min-height: 660px; }
}

/* Content overlaps during navigation; the surrounding shell never reloads. */
@view-transition { navigation: none; }
.hero-transition-ghost { z-index: 2; pointer-events: none !important; overflow: hidden; }

[data-page="about"] .project-direction,[data-page="playground"] .project-direction { display: none; }

/* Centre the height-constrained placeholder within its grid span. */
figure.hero-artwork { justify-self: center; width: min(100%, 103.111svh); }
@media (min-width: 761px) {
  .hero-information { position: relative; left: 4px; }
  .hero-specialities { margin-inline-start: -12px; }
  [data-page="about"] .hero-information { grid-column: 7 / 13; width: min(100%, 400px); grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 28px; }
  [data-page="about"] .hero-specialities ul { display: grid; gap: 2px; }
  [data-page="about"] .hero-specialities li { overflow-wrap: normal; }
}
/* Hide the light seam embedded in the thumbnail’s final pixel row. */
.work-cover[href="lievito.html"]{overflow:hidden;clip-path:inset(0 0 .34% 0)}
.work-cover[href="blah-blah-lab.html"]{overflow:hidden;clip-path:inset(.34% 0 0 0)}

.home-page .hero-artwork img { object-fit: cover; transition: opacity 280ms ease; }

.home-page .hero-artwork{position:relative}
.home-page .hero-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;opacity:0;transition:opacity 280ms ease;pointer-events:none}
.home-page .hero-loop.is-playing{opacity:1}
.home-page .hero-artwork:has(.hero-loop.is-playing)>img{opacity:0}

[data-page="about"] .hero-about p { text-align: left; text-wrap: balance; }

[data-page="about"] #profile-peek p { text-wrap: balance; letter-spacing: -.008em; }

@media(max-width:760px){
 .portfolio-hero { --copy-size:14px; --copy-leading:21px; }
 .hero-information { grid-template-columns:1fr; gap:24px; min-height:0; }
 .hero-information .hero-about { grid-column:1; }
 .hero-information p { max-width:38ch; text-wrap:pretty; }
 .hero-information .hero-label { font-size:14px; }
 [data-page="about"] .hero-about p { text-wrap:pretty; }
}

@media(max-width:760px){
 [data-page="home"] .speciality-design{display:none}
 [data-page="home"] .hero-specialities ul{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.25em}
 [data-page="home"] .hero-specialities li{white-space:nowrap}
 [data-page="home"] .hero-specialities li+li::before{content:'·';margin-inline-end:.25em}
}

@media(max-width:760px){.work-caption{font-size:14px;line-height:21px}.work-caption h3{font-size:18px;line-height:25px}}

@media(max-width:760px){.hero-contact .hero-label{--copy-size:14px;font-size:14px;line-height:21px}.hero-contact a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:21px}}

@media(max-width:760px){.hero-name a{min-width:44px;min-height:44px;padding-block:13px;margin-block:-13px}.work-caption h3 a{display:inline-flex;align-items:center;min-height:44px}}

@media(max-width:760px){.work-year{align-self:center}.site-footer,.footer-base{font-size:14px;line-height:21px}.hero-scroll{min-width:44px;min-height:44px;justify-content:center}}

@media(max-width:760px){
 .portfolio-hero{--label-gap:8px}
 .hero-information{gap:32px}
 .hero-contact a{align-items:flex-start}
 .work-caption{row-gap:3px}
 .work-caption h3 a{position:relative;min-height:25px}
 .work-caption h3 a::before{content:'';position:absolute;inset:-10px 0}
}

/* Hide the pale export edge in the Tierra cover without changing its source. */
.work-cover[href="ttc.html"] { overflow: hidden; }
.work-cover[href="ttc.html"] img { display: block; transform: scale(1.01); }

@media(prefers-reduced-motion:reduce){.home-page .hero-artwork img,.home-page .hero-loop{transition:none}}