/* TASTBAAR — homepage (after the CTRL+ALT template) */

:root {
  --pad: 80px;            /* page padding: 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);
}

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

@view-transition { navigation: auto; }

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: above windows and menu */
  pointer-events: none;   /* ...but never blocks them */
  color: var(--title-paint, #fff);   /* set per load in index.html */
  mix-blend-mode: difference;   /* the letters invert whatever passes under them */
}

/* ---------- windows ---------- */
#desk {
  position: fixed;
  inset: var(--edge);
  z-index: 10;
  pointer-events: none;   /* the empty desk lets clicks through to the quick links behind it */
}
#desk .win { pointer-events: auto; }

.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;
  animation: float 8s ease-in-out infinite;
}
/* every window breathes at its own pace */
.win:nth-child(2) { animation-duration: 9.5s; animation-delay: -2s; }
.win:nth-child(3) { animation-duration: 7.2s; animation-delay: -5s; }
.win:nth-child(4) { animation-duration: 10s;  animation-delay: -1s; }
.win:nth-child(5) { animation-duration: 8.6s; animation-delay: -6s; }
.win:nth-child(6) { animation-duration: 9s;   animation-delay: -3s; }
.win:nth-child(7) { animation-duration: 7.8s; animation-delay: -4s; }

@keyframes float {
  0%, 100% { transform: translateY(0);    box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 12px; }
  50%      { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.16) 0px 12px 22px; }
}

.win.is-dragging {
  cursor: grabbing;
  animation-play-state: paused;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px;
}

/* a quicklink pulls its window forward and gives it a nudge */
.win.is-called { animation: called .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes called {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.035) rotate(-.6deg); }
  70%  { transform: scale(.995) rotate(.3deg); }
  100% { transform: scale(1); }
}

.win:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.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 canvas's top edge */
}

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

.win__body { padding: 40px; }
.win__body p { margin: 10px 0 0; }
.win__body p:first-child { margin-top: 0; }
.win__body ul,
.win__body ol {
  margin: 0;
  padding-left: 18px;
}
.win__body li + li { margin-top: 8px; }
.win__body ul.plain { list-style: none; padding-left: 0; }
.win__body .note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ink); }
.win__body b { font-weight: 700; }

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

/* ---------- logo ---------- */
.win img.logo {
  width: 56px;
  height: 56px;
  aspect-ratio: 1;
  object-fit: contain;
  margin: -12px 0 22px -6px;   /* optical alignment: the mark's strokes sit inside its box */
}

/* ---------- touch field ---------- */
.touch {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--ink);
  cursor: crosshair;
  touch-action: none;
}

.touch--strings { cursor: ns-resize; }

/* ---------- try this ---------- */
.ritual__text {
  font-size: 18px;
  line-height: 24px;
  transition: opacity .25s ease, filter .25s ease;
}
.ritual__text.is-swapping { opacity: 0; filter: blur(3px); }

/* ---------- quick links (bottom-right) ---------- */
.quicklinks {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 5;             /* always in the back: windows slide over it */
  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;
}

/* ---------- 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;
  }

  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;
    user-select: text;
  }

  .win__body { padding: 28px; }

  /* phones: the title stands up along the right edge, reading bottom to top,
     bigger than the screen so it runs off the top, bottom and side */
  .title {
    inset: 0 auto 0 auto;
    right: -0.12em;   /* the letters' feet bleed off the edge */
    writing-mode: vertical-rl;
    font-size: calc(100svh / 4.4);   /* larger than the screen: runs off top and bottom */
    transform: rotate(180deg);       /* reads bottom to top */
    line-height: 1;
  }

  .quicklinks {
    position: static;
    width: calc(100% - 80px);
    max-width: 480px;
    margin: -60px auto 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .win, .win.is-called { animation: none; }
  .ritual__text { transition: none; }
}