/* ============ Editorial system: fine grid paper, three typefaces, corner info, crop marks ============ */
:root {
  --paper: #f2f1ed;
  --ink: #0e0e0e;
  --mute: #8b8a85;
  --line: rgba(14, 14, 14, .06);
  --line-major: rgba(14, 14, 14, .12);
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;     /* big, tight headlines */
  --serif: 'Instrument Serif', 'Times New Roman', serif;           /* italic accents */
  --mono: 'IBM Plex Mono', 'Courier New', monospace;               /* small caps info */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-major) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* The same grid paper, for panels that slide (so the grid moves with them) */
.paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-major) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

.mono  { font-family: var(--mono); font-size: 10.5px; line-height: 12px; text-transform: uppercase; letter-spacing: .04em; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.sans  { font-family: var(--sans); font-weight: 500; letter-spacing: -.035em; line-height: .9; }

/* ---- Corner info: sits on top of everything, inverts over images ---- */
.chrome {
  position: fixed; z-index: 70;
  color: #fff; mix-blend-mode: difference;
  font-family: var(--mono); font-size: 10.5px; line-height: 12px; text-transform: uppercase; letter-spacing: .04em;
  transition: opacity .7s ease;
}
/* everything snaps to the 24px grid: corners sit exactly one square in */
.chrome.tl { top: 24px; left: 24px; }
.chrome.tr { top: 24px; right: 24px; text-align: right; }
.chrome.bl { bottom: 24px; left: 24px; }
.chrome.br { bottom: 24px; right: 24px; text-align: right; }
.chrome .logo { display: block; height: 24px; width: auto; margin-bottom: 12px; cursor: pointer; }
/* hidden while the opening sequence plays */
body.intro .chrome { opacity: 0; pointer-events: none; transition: none; }
/* menu items are buttons (not links), so browsers and previews never treat them as leaving the site */
.chrome nav button { all: unset; cursor: pointer; margin-left: 14px; opacity: .55; transition: opacity .2s; }
.chrome nav button:hover, .chrome nav button.on { opacity: 1; }
.chrome nav button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.chrome nav button.on::before { content: "["; } .chrome nav button.on::after { content: "]"; }

/* ---- Crop marks around an element (add class="crop") ---- */
.crop { position: relative; }
.crop::after {
  content: ""; position: absolute; inset: -12px; pointer-events: none;
  --m: var(--ink);
  background:
    linear-gradient(var(--m), var(--m)) left 0 top 12px / 8px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left 12px top 0 / 1px 8px no-repeat,
    linear-gradient(var(--m), var(--m)) right 0 top 12px / 8px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right 12px top 0 / 1px 8px no-repeat,
    linear-gradient(var(--m), var(--m)) left 0 bottom 12px / 8px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left 12px bottom 0 / 1px 8px no-repeat,
    linear-gradient(var(--m), var(--m)) right 0 bottom 12px / 8px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right 12px bottom 0 / 1px 8px no-repeat;
}

/* ---- Black & white until you hover, then full colour ---- */
.bw { filter: grayscale(1) contrast(1.05); transition: filter .5s ease; }
[data-project]:hover .bw, .bw:hover { filter: none; }

/* ---- Cursor label ---- */
#cursor {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  color: #fff; mix-blend-mode: difference;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  opacity: 0; transition: opacity .2s;
}
#cursor.on { opacity: 1; }
@media (hover: none) { #cursor { display: none; } }


/* On phones the page scrolls under the corner info, so fade the paper in behind it */
@media (max-width: 859px) {
  body::before, body::after {
    content: ""; position: fixed; left: 0; right: 0; z-index: 65; pointer-events: none;
  }
  body::before { top: 0; height: 84px; background: linear-gradient(var(--paper) 65%, rgba(242,241,237,0)); }
  body::after  { bottom: 0; height: 72px; background: linear-gradient(rgba(242,241,237,0), var(--paper) 45%); }
  body.intro::before, body.intro::after { display: none; }
}

@media (max-width: 760px) {
  .chrome.tl .role { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; animation-duration: .01s !important; }
}