/**
 * Schematrix, schematic, schematics, schematix, schematiq
 *  --grid-columns: 1; Default value. Can be overridden in HTML to 12, 16, 24, etc.
 *  --grid-span: Defaults to 1 grid tract width if not specified inline.
 *  --grid-order: Defaults to position 0 (renders in raw HTML text code order).
 *  --grid-gap: 0; Default value. Clean-canvas starting baseline.
 *  --grid-start: Default auto, next space. Starts at 1. Place/center without spacer tags.
 */

:root {
  /* 1. Define your base scale anchor (1rem = 16px by default) */
  --base-scale-size: 1rem;

  /* ==========================================================================
     --SCALE-SM: Micro Layout Steps (1.0 to 10.0) - Static
     ========================================================================== */
  --scale-sm-1:   calc(var(--base-scale-size) * 0.125);  /* ~2px  | Micro lines & tiny details */
  --scale-sm-1-5: calc(var(--base-scale-size) * 0.1875); /* ~3px  */
  --scale-sm-2:   calc(var(--base-scale-size) * 0.25);   /* ~4px  | Tight spacing */
  --scale-sm-2-5: calc(var(--base-scale-size) * 0.3125); /* ~5px  */
  --scale-sm-3:   calc(var(--base-scale-size) * 0.375);  /* ~6px  */
  --scale-sm-3-5: calc(var(--base-scale-size) * 0.4375); /* ~7px  */
  --scale-sm-4:   calc(var(--base-scale-size) * 0.5);    /* ~8px  | Secondary padding */
  --scale-sm-4-5: calc(var(--base-scale-size) * 0.5625); /* ~9px  */
  --scale-sm-5:   calc(var(--base-scale-size) * 0.625);  /* ~10px | Micro font size */
  --scale-sm-5-5: calc(var(--base-scale-size) * 0.6875); /* ~11px */
  --scale-sm-6:   calc(var(--base-scale-size) * 0.75);   /* ~12px | Small caption typography */
  --scale-sm-6-5: calc(var(--base-scale-size) * 0.8125); /* ~13px */
  --scale-sm-7:   calc(var(--base-scale-size) * 0.875);  /* ~14px | UI text scale */
  --scale-sm-7-5: calc(var(--base-scale-size) * 0.9375); /* ~15px */
  --scale-sm-8:   var(--base-scale-size);                /* ~16px | Body copy anchor & base grid track */
  --scale-sm-8-5: calc(var(--base-scale-size) * 1.0625); /* ~17px */
  --scale-sm-9:   calc(var(--base-scale-size) * 1.125);  /* ~18px | Lead text step */
  --scale-sm-9-5: calc(var(--base-scale-size) * 1.1875); /* ~19px */
  --scale-sm-10:  calc(var(--base-scale-size) * 1.25);   /* ~20px | Sub-header anchor */

  /* ==========================================================================
     --SCALE-MD: Fine Component Layout Blocks (0.0 to 10.0) - Safely Capped Micro Track
     ========================================================================== */
  --scale-md-0:   clamp(0.00rem, 0.0vw, 0.00rem);   /* 0px | Absolute Zero Anchor */
  --scale-md-0-1: clamp(0.125rem, 0.3vw, 0.25rem);  /* ~2px  -> ~4px   | Highly visible mobile-to-desktop growth */
  --scale-md-0-2: clamp(0.25rem,  0.4vw, 0.4375rem);/* ~4px  -> ~7px   */
  --scale-md-0-3: clamp(0.375rem, 0.5vw, 0.625rem); /* ~6px  -> ~10px  */
  --scale-md-0-4: clamp(0.50rem,  0.6vw, 0.75rem);  /* ~8px  -> ~12px  */
  --scale-md-0-5: clamp(0.625rem, 0.7vw, 0.8125rem);/* ~10px -> ~13px  */
  --scale-md-0-6: clamp(0.75rem,  0.8vw, 0.875rem); /* ~12px -> ~14px  */
  --scale-md-0-7: clamp(0.8125rem, 0.9vw, 0.9375rem);/* ~13px -> ~15px  */
  --scale-md-0-8: clamp(0.875rem,  1.0vw, 1.00rem);  /* ~14px -> ~16px  */
  --scale-md-0-9: clamp(0.9375rem, 1.1vw, 1.10rem);  /* ~15px -> ~17.6px| Stays cleanly under the 1.0 ceiling */

  /* ==========================================================================
     --SCALE-MD: Fine Component Layout Blocks (1.0 to 10.0) - High Precision Fluid
     ========================================================================== */
  --scale-md-1:   clamp(1.00rem, 1.2vw, 1.125rem); /* ~16px -> ~18px | Base anchor */
  --scale-md-1-5: clamp(1.05rem, 1.3vw, 1.1875rem);/* ~17px -> ~19px */
  --scale-md-2:   clamp(1.125rem, 1.4vw, 1.25rem);  /* ~18px -> ~20px */
  --scale-md-2-5: clamp(1.15rem, 1.5vw, 1.3125rem);/* ~18px -> ~21px */
  --scale-md-3:   clamp(1.20rem, 1.6vw, 1.375rem); /* ~19px -> ~22px | Ultra-fine card gap */
  --scale-md-3-5: clamp(1.25rem, 1.7vw, 1.4375rem);/* ~20px -> ~23px */
  --scale-md-4:   clamp(1.312rem, 1.8vw, 1.50rem);  /* ~21px -> ~24px */
  --scale-md-4-5: clamp(1.35rem, 1.9vw, 1.5625rem);/* ~21px -> ~25px */
  --scale-md-5:   clamp(1.375rem, 2.0vw, 1.625rem);/* ~22px -> ~26px | Balanced block padding */
  --scale-md-5-5: clamp(1.40rem, 2.1vw, 1.6875rem);/* ~22px -> ~27px */
  --scale-md-6:   clamp(1.45rem, 2.2vw, 1.75rem);  /* ~23px -> ~28px */
  --scale-md-6-5: clamp(1.50rem, 2.3vw, 1.8125rem);/* ~24px -> ~29px */
  --scale-md-7:   clamp(1.562rem, 2.4vw, 1.875rem); /* ~25px -> ~30px */
  --scale-md-7-5: clamp(1.625rem, 2.5vw, 1.9375rem);/* ~26px -> ~31px */
  --scale-md-8:   clamp(1.687rem, 2.6vw, 2.00rem);  /* ~27px -> ~32px */
  --scale-md-8-5: clamp(1.75rem, 2.7vw, 2.0625rem);/* ~28px -> ~33px */
  --scale-md-9:   clamp(1.812rem, 2.8vw, 2.125rem); /* ~29px -> ~34px */
  --scale-md-9-5: clamp(1.875rem, 2.9vw, 2.1875rem);/* ~30px -> ~35px */
  --scale-md-10:  clamp(1.937rem, 3.0vw, 2.25rem);  /* ~31px -> ~36px | Max component boundary ceiling */

  /* ==========================================================================
     --SCALE-LG: Editorial / Headline & Grid Track Steps (1.0 to 10.0) - Fluid
     ========================================================================== */
  --scale-lg-1:   clamp(1.35rem, 4vw,   1.5rem);   /* ~24px Max */
  --scale-lg-1-5: clamp(1.5rem,  4.5vw, 1.75rem); 
  --scale-lg-2:   clamp(1.65rem, 5vw,   2rem);     /* ~32px Max */
  --scale-lg-2-5: clamp(1.95rem, 5.5vw, 2.5rem);  
  --scale-lg-3:   clamp(2.25rem, 6vw,   3rem);     /* ~48px Max */
  --scale-lg-3-5: clamp(2.5rem,  6.5vw, 3.25rem); 
  --scale-lg-4:   clamp(2.75rem, 7vw,   3.5rem);   /* ~56px Max */
  --scale-lg-4-5: clamp(3rem,    7.5vw, 3.75rem); 
  --scale-lg-5:   clamp(3.125rem, 8vw,  4rem);     /* ~64px Max */
  --scale-lg-5-5: clamp(3.375rem, 8.5vw, 4.25rem);
  --scale-lg-6:   clamp(3.5rem,  9vw,   4.5rem);   /* ~72px Max */
  --scale-lg-6-5: clamp(3.75rem, 9.5vw, 4.75rem);
  --scale-lg-7:   clamp(4rem,    10vw,  5rem);     /* ~80px Max */
  --scale-lg-7-5: clamp(4.25rem, 10.5vw, 5.25rem);
  --scale-lg-8:   clamp(4.5rem,  11vw,  5.5rem);   /* ~88px Max */
  --scale-lg-8-5: clamp(4.75rem, 11.5vw, 5.75rem);
  --scale-lg-9:   clamp(5rem,    12vw,  6rem);     /* ~96px Max */
  --scale-lg-9-5: clamp(5.375rem, 12.5vw, 6.5rem);
  --scale-lg-10:  clamp(5.75rem, 13vw,  7rem);     /* ~112px Max */

  /* ==========================================================================
     --SCALE-XL: Massive Display & Hero Sections (1.0 to 10.0) - Fluid + Safety Floor
     ========================================================================== */
  --scale-xl-1:   clamp(min(3.5rem,   10vw), 10vw, 5rem);     /* ~80px Max  */
  --scale-xl-1-5: clamp(min(3.875rem, 11vw), 11vw, 5.5rem);
  --scale-xl-2:   clamp(min(4.25rem,  12vw), 12vw, 6rem);     /* ~96px Max  */
  --scale-xl-2-5: clamp(min(4.625rem, 13vw), 13vw, 6.5rem);
  --scale-xl-3:   clamp(min(5rem,     14vw), 14vw, 7rem);     /* ~112px Max */
  --scale-xl-3-5: clamp(min(5.375rem, 15vw), 15vw, 7.5rem);
  --scale-xl-4:   clamp(min(5.75rem,  16vw), 16vw, 8rem);     /* ~128px Max */
  --scale-xl-4-5: clamp(min(6.125rem, 17vw), 17vw, 8.5rem);
  --scale-xl-5:   clamp(min(6.5rem,   18vw), 18vw, 9rem);     /* ~144px Max */
  --scale-xl-5-5: clamp(min(6.875rem, 19vw), 19vw, 9.5rem);
  --scale-xl-6:   clamp(min(7.25rem,  20vw), 20vw, 10rem);    /* ~160px Max */
  --scale-xl-6-5: clamp(min(7.625rem, 21vw), 21vw, 10.5rem);
  --scale-xl-7:   clamp(min(8rem,     22vw), 22vw, 11rem);    /* ~176px Max */
  --scale-xl-7-5: clamp(min(8.375rem, 23vw), 23vw, 11.5rem);
  --scale-xl-8:   clamp(min(8.5rem,   24vw), 24vw, 12rem);    /* ~192px Max */
  --scale-xl-8-5: clamp(min(9rem,     25vw), 25vw, 12.5rem);
  --scale-xl-9:   clamp(min(9.5rem,   26vw), 26vw, 13rem);    /* ~208px Max */
  --scale-xl-9-5: clamp(min(10rem,    27vw), 27vw, 14rem);    /* ~224px Max */
  --scale-xl-10:  clamp(min(10.5rem,  28vw), 28vw, 15rem);    /* ~240px Max */
}
 
/* ==========================================================================
   1. CORE BASE SETTINGS (Safe, Unbloated & Non-Destructive)
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure all elements calculate their padding widths predictably */
*, *:before, *:after {
    box-sizing: inherit;
}

/* ========================================
Sane defaults 
=========================================== */

:root {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --font-serif: ui-serif, Cambria, "Times New Roman", Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

    --font-1: var(--font-sans);
    --font-2: var(--font-sans);
    --font-3: var(--font-sans);
    --font-4: var(--font-sans);
    --font-5: var(--font-sans);
    --font-body: var(--font-sans);
    --font-h: var(--font-sans);
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body), var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-h), var(--font-sans);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* If the user has requested reduced motion, turn it off */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   3. THE PURE ZERO-CLASS GRID ENGINE (Handles structure & responsive math)
   ========================================================================== */
.grid {
    --grid-gap: 0; /* Clean default baseline */
    --grid-columns: 1; /* Safe fallback: behaves like standard layout stack if unmodified */
    
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
    width: 100%;
    padding: var(--grid-gap); /* Keeps internal content safe from card borders */
    margin-inline: auto; /* Left: Auto | Right: Auto -> FLOATS CENTER */
}

/* Override for a Left Box */
.grid-left {
  margin-inline-end: auto; /* Keeps pushing away from the right edge */
  margin-inline-start: 0;   /* Hard anchors to the left edge -> FLOATS LEFT */
}

/* Override for a Right Box */
.grid-right {
  margin-inline-start: auto; /* Keeps pushing away from the left edge */
  margin-inline-end: 0;     /* Hard anchors to the right edge -> FLOATS RIGHT */
}

/* 
   THE AUTOMATIC CLEAN SLATE:
   If a .grid is nested inside anything, it forces its own span and start properties
   to ignore inherited values, preventing parent container parameters from bleeding in.
*/
.grid .grid {
    --grid-span: initial;
    --grid-start: initial;
}

/* 
   THE UNIVERSAL NESTING SHIELD:
   Intercepts, decouples, and isolates user custom styles. This stops parent grid 
   properties from trickling down and ruining nested child sub-grids.
*/
.grid > * {
    /* 1. Resolve local values or safely apply framework-native defaults */
    --span: var(--grid-span, 1);
    --start: var(--grid-start, auto);
    --order: var(--grid-order, 0);

    /* 2. Bind layout variables explicitly to the layout bounds */
    grid-column: var(--start) / span var(--span);
    order: var(--order); 
}

/* ==========================================================================
   4. THE RESPONSIVE RESPIRATOR (Smart Viewport Breakpoints)
   ========================================================================== */

/* PHASE 1: Desktop Mode Only (Monitors above 1024px) */
@media screen and (min-width: 1025px) {
    html { 
        
    }
}

/* PHASE 2: Tablet & Small Window Adaptive Layout (Below 1024px) */
@media screen and (max-width: 1024px) {
    /* Snaps the passport card edge-to-edge so small screens don't waste horizontal space */
    .passport {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
    }
}

/* PHASE 3: Pure Mobile Phone Protection (Below 600px) */
@media screen and (max-width: 600px) {
    /* 
       Forces a clean mobile vertical stack only when the screen 
       is physically too narrow to read side-by-side text columns.
    */
    .grid > * {
        /* On phones, we completely wipe out the custom start tracks 
           so everything flows naturally, full-width, down the screen. */
        grid-column: 1 / span var(--grid-columns) !important;
        /*order: 0 !important;*/ /* Returns text flow to natural HTML sequence */
    }
}


/* ==========================================================================
   5. THE PURE ZERO-CLASS FLEXBOX ENGINE (With Center-to-Expand Engine)
   ========================================================================== */
.flex {
    /* 1. Framework Layout Baselines */
    --flex-direction: row;
    /*--flex-wrap: wrap;*/
    
    /* Centering defaults: Centers items both horizontally and vertically */
    --flex-justify: center;      
    --flex-align: center;        
    --flex-gap: 0;

    display: flex;
    flex-direction: var(--flex-direction);
    flex-wrap: var(--flex-wrap);
    justify-content: var(--flex-justify);
    align-items: var(--flex-align);
    gap: var(--flex-gap);
}

/* THE AUTOMATIC FLEX NESTING SHIELD */
.flex .flex {
    --flex-direction: row;
    /*--flex-wrap: wrap;*/
    --flex-justify: center;      
    --flex-align: center;        
    --flex-gap: 0;
}

/* THE UNIVERSAL FLEX CHILD HOOK */
.flex > * {
    /* We map --flex-basis to an internal helper variable (--basis) 
       so we can dynamically force override it on mobile layouts.
    */
    --grow: var(--flex-grow, 0);
    --shrink: var(--flex-shrink, 1);
    --basis: var(--flex-basis, auto); 
    --order: var(--flex-order, 0);

    flex-grow: var(--grow);
    flex-shrink: var(--shrink);
    flex-basis: var(--basis);
    order: var(--order);
    
    /* Defensive setting: Stops items from pushing outside the viewport boundary */
    max-width: 100%; 
}

/* ==========================================================================
   FLEX RESPONSIVE BREAKPOINTS (MOBILE EXPANSION MECHANISM)
   ========================================================================== */
@media screen and (max-width: 600px) {
    .flex {
        --flex-direction: column;
        --flex-justify: flex-start; /* Resets to top alignment on mobile viewports */
        /*--flex-align: stretch;*/      /* FORCES children to fill the entire width */
        --flex-gap: 0;
        --flex-wrap: wrap;
    }

    /* THE UPGRADED CHILD ENGINE
       By swapping 'width: 100%' for 'width: auto', the framework now tells 
       the browser: "Span full width, but automatically subtract any outer 
       margins the developer added to the item."
    */
    .flex > * {
        flex-basis: auto !important; 
        width: auto !important;      /* The golden architectural fix */
    }
}