/* ===========================================================================
   Fabian Tombers — portfolio
   Brutalist, minimal, generative: one neon field, one photo, one block of
   copy. Colour and positions are drawn at random on every load (script.js).

   Everything white wears a `difference` blend, so the mark and the copy render
   as the exact opposite of the field colour — maximum contrast whichever neon
   the draw produced. Nothing is decorated: no borders, no shadows, no motion,
   and nothing is ever rotated — every edge on this page is orthogonal.

   Type is Aujournuit (Collletttivo, SIL OFL 1.1 — see assets/fonts/).
   ========================================================================= */

/* ── Aujournuit, five cuts + the variable one ─────────────────────────────
   Family names are the fonts' own, so a locally installed copy behaves the
   same. A browser only ever fetches the woff2 (with a woff fallback); the
   .ttf/.otf siblings sit alongside for desktop work. Airy, Condensed, Densed
   and the variable file are declared but unused — reaching for one later is a
   one-word change. The variable file carries a `wdth` axis: 50 is the
   condensed end, 200 the wide end. */
@font-face{
  font-family:"Aujournuit";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/Aujournuit-Regular.woff2") format("woff2"),
      url("fonts/Aujournuit-Regular.woff")  format("woff");
}
/* the Wide cut is no longer used — the name, the contact block and the photo
   credit are set in Helvetica now. The @font-face stays so that switching back
   is a one-line change; a declared-but-unused family is never downloaded. */
@font-face{
  font-family:"Aujournuit Wide";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/Aujournuit-Wide.woff2") format("woff2"),
      url("fonts/Aujournuit-Wide.woff")  format("woff");
}
@font-face{
  font-family:"Aujournuit Airy";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/Aujournuit-Airy.woff2") format("woff2"),
      url("fonts/Aujournuit-Airy.woff")  format("woff");
}
@font-face{
  font-family:"Aujournuit Condensed";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/Aujournuit-Condensed.woff2") format("woff2"),
      url("fonts/Aujournuit-Condensed.woff")  format("woff");
}
@font-face{
  font-family:"Aujournuit Densed";           /* the file is named *-Densed */
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/Aujournuit-Densed.woff2") format("woff2"),
      url("fonts/Aujournuit-Densed.woff")  format("woff");
}
@font-face{
  font-family:"Aujournuit VF";
  font-style:normal; font-weight:400; font-stretch:50% 200%; font-display:swap;
  src:url("fonts/Aujournuit-VariableVF.woff2") format("woff2"),
      url("fonts/Aujournuit-VariableVF.ttf")   format("truetype");
}

:root{
  --pad:    clamp(14px, 2.2vw, 30px);
  --bg:     #ff0066;          /* fallback field; script.js repaints it */
  --inv:    #00ff99;          /* the field's inverse; script.js keeps it in sync */
  --ink:    #ffffff;          /* painted white, then inverted by the blend */
  --blend:  difference;       /* set to `normal` for plain white on colour */
  --mark-w: clamp(70px, 9.5vw, 140px);
  --copy-w: min(56ch, 72vw);
  --mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font:      "Aujournuit", var(--mono);
  --font-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  overflow:hidden;              /* the field is a poster, never a scroller */
  overscroll-behavior:none;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:clamp(12px, 0.95vw + 6px, 15px);
  font-weight:400;
  line-height:1.45;
  letter-spacing:.04em;      /* text keeps the casing it is written in */
}

/* the layer that gets inverted against the field */
.ink{ color:var(--ink); mix-blend-mode:var(--blend); }

/* ── the mark ───────────────────────────────────────────────────────────── */
.mark{
  position:fixed;
  top:var(--pad);
  left:var(--pad);
  width:var(--mark-w);
  height:auto;
  z-index:3;
  pointer-events:none;
}

/* ── the photo ──────────────────────────────────────────────────────────── */
.shot{
  position:fixed;
  margin:0;
  left:var(--pad);
  top:32vh;                     /* fallback spot, used only without script.js */
  width:min(36vw, 520px);
  z-index:1;
}
.shot img{ display:block; width:100%; height:auto; }

.credit{
  display:block;
  margin-top:.55em;
  font-family:var(--font-helvetica);   /* caption in Helvetica */
  font-size:.8em;
  letter-spacing:.06em;
  color:var(--inv);           /* straight colour: a blend would be isolated here */
  opacity:.9;
}
.credit[hidden]{ display:none; }

/* ── the copy ───────────────────────────────────────────────────────────── */
.copy{
  position:fixed;
  margin:0;
  right:var(--pad);
  bottom:var(--pad);            /* fallback spot, used only without script.js */
  width:var(--copy-w);
  max-width:calc(100vw - 2 * var(--pad));
  z-index:2;
}
.copy p{ margin:0; }
.copy-text{ text-wrap:pretty; }   /* his name lives in the mark, not in the bio */
.copy-contact{ margin-top:1.2em; line-height:1.7; font-family:var(--font-helvetica); }

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

/* the links in the copy block get the underline and the reverse hover; the
   photo's own link must not (a white slab behind the photo would look broken) */
.copy a{ border-bottom:1px solid currentColor; }
.copy a:hover,.copy a:focus-visible{ background:var(--ink); color:#000; }

/* the photo and its caption open the photographer's page in a new tab */
.shot-link{ display:block; }

:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
::selection{ background:var(--ink); color:#000; }

/* ── viewports too small or too zoomed for a poster fall back to a plain
      scrollable page (script.js adds .flow) ─────────────────────────────── */
body.flow{ overflow:auto; }
body.flow .mark{ position:static; margin:var(--pad) var(--pad) 0; }
body.flow .shot{ position:static; width:min(78vw, 560px); margin:9vh var(--pad) 0; }
body.flow .copy{ position:static; width:auto; max-width:52ch; margin:9vh 0 calc(var(--pad) * 4) var(--pad); }

@media (max-width:720px){
  :root{ --mark-w:clamp(60px, 23vw, 105px); }
  .copy{ width:calc(100vw - 2 * var(--pad)); }
  .shot{ width:min(64vw, 380px); }
}

@media print{
  body{ background:#fff; color:#000; overflow:visible; }
  .ink{ mix-blend-mode:normal; color:#000; }
  .mark{ position:static; width:90px; filter:invert(1); }
  .shot,.copy{ position:static; width:auto; max-width:none; }
  .credit{ color:#000; }
  a{ border-bottom:0; }
}