/* Design tokens. Every value the inspector can tweak lives here (press G).
   Two scopes: desktop/tablet (the base) and mobile (< 656px). Vertical sizes are counted in
   baselines (-bl) so everything sits on the baseline grid. */

:root {
  /* Color: three picked colors (Figma 289:2058); body copy and captions are mixed from the ink
     toward the page, so they follow when those change. Each project sets its own page color
     (and --hero-bg) in its <head>. Keep text at 4.5:1 or more on every project's page: at
     these values, on #ddeeef / #e5e5da, ink 7.2 / 6.8, accent 8 / 7.5, text 5.8 / 5.5,
     muted 4.8 / 4.6. */
  --color-backdrop: #ddeeef;  /* the page, unless the project sets its own */
  --color-ink: #504b41;       /* title, role line, links */
  --color-accent: #254b52;    /* client */
  --text-mix: 90%;            /* body copy: this much ink, the rest page */
  --muted-mix: 82%;           /* captions */
  --color-text: color-mix(in oklab, var(--color-ink) var(--text-mix), var(--color-backdrop));
  --color-muted: color-mix(in oklab, var(--color-ink) var(--muted-mix), var(--color-backdrop));
  --color-key: #00c9ea;       /* the home's key color (contact circles) */
  --color-placeholder: #f5f5f5; /* frames */
  --color-placeholder-hero: #e5e5e5;

  /* Font families. --*-m is (ascent − descent) / 2 in em, for the baseline math. */
  --font-styrene: "Styrene A", ui-sans-serif, system-ui, sans-serif;
  --font-sharphy: "Sharphy", "Styrene A", ui-sans-serif, sans-serif;
  --styrene-m: 0.264;
  --sharphy-m: 0.35;

  /* Rhythm */
  --baseline: 9px;

  /* Grid: fixed-width columns. Wider screens fit more of them (up to --grid-cols) and get
     bigger margins; a column is always the same width. */
  --grid-col: 110px;
  --grid-gutter: 32px;
  --grid-margin: 60px;  /* minimum outer margin */
  --grid-cols: 10;      /* maximum columns */
  --grid-row-bl: 8;     /* row module: 72 */
  --grid-gap-bl: 4;     /* vertical gap between rows and blocks: 36 */

  /* Layout switches, by how many columns fit (js/layout.js), so they follow the grid values */
  --layout-side-cols: 7;   /* side by side from here, captions under the media; stacked below */
  --layout-beside-cols: 8; /* captions beside the media from here */

  /* Type: sizes step by ~5:3 (11 · 18 · 30 · 50) */
  --client-font: var(--font-styrene);
  --client-m: var(--styrene-m);
  --client-weight: 400;
  --client-style: normal;
  --client-size: 30px;
  --client-leading-bl: 4;
  --client-tracking: -0.02em;
  --client-color: var(--color-accent);
  --client-gap-bl: 2;        /* space between client and title */

  --title-font: var(--font-sharphy);
  --title-m: var(--sharphy-m);
  --title-weight: 700;
  --title-style: normal;
  --title-size: 50px;
  --title-leading-bl: 7;
  --title-tracking: 0em;
  --title-color: var(--color-ink);

  --body-font: var(--font-styrene);
  --body-m: var(--styrene-m);
  --body-weight: 400;
  --body-style: normal;
  --body-size: 18px;
  --body-leading-bl: 3;
  --body-tracking: -0.024em;
  --body-color: var(--color-text);
  --body-para-bl: 3;
  --body-role-gap-bl: 1;     /* between the role line and the text after it */
  --body-link-gap-bl: 2;     /* between the text and the "See more" link */

  --display-font: var(--font-sharphy); /* the home's greeting */
  --display-m: var(--sharphy-m);
  --display-weight: 700;
  --display-style: normal;
  --display-size: 72px;
  --display-leading-bl: 9;
  --display-tracking: -0.029em;
  --display-color: var(--color-accent);

  --heading-font: var(--font-sharphy); /* section headings on the home */
  --heading-m: var(--sharphy-m);
  --heading-weight: 700;
  --heading-style: normal;
  --heading-size: 30px;
  --heading-leading-bl: 4;
  --heading-tracking: 0em;
  --heading-color: var(--color-accent);

  --caption-font: var(--font-styrene);
  --caption-m: var(--styrene-m);
  --caption-weight: 400;
  --caption-style: normal;
  --caption-size: 11px;
  --caption-leading-bl: 2;
  --caption-tracking: 0em;
  --caption-color: var(--color-muted);
  --caption-drop-rows: 2;    /* beside the media: row modules below the block's top */
  --caption-under-cols: 2;   /* under the media: widest it gets */
  --caption-under-gap-bl: 1; /* space between an image and the caption under it */

  /* Project layout, side by side. Columns count from 1. With captions beside, the media starts
     at --media-col; with captions under, right after the text. */
  --text-col: 1;
  --text-span: 3;
  --media-col: 5;            /* media runs from here to the last column */
  --hero-rows: 6;            /* most rows the hero gets (612px); fewer where that would make it taller than wide */
  --block-rows: 6;           /* a block can set its own with style="--rows: n" */
  --title-offset-bl: 0;      /* title's last baseline vs. the hero's bottom edge (+ = lower) */
  --body-offset-bl: 0;       /* body vs. its usual start, one gap below the hero (+ = lower) */
  --page-end-rows: 2;
  --text-pin-bl: 8;          /* scrolling, the text column pins this far from the top (72px) */

  /* Project layout, stacked (tablet + mobile) */
  --stack-hero-ratio: 0.667; /* hero height ÷ width, edge to edge (3:2) */
  --stack-cols: 5;           /* the stacked layout stops growing at this many columns (band and hero stay edge to edge) */
  --stack-hero-cols: 7;      /* the hero stops growing taller past this many columns wide (962px) */
  --stack-hero-min-bl: 0;    /* shortest the hero gets */
  --stack-title-top-bl: 10;  /* the title band, in the hero's color, above the hero: space above */
  --stack-client-gap-bl: 0;  /* client → title on the band (tighter than --client-gap-bl) */
  --stack-title-bottom-bl: 2; /* …and below the title */
  --stack-title-inset: 0px;  /* title's distance from the first column */
  --stack-text-cols: 5;      /* widest the text gets */
  --stack-media-ratio: 0.75; /* block height ÷ width */
  --stack-end-bl: 8;

  /* Home (index.html): one column, hanging off column 1 */
  --home-top-bl: 16;         /* air above the greeting */
  --home-byline-gap-bl: 4;   /* greeting → byline */
  --home-section-gap-bl: 8;  /* byline → Projects, strip → Contact, with a rule halfway */
  --home-byline-cols: 5;     /* widest the byline gets (full width when the grid is narrower) */
  --rule-section: 35%;       /* the rules between the home's sections: this much ink… */
  --home-heading-gap-bl: 3;  /* a heading → what follows it */
  --home-end-bl: 8;
  --tile-rows: 2;            /* project tiles: this many row modules tall (180px) */
  --circle-bl: 5;            /* contact circles: 45px */
  --exp-pad-bl: 3;           /* experience rows: air above and below each */
  --exp-gap-bl: 1;           /* …between the role and its line, when stacked */
  --exp-rule: 15%;           /* …and the hairline between rows: this much ink (softer than the section rules) */
  --tile-label-dim: 0.55;    /* project names under the tiles, at rest (1 on hover) */
  --art-size: 1195px;        /* the artwork behind the home: its width (the photo's own, so it stays sharp)… */
  --art-dx: 386px;           /* …its centre this far right of the page's centre (Figma 290:9387), so it stays with the composition on wide screens… */
  --art-y: 160px;            /* …and down… */
  --art-opacity: 0.35;       /* …how strong (the mock's 35%; the export has room up to 1)… */
  --art-fade: 80%;           /* …and where its edge starts fading, as a share of the drawing's radius */
  --home-link-top-bl: 3;     /* "Pablo" on project pages: this far from the top */

  /* Shape */
  --radius: 2px;             /* corners on every frame: felt, not seen */

  /* Motion (css/motion.css). Off for anyone who asks for reduced motion. */
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* a soft ease-out */
  --intro-duration: 700ms;   /* load-in: the text fades up… */
  --intro-stagger: 80ms;     /* …a beat apart… */
  --intro-rise: 8px;         /* …from this far down */
  --hero-duration: 1200ms;   /* …while the hero image settles */
  --hero-zoom: 1.2;          /* scrolling away, the hero pushes in to this… */
  --hero-drift: 2%;          /* …and drifts this far sideways, over the first screen */
  --settle-scale: 1.04;      /* scrolling in, images start this much bigger… */
  --settle-fade: 0.2;        /* …and this opaque… */
  --settle-rise: 50px;       /* …(cut-outs rise this far instead of scaling)… */
  --settle-range: 60vh;      /* …and settle over this much scrolling once they appear */
  --tile-zoom: 1.08;         /* hovering a project tile, its cover pushes in to this… */
  --tile-drift: 2%;          /* …drifting this far sideways… */
  --tile-zoom-ms: 1500ms;    /* …over this long, and lets go in --tile-release-ms */
  --tile-release-ms: 500ms;

  /* Derived */
  --row: calc(var(--grid-row-bl) * var(--baseline));
  --gap: calc(var(--grid-gap-bl) * var(--baseline));
}

/* Phones get their own grid. This is the one fixed breakpoint: 656px is where the desktop grid
   (n columns need n × col + (n − 1) × gutter + 2 × margin) stops fitting 4 columns. The
   inspector recalculates it when the desktop grid changes. */

@media (width < 656px) {
  :root {
    /* The one place columns aren't fixed: phones range 360–440px, so the columns stretch to
       fill the screen between the margins */
    --grid-col: calc((100vw - 2 * var(--grid-margin) - (var(--grid-cols) - 1) * var(--grid-gutter)) / var(--grid-cols));
    --grid-gutter: 18px;
    /* Margins scale with the screen too (9%: 32px on a 360 phone, 36 on a 402) and reach the
       desktop grid's 60px at the switch, so nothing jumps there */
    --grid-margin: clamp(24px, 9vw, 60px);
    --grid-cols: 4;
    --caption-under-cols: 3;
    --client-size: 24px;
    --client-leading-bl: 3;
    --title-size: 45px;
    --title-leading-bl: 6;
    --display-size: 52px;
    --display-leading-bl: 7;
    --heading-size: 24px;
    --heading-leading-bl: 3;
    --home-top-bl: 8;
  }
}