/*
  Design tokens taken from the Figma mockup (file "Untitled", frame "Slide 16:9 - 5").
  The Figma file has no variables, so these values were read directly from the layers.
  Sizes are unitless numbers in Figma pixels. Components multiply them by --u,
  so the whole page scales down evenly on screens narrower than 1920px.
*/
:root {
  /* Colours (the label colours live inside the label shapes in assets/labels) */
  --color-paper: #efefef;          /* page background, and the cut-out text inside labels */
  --color-ink: #000000;            /* all text and hand-drawn lines */
  --color-label-red: #d92b2b;      /* "Product Designer", Psykhe.co */
  --color-label-blue: #005eb8;     /* PropertyGuru */
  --color-label-yellow: #eaba00;   /* Mesinkira.io, KWSP */
  --color-label-black: #000000;    /* Aleph-labs, Standard Chartered */
  --paper-texture-opacity: 0.4;

  /* Fonts */
  --font-display: "Quicksand", sans-serif;
  --font-hand: "Covered By Your Grace", cursive;
  --weight-on-light: 460;          /* dark text on a light colour (the yellow pill): between regular and medium, so it looks as heavy as light-on-dark medium */
  --weight-medium: 500;
  --weight-bold: 700;

  /* Text sizes (Figma px) */
  --text-hero: 140;        /* "Hello, I am a" and "Product Designer" */
  --text-section: 80;      /* "Past project" */
  --text-intro: 48;        /* name, tagline, footer note (Figma 50, now on the scale) */
  --text-heading: 40;      /* years, labels, project titles, proof numbers */
  --text-body: 30;         /* handwritten descriptions and lists (Figma 32, now on the scale) */
  --text-small: 24;        /* card tags and the footer source note, in Quicksand (not in the mockup) */
  --text-small-min: 16px;  /* small text never goes below this on narrow screens */

  /* Line heights (Figma px). Other text uses the font's normal line height, as in Figma. */
  --leading-display: 130;

  /* Spacing scale (Figma px). Every gap on the page uses one of these. */
  --space-1: 4;
  --space-2: 8;
  --space-3: 16;
  --space-4: 24;
  --space-5: 32;
  --space-6: 48;
  --space-7: 72;
  --space-8: 120;

  /* Spacing (Figma px) */
  --page-width: 1920;
  /* Sections. On desktop each section is one screen tall and its content is centred.
     Content bounds below are Figma px measured from each section's top. */
  --timeline-height: 2316;         /* timeline canvas (pinned: one screen per step) */
  --projects-content-top: -40;     /* top of the first cards (115 higher than the mockup, so the taller cards clear the oval) */
  --projects-content-height: 1219; /* to the "read case study" notes under the lower cards (cards grow with their text) */
  --slide-pad: 32px;               /* minimum space above and below when a screen is short */
  --gap-xs: var(--space-1);
  --gap-s: var(--space-2);
  --card-min-height: 312.62;       /* Figma card height; cards grow taller to fit their text */
  --card-stroke: 2.5;              /* every card outline's line weight, whatever the card's size (js/card-outline.js) */
  --card-stroke-min: 1.5px;        /* never thinner than this on small screens */
  --column-text: 470;
  --column-card: 520;      /* project card text column */
  --card-width: 660;       /* project card (Figma 599.38, wider so the text has room) */
  --card-pad-x: var(--space-7); /* card text inset from the left outline */
  --card-pad-y: var(--space-6); /* card text inset from the top and bottom outline */
  --card-pad-y-a: var(--space-7); /* top inset on outline A cards, whose top-left corner dips lower */
  --card-inset-x: 11%;          /* card side insets never go below this share of the card's width */
  --card-inset-top: 9%;         /* card top inset, as a share of its width */
  --card-inset-top-a: 12%;      /* the same, on outline A cards */
  --card-inset-bottom: 10%;     /* card bottom inset on small desktops, as a share of its width */
  --list-indent: 48;

  /* Interaction states (not in the mockup, agreed as assumptions) */
  --color-focus: var(--color-ink);
  --focus-ring-width: 3px;
  --focus-ring-offset: 4px;
  --color-card-highlight: #fbfbfa;  /* near-white, softer than pure white on the paper */
  --link-underline-width: 1.5px;
  --link-underline-offset: 0.18em;
  --target-min: 24px;               /* smallest click / tap height for text links */
  --duration-underline: 220ms;      /* underline drawing in */
  --write-char: 160ms;              /* each letter's pen reveal */
  --write-stagger-max: 40ms;        /* gap between letters (shorter for long text) */
  --write-total-max: 650ms;         /* a whole link never takes longer than this to write */
  --write-char-pill: 320ms;         /* footer pills write more slowly, like a pen taking its time */
  --write-stagger-pill: 100ms;
  --write-total-pill: 1100ms;
  --color-card-shadow: rgb(0 0 0 / 0.15);
  --card-raise: 6;          /* Figma px the card lifts on hover and focus */
  --card-raise-pressed: 2;  /* drops part way back while pressed */
  --card-shadow-y: 12;
  --card-shadow-blur: 16;
  --duration-hover: 180ms;
  --duration-press: 100ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Hero role label (sizes from the Figma "Product Designer" label) */
  --role-height: 206;              /* Figma 190, a little roomier so the text does not feel cut off */
  --role-pad-top: 28;              /* Figma 20 */
  --role-pad-x: 40;                /* Figma 36 */
  --role-clip-room: 0.15em;        /* extra clip space for letter tails while the title slides */
  --role-leading: 150;
  --role-switch-every: 1500ms;     /* how long each role shows */
  --duration-role-change: 300ms;   /* slide, colour and width change */

  /* Pinned timeline */
  --timeline-step-scroll: 60vh;    /* scroll distance for each entry */
  --duration-timeline-step: 500ms; /* glide, fade in and line drawing */
  --step-rise: 24;                 /* Figma px an entry rises as it fades in */

  /* Past project mind-map (js/project-map.js) */
  --duration-draw-oval: 500ms;
  --duration-draw-arrow: 800ms;
  --map-arrow-start: 400ms;        /* arrows start after the oval */
  --map-stagger: 150ms;            /* gap between arrows */
  --map-card-after-arrow: 600ms;   /* card fades in as its arrow lands */
  --duration-card-in: 400ms;
  --duration-redraw: 700ms;        /* arrow redraw on card hover */
  --map-active-stroke: 3;          /* arrow line weight on card hover (default 2) */
  --duration-dim: 200ms;
  --dim-opacity: 0.5;
  --cta-nudge: 6;                  /* Figma px the "read case study" note moves right */
  --duration-page-transition: 450ms;

  /* "Let's Talk" footer (Figma px). Not in Figma: layout uses the page's own sizes and assets. */
  --page-margin: 103;               /* left margin used across the page */
  --footer-height: 808;
  --text-footer-giant: 250;      /* "Let's Discuss" fills the width between the 103 margins */
  --footer-note-gap: var(--space-6);    /* handwritten note to the giant heading */
  --footer-bottom-gap: var(--space-8);  /* giant heading to the pills */
  --footer-pill-pad-y: 28;
  --footer-pill-pad-x: 72;
  --footer-pill-gap: var(--space-5);    /* between pills */
  --footer-pill-outline-out: 6;   /* the hand-drawn outline reaches a little past the pill */
  --footer-tag-lift: -0.12em;     /* "Let’s" and the switching word share a baseline (measured) */  --footer-meta-gap: var(--space-7);    /* pills to the location note */
  --footer-draw-delay: 300ms;     /* the heading is read first, then the pill outlines draw (at --duration-draw-arrow) */
  /* Case study pages (css/study.css). Layout from the Figma "case study" frame, scaled to 1920. */
  --study-measure: 1714;          /* content width between the 103 page margins */
  --study-hero-tilt: -0.6deg;     /* the pinned hero photo */
  --study-pinned-w: 1000;         /* the reflection note, widest: a one-line lesson wraps onto 2 or 3 lines */
  --paper-inset-x: 11%;           /* side padding inside the hand-drawn card outline (it leans in ~10% of its width) */
  --paper-inset-y: 8%;            /* top and bottom padding in tall paper (a share of its width) */
  --frame-inset-top: 12%;         /* work frames: the outline's top corners dip lower as the frame gets taller */
  --frame-inset-bottom: 10%;      /* work frames: room under the caption's last line */
  --study-hero-shot-min: 280;     /* the hero photo never gets shorter than this; the hero grows instead */
  --study-text: 760;              /* longest line of running text */
  --text-study-heading: 56;       /* section headings */
  --text-study-sub: 32;           /* small headings inside a section */
  --text-study-body: 28;          /* running text, in Quicksand */
  --text-study-meta: 18;          /* ROLE / DURATION labels */
  --leading-study-body: 1.55;
  --study-step-gap: 140;          /* centre line to each journey step */
  --study-step-w: 700;            /* journey step text, widest (wide, so notes wrap onto fewer lines) */
  --study-step-row-gap: 104;      /* desktop: between overlapping journey steps (two make the gap on each side) */
  --study-step-pull: 60;          /* left-hand steps sit this much closer to the line */
  --duration-reveal: 500ms;       /* each part fading and rising in (same as a timeline step) */
  --reveal-stagger: 120ms;        /* gap between parts appearing */
  --study-marker: 44;             /* journey markers */
  --study-flow-arrow-in: 160;     /* flow diagram: the column where two arrows meet the hub */
  --study-flow-arrow-out: 130;    /* flow diagram: the column with the arrow to the result */
  --study-result-w: 300;          /* each circled outcome */
  --study-result-h: 150;
  --color-study-shot: #e3e1da;    /* empty image slot, a shade darker than the paper */
  --color-study-todo: var(--color-label-red); /* placeholder text still to fill */
  --study-lightbox-max: 1760;     /* enlarged image sheet, widest */
  --study-lightbox-notes: 460;    /* notes beside the enlarged image */
  --study-lightbox-img-compact: 900px; /* enlarged image on phones: scrolls sideways */
  --color-lightbox-backdrop: rgb(0 0 0 / 0.6);
  --touch-target-lightbox: 44px;  /* "close" is easy to hit everywhere */

  /* Soft page snap (js/page-snap.js): quick start, long gentle landing */
  --duration-page-snap: 1000ms;
  --ease-page-snap: cubic-bezier(0.16, 1, 0.3, 1);

  /* Scale unit: 1px at 1920px wide and above, smaller below */
  --u: min(1px, calc(100cqw / var(--page-width)));
}

@media (min-width: 1920px) {
  :root {
    --u: 1px;
  }
}

/* Phones and tablets (under 1024px): one-column layout, not designed in Figma (assumption).
   --u is fixed so Figma sizes become readable: body 19px, headings 24px, labels 46px tall. */
@media (max-width: 1023.98px) {
  :root {
    --u: 0.6px;
    --space-page: 20px;            /* side margin */
    --space-section: 56px;         /* top and bottom of each section */
    --space-stack: 40px;           /* between timeline entries and between cards */
    --space-card-y: 32px;          /* inside a card */
    --space-card-x: 28px;
    --space-card-top-a-compact: 56px; /* top of outline A cards, whose top-left corner dips lowest */
    --space-card-top-narrow: 64px;    /* card top under 360px wide */
    --space-card-top-a-narrow: 72px;  /* outline A card top under 360px wide */
    --study-note-max-compact: 480px;  /* case study notes on phones and tablets */
    --card-max-compact: 640px;     /* cards stop growing on tablets */
    --card-pad-ratio: 11%;         /* the outline's sides lean in by up to ~10% (at the bottom corners) */
    --timeline-indent: 44px;       /* room for the hand-drawn line */
    --marker-size-compact: 28px;   /* hand-drawn markers on the line */
    --measure-compact: 60ch;       /* longest text line */
    --leading-hand-compact: 1.45;  /* handwriting line spacing (desktop keeps the mockup's) */
    --text-hero-compact: clamp(44px, 12vw, 96px);
    --text-role-compact: clamp(24px, 7.4vw, 64px); /* "an AI Design Engineer" fits a 320px phone */
    --text-tagline-compact: clamp(20px, 6vw, 28px); /* always smaller than the role label */
    --text-proof-compact: 24px;    /* proof numbers */
    --space-proof-compact: 16px;   /* between stacked proof points */
    --touch-target: 44px;
  }
}