@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    /* Font-sizes */
    --fs-900: 9.375rem;
    --fs-850: 7.813rem;
    --fs-800: 6.25rem;
    --fs-750: 4.875rem;
    --fs-700: 3.5rem;
    --fs-650: 2.75rem;
    --fs-625: 2.375rem;
    --fs-600: 2rem;
    --fs-550: 1.875rem;
    --fs-500: 1.75rem;
    --fs-475: 1.22rem;
    --fs-450: 1.313rem;
    --fs-400: 1.129rem;
    --fs-350: 1.06rem;
    --fs-300: 1rem;
    --fs-250: 0.94rem;
    --fs-200: 0.875rem;
    --fs-150: 0.81rem;
    --fs-100: 0.75rem;
    --fs-0: 0.625rem;

    /* Font families */
    --ff-heading: "Inter", sans-serif;                          /* h1–h5         */
    --ff-body:    "Atkinson Hyperlegible Next", sans-serif;     /* body, p, ui   */
    --ff-mono:    "Atkinson Hyperlegible Mono", monospace;      /* code, pre, kbd */

    /* Default letter-spacing for heading font */
    --ff-heading-letter-spacing: normal;

    --light-baseline:          #00053e; /* deep navy   — brand identity      */
    --light-canvas:            #eef4ff; /* soft white  — page background     */
    --light-accent:            #1652c9; /* strong blue — links & interactive */
    --light-neutral:           #d8e3f2; /* light slate — cards & surfaces    */
    --light-secondary:         #ffd153; /* bright yellow — callouts & badges */
    --light-text-highcontrast: #000000;
    --light-text-default:      #09101f;
    --light-text-muted:        #393e47;
    --light-on-baseline:       #eef4ff; /* text placed ON --clr-baseline bg  */
    --light-on-accent:         #eef4ff; /* text placed ON --clr-accent bg    */

    --dark-baseline:           #0d1a3a; /* dark navy   — brand surface       */
    --dark-canvas:             #000001; /* near-black  — page background     */
    --dark-accent:             #7ea8f8; /* bright blue — links & interactive */
    --dark-neutral:            #14244d; /* dark slate  — cards & surfaces    */
    --dark-secondary:          #7c5f0fd2; /* brown-yellow — callouts & badges   */
    --dark-text-highcontrast:  #ffffff;
    --dark-text-default:       #bcc5d4;
    --dark-text-muted:         #98abd4;
    --dark-on-baseline:        #ffffff; /* text placed ON --clr-baseline bg  */
    --dark-on-accent:          #000001; /* text placed ON --clr-accent bg    */
}

:root, [data-theme="light"] {
    --clr-baseline:          var(--light-baseline);
    --clr-canvas:            var(--light-canvas);
    --clr-accent:            var(--light-accent);
    --clr-neutral:           var(--light-neutral);
    --clr-secondary:         var(--light-secondary);
    --clr-text-highcontrast: var(--light-text-highcontrast);
    --clr-text-default:      var(--light-text-default);
    --clr-text-muted:        var(--light-text-muted);
    --clr-on-baseline:       var(--light-on-baseline);
    --clr-on-accent:         var(--light-on-accent);
}

[data-theme="dark"] {
    --clr-baseline:          var(--dark-baseline);
    --clr-canvas:            var(--dark-canvas);
    --clr-accent:            var(--dark-accent);
    --clr-neutral:           var(--dark-neutral);
    --clr-secondary:         var(--dark-secondary);
    --clr-text-highcontrast: var(--dark-text-highcontrast);
    --clr-text-default:      var(--dark-text-default);
    --clr-text-muted:        var(--dark-text-muted);
    --clr-on-baseline:       var(--dark-on-baseline);
    --clr-on-accent:         var(--dark-on-accent);
    a[href]:hover:not(.sidebar-link) { color: #7faafb; }
}

[data-theme="light-high-contrast"] {
    --clr-baseline:          var(--light-text-highcontrast);
    --clr-canvas:            var(--dark-text-highcontrast);
    --clr-accent:            var(--light-accent);
    --clr-neutral:           #eaeff9;
    --clr-secondary:         #f8d984;
    --clr-text-highcontrast: var(--light-text-highcontrast);
    --clr-text-default:      var(--light-text-highcontrast);
    --clr-text-muted:        var(--light-text-highcontrast);
    --clr-on-baseline:       var(--dark-text-highcontrast);
    --clr-on-accent:         var(--dark-text-highcontrast);
}

[data-theme="dark-high-contrast"] {
    --clr-baseline:          var(--light-text-highcontrast);
    --clr-canvas:            var(--light-text-highcontrast);
    --clr-accent:            var(--dark-accent);
    --clr-neutral:           #0c1930;
    --clr-secondary:         #7b5e0f9e;
    --clr-text-highcontrast: var(--dark-text-highcontrast);
    --clr-text-default:      var(--dark-text-highcontrast);
    --clr-text-muted:        var(--dark-text-default);
    --clr-on-baseline:       var(--dark-text-highcontrast);
    --clr-on-accent:         var(--light-text-highcontrast);

    a[href]:hover:not(.sidebar-link) { color: #cddeff; }
}

/* Screen reader class: Hide content for sighted users but show for screen reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* _______________________________________ */
/* Typography                              */
/* _______________________________________ */
.fs-900 { font-size: var(--fs-900)!important; }
.fs-850 { font-size: var(--fs-850)!important; }
.fs-800 { font-size: var(--fs-800)!important; }
.fs-750 { font-size: var(--fs-750)!important; }
.fs-700 { font-size: var(--fs-700)!important; }
.fs-650 { font-size: var(--fs-650)!important; }
.fs-625 { font-size: var(--fs-625)!important; }
.fs-600 { font-size: var(--fs-600)!important; }
.fs-550 { font-size: var(--fs-550)!important; }
.fs-500 { font-size: var(--fs-500)!important; }
.fs-450 { font-size: var(--fs-450)!important; }
.fs-400 { font-size: var(--fs-400)!important; }
.fs-350 { font-size: var(--fs-350)!important; }
.fs-300 { font-size: var(--fs-300)!important; }
.fs-250 { font-size: var(--fs-250)!important; }
.fs-200 { font-size: var(--fs-200)!important; }
.fs-150 { font-size: var(--fs-150)!important; }
.fs-100 { font-size: var(--fs-100)!important; }
.fs-0   { font-size: var(--fs-0)!important; }

.fs-900,.fs-850,.fs-800,.fs-750,
.fs-700,.fs-650,.fs-625,.fs-600 { line-height: 1.1; }

.letter-spacing-xs  { letter-spacing: -0.06rem; }
.letter-spacing-sm  { letter-spacing: -0.03rem; }
.letter-spacing-reg { letter-spacing: normal; }
.letter-spacing-md  { letter-spacing: 0.05rem; }
.letter-spacing-lg  { letter-spacing: 0.13rem; }
.letter-spacing-xl  { letter-spacing: 0.33rem; }

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.ff-mono {
    font-family: var(--ff-mono);
}

/* End of Typography                       */
/* _______________________________________ */

/* --------------------------------------------- */
/* Messages (used in Django for system messages) */
/* --------------------------------------------- */
.message-debug,
.message-info,
.message-success,
.message-warning,
.message-error {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 8px 0;
    line-height: 1.5;
    border: 1px solid transparent;
    font-weight: 525;
}

.dismiss-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.5;
    padding: 0 0 0 12px;
    line-height: 1;
}

.dismiss-btn:hover { opacity: 1; }

/* Debug – neutral gray, subtle */
.message-debug {
    background-color: #f0f0f0;
    border-color: #cccccc;
    color: #555555;
}

/* Info – calm blue */
.message-info {
    background-color: #e8f4fd;
    border-color: #90caf9;
    color: #1565c0;
}

/* Success – muted green */
.message-success {
    background-color: #e8f5e9;
    border-color: #a5d6a7;
    color: #2e7d32;
}

/* Warning – amber/yellow */
.message-warning {
    background-color: #fff8e1;
    border-color: #ffe082;
    color: #e65100;
}

/* Error – soft red */
.message-error {
    background-color: #fdecea;
    border-color: #ef9a9a;
    color: #b71c1c;
}
/* End of Messages                               */
/* --------------------------------------------- */

/* -------------------------------------- */
/* Spacing                                */
/* -------------------------------------- */
.fb-100 { flex-basis: 100!important; }
.fg-1 { flex-grow: 1!important; }

/* Margins */
.m-0     { margin: 0!important; }
.m-auto  { margin: auto!important; }
.m-xs    { margin: 0.33rem!important; }
.m-sm    { margin: 1.48rem!important; }
.m-reg   { margin: 2.63rem!important; }
.m-md    { margin: 3.78rem!important; }
.m-lg    { margin: 4.93rem!important; }
.m-xl    { margin: 6.08rem!important; }

.mt-xs   { margin-top: 0.33rem!important; }
.mt-sm   { margin-top: 1.48rem!important; }
.mt-reg  { margin-top: 2.63rem!important; }
.mt-md   { margin-top: 3.78rem!important; }
.mt-lg   { margin-top: 4.93rem!important; }
.mt-xl   { margin-top: 6.08rem!important; }
.mt-0    { margin-top: 0!important; }
.mt-auto { margin-top: auto!important; }

.mb-xs   { margin-bottom: 0.33rem!important; }
.mb-sm   { margin-bottom: 1.48rem!important; }
.mb-reg  { margin-bottom: 2.63rem!important; }
.mb-md   { margin-bottom: 3.78rem!important; }
.mb-lg   { margin-bottom: 4.93rem!important; }
.mb-xl   { margin-bottom: 6.08rem!important; }
.mb-0    { margin-bottom: 0!important; }
.mb-auto { margin-bottom: auto!important; }

.ml-xs   { margin-left: 0.33rem!important; }
.ml-sm   { margin-left: 1.48rem!important; }
.ml-reg  { margin-left: 2.63rem!important; }
.ml-md   { margin-left: 3.78rem!important; }
.ml-lg   { margin-left: 4.93rem!important; }
.ml-xl   { margin-left: 6.08rem!important; }
.ml-0    { margin-left: 0!important; }
.ml-auto { margin-left: auto!important; }

.mr-xs   { margin-right: 0.33rem!important; }
.mr-sm   { margin-right: 1.48rem!important; }
.mr-reg  { margin-right: 2.63rem!important; }
.mr-md   { margin-right: 3.78rem!important; }
.mr-lg   { margin-right: 4.93rem!important; }
.mr-xl   { margin-right: 6.08rem!important; }
.mr-0    { margin-right: 0!important; }
.mr-auto { margin-right: auto!important; }

.m-tb-0    { margin-top: 0!important; margin-bottom: 0!important; }
.m-tb-auto { margin-top: auto!important; margin-bottom: auto!important; }
.m-tb-xs   { margin-top: 0.33rem!important; margin-bottom: 0.33rem!important; }
.m-tb-sm   { margin-top: 1.48rem!important; margin-bottom: 1.48rem!important; }
.m-tb-reg  { margin-top: 2.63rem!important; margin-bottom: 3.63rem!important; }
.m-tb-md   { margin-top: 3.78rem!important; margin-bottom: 3.78rem!important; }
.m-tb-lg   { margin-top: 4.93rem!important; margin-bottom: 4.93rem!important; }
.m-tb-xl   { margin-top: 6.08rem!important; margin-bottom: 6.08rem!important; }

.m-lr-0    { margin-left: 0!important; margin-right: 0!important; }
.m-lr-auto { margin-left: auto!important; margin-right: auto!important; }
.m-lr-xs   { margin-left: 0.33rem!important; margin-right: 0.33rem!important; }
.m-lr-sm   { margin-left: 1.48rem!important; margin-right: 1.48rem!important; }
.m-lr-reg  { margin-left: 2.63rem!important; margin-right: 3.63rem!important; }
.m-lr-md   { margin-left: 3.78rem!important; margin-right: 3.78rem!important; }
.m-lr-lg   { margin-left: 4.93rem!important; margin-right: 4.93rem!important; }
.m-lr-xl   { margin-left: 6.08rem!important; margin-right: 6.08rem!important; }

/* Paddings */
.p-0   { padding: 0!important; }
.p-xs  { padding: 0.33rem!important; }
.p-sm  { padding: 1.48rem!important; }
.p-reg { padding: 2.63rem!important; }
.p-md  { padding: 3.78rem!important; }
.p-lg  { padding: 4.93rem!important; }
.p-xl  { padding: 6.08rem!important; }

.pt-0   { padding-top: 0!important; }
.pt-xs  { padding-top: 0.33rem!important; }
.pt-sm  { padding-top: 1.48rem!important; }
.pt-reg { padding-top: 2.63rem!important; }
.pt-md  { padding-top: 3.78rem!important; }
.pt-lg  { padding-top: 4.93rem!important; }
.pt-xl  { padding-top: 6.08rem!important; }

.pb-0   { padding-bottom: 0; }
.pb-xs  { padding-bottom: 0.33rem!important; }
.pb-sm  { padding-bottom: 1.48rem!important; }
.pb-reg { padding-bottom: 2.63rem!important; }
.pb-md  { padding-bottom: 3.78rem!important; }
.pb-lg  { padding-bottom: 4.93rem!important; }
.pb-xl  { padding-bottom: 6.08rem!important; }

.pl-0   { padding-left: 0!important; }
.pl-xs  { padding-left: 0.33rem!important; }
.pl-sm  { padding-left: 1.48rem!important; }
.pl-reg { padding-left: 2.63rem!important; }
.pl-md  { padding-left: 3.78rem!important; }
.pl-lg  { padding-left: 4.93rem!important; }
.pl-xl  { padding-left: 6.08rem!important; }

.pr-0   { padding-right: 0!important; }
.pr-xs  { padding-right: 0.33rem!important; }
.pr-sm  { padding-right: 1.48rem!important; }
.pr-reg { padding-right: 2.63rem!important; }
.pr-md  { padding-right: 3.78rem!important; }
.pr-lg  { padding-right: 4.93rem!important; }
.pr-xl  { padding-right: 6.08rem!important; }

.p-lr-0   { padding-left: 0; padding-right: 0; }
.p-lr-xs  { padding-left: 0.33rem!important; padding-right: 0.33rem!important; }
.p-lr-sm  { padding-left: 1.48rem!important; padding-right: 1.48rem!important; }
.p-lr-reg { padding-left: 2.63rem!important; padding-right: 2.63rem!important; }
.p-lr-md  { padding-left: 3.78rem!important; padding-right: 3.78rem!important; }
.p-lr-lg  { padding-left: 4.93rem!important; padding-right: 4.93rem!important; }
.p-lr-xl  { padding-left: 6.08rem!important; padding-right: 6.08rem!important; }

.p-tb-0   { padding-top: 0; padding-bottom: 0; }
.p-tb-xs  { padding-top: 0.33rem!important; padding-bottom: 0.33rem!important; }
.p-tb-sm  { padding-top: 1.48rem!important; padding-bottom: 1.48rem!important; }
.p-tb-reg { padding-top: 2.63rem!important; padding-bottom: 2.63rem!important; }
.p-tb-md  { padding-top: 3.78rem!important; padding-bottom: 3.78rem!important; }
.p-tb-lg  { padding-top: 4.93rem!important; padding-bottom: 4.93rem!important; }
.p-tb-xl  { padding-top: 6.08rem!important; padding-bottom: 6.08rem!important; }
/* -------------------------------------- */
/* End of Spacing                         */
/* -------------------------------------- */

/* ____________________________________________________________ */
/* Essentials - Rules for Basic HTML sizing & elements          */
/* ____________________________________________________________ */
/* ---------  Reset --------- */
*,*::before,*::after {  box-sizing: border-box; }
body,h1,h2,h3,h4,h5,p,figure,picture { margin: 0; }
/* --------  /Reset --------- */

h1,h2,h3,h4,h5,p { font-weight: 400; }

h1,h2,h3,h4,h5 {
    letter-spacing: var(--ff-heading-letter-spacing);
    font-family: var(--ff-heading);
}

h2,h3,h4 { margin-bottom: 1rem; }

body {
    /* Browser default lh is 1.4 */
    font-family: var(--ff-body);
    font-size: var(--fs-400);
    color: var(--clr-text-default);
    line-height: 1.5;
    min-height: 100vh;
    background: var(--clr-canvas);
}

h1 {
    font-size: var(--fs-650);
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: 600;
}

h2 {
    margin-top: 5px;
    font-size: var(--fs-500);
    font-weight: 600;
    text-transform: uppercase;
}

h3 {
    font-size: var(--fs-500);
}

h4 {
    text-transform: uppercase;
}

p {
    margin-bottom: 1.33rem;
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

figcaption {
    margin: 0.33rem 0 0;
    font-weight: 600;
}

figure, img {
    margin: 0.48rem 0;
}

img[data-img-toggle="true"] {
    transition: max-width 0.35s ease;
}

/* End of Essentials - Rules for Basic HTML sizing & elements   */
/* ____________________________________________________________ */

/* ------------------------------------------------------------ */
/* Display & Positioning                                        */
/* ------------------------------------------------------------ */

.float-left { float: left!important; }
.float-right { float: right!important; }

.flex {
    display: flex;
    gap: 1rem;
}

.flex-row-spread-sm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.flex-row-spread-reg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.grid {
    display: grid;
    /* Automatically adds columns that are at least 200px, otherwise stacks */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.gridbox-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.flow > *:where(:not(:first-child)) {
    margin-bottom: 1rem;
}

.scroll-x-only {
    overflow-x: scroll;
    overflow-y: hidden;
}

.scroll-y-only {
    overflow-y: scroll;
    overflow-x: hidden;
}

.scroll-x {
    overflow-x: scroll;
}

.scroll-y {
    overflow-y: scroll;
}

.rotate-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.rotate-left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.rotate-up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.rotate-down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.rotate-right-sm {
    transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
}

.rotate-left-sm {
    transform: rotate(155deg);
    -webkit-transform: rotate(155deg);
}

.rotate-up-sm {
    transform: rotate(-155deg);
    -webkit-transform: rotate(-155deg);
}

.rotate-down-sm {
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
}

.list-style-none {
    list-style-type: none!important;
    margin: 0!important;
    padding: 0!important;
}

.d-inline { display: inline; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; align-items: flex-start; } /* Difference from .flex is no default gap value provided here. */

/* Width works like the columns */
.w-0  { width: 0!important; }
.w-1  { width: 8.33%!important; }
.w-2  { width: 16.66%!important; }
.w-3  { width: 25%!important; }
.w-4  { width: 33.33%!important; }
.w-5  { width: 41.66%!important; }
.w-6  { width: 50%!important; }
.w-7  { width: 58.33%!important; }
.w-8  { width: 66.66%!important; }
.w-9  { width: 75%!important; }
.w-10 { width: 83.33%!important; }
.w-11 { width: 91.66%!important; }
.w-12 { width: 100%!important; }

.w-min-0  { min-width: 0!important; }
.w-min-1  { min-width: 8.33%!important; }
.w-min-2  { min-width: 16.66%!important; }
.w-min-3  { min-width: 25%!important; }
.w-min-4  { min-width: 33.33%!important; }
.w-min-5  { min-width: 41.66%!important; }
.w-min-6  { min-width: 50%!important; }
.w-min-7  { min-width: 58.33%!important; }
.w-min-8  { min-width: 66.66%!important; }
.w-min-9  { min-width: 75%!important; }
.w-min-10 { min-width: 83.33%!important; }
.w-min-12 { min-width: 100%!important; }

.w-max-0  { max-width: 0!important; }
.w-max-1  { max-width: 8.33%!important; }
.w-max-2  { max-width: 16.66%!important; }
.w-max-3  { max-width: 25%!important; }
.w-max-4  { max-width: 33.33%!important; }
.w-max-5  { max-width: 41.66%!important; }
.w-max-6  { max-width: 50%!important; }
.w-max-7  { max-width: 58.33%!important; }
.w-max-8  { max-width: 66.66%!important; }
.w-max-9  { max-width: 75%!important; }
.w-max-10 { max-width: 83.33%!important; }
.w-max-12 { max-width: 100%!important; }

/* End of Display & Positioning                                 */
/* ------------------------------------------------------------ */

/* ____________________________________________________________ */
/* Layout and Position                                          */
/* ____________________________________________________________ */
.container {
    max-width: 1076px!important;
    margin: 0 auto;
    overflow: hidden;
}

.page-container {
    background: var(--clr-canvas);
    position: relative;
    min-height: 88vh;
}

.content-wrap {
    padding-bottom: 4.5rem; /* Footer height */
    min-height: 88vh;
}

.align-self-center { align-self: center!important; }
.align-self-left { align-self: left!important; }
.align-self-right { align-self: right!important; }

.align-items-center { align-items: center!important; }
.align-items-left { align-items: left!important; }
.align-items-right { align-items: right!important; }
.align-items-flex-start { align-items: flex-start!important; }
.align-items-flex-end { align-items: flex-end!important; }

.text-center { text-align: center!important; }
.text-left { text-align: left!important; }
.text-right { text-align: right!important; }

.justify-content-baseline { justify-content: baseline!important; }
.justify-content-center { justify-content: center!important; }
.justify-conent-space-bt { justify-content: space-between; }
.justify-content-space-even { justify-content: space-evenly; }
.justify-content-left { justify-content: left!important; }
.justify-content-right { justify-content: right!important; }
/* End of Layout and Position                                   */
/* ____________________________________________________________ */

/* ------------------------------------------------------------ */
/* Rows, Columns, and Cards                                     */
/* ------------------------------------------------------------ */
.row {
    clear: both;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 30px;
    max-width: 1076px;
    flex-wrap: wrap; /* Allow columns to wrap to new lines on small screens */
    margin-left: -15px;
    margin-right: -15px;
}

[class*="col-"], .col {
    display: flex;
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-direction: column;
    padding: 0 15px;
    box-sizing: border-box; /* Ensures padding doesn't impact width */
}

/* Make horizontal rules get displayed */
[class*="col-"] hr, .col hr {
    width: 100%;
}

.col    { flex-basis: 0; }
.col-1  { flex-basis: 8.33%; }
.col-2  { flex-basis: 16.66%; }
.col-3  { flex-basis: 25%; }
.col-4  { flex-basis: 33.33%; }
.col-5  { flex-basis: 41.66%; }
.col-6  { flex-basis: 50%; }
.col-7  { flex-basis: 58.33%; }
.col-8  { flex-basis: 66.66%; }
.col-9  { flex-basis: 75%; }
.col-10 { flex-basis: 83.33%; }
.col-12 { flex-basis: 100%; }

/* Default card: neutral surface, default text */
.card {
    background-color: var(--clr-neutral);
    color: var(--clr-text-default);
    border-radius: 10px;
    padding: 1.4rem;
}

.card-canvas {
    background-color: var(--clr-canvas);
    color: var(--clr-text-default);
    border-radius: 10px;
    padding: 1.4rem;
}

/* Brand card: deep navy/dark navy surface */
.card-baseline {
    background-color: var(--clr-baseline);
    color: var(--clr-on-baseline);
    border-radius: 10px;
    padding: 1.4rem;
}

/* Highlight card: yellow surface */
.card-secondary {
    background-color: var(--clr-secondary);
    color: var(--clr-text-highcontrast);
    border-radius: 10px;
    padding: 1.4rem;
}
/* Cards inside columns stretch to fill equal height */
[class*="col-"] > .card,
[class*="col-"] > .card-canvas,
[class*="col-"] > .card-baseline,
[class*="col-"] > .card-secondary {
    flex: 1;
}

/* End of Rows, Columns, and Cards                              */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* Shadow, Outline, Highlight, & Misc Accents                   */
/* ------------------------------------------------------------ */

.td-none { text-decoration: none!important; }

.br-xs { border-radius: 3px; }
.br-sm { border-radius: 8px; }
.br-reg { border-radius: 10px; }
.br-md { border-radius: 14px; }
.br-lg { border-radius: 18px; }
.br-xl { border-radius: 24px; }

.border-accent-reg           { border: 1px solid var(--clr-accent); }
.border-neutral-reg          { border: 1px solid var(--clr-neutral); }
.border-secondary-reg        { border: 1px solid var(--clr-secondary); }
.border-baseline-reg         { border: 1px solid var(--clr-baseline); }

.border-accent-md           { border: 2px solid var(--clr-accent); }
.border-neutral-md          { border: 2px solid var(--clr-neutral); }
.border-secondary-md        { border: 2px solid var(--clr-secondary); }
.border-baseline-md         { border: 2px solid var(--clr-baseline); }

.border-accent-reg-dotted    { border: 1px dotted var(--clr-accent); }
.border-neutral-reg-dotted   { border: 1px dotted var(--clr-neutral); }
.border-secondary-reg-dotted { border: 1px dotted var(--clr-secondary); }
.border-baseline-reg-dotted  { border: 1px dotted var(--clr-baseline); }

.fw-reg { font-weight: 400; }
.fw-sb  { font-weight: 500; }
.fw-b   { font-weight: 600; }
.fw-bb  { font-weight: 700; }

    /* ============================================================
       IMAGE UTILITY CLASSES
       ============================================================

       SHAPES
         .img-square   — rounded square (use for cards, thumbnails, avatars)
         .img-circle   — perfect circle (use for profile photos, icons)

       SIZES  (compose with a shape class)
         .img-sm       — 48 × 48 px   (inline use, comment threads)
         .img-md       — 96 × 96 px   (list items, sidebars)
         .img-reg      — 144 × 144 px (default card / profile size)
         .img-lg       — 208 × 208 px (hero / featured profile)

       MODIFIERS
         .img--on-dark — replaces the border with a lighter tint when the
                         image sits on --clr-baseline or another dark surface

       USAGE EXAMPLE
         <img class="img-circle img-reg" src="photo.jpg" alt="…" />
         <img class="img-square img-md img--on-dark" src="thumb.jpg" alt="…" />
    ============================================================ */

/* --- shared base ------------------------------------------ */
.img-square,
.img-circle {
    display: block;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    /* subtle border using the neutral palette token */
    border: 2px solid color-mix(in srgb, var(--clr-neutral) 35%, transparent);
    /* gentle lift — matches the card shadow weight */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09),
                0 1px 2px rgba(0, 0, 0, 0.06);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* focus / hover: accent ring */
.img-square:is(:hover, :focus-visible),
.img-circle:is(:hover, :focus-visible) {
    border-color: var(--clr-accent);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--clr-accent) 20%, transparent),
                0 2px 8px rgba(0, 0, 0, 0.09);
    outline: none;
}

/* --- shapes ----------------------------------------------- */
.img-square { border-radius: 0.76rem; }  /* ~12px — modern, not bubbly */
.img-circle { border-radius: 50%; }

/* --- sizes ------------------------------------------------ */
.img-sm  { width: 48px;  height: 48px;  }
.img-md  { width: 96px;  height: 96px;  }
.img-reg { width: 144px; height: 144px; }
.img-lg  { width: 208px; height: 208px; }

/* --- modifier: image on a dark/baseline surface ----------- */
.img--on-dark {
    border-color: color-mix(in srgb, var(--clr-on-baseline) 20%, transparent);
    box-shadow:   0 2px 10px rgba(0, 0, 0, 0.35);
}

.img--on-dark:is(:hover, :focus-visible) {
    border-color: var(--clr-secondary); /* gold ring pops nicely on navy */
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--clr-secondary) 25%, transparent),
                0 2px 10px rgba(0, 0, 0, 0.35);
}

.shadow {
    position: relative;
    -webkit-box-shadow: rgba(50, 50, 93, 0.25) 2px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    -moz-box-shadow: rgba(50, 50, 93, 0.25) 2px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    box-shadow: rgba(50, 50, 93, 0.25) 2px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.textshadow { text-shadow: 1px 2px 3px #000000; }

.accent-box-primary-left {
    position: static;
    z-index: -1;
    background-color: var(--clr-accent);
    border-bottom: 3px dotted var(--clr-secondary);
    margin-top: -44px!important;
    padding-bottom: 44px;
    width: 100%;
    max-width: 100%;
    clip-path: polygon(0 0%, 100% 40%, 100% 100%, 0 100%)
}

.accent-box-primary-right {
    position: static;
    z-index: -1;
    background-color: var(--clr-accent);
    border-bottom: 3px dotted var(--clr-secondary);
    margin-top: -44px!important;
    padding-bottom: 44px;
    width: 100%;
    max-width: 100%;
    clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0 100%);
}

.accent-bar-primary-left {
    position: static;
    z-index: -1;
    background-color: var(--clr-accent);
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 10px;
    border-bottom: 3px dotted var(--clr-secondary);
    margin-top: -26px!important;
    padding-bottom: 26px;
    width: 100%;
    max-width: 100%;
    clip-path: polygon(0 0%, 100% 40%, 100% 100%, 0 100%)
}

.accent-bar-baseline-left {
    position: static;
    z-index: -1;
    background-color: var(--clr-text-highcontrast);
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 10px;
    border-bottom: 3px dotted var(--clr-secondary);
    margin-top: -26px!important;
    padding-bottom: 26px;
    width: 100%;
    max-width: 100%;
    clip-path: polygon(0 0%, 100% 40%, 100% 100%, 0 100%)
}

.accent-bar-primary-right {
    position: static;
    z-index: -1;
    background-color: var(--clr-accent);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 10px;
    border-bottom: 3px dotted var(--clr-secondary);
    margin-top: -26px!important;
    padding-bottom: 26px;
    width: 100%;
    max-width: 100%;
    clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0 100%);
}

.accent-bar-baseline-right {
    position: static;
    z-index: -1;
    background-color: var(--clr-text-highcontrast);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 10px;
    border-bottom: 3px dotted var(--clr-secondary);
    margin-top: -26px!important;
    padding-bottom: 26px;
    width: 100%;
    max-width: 100%;
    clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0 100%);
}

/* Force regular size bottom margin on most of the elements immediately
   above the accent boxes to prevent the accent boxes from overlapping the elemnts.
*/
*:not(section, .content-wrap, .callout):has(+ .accent-box-primary-right),
*:not(section, .content-wrap, .callout):has(+ .accent-box-primary-left)
{
    margin-bottom: 2.63rem!important;
}

.content-wrap:has(+ .accent-box-primary-right),
.content-wrap:has(+ .accent-box-primary-left)
{
    margin-bottom: 1.48rem!important;
}

.callout:has(+ .accent-bar-primary-right),
.callout:has(+ .accent-bar-primary-right),
.callout:has(+ .accent-bar-baseline-right),
.callout:has(+ .accent-box-primary-left),
.callout:has(+ .accent-bar-primary-left),
.callout:has(+ .accent-bar-baseline-left)
{
    margin-bottom: 0.6rem!important;
}

/* End of Shadow, Outline, Highlight, & Misc Accents            */
/* ------------------------------------------------------------ */

/* ============================================================ */
/* Color System — Semantic Roles                                */
/*                                                              */
/*  --clr-canvas      Page/section background                   */
/*  --clr-baseline    Brand surface: nav, hero, primary btns    */
/*  --clr-accent      Interactive: links, focus rings, CTAs     */
/*  --clr-neutral     Container surface: cards, code, sidebars  */
/*  --clr-secondary   Highlight: badges, callout strips, decor  */
/*  --clr-text-*      Typography hierarchy                      */
/*  --clr-on-baseline Text/icons placed ON a baseline surface   */
/*  --clr-on-accent   Text/icons placed ON an accent surface    */
/* ============================================================ */

/* ------------------------------------------------------------ */
/* Global Defaults                                              */
/* ------------------------------------------------------------ */
a {
    color: var(--clr-accent);
    text-underline-offset: 3px;
    transition: opacity 0.15s;
}

a:hover { opacity: 0.75; }

:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection {
    background-color: var(--clr-secondary);
    color: var(--clr-text-highcontrast);
}

hr {
    border: none;
    border-top: 1px solid var(--clr-neutral);
    margin: 1.5rem 0;
}

/* ------------------------------------------------------------ */
/* Color Utilities                                              */
/* ------------------------------------------------------------ */
.bg-baseline  { background-color: var(--clr-baseline); }
.bg-canvas    { background-color: var(--clr-canvas); }
.bg-accent    { background-color: var(--clr-accent); }
.bg-neutral   { background-color: var(--clr-neutral); }
.bg-secondary { background-color: var(--clr-secondary); }

.text-highcontrast { color: var(--clr-text-highcontrast)!important; }
.text-default      { color: var(--clr-text-default)!important; }
.text-muted        { color: var(--clr-text-muted)!important; }
.text-on-baseline  { color: var(--clr-on-baseline)!important; }
.text-accent       { color: var(--clr-accent)!important; }
.text-on-accent    { color: var(--clr-on-accent)!important; }
.text-secondary    { color: var(--clr-secondary)!important; }
.text-baseline     { color: var(--clr-baseline)!important; }

/* Transparency */
.tr-10 { opacity: 0.9; }
.tr-20 { opacity: 0.8; }
.tr-30 { opacity: 0.7; }
.tr-40 { opacity: 0.6; }
.tr-50 { opacity: 0.5; }
.tr-60 { opacity: 0.4; }
.tr-70 { opacity: 0.3; }
.tr-80 { opacity: 0.2; }
.tr-90 { opacity: 0.1; }
.tr-100 { opacity: 0; }
/* ------------------------------------------------------------ */
/* End of Color Utilities                                       */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* Buttons                                                      */
/* ------------------------------------------------------------ */
a.btn {

}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.625em 1.375em;
    border-radius: 6px;
    font-size: var(--fs-350);
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    transition: filter 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
}

/* Primary: brand navy background */
.btn-primary {
    background-color: var(--clr-baseline);
    color: var(--clr-on-baseline);
    border-color: var(--clr-baseline);
}

.btn-primary:hover {
    filter: brightness(1.25);
    opacity: 1;
    /* Prevent achor hover color */
    color: var(--clr-on-baseline)!important;
}

/* Accent: interactive blue */
.btn-accent {
    background-color: var(--clr-accent);
    color: var(--clr-on-accent);
    border-color: var(--clr-accent);
}
.btn-accent:hover {
    filter: brightness(1.1);
    opacity: 1;
    /* Prevent achor hover color */
    color: var(--clr-on-accent)!important;
}

/* Secondary: yellow highlight */
.btn-secondary {
    background-color: var(--clr-secondary);
    color: var(--clr-text-highcontrast)!important;
    border-color: var(--clr-secondary);
}
.btn-secondary:hover {
    filter: brightness(0.93);
    opacity: 1;
    /* Prevent achor hover color */
    color: var(--clr-text-highcontrast)!important;
}

/* Outline: accent-bordered, transparent background */
.btn-outline {
    background-color: transparent;
    color: var(--clr-accent);
    border-color: var(--clr-accent);
}
.btn-outline:hover {
    background-color: var(--clr-accent);
    /* Prevent achor hover color */
    color: var(--clr-on-accent)!important;
    opacity: 1;
}

/* Ghost: text-only, no background or border */
.btn-ghost {
    background-color: transparent;
    color: var(--clr-on-baseline)!important;
    border-color: transparent;
}
.btn-ghost:hover {
    opacity: 0.8;
    /* Prevent achor hover color */
    color: var(--clr-on-baseline)!important;
}

.btn-sm { padding: 0.4em 0.9em;   font-size: var(--fs-300); }
.btn-lg { padding: 0.8em 1.75em;  font-size: var(--fs-400); }
/* End of Buttons                                               */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* Badges                                                       */
/* ------------------------------------------------------------ */
.badge {
    display: inline-block;
    padding: 0.2em 0.65em;
    border-radius: 4px;
    font-size: var(--fs-200);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}

.heading-badge {
    display: inline-block;
    padding: 0.22em 0.33em;
    margin:  0 0.2em;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: wrap; /* Due to text size, must let white space wrap for small screen */
}

.badge-secondary { background-color: var(--clr-secondary); color: var(--clr-text-highcontrast); }
.badge-baseline  { background-color: var(--clr-baseline);  color: var(--clr-on-baseline); }
.badge-accent    { background-color: var(--clr-accent);    color: var(--clr-on-accent); }
.badge-neutral   { background-color: var(--clr-neutral);   color: var(--clr-text-default); }
/* End of Badges                                                */
/* ------------------------------------------------------------ */

/* Code styling lives entirely in static/css/code.css */

/* ------------------------------------------------------------ */
/* Callout / Info Block                                         */
/* ------------------------------------------------------------ */
.callout {
    margin-bottom: 1.48rem;
    background-color: var(--clr-neutral);
    border-left: 4px solid var(--clr-accent);
    color: var(--clr-text-default);
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 8px;
}

/* Yellow callout — tips, highlights */
.callout-secondary {
    background-color: var(--clr-secondary);
    border-left-color: var(--clr-text-highcontrast);
    color: var(--clr-text-highcontrast);
}
/* End of Callout                                               */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* Collapsible / Accordion                                      */
/* ------------------------------------------------------------ */

/* Strip the default browser disclosure triangle */
.collapsible > summary { list-style: none; }
.collapsible > summary::-webkit-details-marker { display: none; }

/* Standalone collapsible — use a <details> element */
.collapsible {
    margin-bottom: 0.33rem;
    border: 1px solid var(--clr-neutral);
    border-radius: 10px;
    overflow: hidden;
}

/* Stacked standalone collapsibles get a small gap between them */
.collapsible + .collapsible { margin-top: 0.5rem; }

/* In a grid context, don't stretch collapsed siblings to match an open neighbour's height */
.gridbox-2 > .collapsible,
.gridbox-3 > .collapsible,
.grid > .collapsible { align-self:baseline; }

/* Trigger row */
.collapsible > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--clr-neutral);
    color: var(--clr-text-default);
    font-family: var(--ff-heading);
    font-weight: 600;
    font-size: var(--fs-400);
    cursor: pointer;
    user-select: none;
    transition: filter 0.15s;
}
.collapsible > summary:hover { filter: brightness(0.95); }

/* Separator when open */
.collapsible[open] > summary {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* CSS chevron — rotates 90° when open */
.collapsible > summary::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -0.2em;
    opacity: 0.65;
}
.collapsible[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: 0.1em;
}

/* Body */
.collapsible-body {
    padding: 1rem 1.35rem;
    background-color: var(--clr-canvas);
    color: var(--clr-text-default);
}

/* Reveal animation */
.collapsible[open] > .collapsible-body {
    animation: collapsible-reveal 0.18s ease;
}
@keyframes collapsible-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Color variants ---- */
.collapsible-baseline { border-color: var(--clr-baseline); }
.collapsible-baseline > summary {
    background-color: var(--clr-baseline);
    color: var(--clr-on-baseline);
}
.collapsible-baseline[open] > summary {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.collapsible-accent { border-color: var(--clr-accent); }
.collapsible-accent > summary {
    background-color: var(--clr-accent);
    color: var(--clr-on-accent);
}
.collapsible-accent[open] > summary {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.collapsible-secondary { border-color: var(--clr-secondary); }
.collapsible-secondary > summary {
    background-color: var(--clr-secondary);
    color: var(--clr-text-highcontrast);
}
.collapsible-secondary[open] > summary {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* ---- Accordion — group of collapsibles sharing borders ---- */
.accordion {
    margin-bottom: 1.48rem;
    border: 1px solid var(--clr-neutral);
    border-radius: 10px;
    overflow: hidden;
}
.accordion > .collapsible {
    border: none;
    border-radius: 0;
    margin-top: 0;
}
.accordion > .collapsible + .collapsible {
    border-top: 1px solid var(--clr-neutral);
    margin-top: 0;
}
.accordion > .collapsible[open] > summary {
    border-bottom-color: var(--clr-neutral);
}

/* End of Collapsible / Accordion                              */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* Page Sections                                                */
/* ------------------------------------------------------------ */
/* Brand hero: navy/dark-navy bg */
.section-baseline {
    z-index: 2;
    background-color: var(--clr-baseline);
    color: var(--clr-on-baseline);
    padding: 4rem 2rem;
}

/* Yellow highlight strip (e.g. announcement banner) */
.section-secondary {
    z-index: 2;
    background-color: var(--clr-secondary);
    color: var(--clr-text-highcontrast);
    padding: 4rem 2rem;
}

/* Subtle alternate section */
.section-neutral {
    z-index: 2;
    background-color: var(--clr-neutral);
    color: var(--clr-text-default);
    padding: 4rem 2rem;
}
/* End of Page Sections                                         */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* Navigation and Footer                                        */
/* ------------------------------------------------------------ */
.nav {
    display: inline-block;
    background-color: var(--clr-baseline);
    color: var(--clr-on-baseline);
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav a {
    color: var(--clr-on-baseline);
    text-decoration: none;
    opacity: 0.85;
    font-size: var(--fs-400);
}
.nav a:hover { opacity: 1; }

/* Brand/logo text within .nav — uses secondary (yellow) for pop */
.nav-brand {
    color: var(--clr-on-baseline);
    font-weight: 700;
    font-size: var(--fs-450);
    letter-spacing: -0.01em;
    text-decoration: none;
    opacity: 1;
}
.nav-brand:hover { opacity: 0.9; }

footer {
    min-height: 4.5rem;
}

footer a[href] {
    color: var(--clr-on-baseline);
    text-decoration: none;
    opacity: 0.7;
}

footer a[href]:hover {
    opacity: 0.9;
}

/* Footer layout container */
.footer-inner {
    max-width: 1076px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* Brand block */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Footer nav links */
.footer-nav {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-nav a[href] {
    font-size: var(--fs-300);
}

/* Mobile nav FAB — hidden on desktop */
.nav-mobile-toggle {
    display: none;
}

/* Mobile nav backdrop — hidden by default */
.nav-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
    cursor: pointer;
}
.nav-mobile-backdrop.is-open {
    display: block;
}

/* Mobile nav bottom sheet — hidden on desktop */
.nav-mobile-menu {
    display: none;
}

.nav-mobile-toggles{
  display: flex;
  gap: .5rem;
  margin-bottom: .65rem;
}
.nav-mobile-toggle-btn{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .4em .5rem;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / .15);
  background-color: transparent;
  color: var(--clr-on-baseline);
  font-size: var(--fs-250);
  cursor: pointer;
  transition: background-color .15s;
}
.nav-mobile-toggle-btn:hover{ background-color: rgb(255 255 255 / .08); }
.nav-mobile-toggle-btn i{ font-size: 1.05em; }

@media (max-width: 856px) {
    /* Hide the desktop nav bar */
    .nav { display: none; }

    /* FAB: fixed bottom-right circle */
    .nav-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 200;
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 50%;
        padding: 0;
        font-size: 1.5rem;
        background-color: var(--clr-secondary);
        color: var(--clr-text-highcontrast);
        border: 1px solid white;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
        transition: filter 0.15s;
    }
    .nav-mobile-toggle:hover { filter: brightness(0.95); }

    /* Bottom sheet */
    .nav-mobile-menu {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 160;
        background-color: var(--clr-baseline);
        color: var(--clr-on-baseline);
        border: 1px solid white;
        border-radius: 1.25rem 1.25rem 0 0;
        padding: 1.25rem 1.5rem 2.5rem;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.3);
    }
    .nav-mobile-menu.is-open { transform: translateY(0); }

    .nav-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .nav-mobile-links {
        display: flex;
        flex-direction: column;
        margin-bottom: 1.25rem;
    }
    .nav-mobile-links a {
        color: var(--clr-on-baseline);
        text-decoration: none;
        font-size: var(--fs-400);
        padding: 0.7rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        opacity: 0.85;
    }
    .nav-mobile-links a:last-child { border-bottom: none; }
    .nav-mobile-links a:hover { opacity: 1; }

    .nav-mobile-actions {
        display: flex;
        gap: 0.55rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding-top: 0.5rem;
    }
}
/* End of Navigation and Footer                                 */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* Card Carousel                                                */
/* ------------------------------------------------------------ */
.card-carousel {
    border-radius: 10px;
    position: relative;
}

.card-carousel-track-wrap {
    overflow: hidden;
    border-radius: 10px;
}

.card-carousel-track {
    display: flex;
    transition: transform 0.32s ease;
    will-change: transform;
}

.card-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Stretch inner cards to fill slide height */
.card-carousel-slide > .card,
.card-carousel-slide > .card-canvas,
.card-carousel-slide > .card-baseline,
.card-carousel-slide > .card-secondary {
    flex: 1;
    margin: 0;
}

.card-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.card-carousel-counter {
    font-size: var(--fs-200);
    color: var(--clr-text-muted);
    font-family: var(--ff-mono);
    white-space: nowrap;
}

/* Hide controls when only one slide */
.card-carousel[data-slides="1"] .card-carousel-controls {
    display: none;
}
/* End of Card Carousel                                          */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* Table                                                        */
/* ------------------------------------------------------------ */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--clr-canvas);
    margin-bottom: 1.48rem;
    border-collapse: separate!important; /* Important: allows border-radius to work */
    border-radius: 10px!important;
    border: 1px dotted var(--clr-accent);
    overflow: hidden;
    color: var(--clr-text-default);
}

th,
td {
    padding: 12px 16px;
    text-align: left;
}

thead th {
    background: var(--clr-neutral);
    border-bottom: 1px dotted var(--clr-accent);
}

tbody tr {
    border-bottom: 1px solid var(--clr-neutral);
}

tbody tr:last-child {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--clr-neutral);
}
/* Table                                                        */
/* ------------------------------------------------------------ */

@media (max-width: 500px) {
    .grid {
        display: block;
    }
}

@media (max-width: 780px) {
    .gridbox-2 {
        display: block;
    }
}