:root {
  /* Pure black, permanently: every off-black value tried (#020202,
     #0A0A0A, #0d0d0d) rendered as mismatched patches across render
     regions on the user's display. #000000 is the only value that
     paints uniformly there. Do not change to an off-black again. */
  --bg: #000000;
  --fg: #ffffff;
  --fg-dim: #7a7a7a;
  --border: #222222;
  /* Main menu (nav links + the "Federico Marcon" name). */
  --nav-fg: #F2F0EF;
  /* Subnav (Berlin/Morfologie/Portraits), nav-credit, and other small
     secondary details — including the Morfologie photo index numbers.
     Meaningfully grayer than --nav-fg so it reads as clearly secondary. */
  --nav-fg-dim: #8f8f8f;
  /* Beyond this total viewport width, right-aligned content stops
     hugging the browser edge and the extra space becomes a growing
     right margin instead — keeps the gap between the nav/subnav and
     the content from ballooning on very wide monitors. */
  --content-cap: 1800px;
}

* { box-sizing: border-box; }

/* Tells the browser this page is dark-themed. Without this, browsers
   assume light-by-default and can paint areas outside what CSS
   explicitly styles (overscroll bounce, compositing edges) using their
   own light/default fill instead of matching the page's actual
   background — which is exactly the kind of mismatched-black patch
   this fixes. */
html {
  color-scheme: dark;
}

::selection {
  background: #3a3a3a;
  color: var(--fg);
}

html {
  /* Thin, dark scrollbar (Firefox) so it doesn't sit as a bright seam
     against the black background. */
  scrollbar-width: thin;
  scrollbar-color: #333333 var(--bg);
}

/* Same idea for WebKit/Blink browsers (Chrome, Safari, Edge). */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 6px;
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Newsreader', Georgia, serif;
  scroll-behavior: smooth;
}

img { display: block; max-width: 100%; }

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

/* ---------- NAV (left sidebar) ---------- */
/* pointer-events: none on the container + auto on its children means the
   empty right-hand padding of this box (which visually overlaps the subnav
   column) no longer intercepts clicks meant for the subnav underneath it. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 48px 36px 20px 52px;
  pointer-events: none;
}

.nav .logo,
.nav ul,
.nav-toggle,
.nav-credit {
  pointer-events: auto;
}

.nav .logo {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--nav-fg);
  margin-bottom: 36px;
}

.nav ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav ul li,
.subnav ul li {
  position: relative;
}

.nav a {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--nav-fg);
}

/* Small dot marker to the left of the active nav/subnav item —
   this alone signals selection, so link color no longer changes on active. */
.nav a.active::before,
.subnav a.active::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

/* Sits close to the bottom of the viewport (nav's own bottom padding is
   small — 20px — so this doesn't float with a big gap underneath it). */
.nav-credit {
  margin-top: auto;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--nav-fg-dim);
}

.nav-toggle { display: none; }

@media (min-width: 641px) and (min-height: 501px) {
  body { padding-left: 270px; }
  body.with-subnav { padding-left: 450px; }
}

@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  /* The nav becomes a fixed top bar on mobile, so page content needs
     top padding to clear it — otherwise the top of every page (hero,
     Portfolio grid, etc.) sits underneath it and gets visually clipped. */
  body { padding-top: 64px; }
  body.with-subnav { padding-left: 0; }

  /* Left/right padding matches the content sections' 20px exactly, so
     "Federico Marcon", the project titles, and the images below all sit
     on the same left edge instead of drifting a few px apart. */
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    top: 0; left: 0; right: 0; bottom: auto;
    width: auto;
    height: auto;
    padding: 20px 28px;
    background: var(--bg);
  }
  .nav .logo { margin-bottom: 0; }

  /* Dropdown opens left-aligned, directly below the logo/nav bar —
     same top-left structure as the desktop sidebar, just collapsed
     into a panel instead of a permanent column. When open, it expands
     to cover the full remaining viewport in solid black, and the rest
     of the page content is hidden — so only the nav bar (with the
     name) and the menu itself are visible, nothing bleeding through. */
  .nav ul {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: auto;
    height: calc(100dvh - 64px);
    z-index: 105;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    min-width: 0;
    padding: 28px 28px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
  }
  .nav ul.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  /* Hide everything else behind the menu while it's open. */
  body.nav-open > *:not(.nav) {
    display: none !important;
  }
  body.nav-open {
    overflow: hidden;
  }
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--nav-fg);
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: pointer;
    z-index: 110;
  }
  .nav-credit { display: none; }
  .subnav { display: none; }
}

/* ---------- SECONDARY SUB-NAV (project list, shown on Portfolio + project pages) ---------- */
/* Sits close to the main nav, no divider, list starts at the same vertical
   offset as the main nav's <ul> so items line up horizontally. Rendered in a
   lighter gray than the main nav to visually separate the two levels. */
.subnav {
  position: fixed;
  top: 0;
  left: 236px;
  bottom: 0;
  width: 170px;
  padding: 118px 16px 40px 10px;
  z-index: 90;
}

.subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.subnav a {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--nav-fg-dim);
}

.subnav a:hover {
  color: var(--nav-fg);
}

/* ---------- HOMEPAGE HERO (click anywhere to advance, no scroll) ---------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  cursor: pointer;
  user-select: none;
}

.hero-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Without this, the letterboxed gap around each photo (object-fit:
     contain) and any split-second still decoding during the crossfade
     falls through to the browser's own default (pure black) instead of
     the site's actual background color. */
  background: var(--bg);
}

/* Each slide is a full-frame flex box that centers/aligns its photo —
   the img itself is sized intrinsically (auto, capped by max-width/
   max-height) rather than stretched, so its box matches the actual
   rendered photo exactly. That's what lets the border below hug the
   real edges of the photo instead of an invisible letterboxed area. */
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-slide.active { opacity: 1; }

.hero-frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  filter: grayscale(100%) contrast(1.05);
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

/* ---------- PORTFOLIO INDEX (thumbnails aligned to top of viewport) ---------- */
/* Extra right padding (72px, up from 48px) so the grid doesn't crowd the
   browser edge, and body.with-subnav's wider left offset (430px, up from
   390px) gives more breathing room between the sub-nav and the grid. */
.works-index {
  padding-top: 24px;
  padding-bottom: 120px;
  padding-left: 0;
  padding-right: max(24px, calc(100vw - var(--content-cap) + 24px));
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: end;
  column-gap: 48px;
  row-gap: 64px;
}

.work-card {
  display: block;
}

/* When a row ends with a lone thumbnail (odd count), place it in the
   right column instead of the left — consistent with the site's
   right-aligned convention. */
.works-grid .work-card:last-child:nth-child(odd) {
  grid-column: 2;
}

/* No forced aspect ratio or cropping here — each thumbnail shows the
   full, real photo at its natural proportions, scaled to the column
   width. Portrait and landscape shots will end up different heights,
   which is expected. */
.work-thumb {
  background: var(--border);
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

.work-thumb img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%) contrast(1.05);
}

.work-caption {
  margin-top: 12px;
}

.work-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #9c9c9c;
}

@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .works-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  /* Single column on mobile — the desktop right-column placement for a
     lone last thumbnail would create a phantom second column here. */
  .works-grid .work-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* ---------- PROJECT PAGE (images aligned top-right, no captions/nav) ---------- */
/* No forced crop — each photo keeps its real, native aspect ratio (which
   varies shot to shot, especially in Berlin: panoramas, near-square frames,
   etc.). The LONG side of the image — width for landscape, height for
   portrait — is capped to the same fixed length (--img-long), so a portrait
   and a landscape shot still read as roughly the same visual size instead of
   the portrait one ballooning up, without cropping either one. */
.project-stack {
  /* Sized against the actual available width (viewport minus the ~450px
     subnav offset and 96px right padding), not raw viewport width — a
     plain vw-based value could ask for more room than exists once the
     subnav is accounted for, overflowing left past the container and
     breaking the right-alignment. */
  --img-long: clamp(200px, calc(100vw - 494px), 760px);
  padding-top: 24px;
  padding-bottom: 120px;
  padding-left: 0;
  padding-right: max(24px, calc(100vw - var(--content-cap) + 24px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Hidden on desktop (the sub-nav's dot already marks which project you're
   on); shown on mobile since there's no persistent sub-nav there. */
.project-title {
  display: none;
}

.project-stack figure {
  margin: 0 0 32px;
}

.project-stack img {
  display: block;
  max-width: 100%;
  filter: grayscale(100%) contrast(1.05);
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

.project-stack figure.landscape img {
  width: var(--img-long);
  height: auto;
}

.project-stack figure.portrait img {
  height: var(--img-long);
  width: auto;
}

.project-stack figure figcaption {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--fg);
  text-align: right;
  margin-top: 8px;
}

/* The catalog number reads as metadata, not part of the title — dimmed,
   italic, and a size smaller, like a wall-label index number next to the
   photo's actual name. */
.project-stack figure figcaption .photo-index {
  color: var(--nav-fg-dim);
  font-style: italic;
  font-size: 14px;
}

/* ---------- SIMPLE TEXT PAGES (Contact) ---------- */
/* Unlike the Portfolio grid/project images/About, Contact sits close to
   the nav/subnav column instead of hugging the browser's right edge —
   it's a single short line, not a body of content, so pinning it out at
   the far edge of a wide window just left it stranded in empty space. */
.text-page {
  max-width: 620px;
  /* Lines up with the nav's menu items (48px nav padding + logo + its
     36px margin), not the 24px used by the Portfolio/project pages,
     so the email sits level with "Selected Work / Portfolio / About /
     Contact" instead of up near the very top of the screen. */
  padding-top: 118px;
  padding-bottom: 120px;
  padding-left: 64px;
  padding-right: 24px;
}

/* Hidden on desktop — the sidebar's dot marker already shows which page
   you're on, so repeating "About"/"Contact" as a heading is redundant
   there. Brought back (smaller) on mobile, where there's no persistent
   sidebar to signal the active page. */
.text-page h1,
.about-text h1 {
  display: none;
}

.text-page p {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* About page: portrait photo on the left, bio text on the right — the
   whole group hugs the right edge of the content area, same convention as
   the rest of the site. */
.about-layout {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  flex-wrap: wrap;
  max-width: 1100px;
  padding: 24px 120px 120px 64px;
  margin-left: auto;
  justify-content: flex-end;
}

.about-text { flex: 1 1 380px; max-width: 460px; }

.about-text p {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.6;
  margin: 0 0 20px;
}

.about-text .awards-heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: 44px 0 18px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* The very first heading (the bio's "Federico Marcon" title) sits right
   under the photo, not after another section — no divider needed there. */
.about-text > .awards-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.about-text .award-year {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--fg-dim);
  margin: 0 0 4px;
}

.about-text .award-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.6;
  margin: 0 0 20px;
}

.about-text .award-title a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-text .award-title a:hover {
  color: var(--fg-dim);
}

.about-photo { flex: 0 0 auto; }

.about-photo img {
  width: auto;
  height: min(66vh, 620px);
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

/* Contact: just the email, styled simply, no list/borders needed for one line */
.contact-email {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0;
}

.contact-email:hover { color: var(--fg-dim); }

/* ---------- MOBILE ADJUSTMENTS ---------- */
/* Portfolio grid, project images, About and Contact all used wide side
   padding and a 340px minimum image width — both fine on desktop, but on a
   ~375–430px phone that minimum was wider than the available content area
   and caused images to overflow off the right edge. This tightens padding
   and makes image sizing purely viewport-relative so nothing overflows. */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .text-page,
  .about-layout {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Image sections get slightly tighter side padding than the text pages —
     a few extra px of photo on a phone screen matters more than a perfectly
     shared gutter. The nav bar's own padding is untouched. */
  .works-index,
  .project-stack {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* The desktop 118px top padding lines Contact up with the sidebar's
     menu items — on mobile there's no sidebar, just the fixed top bar
     (already handled by body's own padding-top), so it goes back to the
     same 24px every other mobile page uses. */
  .text-page {
    padding-top: 24px;
  }

  /* Desktop right-aligns the project title and images (align-items:
     flex-end); on mobile that flips to left, matching the nav's logo and
     the rest of the site's mobile layout. */
  .project-stack {
    --img-long: calc(100vw - 28px); /* full width minus the 14px side padding */
    align-items: flex-start;
  }

  /* Right-alignment (margin-left: auto) is a desktop convention where
     there's spare width to shift into — on a phone screen there isn't, so
     both blocks go back to full-width and normal document flow. */
  .text-page,
  .about-layout {
    margin-left: 0;
    justify-content: flex-start;
  }

  .about-layout {
    gap: 32px;
    padding-top: 24px;
  }

  .about-photo img {
    height: auto;
    width: 100%;
    max-width: 220px;
  }

  .works-grid {
    row-gap: 48px;
  }

  /* Hero now sits below the fixed top bar instead of underneath it
     (body padding-top handles that), so shrink it by the same amount to
     keep the "fills the screen, no scroll" behavior. Images align to the
     bottom of the frame rather than vertically centering. */
  .hero {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    /* Slightly tighter than the desktop 24px, so the photo gets a bit
       more of the phone screen. */
    padding: 16px;
  }

  .hero-slide {
    align-items: flex-end;
    justify-content: center;
  }

  /* About/Contact headings, and now a project-name header on each
     Portfolio page, come back on mobile (no sidebar dot to signal the
     active page here) — small, matching the sub-nav's scale, bold to
     read as a label rather than body copy. */
  .text-page h1,
  .about-text h1,
  .project-title {
    display: block;
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--fg);
    margin: 0 0 16px;
  }

  .text-page p,
  .about-text p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
  }
}