/* CTRL+ALT — homepage */

:root {
  --pad: 80px;            /* page padding: project windows start inside it */
  --edge: 10px;           /* windows can be dragged up to this close to the browser edge */
  --paper: #ffffff;
  --ink: #000;
  --line: #aaa;
  --win-w: 360px;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --title-size: clamp(64px, 15.5vw, 300px);  /* phones: fixed at the wide-screen size, see below */
}

*, *::before, *::after { box-sizing: border-box; }

/* cross-document view transitions (like tastbaar): pages fade, the clicked
   window morphs into the project page's hero */
@view-transition { navigation: auto; }
::view-transition-group(project-hero) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

html, body {
  margin: 0;
  overflow-x: clip;       /* the title may run off both sides on small screens */
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 14px/18px var(--mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- stage: the padded area windows start in (no visuals) ---------- */
#stage {
  position: fixed;
  inset: var(--pad);
  z-index: 0;
  pointer-events: none;
}

/* ---------- big centred title ---------- */
.title {
  position: fixed;
  inset: var(--pad);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--title-size);
  letter-spacing: -0.075em;
  line-height: 1;
  white-space: nowrap;
  z-index: 3000;          /* top layer on every page: above windows, back button and menu */
  pointer-events: none;   /* ...but never blocks them */
  /* the letters invert whatever is behind them.
     The blend sits on .title itself (it is its own stacking context, so a blended
     child span would only blend with the empty box). Its background is transparent,
     so only the glyphs blend. White is needed: with difference, black changes nothing. */
  color: #fff;
  mix-blend-mode: difference;
}

/* click on the page (scripts/title.js): the title drops to the lowest layer,
   behind the windows; click again to bring it back on top */
.title-under .title { z-index: 0; }

/* ---------- windows ---------- */
#desk {
  position: fixed;
  inset: var(--edge);     /* wider than the stage: windows may leave the padding */
  z-index: 10;
}

.win {
  position: absolute;
  width: var(--win-w);
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 12px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: box-shadow .15s ease;
}
.win.is-dragging {
  cursor: grabbing;
}
.win:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* desktop: the whole window is the link (click), so the text link is hidden */
@media (min-width: 801px) {
  .win[data-nav] .more { display: none; }
}

.win__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0;             /* labels sit flush in the window's corners */
}
.win--project .win__bar {
  position: relative;
  z-index: 1;
  margin-bottom: -22px;   /* = label height: labels sit on the image's top edge */
}

.label {
  background: var(--ink);
  color: #fff;
  text-transform: uppercase;
  padding: 2px 6px;
  width: fit-content;
}
.year {
  background: #fff;
  padding: 2px 6px;
}

.win img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.win__body { padding: 40px; }
.win__body p { margin: 10px 0 0; }
.win__body p:first-child { margin-top: 0; }

.win a {
  color: var(--ink);
  cursor: pointer;
}
.more {
  display: block;
  margin-top: 10px;
  text-align: right;
  text-transform: uppercase;
}
.contact { margin-top: 14px !important; }

/* ---------- quick links (bottom-right) ---------- */
.quicklinks {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 2000;
  width: 220px;
  background: #fff;
  text-transform: uppercase;
}
.quicklinks__group {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0;
}
.quicklinks__group:last-child { padding-bottom: 20px; }
.quicklinks__head {
  color: #888;
  margin-bottom: 4px;
}
.quicklinks a {
  color: var(--ink);
  text-decoration: none;
  width: fit-content;
  padding: 1px 0;
}
.quicklinks a:hover { text-decoration: underline; }
.quicklinks a[aria-current="page"] {
  background: var(--ink);
  color: #fff;
  padding: 1px 4px;
  margin-left: -4px;
}

/* phones: the menu sits at the end of the page instead of covering content */
@media (max-width: 800px) {
  .quicklinks {
    position: static;
    width: auto;
    max-width: 600px;
    margin: -60px 20px 40px;
  }
}@media (max-width: 800px) {
  body:not(.project) .quicklinks { margin: -60px auto 40px; width: calc(100% - 80px); max-width: 480px; }
}


/* ---------- mobile ----------
   windows stack in a scrolling column; the title stays fixed in the centre at the
   same size as on a wide screen (so it runs off both edges) */
@media (max-width: 800px) {
  :root {
    --pad: 20px;
    --title-size: 220px;  /* ≈ what a 1440px-wide screen shows */
  }

  body {
    overflow-y: auto;
    height: auto;
  }

  #desk {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 80px calc(var(--pad) + 20px) 100px;
  }

  .win, .win--info {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: 480px;
    cursor: default;
    touch-action: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .win { transition: none; }
}