/* ==========================================================================
   TOKENS — every colour, size and spacing value in the site lives here.
   Change a value once and it updates everywhere.
   ========================================================================== */

   :root {
    /* ---- colour ---------------------------------------------------------- */
    --c-bg:            #191919;
    --c-text:          #ffffff;
    --c-text-muted:    #e0e0e0;   /* card subtitles */
    --c-rule:          #ffffff;   /* the vertical line beside the nav */
    --rule-w:          1px;       /* its thickness — set to 0 to remove it */
    --rule-overhang:   70px;      /* how far it runs past the content, toward the footer */
    --c-footer-top:    #000000;   /* footer gradient start */
    --c-footer-bottom: #4b4b4b;   /* footer gradient end */
  
    --o-nav-idle:      0.5;       /* nav items you are NOT currently on */
    --o-hover-image:   0.78;      /* image dim on card hover */
  
    /* ---- type ------------------------------------------------------------ */
    --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-mark: 'Inter', system-ui, -apple-system, sans-serif;  /* JAMES WANG only */
  
    --w-xlight:   200;
    --w-light:    300;
    --w-regular:  400;
    --w-medium:   500;
    --w-semibold: 600;
    --w-bold:     700;
    --w-xbold:    800;
  
    --fs-name:          23px;   /* JAMES WANG */
    --fs-service:       17px;   /* GRAPHIC DESIGNER */
    --fs-nav:           18px;   /* WORK / ABOUT / CONTACT / RESUME */
    --fs-card-title:    20px;
    --fs-card-meta:     18px;
    --fs-page-title:    35px;   /* project page heading */
    --fs-body:          20px;
    --fs-prose:         18px;   /* running text: bio + project columns */
    --fs-heading:       25px;   /* EDUCATION / KEY SKILLS */
    --fs-section:       18px;   /* OTHER PROJECTS */
    --fs-related-title: 17px;
    --fs-related-meta:  15px;
    --fs-footer:        20px;
    --fs-contact:       26px;
  
    --lh-tight:  1.2;
    --lh-body:   1.45;
    --lh-footer: 45px;
  
    /* ---- layout ---------------------------------------------------------- */
    --nav-w:      248px;  /* sidebar column, up to and including the rule */
    --nav-x:       50px;  /* nav text inset from the left edge */
    --nav-y:       44px;  /* nav starts this far down */
    --nav-step:    50px;  /* distance between nav items */
    --menu-step:   45px;  /* distance between items in the mobile menu */
    --main-inset:  20px;  /* space between the rule and the content column */
    --page-edge:   50px;  /* right-hand page margin */
  
    --about-measure: 30em;  /* blurb line length — ~12 words per line */
  
    --col-gap:     30px;  /* gap between two items on one row */
    --row-gap:     50px;  /* gap between rows */
  
    --top-work:    50px;  /* content top padding, homepage */
    --top-page:  var(--nav-y);  /* project pages: title lines up with the logo */
    --top-text:   146px;  /* content top padding, bio + contact */
  
    --card-ratio:  1920 / 1300;  /* every homepage thumbnail is this shape */
    --card-title-gap: 25px;
    --card-meta-gap:  10px;
  
    --footer-h:      160px;
    --footer-gap:    110px;   /* space above the footer */
    --logo-w:         140px;
  
    --dur: .2s;               /* hover transition */
  }
  
  /* ==========================================================================
     MOBILE — the same tokens, retuned. No layout rules are repeated below;
     the layout adapts because these numbers changed.
     ========================================================================== */
  
  @media (max-width: 767px) {
    :root {
      --fs-name:          18px;
      --fs-nav:           22px;   /* nav is a full-screen menu on mobile */
      --fs-card-title:    18px;
      --fs-card-meta:     16px;
      --fs-page-title:    22px;
      --fs-body:          16px;
      --fs-prose:         15px;
      --fs-heading:       18px;
      --fs-section:       16px;
      --fs-related-title: 18px;
      --fs-related-meta:  16px;
      --fs-footer:        18px;
      --fs-contact:       22px;
      --lh-footer:        32px;
  
      --nav-w:        0px;
      --rule-w:       0px;   /* no vertical rule on mobile */
      --rule-overhang: 0px;
      --about-measure: none; /* full width on a phone */
      --nav-x:       20px;
      --main-inset:  20px;
      --page-edge:   20px;
  
      --col-gap:     20px;
      --row-gap:     40px;
  
      --top-work:    25px;
      --top-page:    25px;
      --top-text:    25px;
  
      --footer-h:      130px;
      --footer-gap:     60px;
      --logo-w:         52px;
    }
  }