@charset "UTF-8";
/*! ------------------------------------------------
 * Project Name: Name: Ignite - Portfolio and Landing Page Template
 * Project Description: Ignite - functional and beautifully designed portfolio and landing page template to kick-start your project
 * Tags: mix_design, coming soon, under construction, template, landing page, portfolio, one page, responsive, html5, css3, creative, clean, agency, personal page
 * Version: 1.0.4
 * Last Update: August 2026
 * Author: mix_design
 * Author URI: https://mixdesign.dev */
/*! File name: site-tokens.css
 * ------------------------------------------------
 * Ours, not the vendor's. Generated from
 * template-ignite/IgniteGULP/app/sass/site-tokens.sass
 * by `npm run build:css`. Do not hand-edit the css.
 * ------------------------------------------------
 *
 * The one layout contract shared by both stylesheet systems on this site:
 *
 *   /                       reset.css + site-tokens.css + home.css
 *   /support /privacy       reset.css + site-tokens.css + main.css + legal.css
 *   /404 /50x
 *
 * WHY PX, NOT REM
 * main.css sets html { font-size: 62.5% }, so 1rem = 10px on the document
 * pages. home.css does not load main.css, so 1rem = 16px on the homepage.
 * Custom properties substitute at the point of USE, not of definition, so a
 * rem-valued token here would resolve to two different pixel sizes depending
 * on which page consumed it — silently. Px is root-independent and is the
 * only unit that makes one shared token mean one thing everywhere.
 *
 * WHY THESE VALUES
 * --site-cap and the gutter ramp are the homepage's, because the homepage is
 * the current identity. The document pages converge onto it.
 *
 * --site-logo-h is the rendered height of the brand mark. It was 2.6rem in
 * legal.css and 6.5625rem (width) in home.css — the same 26px, but only by
 * arithmetic across two different root sizes.
 *
 * --site-band-pad is the padding that lines a FULL-BLEED bar's contents up
 * with the centred --site-cap box, so a header or footer that spans the
 * viewport still puts its logo on the same rail as the prose beneath it.
 * Below the cap the max() collapses to the plain gutter, so nothing changes
 * on narrow viewports. The 100% resolves against the containing block of
 * whichever element uses it — which must be the same box that margin:auto
 * centres against, so do not apply it to a grid item or an element inside a
 * transformed / filtered ancestor.
 * ------------------------------------------------ */
:root {
  --site-cap: 1536px;
  --site-gutter: clamp(20px, 3.5vw, 72px);
  --site-band-pad: max(var(--site-gutter), -moz-calc((100% - var(--site-cap)) / 2 + var(--site-gutter)));
  --site-band-pad: max(var(--site-gutter), calc((100% - var(--site-cap)) / 2 + var(--site-gutter)));
  --site-logo-h: 26px;
}