:root {

  --black: #000000;
  --white: #FFFFFF;
  --gray: #727272;

  --cons-on-light: var(--accent-on-light);
  --cons-on-dark: var(--accent-on-dark);

  --ground-light: var(--white);
  --ground-index: var(--ground-light);
  --ground-dark: var(--black);
  --gray-on-light: var(--gray);
  --gray-on-dark: var(--gray);

  --accent-on-light: #AD334C;
  --accent-on-dark: #AD334C;

  --cur-plus-k: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25'%3E%3Cpath d='M3.5 12.5h18M12.5 3.5v18' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 12 12, pointer;
  --cur-plus-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25'%3E%3Cpath d='M3.5 12.5h18M12.5 3.5v18' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 12 12, pointer;
  --cur-open-k: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='27'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='3.2'%3E%3Cpath d='M2.5 14.5h20M12.5 4.5v20'/%3E%3Cpath d='M18.6 9.4l7.3-7.3M20.2 2.5h6.1v6'/%3E%3C/g%3E%3Cg fill='none' stroke-width='1.2'%3E%3Cpath d='M3.5 14.5h18M12.5 5.5v18' stroke='%23000'/%3E%3Cpath d='M19.5 8.5l6-6M21 2.5h4.5V7' stroke='%23AD334C'/%3E%3C/g%3E%3C/svg%3E") 12 14, pointer;
  --cur-open-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='27'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='3.2'%3E%3Cpath d='M2.5 14.5h20M12.5 4.5v20'/%3E%3Cpath d='M18.6 9.4l7.3-7.3M20.2 2.5h6.1v6'/%3E%3C/g%3E%3Cg fill='none' stroke-width='1.2'%3E%3Cpath d='M3.5 14.5h18M12.5 5.5v18' stroke='%23fff'/%3E%3Cpath d='M19.5 8.5l6-6M21 2.5h4.5V7' stroke='%23AD334C'/%3E%3C/g%3E%3C/svg%3E") 12 14, pointer;
  --cur-link: var(--cur-plus-k); --cur-link-inv: var(--cur-plus-w); --cur-open: var(--cur-open-k);

  --font: 'HNT', 'Helvetica Now Text', 'HNT Helvetica', 'HNT Inter', 'HNT Fallback', Arial, sans-serif;

  --frame: 18px;
  --strip: 76px;
  --bar: 56px;
  --pad: clamp(20px, 3.3vw, 56px);
  --gut: clamp(12px, 1.7vw, 24px);
  --lx: calc(var(--frame) + var(--pad) + env(safe-area-inset-left, 0px));
  --rx: calc(var(--strip) + var(--pad) + env(safe-area-inset-right, 0px));

  --ease-plot: cubic-bezier(.65, 0, .35, 1);
  --ease-light: cubic-bezier(.22, 1, .36, 1);
  --ease-ui: cubic-bezier(.2, 0, 0, 1);

  --t-display: clamp(46px, min(calc(7.523vw - 19.84px), 11.5vh), 168px);
  --t-title: clamp(40px, 5vw, 96px);
  --t-heading: clamp(28px, 3.05vw, 58px);
  --t-subhead: clamp(24px, 2.08vw, 40px);
  --t-lead: 20px;
  --t-body: 17px;
  --t-small: 15px;
  --t-label: 11px;
  --t-micro: 11px;

  --tr-display: -.04em;
  --tr-heading: -.02em;
  --tr-text: normal;
  --tr-label: .12em;

  --lh-display: .95;
  --lh-heading: 1.1;
  --lh-text: 1.3;
  --lh-body: 1.5;
  --lh-micro: 1;
}

html[data-tone="vellum"] {
  --ground-light: #EAEDEB;
  --ground-dark: #0B0D10;
}

[data-ground="light"] {
  --bg: var(--ground-light); --fg: var(--black); --fg2: var(--gray-on-light); --fg-inv: var(--white);
  --fill-inv: var(--ground-dark);
  --rule: rgba(0, 0, 0, .13); --rule-2: rgba(0, 0, 0, .32);
  --cons: var(--cons-on-light);
  --accent: var(--accent-on-light);
  --logo: var(--black);
  --cur-link: var(--cur-plus-k); --cur-link-inv: var(--cur-plus-w); --cur-open: var(--cur-open-k);
  color: var(--fg);
}
[data-ground="dark"] {
  --bg: var(--ground-dark); --fg: var(--white); --fg2: var(--gray-on-dark); --fg-inv: var(--black);
  --fill-inv: var(--ground-light);
  --rule: rgba(255, 255, 255, .12); --rule-2: rgba(255, 255, 255, .28);
  --cons: var(--cons-on-dark);
  --accent: var(--accent-on-dark);
  --logo: var(--white);
  --cur-link: var(--cur-plus-w); --cur-link-inv: var(--cur-plus-k); --cur-open: var(--cur-open-w);
  color: var(--fg);
}

@media (max-width: 1023px) {
  :root { --strip: 0px; --frame: 10px; --rx: calc(var(--frame) + var(--pad) + env(safe-area-inset-right, 0px)); }
}
@media (max-width: 640px) {
  :root { --pad: 16px; --gut: 10px; }

  :root { --t-lead: 18px; --t-body: 16px; --t-small: 14px; }
}