/* ------------------------------------------------------------------
   Design tokens. Colours are sampled from the layout mockup in
   assets-2/Materials/websitelayout-02.jpg; proportions are measured
   from the same file.
   ------------------------------------------------------------------ */
:root {
  /* palette */
  --ink:          #262321;  /* headings, body, UI text */
  --pink:         #d78da9;  /* rules, links, controls */
  --pink-deep:    #c06f8e;  /* hover */
  --muted:        #b9b5b0;  /* disabled controls */
  --ground:       #fbf9f6;  /* base under the paper texture */
  --paper:        url("../img/paper-background.jpg");
  --rule:         rgba(38, 35, 33, 0.12);
  --arrow-bg:     #e1e0dd;
  --arrow-fg:     #9b9b9a;
  --focus:        #c06f8e;

  /* type */
  --font-title:   "Bubblegun", "Trebuchet MS", sans-serif;
  --font-body:    "Seravek", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --fs-title:     21px;
  --fs-credits:   18px;   /* the project meta line */
  --fs-body:      16px;
  /* Header contact and the mobile menu button borrowed --fs-credits; they
     keep their own size so the meta line can grow independently. */
  --fs-contact:   16px;
  --fs-controls:  12px;
  --lh-body:      1.6;
  --ls-nav:       1px;

  /* layout */
  --canvas-max:   1100px;
  --canvas-pad-x: 100px;
  --canvas-pad-t: 60px;

  --nav-gap:      30px;
  --nav-pad-y:    36px;

  /* home grid: 3 up */
  --grid-col:     28.57142857%;
  --grid-gutter:  4.76190476%;
  --grid-row-gap: 5%;

  /* project view: 39 / 61, the gutter carried inside the meta column */
  --meta-col:     38.7%;
  --meta-gap:     7.8%;

  /* gallery */
  --stage-ratio:  16 / 9;
  --thumb-h:      56px;
  --thumb-gap:    6px;
  --thumb-strip:  34px;
  --arrow-w:      32px;
  --arrow-h:      46px;

  --stack:        37px;
  --logo-w:       150px;   /* subpages */
  --logo-w-home:  180px;   /* the landing page carries a larger mark */
  --icon-h:       18px;

  --speed:        0.14s;
}

@media (max-width: 1023px) {
  :root { --canvas-pad-x: 50px; --canvas-pad-t: 40px; }
}

@media (max-width: 767px) {
  :root { --canvas-pad-x: 17px; --canvas-pad-t: 20px; --logo-w: 130px; }
}