/* ============================================================================
 * COMPUTER.CSS - Theme Layer for WDS
 * ============================================================================
 * 
 * PURPOSE:
 * This file acts as a theme/customization layer on top of lyon-wds.min.css
 * (WDS: High-Contrast Mission Control design system). It provides:
 * 
 * 1. Custom font definitions (replacing system fonts with custom typography)
 * 2. Global style overrides (adjusting base typography and spacing)
 * 3. Component-specific customizations (navbar, cards, panels, etc.)
 * 4. Layout modifications (container widths, responsive adjustments)
 * 5. Extensive Tachyons-inspired utility classes for rapid prototyping
 * 6. Responsive design adjustments for different screen sizes
 * 7. Print-specific style optimizations
 * 
 * METHODOLOGY:
 * This file follows the Tachyons CSS methodology for utility classes,
 * providing atomic, single-purpose classes that can be composed in HTML
 * to achieve complex designs without writing custom CSS.
 * 
 * LOAD ORDER:
 * Must be loaded AFTER lyon-wds.min.css to properly override base styles.
 * ============================================================================ */


/* ============================================================================
 * I. FONT DEFINITIONS
 * Custom font-face declarations replacing the system fonts defined in WDS
 * ============================================================================ */

/* Regular weight font - replaces WDS's default Univers/system fonts */
@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Bold weight font - for headings and emphasis */
@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Italic/Oblique style - for emphasis and quotes */
@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/Oblique.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* Bold-Italic combination - for strong emphasis */
@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/Bold-Oblique.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


/* ============================================================================
 * II. GLOBAL STYLE OVERRIDES
 * Modifications to base HTML elements and global settings from WDS
 * ============================================================================ */

/* OVERRIDE: Adjusts body padding and font from WDS defaults
 * - Changes padding from WDS's responsive padding to fixed 1rem/1.5rem
 * - Replaces WDS's font stack with CustomFont
 * - Sets explicit font-size to 100% (16px base) vs WDS's 15px root */
body {
    padding: 1rem 1.5rem;
    font-size: 100%;
    font-family: 'CustomFont', sans-serif;
}

/* OVERRIDE: Normalizes heading sizes to 1em (16px) 
 * Overrides WDS's larger heading sizes (var(--font-size-lg)) */
h2, h3, h4 {
    font-size: 1em;
}

/* CUSTOM: Adds specific font-weight for h2 elements with .h2-normal class
 * Uses WDS's --font-weight-normal (450) variable */
.h2-normal {
    font-weight: 450;
}

/* OVERRIDE: Ensures italic emphasis without background highlight 
 * (Commented out background-color suggests previous highlighting) */
em {
    font-style: italic;
    /*padding: 4px 4px 2px;*/
    /*background-color: #FFFFC5;*/
}

/* CUSTOM: Creates hanging indent for preamble paragraphs
 * Used for special introductory text formatting */
p.preamble {
    text-indent: -1.2em;
    margin-left: 1.1em;
    margin-bottom: 0.4em;
}

/* OVERRIDE: Changes horizontal rule from WDS's solid to dashed style
 * Creates more subtle section breaks */
hr {
    border: none;
    border-top: 1px dashed #999;
    color: #333;
    overflow: visible;
    height: 1px;
    margin: 2em 0;
}


/* ============================================================================
 * III. COMPONENT OVERRIDES
 * Modifications to specific WDS components
 * ============================================================================ */

/* --- NAVBAR CUSTOMIZATIONS --- */

/* OVERRIDE: Reinforces navbar section flex properties from WDS
 * (May be redundant with base styles but ensures consistency) */
.navbar .navbar-section {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
}

/* OVERRIDE: Changes navbar section alignment from flex-end to flex-start
 * Aligns last navbar section to the left instead of right */
.navbar .navbar-section:not(:first-child):last-child {
    -ms-flex-pack: start;
    justify-content: flex-start;
}

/* OVERRIDE: Resets navbar brand font-size to inherit from parent
 * Removes WDS's larger brand text (var(--font-size-lg)) */
.navbar .navbar-brand {
    font-size: inherit; /* bypass */
    font-style: normal;
    margin: 0;
}

/* CUSTOM: Special styling for brand elements
 * Creates distinctive italic bold branding */
.brand {
    font-style: italic;
    font-weight: bold;
    text-transform: none;
}

/* --- TABLE CUSTOMIZATIONS --- */

/* CUSTOM: Adds vertical borders to classic table cells
 * Enhances WDS's horizontal-only table borders */
.table-classic td {
    border-left: .1rem solid #bfbfbf;
}

/* CUSTOM: Makes tables fill their container height */
.table-full {
    height: 100%;
}

/* CUSTOM: Reduces font size for specific table contexts */
.swissimicros .table {
    font-size: 0.8em;
}

/* CUSTOM: Auto-sizing table variant */
.table-fit {
    width: auto;
}

/* CUSTOM: Constrains table width to 70% of container */
.table-auto-wide {
    max-width: 70%;
}

/* --- PANEL & CARD CUSTOMIZATIONS --- */

/* CUSTOM: Adds vertical spacing to panel tiles */
.panel .tile {
    margin: 0.75rem 0;
}

/* CUSTOM: Adds bottom border to panel headers
 * Enhances visual separation */
.panel .panel-header {
    border-bottom: 1px solid #000000;
}

/* CUSTOM: Sets panel dimensions and spacing */
.panel {
    padding-top: 1em;
    padding-bottom: 1em;
    max-width: 480px;
}

/* CUSTOM: Adds solid black border to cards
 * Overrides WDS's lighter border color */
.card {
    border: 1px solid #000;
}

/* CUSTOM: Enhances card header with fixed height and strong styling */
.card .card-header {
    height: 2em;
    padding-top: 0.5em;
    border-bottom: 1px solid #000 ! important;
    color: white;
    font-weight: bold;
}

/* CUSTOM: Hides specific DataTables filter element */
#swismicros-table-id_filter {
    display: none;
}

/* --- BUTTON CUSTOMIZATIONS --- */

/* CUSTOM: Ensures button link colors persist after being visited */
.btn.white:visited {
    color: #FFF;
}


/* ============================================================================
 * IV. LAYOUT & STRUCTURE
 * Container adjustments and content layout modifications
 * ============================================================================ */

/* OVERRIDE: Adds bottom border to header container
 * Creates visual separation between header and content */
header.container {
    max-width: inherit;
    border-bottom: 1px solid #000;
}

/* OVERRIDE: Allows main content to use full width
 * Removes WDS's container width constraints for main content */
main .container {
    max-width: inherit;
}

/* OVERRIDE: Sets fixed container width and removes auto-margins
 * Changes from WDS's responsive container to fixed 800px width */
.container {
    max-width: 800px;
    margin: 0;
}

/* --- FIGURE & IMAGE HANDLING --- */

/* CUSTOM: Styled figure element with border and padding */
figure {
    padding: 0.4em;
    border: 1px solid #CCC;
    margin: 2em 0;
}

/* CUSTOM: Centers figure captions */
figcaption {
    margin-top: 0.4em;
    text-align: center;
}

/* CUSTOM: Large content image styling
 * Sets maximum width to 96em (1536px) */
.kg-image {
    display: block;
    max-width: 96em;
    width: 100%;
    height: auto;
    margin: 0;
}

/* CUSTOM: Card image styling with specific margins */
.img-card {
    width: 100%;
    display: block;
    height: auto;
    margin: 0.3em 0 0.7em;
}

/* CUSTOM: Full-width splash images */
img.splash {
    width: 100%;
}

/* CUSTOM: Ensures responsive images in markdown posts
 * Makes all images within post content responsive */
#post-content img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* --- FOOTER --- */

/* CUSTOM: Footer spacing and muted color */
footer {
    margin-top: 4rem;
    color: #CCC;
}

/* CUSTOM: Ensure footer links inherit text color and do not render blue/purple */
footer a, footer a:visited, footer a:hover, footer a:active, footer a:focus {
    color: inherit;
}

/* CUSTOM: Clears floats before footer */
footer {
    clear: both;
}

/* --- MISC LAYOUT --- */

/* CUSTOM: Inline block with right margin for horizontal lists */
.inline-block { 
    display: inline-block; 
    margin-right: 0.5em;
}

/* CUSTOM: Social media icon sizing */
.social-media-icon {
    width: 0.875em;
}

/* CUSTOM: Compact line spacing for dense text */
p.compact-line {
    margin: 0;
}

/* CUSTOM: QR code fixed dimensions */
.qrcode {
    width: 58px;
}

/* CUSTOM: Monospace font utility
 * Provides code/terminal font styling */
.mono {
    font-family: 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Courier, monospace;
}


/* ============================================================================
 * V. UTILITY CLASSES - SIZING & MEASUREMENT
 * Width and max-width utilities for precise element sizing
 * ============================================================================ */

/* --- CUSTOM MEASURE UTILITIES --- */
/* Fixed-width elements with specific em-based dimensions */
.measure-custom {width: 11.6em; max-width: 11.6em;}
.measure-custom2 {width: 10em; max-width: 103em;} /* Note: max-width appears to be typo (103em) */
.measure-custom3 {width: 19em; max-width: 19em;}

/* --- STANDARD MEASURE UTILITIES --- */
/* Sets both width and max-width to same value for consistent sizing */
.measure-1 {width: 1em; max-width: 1em;}
.measure-2 {width: 2em; max-width: 2em;}
.measure-3 {width: 3em; max-width: 3em;}
.measure-4 {width: 4em; max-width: 4em;}
.measure-6 {width: 6em; max-width: 6em;}
.measure-8 {width: 8em; max-width: 8em;}
.measure-12 {width: 12em; max-width: 12em;}
.measure-16 {width: 16em; max-width: 16em;}
.measure-24 {width: 24em; max-width: 24em;}
.measure-36 {width: 36em; max-width: 36em;}
.measure-48 {width: 48em; max-width: 48em;}
.measure-60 {width: 60em; max-width: 60em;}
.measure-72 {width: 72em; max-width: 72em;}
.measure-96 {width: 96em; max-width: 96em;}

/* --- MAX-WIDTH LIMIT UTILITIES --- */
/* Constrains maximum width without setting minimum */
.limit-1 {max-width: 1em;}
.limit-2 {max-width: 2em;}
.limit-3 {max-width: 3em;}
.limit-4 {max-width: 4em;}
.limit-6 {max-width: 6em;}
.limit-8 {max-width: 8em;}
.limit-12 {max-width: 12em;}
.limit-16 {max-width: 16em;}
.limit-24 {max-width: 24em;}
.limit-36 {max-width: 36em;}
.limit-48 {max-width: 48em;}
.limit-60 {max-width: 60em;}
.limit-72 {max-width: 72em;}
.limit-96 {max-width: 96em;}

/* --- READABILITY MEASURE UTILITIES --- */
/* Based on optimal reading line lengths */
.measure { max-width: 30em; }           /* ~66 characters per line */
.measure-small { max-width: 26em; }     /* Shorter lines for small text */
.measure-wide { max-width: 34em; }      /* ~80 characters per line */
.measure-narrow { max-width: 20em; }    /* ~45 characters per line */

/* CUSTOM: Floated measure with left margin */
.measure-float {
    margin-left: 2em;
    float: left;
}

/* --- FLEXBOX MEASURE UTILITIES --- */
/* Flexible sizing with flex-basis and optional max-width */
.flex-measure-12 {flex: 1 1 12em;}
.flex-measure-24 {flex: 1 1 24em;}
.flex-measure-36 {flex: 1 1 36em; max-width: 36em;}
.flex-measure-42 {flex: 1 1 42em;}
.flex-measure-48 {flex: 1 1 48em;}
.flex-measure-60 {flex: 1 1 60em;}


/* ============================================================================
 * VI. UTILITY CLASSES - DISPLAY & VISIBILITY
 * Control element visibility and display properties
 * ============================================================================ */

/* UTILITY: Completely hide element from display */
.hide {display: none;}


/* ============================================================================
 * VII. UTILITY CLASSES - ALIGNMENT
 * Text alignment utilities
 * ============================================================================ */

.align-right { text-align: right;}
.align-left { text-align: left;}


/* ============================================================================
 * VIII. UTILITY CLASSES - SPACING (MARGINS)
 * Tachyons-inspired margin utilities using em units
 * ============================================================================ */

/* --- TOP MARGINS --- */
.top-1 {margin-top: 1em;}
.top-2 {margin-top: 2em;}
.top-3 {margin-top: 3em;}
.top-4 {margin-top: 4em;}
.top-6 {margin-top: 6em;}
.top-8 {margin-top: 8em;}
.top-12 {margin-top: 12em;}
.top-16 {margin-top: 16em;}
.top-24 {margin-top: 24em;}
.top-36 {margin-top: 36em;}
.top-48 {margin-top: 48em;}
.top-60 {margin-top: 60em;}

/* --- BOTTOM MARGINS --- */
.bottom-04 {margin-bottom: 0.2em;} /* Extra small bottom margin */
.bottom-1 {margin-bottom: 1em;}
.bottom-2 {margin-bottom: 2em;}
.bottom-3 {margin-bottom: 3em;}
.bottom-4 {margin-bottom: 4em;}
.bottom-6 {margin-bottom: 6em;}
.bottom-8 {margin-bottom: 8em;}
.bottom-12 {margin-bottom: 12em;}
.bottom-16 {margin-bottom: 16em;}
.bottom-24 {margin-bottom: 24em;}
.bottom-36 {margin-bottom: 36em;}
.bottom-48 {margin-bottom: 48em;}
.bottom-60 {margin-bottom: 60em;}

/* --- VERTICAL SPACING (TOP & BOTTOM) --- */
.spacing-1 {margin-top: 1em; margin-bottom: 1em;}
.spacing-2 {margin-top: 2em; margin-bottom: 2em;}
.spacing-3 {margin-top: 3em; margin-bottom: 3em;}
.spacing-4 {margin-top: 4em; margin-bottom: 4em;}
.spacing-6 {margin-top: 6em; margin-bottom: 6em;}
.spacing-8 {margin-top: 8em; margin-bottom: 8em;}
.spacing-12 {margin-top: 12em; margin-bottom: 12em;}
.spacing-16 {margin-top: 16em; margin-bottom: 16em;}
.spacing-24 {margin-top: 24em; margin-bottom: 24em;}
.spacing-36 {margin-top: 36em; margin-bottom: 36em;}
.spacing-48 {margin-top: 48em; margin-bottom: 48em;}
.spacing-60 {margin-top: 60em; margin-bottom: 60em;}


/* ============================================================================
 * IX. UTILITY CLASSES - BORDERS
 * Tachyons-inspired border utilities
 * ============================================================================ */

/* --- BORDER STYLES --- */
.ba { border-style: solid; border-width: 1px; }      /* Border all sides */
.bt { border-top-style: solid; border-top-width: 1px; }      /* Border top */
.br { border-right-style: solid; border-right-width: 1px; }  /* Border right */
.bb { border-bottom-style: solid; border-bottom-width: 1px; } /* Border bottom */
.bl { border-left-style: solid; border-left-width: 1px; }    /* Border left */
.bn { border-style: none; border-width: 0; }                  /* No border */

/* --- BORDER COLORS - GRAYSCALE --- */
.b--black { border-color: #000; }
.b--near-black { border-color: #111; }
.b--dark-gray { border-color: #333; }
.b--mid-gray { border-color: #555; }
.b--gray { border-color: #777; }
.b--silver { border-color: #999; }
.b--light-silver { border-color: #AAA; }
.b--moon-gray { border-color: #CCC; }
.b--light-gray { border-color: #EEE; }
.b--near-white { border-color: #F4F4F4; }
.b--white { border-color: #FFF; }

/* --- BORDER COLORS - WHITE WITH OPACITY --- */
.b--white-90 { border-color: rgba(255, 255, 255, .9); }
.b--white-80 { border-color: rgba(255, 255, 255, .8); }
.b--white-70 { border-color: rgba(255, 255, 255, .7); }
.b--white-60 { border-color: rgba(255, 255, 255, .6); }
.b--white-50 { border-color: rgba(255, 255, 255, .5); }
.b--white-40 { border-color: rgba(255, 255, 255, .4); }
.b--white-30 { border-color: rgba(255, 255, 255, .3); }
.b--white-20 { border-color: rgba(255, 255, 255, .2); }
.b--white-10 { border-color: rgba(255, 255, 255, .1); }
.b--white-05 { border-color: rgba(255, 255, 255, .05); }
.b--white-025 { border-color: rgba(255, 255, 255, .025); }
.b--white-0125 { border-color: rgba(255, 255, 255, .0125); }

/* --- BORDER COLORS - BLACK WITH OPACITY --- */
.b--black-90 { border-color: rgba(0, 0, 0, .9); }
.b--black-80 { border-color: rgba(0, 0, 0, .8); }
.b--black-70 { border-color: rgba(0, 0, 0, .7); }
.b--black-60 { border-color: rgba(0, 0, 0, .6); }
.b--black-50 { border-color: rgba(0, 0, 0, .5); }
.b--black-40 { border-color: rgba(0, 0, 0, .4); }
.b--black-30 { border-color: rgba(0, 0, 0, .3); }
.b--black-20 { border-color: rgba(0, 0, 0, .2); }
.b--black-10 { border-color: rgba(0, 0, 0, .1); }
.b--black-05 { border-color: rgba(0, 0, 0, .05); }
.b--black-025 { border-color: rgba(0, 0, 0, .025); }
.b--black-0125 { border-color: rgba(0, 0, 0, .0125); }

/* --- BORDER COLORS - SEMANTIC COLORS --- */
.b--dark-red { border-color: #E7040F; }
.b--red { border-color: #FF4136; }
.b--light-red { border-color: #FF725C; }
.b--orange { border-color: #E25600; }
.b--gold { border-color: #FFB700; }
.b--yellow { border-color: #FFD700; }
.b--light-yellow { border-color: #FBF1A9; }
.b--purple { border-color: #5E2CA5; }
.b--light-purple { border-color: #A463F2; }
.b--dark-pink { border-color: #D5008F; }
.b--hot-pink { border-color: #FF41B4; }
.b--pink { border-color: #FF80CC; }
.b--light-pink { border-color: #FFA3D7; }
.b--dark-green { border-color: #137752; }
.b--green { border-color: #19A974; }
.b--light-green { border-color: #9EEBCF; }
.b--navy { border-color: #001B44; }
.b--dark-blue { border-color: #00449E; }
.b--blue { border-color: #357EDD; }
.b--light-blue { border-color: #96CCFF; }
.b--lightest-blue { border-color: #CDECFF; }
.b--washed-blue { border-color: #F6FFFE; }
.b--washed-green { border-color: #E8FDF5; }
.b--washed-yellow { border-color: #FFFCEB; }
.b--washed-red { border-color: #FFDFDF; }
.b--transparent { border-color: transparent; }
.b--inherit { border-color: inherit; }


/* ============================================================================
 * X. UTILITY CLASSES - TEXT COLORS
 * Comprehensive color palette for text
 * ============================================================================ */

/* --- TEXT COLORS - BLACK WITH OPACITY --- */
.black-90 { color: rgba(0, 0, 0, .9); }
.black-80 { color: rgba(0, 0, 0, .8); }
.black-70 { color: rgba(0, 0, 0, .7); }
.black-60 { color: rgba(0, 0, 0, .6); }
.black-50 { color: rgba(0, 0, 0, .5); }
.black-40 { color: rgba(0, 0, 0, .4); }
.black-30 { color: rgba(0, 0, 0, .3); }
.black-20 { color: rgba(0, 0, 0, .2); }
.black-10 { color: rgba(0, 0, 0, .1); }
.black-05 { color: rgba(0, 0, 0, .05); }

/* --- TEXT COLORS - WHITE WITH OPACITY --- */
.white-90 { color: rgba(255, 255, 255, .9); }
.white-80 { color: rgba(255, 255, 255, .8); }
.white-70 { color: rgba(255, 255, 255, .7); }
.white-60 { color: rgba(255, 255, 255, .6); }
.white-50 { color: rgba(255, 255, 255, .5); }
.white-40 { color: rgba(255, 255, 255, .4); }
.white-30 { color: rgba(255, 255, 255, .3); }
.white-20 { color: rgba(255, 255, 255, .2); }
.white-10 { color: rgba(255, 255, 255, .1); }

/* --- TEXT COLORS - GRAYSCALE --- */
.black { color: #000; }
.near-black { color: #111; }
.dark-gray { color: #333; }
.mid-gray { color: #555; }
.gray { color: #777; }
.silver { color: #999; }
.light-silver { color: #AAA; }
.moon-gray { color: #CCC; }
.light-gray { color: #EEE; }
.near-white { color: #F4F4F4; }
.white { color: #FFF; }

/* --- TEXT COLORS - SEMANTIC PALETTE --- */
.dark-red { color: #E7040F; }
.red { color: #FF4136; }
.light-red { color: #FF725C; }
.orange { color: #E25600; }
.gold { color: #FFB700; }
.yellow { color: #FFD700; }
.light-yellow { color: #FBF1A9; }
.purple { color: #5E2CA5; }
.light-purple { color: #A463F2; }
.dark-pink { color: #D5008F; }
.hot-pink { color: #FF41B4; }
.pink { color: #FF80CC; }
.light-pink { color: #FFA3D7; }
.dark-green { color: #137752; }
.green { color: #19A974; }
.light-green { color: #9EEBCF; }
.navy { color: #001B44; }
.dark-blue { color: #00449E; }
.blue { color: #357EDD; }
.light-blue { color: #96CCFF; }
.lightest-blue { color: #CDECFF; }
.washed-blue { color: #F6FFFE; }
.washed-green { color: #E8FDF5; }
.washed-yellow { color: #FFFCEB; }
.washed-red { color: #FFDFDF; }
.color-inherit { color: inherit; }


/* ============================================================================
 * XI. UTILITY CLASSES - BACKGROUND COLORS
 * Comprehensive color palette for backgrounds
 * ============================================================================ */

/* --- BACKGROUND COLORS - BLACK WITH OPACITY --- */
.bg-black-90 { background-color: rgba(0, 0, 0, .9); }
.bg-black-80 { background-color: rgba(0, 0, 0, .8); }
.bg-black-70 { background-color: rgba(0, 0, 0, .7); }
.bg-black-60 { background-color: rgba(0, 0, 0, .6); }
.bg-black-50 { background-color: rgba(0, 0, 0, .5); }
.bg-black-40 { background-color: rgba(0, 0, 0, .4); }
.bg-black-30 { background-color: rgba(0, 0, 0, .3); }
.bg-black-20 { background-color: rgba(0, 0, 0, .2); }
.bg-black-10 { background-color: rgba(0, 0, 0, .1); }
.bg-black-05 { background-color: rgba(0, 0, 0, .05); }

/* --- BACKGROUND COLORS - WHITE WITH OPACITY --- */
.bg-white-90 { background-color: rgba(255, 255, 255, .9); }
.bg-white-80 { background-color: rgba(255, 255, 255, .8); }
.bg-white-70 { background-color: rgba(255, 255, 255, .7); }
.bg-white-60 { background-color: rgba(255, 255, 255, .6); }
.bg-white-50 { background-color: rgba(255, 255, 255, .5); }
.bg-white-40 { background-color: rgba(255, 255, 255, .4); }
.bg-white-30 { background-color: rgba(255, 255, 255, .3); }
.bg-white-20 { background-color: rgba(255, 255, 255, .2); }
.bg-white-10 { background-color: rgba(255, 255, 255, .1); }

/* --- BACKGROUND COLORS - GRAYSCALE --- */
.bg-black { background-color: #000; }
.bg-near-black { background-color: #111; }
.bg-dark-gray { background-color: #333; }
.bg-mid-gray { background-color: #555; }
.bg-gray { background-color: #777; }
.bg-silver { background-color: #999; }
.bg-light-silver { background-color: #AAA; }
.bg-moon-gray { background-color: #CCC; }
.bg-light-gray { background-color: #EEE; }
.bg-near-white { background-color: #F4F4F4; }
.bg-white { background-color: #FFF; }
.bg-transparent { background-color: transparent; }

/* --- BACKGROUND COLORS - SEMANTIC PALETTE --- */
.bg-dark-red { background-color: #E7040F; }
.bg-red { background-color: #FF4136; }
.bg-light-red { background-color: #FF725C; }
.bg-orange { background-color: #E25600; }
.bg-gold { background-color: #FFB700; }
.bg-yellow { background-color: #FFD700; }
.bg-light-yellow { background-color: #FBF1A9; }
.bg-purple { background-color: #5E2CA5; }
.bg-light-purple { background-color: #A463F2; }
.bg-dark-pink { background-color: #D5008F; }
.bg-hot-pink { background-color: #FF41B4; }
.bg-pink { background-color: #FF80CC; }
.bg-light-pink { background-color: #FFA3D7; }
.bg-dark-green { background-color: #137752; }
.bg-green { background-color: #19A974; }
.bg-light-green { background-color: #9EEBCF; }
.bg-navy { background-color: #001B44; }
.bg-dark-blue { background-color: #00449E; }
.bg-blue { background-color: #357EDD; }
.bg-light-blue { background-color: #96CCFF; }
.bg-lightest-blue { background-color: #CDECFF; }
.bg-washed-blue { background-color: #F6FFFE; }
.bg-washed-green { background-color: #E8FDF5; }
.bg-washed-yellow { background-color: #FFFCEB; }
.bg-washed-red { background-color: #FFDFDF; }
.bg-inherit { background-color: inherit; }


/* ============================================================================
 * XII. UTILITY CLASSES - HOVER STATES
 * Interactive color changes on hover/focus for text and backgrounds
 * ============================================================================ */

/* --- HOVER TEXT COLORS - GRAYSCALE --- */
.hover-black:hover { color: #000; }
.hover-black:focus { color: #000; }
.hover-near-black:hover { color: #111; }
.hover-near-black:focus { color: #111; }
.hover-dark-gray:hover { color: #333; }
.hover-dark-gray:focus { color: #333; }
.hover-mid-gray:hover { color: #555; }
.hover-mid-gray:focus { color: #555; }
.hover-gray:hover { color: #777; }
.hover-gray:focus { color: #777; }
.hover-silver:hover { color: #999; }
.hover-silver:focus { color: #999; }
.hover-light-silver:hover { color: #AAA; }
.hover-light-silver:focus { color: #AAA; }
.hover-moon-gray:hover { color: #CCC; }
.hover-moon-gray:focus { color: #CCC; }
.hover-light-gray:hover { color: #EEE; }
.hover-light-gray:focus { color: #EEE; }
.hover-near-white:hover { color: #F4F4F4; }
.hover-near-white:focus { color: #F4F4F4; }
.hover-white:hover { color: #FFF; }
.hover-white:focus { color: #FFF; }

/* --- HOVER TEXT COLORS - BLACK WITH OPACITY --- */
.hover-black-90:hover { color: rgba(0, 0, 0, .9); }
.hover-black-90:focus { color: rgba(0, 0, 0, .9); }
.hover-black-80:hover { color: rgba(0, 0, 0, .8); }
.hover-black-80:focus { color: rgba(0, 0, 0, .8); }
.hover-black-70:hover { color: rgba(0, 0, 0, .7); }
.hover-black-70:focus { color: rgba(0, 0, 0, .7); }
.hover-black-60:hover { color: rgba(0, 0, 0, .6); }
.hover-black-60:focus { color: rgba(0, 0, 0, .6); }
.hover-black-50:hover { color: rgba(0, 0, 0, .5); }
.hover-black-50:focus { color: rgba(0, 0, 0, .5); }
.hover-black-40:hover { color: rgba(0, 0, 0, .4); }
.hover-black-40:focus { color: rgba(0, 0, 0, .4); }
.hover-black-30:hover { color: rgba(0, 0, 0, .3); }
.hover-black-30:focus { color: rgba(0, 0, 0, .3); }
.hover-black-20:hover { color: rgba(0, 0, 0, .2); }
.hover-black-20:focus { color: rgba(0, 0, 0, .2); }
.hover-black-10:hover { color: rgba(0, 0, 0, .1); }
.hover-black-10:focus { color: rgba(0, 0, 0, .1); }

/* --- HOVER TEXT COLORS - WHITE WITH OPACITY --- */
.hover-white-90:hover { color: rgba(255, 255, 255, .9); }
.hover-white-90:focus { color: rgba(255, 255, 255, .9); }
.hover-white-80:hover { color: rgba(255, 255, 255, .8); }
.hover-white-80:focus { color: rgba(255, 255, 255, .8); }
.hover-white-70:hover { color: rgba(255, 255, 255, .7); }
.hover-white-70:focus { color: rgba(255, 255, 255, .7); }
.hover-white-60:hover { color: rgba(255, 255, 255, .6); }
.hover-white-60:focus { color: rgba(255, 255, 255, .6); }
.hover-white-50:hover { color: rgba(255, 255, 255, .5); }
.hover-white-50:focus { color: rgba(255, 255, 255, .5); }
.hover-white-40:hover { color: rgba(255, 255, 255, .4); }
.hover-white-40:focus { color: rgba(255, 255, 255, .4); }
.hover-white-30:hover { color: rgba(255, 255, 255, .3); }
.hover-white-30:focus { color: rgba(255, 255, 255, .3); }
.hover-white-20:hover { color: rgba(255, 255, 255, .2); }
.hover-white-20:focus { color: rgba(255, 255, 255, .2); }
.hover-white-10:hover { color: rgba(255, 255, 255, .1); }
.hover-white-10:focus { color: rgba(255, 255, 255, .1); }
.hover-inherit:hover, .hover-inherit:focus { color: inherit; }

/* --- HOVER BACKGROUND COLORS - GRAYSCALE --- */
.hover-bg-black:hover { background-color: #000; }
.hover-bg-black:focus { background-color: #000; }
.hover-bg-near-black:hover { background-color: #111; }
.hover-bg-near-black:focus { background-color: #111; }
.hover-bg-dark-gray:hover { background-color: #333; }
.hover-bg-dark-gray:focus { background-color: #333; }
.hover-bg-mid-gray:hover { background-color: #555; }
.hover-bg-mid-gray:focus { background-color: #555; }
.hover-bg-gray:hover { background-color: #777; }
.hover-bg-gray:focus { background-color: #777; }
.hover-bg-silver:hover { background-color: #999; }
.hover-bg-silver:focus { background-color: #999; }
.hover-bg-light-silver:hover { background-color: #AAA; }
.hover-bg-light-silver:focus { background-color: #AAA; }
.hover-bg-moon-gray:hover { background-color: #CCC; }
.hover-bg-moon-gray:focus { background-color: #CCC; }
.hover-bg-light-gray:hover { background-color: #EEE; }
.hover-bg-light-gray:focus { background-color: #EEE; }
.hover-bg-near-white:hover { background-color: #F4F4F4; }
.hover-bg-near-white:focus { background-color: #F4F4F4; }
.hover-bg-white:hover { background-color: #FFF; }
.hover-bg-white:focus { background-color: #FFF; }
.hover-bg-transparent:hover { background-color: transparent; }
.hover-bg-transparent:focus { background-color: transparent; }

/* --- HOVER BACKGROUND COLORS - BLACK WITH OPACITY --- */
.hover-bg-black-90:hover { background-color: rgba(0, 0, 0, .9); }
.hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); }
.hover-bg-black-80:hover { background-color: rgba(0, 0, 0, .8); }
.hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); }
.hover-bg-black-70:hover { background-color: rgba(0, 0, 0, .7); }
.hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); }
.hover-bg-black-60:hover { background-color: rgba(0, 0, 0, .6); }
.hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); }
.hover-bg-black-50:hover { background-color: rgba(0, 0, 0, .5); }
.hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); }
.hover-bg-black-40:hover { background-color: rgba(0, 0, 0, .4); }
.hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); }
.hover-bg-black-30:hover { background-color: rgba(0, 0, 0, .3); }
.hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); }
.hover-bg-black-20:hover { background-color: rgba(0, 0, 0, .2); }
.hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); }
.hover-bg-black-10:hover { background-color: rgba(0, 0, 0, .1); }
.hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); }

/* --- HOVER BACKGROUND COLORS - WHITE WITH OPACITY --- */
.hover-bg-white-90:hover { background-color: rgba(255, 255, 255, .9); }
.hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); }
.hover-bg-white-80:hover { background-color: rgba(255, 255, 255, .8); }
.hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); }
.hover-bg-white-70:hover { background-color: rgba(255, 255, 255, .7); }
.hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); }
.hover-bg-white-60:hover { background-color: rgba(255, 255, 255, .6); }
.hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); }
.hover-bg-white-50:hover { background-color: rgba(255, 255, 255, .5); }
.hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); }
.hover-bg-white-40:hover { background-color: rgba(255, 255, 255, .4); }
.hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); }
.hover-bg-white-30:hover { background-color: rgba(255, 255, 255, .3); }
.hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); }
.hover-bg-white-20:hover { background-color: rgba(255, 255, 255, .2); }
.hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); }
.hover-bg-white-10:hover { background-color: rgba(255, 255, 255, .1); }
.hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); }

/* --- HOVER TEXT COLORS - SEMANTIC PALETTE --- */
.hover-dark-red:hover { color: #E7040F; }
.hover-dark-red:focus { color: #E7040F; }
.hover-red:hover { color: #FF4136; }
.hover-red:focus { color: #FF4136; }
.hover-light-red:hover { color: #FF725C; }
.hover-light-red:focus { color: #FF725C; }
.hover-orange:hover { color: #E25600; }
.hover-orange:focus { color: #E25600; }
.hover-gold:hover { color: #FFB700; }
.hover-gold:focus { color: #FFB700; }
.hover-yellow:hover { color: #FFD700; }
.hover-yellow:focus { color: #FFD700; }
.hover-light-yellow:hover { color: #FBF1A9; }
.hover-light-yellow:focus { color: #FBF1A9; }
.hover-purple:hover { color: #5E2CA5; }
.hover-purple:focus { color: #5E2CA5; }
.hover-light-purple:hover { color: #A463F2; }
.hover-light-purple:focus { color: #A463F2; }
.hover-dark-pink:hover { color: #D5008F; }
.hover-dark-pink:focus { color: #D5008F; }
.hover-hot-pink:hover { color: #FF41B4; }
.hover-hot-pink:focus { color: #FF41B4; }
.hover-pink:hover { color: #FF80CC; }
.hover-pink:focus { color: #FF80CC; }
.hover-light-pink:hover { color: #FFA3D7; }
.hover-light-pink:focus { color: #FFA3D7; }
.hover-dark-green:hover { color: #137752; }
.hover-dark-green:focus { color: #137752; }
.hover-green:hover { color: #19A974; }
.hover-green:focus { color: #19A974; }
.hover-light-green:hover { color: #9EEBCF; }
.hover-light-green:focus { color: #9EEBCF; }
.hover-navy:hover { color: #001B44; }
.hover-navy:focus { color: #001B44; }
.hover-dark-blue:hover { color: #00449E; }
.hover-dark-blue:focus { color: #00449E; }
.hover-blue:hover { color: #357EDD; }
.hover-blue:focus { color: #357EDD; }
.hover-light-blue:hover { color: #96CCFF; }
.hover-light-blue:focus { color: #96CCFF; }
.hover-lightest-blue:hover { color: #CDECFF; }
.hover-lightest-blue:focus { color: #CDECFF; }
.hover-washed-blue:hover { color: #F6FFFE; }
.hover-washed-blue:focus { color: #F6FFFE; }
.hover-washed-green:hover { color: #E8FDF5; }
.hover-washed-green:focus { color: #E8FDF5; }
.hover-washed-yellow:hover { color: #FFFCEB; }
.hover-washed-yellow:focus { color: #FFFCEB; }
.hover-washed-red:hover { color: #FFDFDF; }
.hover-washed-red:focus { color: #FFDFDF; }

/* --- HOVER BACKGROUND COLORS - SEMANTIC PALETTE --- */
.hover-bg-dark-red:hover { background-color: #E7040F; }
.hover-bg-dark-red:focus { background-color: #E7040F; }
.hover-bg-red:hover { background-color: #FF4136; }
.hover-bg-red:focus { background-color: #FF4136; }
.hover-bg-light-red:hover { background-color: #FF725C; }
.hover-bg-light-red:focus { background-color: #FF725C; }
.hover-bg-orange:hover { background-color: #E25600; }
.hover-bg-orange:focus { background-color: #E25600; }
.hover-bg-gold:hover { background-color: #FFB700; }
.hover-bg-gold:focus { background-color: #FFB700; }
.hover-bg-yellow:hover { background-color: #FFD700; }
.hover-bg-yellow:focus { background-color: #FFD700; }
.hover-bg-light-yellow:hover { background-color: #FBF1A9; }
.hover-bg-light-yellow:focus { background-color: #FBF1A9; }
.hover-bg-purple:hover { background-color: #5E2CA5; }
.hover-bg-purple:focus { background-color: #5E2CA5; }
.hover-bg-light-purple:hover { background-color: #A463F2; }
.hover-bg-light-purple:focus { background-color: #A463F2; }
.hover-bg-dark-pink:hover { background-color: #D5008F; }
.hover-bg-dark-pink:focus { background-color: #D5008F; }
.hover-bg-hot-pink:hover { background-color: #FF41B4; }
.hover-bg-hot-pink:focus { background-color: #FF41B4; }
.hover-bg-pink:hover { background-color: #FF80CC; }
.hover-bg-pink:focus { background-color: #FF80CC; }
.hover-bg-light-pink:hover { background-color: #FFA3D7; }
.hover-bg-light-pink:focus { background-color: #FFA3D7; }
.hover-bg-dark-green:hover { background-color: #137752; }
.hover-bg-dark-green:focus { background-color: #137752; }
.hover-bg-green:hover { background-color: #19A974; }
.hover-bg-green:focus { background-color: #19A974; }
.hover-bg-light-green:hover { background-color: #9EEBCF; }
.hover-bg-light-green:focus { background-color: #9EEBCF; }
.hover-bg-navy:hover { background-color: #001B44; }
.hover-bg-navy:focus { background-color: #001B44; }
.hover-bg-dark-blue:hover { background-color: #00449E; }
.hover-bg-dark-blue:focus { background-color: #00449E; }
.hover-bg-blue:hover { background-color: #357EDD; }
.hover-bg-blue:focus { background-color: #357EDD; }
.hover-bg-light-blue:hover { background-color: #96CCFF; }
.hover-bg-light-blue:focus { background-color: #96CCFF; }
.hover-bg-lightest-blue:hover { background-color: #CDECFF; }
.hover-bg-lightest-blue:focus { background-color: #CDECFF; }
.hover-bg-washed-blue:hover { background-color: #F6FFFE; }
.hover-bg-washed-blue:focus { background-color: #F6FFFE; }
.hover-bg-washed-green:hover { background-color: #E8FDF5; }
.hover-bg-washed-green:focus { background-color: #E8FDF5; }
.hover-bg-washed-yellow:hover { background-color: #FFFCEB; }
.hover-bg-washed-yellow:focus { background-color: #FFFCEB; }
.hover-bg-washed-red:hover { background-color: #FFDFDF; }
.hover-bg-washed-red:focus { background-color: #FFDFDF; }
.hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; }


/* ============================================================================
 * XIII. UTILITY CLASSES - PADDING
 * Tachyons-inspired padding utilities using rem units
 * Scale: 0 = 0, 1 = .25rem, 2 = .5rem, 3 = 1rem, 4 = 2rem, 5 = 4rem, 6 = 8rem, 7 = 16rem
 * ============================================================================ */

/* --- PADDING ALL SIDES --- */
.pa0 { padding: 0; }
.pa1 { padding: .25rem; }
.pa2 { padding: .5rem; }
.pa3 { padding: 1rem; }
.pa4 { padding: 2rem; }
.pa5 { padding: 4rem; }
.pa6 { padding: 8rem; }
.pa7 { padding: 16rem; }

/* --- PADDING LEFT --- */
.pl0 { padding-left: 0; }
.pl1 { padding-left: .25rem; }
.pl2 { padding-left: .5rem; }
.pl3 { padding-left: 1rem; }
.pl4 { padding-left: 2rem; }
.pl5 { padding-left: 4rem; }
.pl6 { padding-left: 8rem; }
.pl7 { padding-left: 16rem; }

/* --- PADDING RIGHT --- */
.pr0 { padding-right: 0; }
.pr1 { padding-right: .25rem; }
.pr2 { padding-right: .5rem; }
.pr3 { padding-right: 1rem; }
.pr4 { padding-right: 2rem; }
.pr5 { padding-right: 4rem; }
.pr6 { padding-right: 8rem; }
.pr7 { padding-right: 16rem; }

/* --- PADDING BOTTOM --- */
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: .25rem; }
.pb2 { padding-bottom: .5rem; }
.pb3 { padding-bottom: 1rem; }
.pb4 { padding-bottom: 2rem; }
.pb5 { padding-bottom: 4rem; }
.pb6 { padding-bottom: 8rem; }
.pb7 { padding-bottom: 16rem; }

/* --- PADDING TOP --- */
.pt0 { padding-top: 0; }
.pt1 { padding-top: .25rem; }
.pt2 { padding-top: .5rem; }
.pt3 { padding-top: 1rem; }
.pt4 { padding-top: 2rem; }
.pt5 { padding-top: 4rem; }
.pt6 { padding-top: 8rem; }
.pt7 { padding-top: 16rem; }

/* --- PADDING VERTICAL (TOP & BOTTOM) --- */
.pv0 { padding-top: 0; padding-bottom: 0; }
.pv1 { padding-top: .25rem; padding-bottom: .25rem; }
.pv2 { padding-top: .5rem; padding-bottom: .5rem; }
.pv3 { padding-top: 1rem; padding-bottom: 1rem; }
.pv4 { padding-top: 2rem; padding-bottom: 2rem; }
.pv5 { padding-top: 4rem; padding-bottom: 4rem; }
.pv6 { padding-top: 8rem; padding-bottom: 8rem; }
.pv7 { padding-top: 16rem; padding-bottom: 16rem; }

/* --- PADDING HORIZONTAL (LEFT & RIGHT) --- */
.ph0 { padding-left: 0; padding-right: 0; }
.ph1 { padding-left: .25rem; padding-right: .25rem; }
.ph2 { padding-left: .5rem; padding-right: .5rem; }
.ph3 { padding-left: 1rem; padding-right: 1rem; }
.ph4 { padding-left: 2rem; padding-right: 2rem; }
.ph5 { padding-left: 4rem; padding-right: 4rem; }
.ph6 { padding-left: 8rem; padding-right: 8rem; }
.ph7 { padding-left: 16rem; padding-right: 16rem; }


/* ============================================================================
 * XIV. UTILITY CLASSES - MARGINS
 * Tachyons-inspired margin utilities using rem units
 * Scale: 0 = 0, 1 = .25rem, 2 = .5rem, 3 = 1rem, 4 = 2rem, 5 = 4rem, 6 = 8rem, 7 = 16rem
 * ============================================================================ */

/* --- MARGIN ALL SIDES --- */
.ma0 { margin: 0; }
.ma1 { margin: .25rem; }
.ma2 { margin: .5rem; }
.ma3 { margin: 1rem; }
.ma4 { margin: 2rem; }
.ma5 { margin: 4rem; }
.ma6 { margin: 8rem; }
.ma7 { margin: 16rem; }

/* --- MARGIN LEFT --- */
.ml0 { margin-left: 0; }
.ml1 { margin-left: .25rem; }
.ml2 { margin-left: .5rem; }
.ml3 { margin-left: 1rem; }
.ml4 { margin-left: 2rem; }
.ml5 { margin-left: 4rem; }
.ml6 { margin-left: 8rem; }
.ml7 { margin-left: 16rem; }

/* --- MARGIN RIGHT --- */
.mr0 { margin-right: 0; }
.mr1 { margin-right: .25rem; }
.mr2 { margin-right: .5rem; }
.mr3 { margin-right: 1rem; }
.mr4 { margin-right: 2rem; }
.mr5 { margin-right: 4rem; }
.mr6 { margin-right: 8rem; }
.mr7 { margin-right: 16rem; }

/* --- MARGIN BOTTOM --- */
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: .25rem; }
.mb2 { margin-bottom: .5rem; }
.mb3 { margin-bottom: 1rem; }
.mb4 { margin-bottom: 2rem; }
.mb5 { margin-bottom: 4rem; }
.mb6 { margin-bottom: 8rem; }
.mb7 { margin-bottom: 16rem; }

/* --- MARGIN TOP --- */
.mt0 { margin-top: 0; }
.mt1 { margin-top: .25rem; }
.mt2 { margin-top: .5rem; }
.mt3 { margin-top: 1rem; }
.mt4 { margin-top: 2rem; }
.mt5 { margin-top: 4rem; }
.mt6 { margin-top: 8rem; }
.mt7 { margin-top: 16rem; }

/* --- MARGIN VERTICAL (TOP & BOTTOM) --- */
.mv0 { margin-top: 0; margin-bottom: 0; }
.mv1 { margin-top: .25rem; margin-bottom: .25rem; }
.mv2 { margin-top: .5rem; margin-bottom: .5rem; }
.mv3 { margin-top: 1rem; margin-bottom: 1rem; }
.mv4 { margin-top: 2rem; margin-bottom: 2rem; }
.mv5 { margin-top: 4rem; margin-bottom: 4rem; }
.mv6 { margin-top: 8rem; margin-bottom: 8rem; }
.mv7 { margin-top: 16rem; margin-bottom: 16rem; }

/* --- MARGIN HORIZONTAL (LEFT & RIGHT) --- */
.mh0 { margin-left: 0; margin-right: 0; }
.mh1 { margin-left: .25rem; margin-right: .25rem; }
.mh2 { margin-left: .5rem; margin-right: .5rem; }
.mh3 { margin-left: 1rem; margin-right: 1rem; }
.mh4 { margin-left: 2rem; margin-right: 2rem; }
.mh5 { margin-left: 4rem; margin-right: 4rem; }
.mh6 { margin-left: 8rem; margin-right: 8rem; }
.mh7 { margin-left: 16rem; margin-right: 16rem; }


/* ============================================================================
 * XV. RESPONSIVE DESIGN
 * Media queries for different screen sizes
 * ============================================================================ */

/* --- PHONE BREAKPOINT (max-width: 30em / 480px) --- */
@media screen and (max-width: 30em) {
    /* RESPONSIVE SIZING: Makes elements responsive with min-width constraint */
    .responsive-1-phone {min-width: 1em; max-width: 100%;}
    .responsive-2-phone {min-width: 2em; max-width: 100%;}
    .responsive-3-phone {min-width: 3em; max-width: 100%;}
    .responsive-4-phone {min-width: 4em; max-width: 100%;}
    .responsive-6-phone {min-width: 6em; max-width: 100%;}
    .responsive-8-phone {min-width: 8em; max-width: 100%;}
    .responsive-12-phone {min-width: 12em; max-width: 100%;}
    .responsive-16-phone {min-width: 16em; max-width: 100%;}
    .responsive-24-phone {min-width: 24em; max-width: 100%;}
    .responsive-36-phone {min-width: 36em; max-width: 100%;}
    .responsive-48-phone {min-width: 48em; max-width: 100%;}
    .responsive-60-phone {min-width: 60em; max-width: 100%;}
    .responsive-72-phone {min-width: 72em; max-width: 100%;}
    .responsive-96-phone {min-width: 96em; max-width: 100%;}

    /* FIXED SIZING: Phone-specific fixed widths */
    .measure-1-phone {width: 1em; max-width: 1em;}
    .measure-2-phone {width: 2em; max-width: 2em;}
    .measure-3-phone {width: 3em; max-width: 3em;}
    .measure-4-phone {width: 4em; max-width: 4em;}
    .measure-6-phone {width: 6em; max-width: 6em;}
    .measure-8-phone {width: 8em; max-width: 8em;}
    .measure-12-phone {width: 12em; max-width: 12em;}
    .measure-16-phone {width: 16em; max-width: 16em;}
    .measure-24-phone {width: 24em; max-width: 24em;}
    .measure-36-phone {width: 36em; max-width: 36em;}
    .measure-48-phone {width: 48em; max-width: 48em;}
    .measure-60-phone {width: 60em; max-width: 60em;}
    .measure-72-phone {width: 72em; max-width: 72em;}
    .measure-96-phone {width: 96em; max-width: 96em;}
    
    /* VISIBILITY: Hide elements on phones */
    .hide-phone {display: none;}
    
    /* OVERRIDE: Adjust body padding and font-size for mobile */
    body {
        padding: 1em 0.4em;
        font-size: 13px;
    }
}

/* --- TABLET BREAKPOINT (min-width: 30em / 480px AND max-width: 60em / 960px) --- */
@media screen and (min-width: 30em) and (max-width: 60em) {
    /* FIXED SIZING: Tablet-specific fixed widths */
    .measure-1-tablet {width: 1em; max-width: 1em;}
    .measure-2-tablet {width: 2em; max-width: 2em;}
    .measure-3-tablet {width: 3em; max-width: 3em;}
    .measure-4-tablet {width: 4em; max-width: 4em;}
    .measure-6-tablet {width: 6em; max-width: 6em;}
    .measure-8-tablet {width: 8em; max-width: 8em;}
    .measure-12-tablet {width: 12em; max-width: 12em;}
    .measure-16-tablet {width: 16em; max-width: 16em;}
    .measure-24-tablet {width: 24em; max-width: 24em;}
    .measure-36-tablet {width: 36em; max-width: 36em;}
    .measure-48-tablet {width: 48em; max-width: 48em;}
    .measure-60-tablet {width: 60em; max-width: 60em;}
    .measure-72-tablet {width: 72em; max-width: 72em;}
    .measure-96-tablet {width: 96em; max-width: 96em;}
    
    /* VISIBILITY: Hide elements on tablets */
    .hide-tablet {display: none;}
}

/* --- NOT SMALL SCREENS (min-width: 30em / 480px) --- */
@media screen and (min-width: 30em) {
    /* READABILITY MEASURES: Apply optimal line lengths for larger screens */
    .measure-ns { max-width: 30em; }
    .measure-small-ns { max-width: 26em; }
    .measure-wide-ns { max-width: 34em; }
    .measure-narrow-ns { max-width: 20em; }
}

/* --- MEDIUM SCREENS (min-width: 30em / 480px AND max-width: 60em / 960px) --- */
@media screen and (min-width: 30em) and (max-width: 60em) {
    /* READABILITY MEASURES: Medium screen specific line lengths */
    .measure-m { max-width: 30em; }
    .measure-small-m { max-width: 26em; }
    .measure-wide-m { max-width: 34em; }
    .measure-narrow-m { max-width: 20em; }
}

/* --- LARGE SCREENS (min-width: 60em / 960px) --- */
@media screen and (min-width: 60em) {
    /* READABILITY MEASURES: Large screen specific line lengths */
    .measure-l { max-width: 30em; }
    .measure-small-l { max-width: 26em; }
    .measure-wide-l { max-width: 34em; }
    .measure-narrow-l { max-width: 20em; }
}


/* ============================================================================
 * XVI. PRINT STYLES
 * Optimizations for printed output - hides UI elements
 * ============================================================================ */

@media print {
    /* Hide navigation header for cleaner print output */
    header {
        display: none;
    }
    
    /* Hide footer information in print */
    footer {
        display: none;
    }
    
    /* Hide interactive buttons when printing */
    .btn {
        display: none;
    }
}