/* ==========================================================================
   Tokens — mirrors the Figma file (page "NEW DESIGN", component "Nav")
   One theme for now: black background, white text.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Colour ----------------------------------------------------------------- */
  --bg:     #000000;
  --text:   #fafafa;
  --cursor: #ffffff;
  --selection-bg:   var(--text);
  --selection-text: var(--bg);

  /* Type (Figma: 13/17, Medium) -------------------------------------------- */
  --font-mono:      "ABC Areal Mono", ui-monospace, monospace;        /* counter */
  --font-semi-mono: "ABC Areal Semi Mono", ui-monospace, monospace;   /* title, links */
  --nav-size:       13px;
  --nav-leading:    17px;
  --nav-weight:     500;
  --underline-thickness: 1px;
  --underline-offset:    3px;

  /* Nav — Desktop (≥ 1024px). Tablet and Mobile override below. ------------ */
  --gutter:         16px;  /* page margin left/right, and gap between counter, title and Info */
  --nav-pad-top:    12px;  /* space above the text */
  --nav-pad-bottom: 11px;  /* 12 + 17 + 11 = 40px nav */

  /* Terminal --------------------------------------------------------------- */
  --cursor-w:   8px;
  --cursor-h:   12px;
  --cursor-top: 3px;      /* cursor sits 3px down in the 17px line (as in Figma) */
  --cursor-gap: 0.42em;   /* = one space in Semi Mono (≈5.5px) */
  --blink:      1s;       /* one full on/off cycle at rest */

  /* Projects --------------------------------------------------------------- */
  /* Grid: 24 columns on desktop, 12 on tablet, 6 on mobile. Margin and
     gutter = --gutter, the same as the nav. --span-landscape = how many
     columns a landscape image spans. */
  --cols:            24;
  --span-landscape:  14;
  --col:             calc((100vw - 2 * var(--gutter) - (var(--cols) - 1) * var(--gutter)) / var(--cols));
  /* Landscape (16:9) width = its span. Every image shares that height
     ("option A"): portraits are sized by height, so they feel as present.
     Capped on short screens so the image always fits with room around it. */
  --tile-width:      calc(var(--span-landscape) * var(--col) + (var(--span-landscape) - 1) * var(--gutter));
  --media-max-h:     calc(100svh - 160px);
  --media-radius:   0px;
  --tile-scale-min: 1;
  --fade-max:       240px;
  --tile-height:    min(calc(var(--tile-width) * 9 / 16), var(--media-max-h));
  /* Portraits are drawn a little larger than landscapes so the two feel
     the same size (1 = same height as landscape) */
  --portrait-scale: 1.2;
  --portrait-height: min(calc(var(--tile-height) * var(--portrait-scale)), calc(100svh - 120px));
  /* The edge blur stops where the tallest image (a portrait) starts */
  --fade-height:    clamp(0px, calc((100vh - var(--portrait-height)) / 2), var(--fade-max));
  --fade-height:    clamp(0px, calc((100dvh - var(--portrait-height)) / 2), var(--fade-max));   /* visible screen height on phones */
  --dwell:          31vh;
  --edge-soft:      32px;
  --fade-tint:      0%;

  /* Boot: ASCII fill in the first image area ------------------------------ */
  --load-size:    11px;
  --load-leading: 13px;

  /* End slide: ASCII art --------------------------------------------------- */
  --ascii-size:    13px;
  --ascii-cols:    67;    /* widest line of the art, in characters */

  /* Information page ------------------------------------------------------- */
  --body-size:    26px;
  --body-leading: 32px;
  --info-width:   480px;  /* text block on Information; on mobile it fills the width */

  /* Motion / snap ---------------------------------------------------------- */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-fade:   0ms;                            /* ASCII → first image after the boot (0ms = instant swap) */
  --reveal-ease:   cubic-bezier(0.25, 0, 0.25, 1);
  --zoom-dur:      500ms;                          /* click-to-zoom on an image */
  --zoom-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --snap:          native;   /* native | glide | off */
  --snap-duration: 850ms;
  --snap-ease:     cubic-bezier(0.45, 0, 0.2, 1);
}

/* Nav — Tablet (600–1023px): 24 gutter, 14 top → 44px nav */
@media (max-width: 1023px) {
  :root { --gutter: 24px; --nav-pad-top: 14px; --nav-pad-bottom: 13px; --cols: 12; --span-landscape: 10; }
}

/* Nav — Mobile (< 600px): 24 gutter, 20 top → 56px nav */
@media (max-width: 599px) {
  :root {
    --gutter: 24px; --nav-pad-top: 20px; --nav-pad-bottom: 19px;
    /* One column: every image is as wide as the screen minus 24px each side */
    --cols: 1; --span-landscape: 1;
    /* Tallest image (a 2:3 portrait at full width), kept clear of the nav
       top and bottom (56px nav + 8px air each side) */
    --media-max-h: calc(100svh - 128px);
    --portrait-height: min(calc((100vw - 2 * var(--gutter)) * 3 / 2), var(--media-max-h));
  }
}