:root {

/*
* TYPOGRAPHY SYSTEM
* Uses fluid type scaling for responsive font sizes across viewports
* Generated via: https://www.fluid-type-scale.com/
*/

--font-family-default: "Bankside Sans VF", sans-serif;

/* Fluid font scale - scales between min/max viewports */

--font-size-xs: clamp(0.5rem, 0.5vi + 0.52rem, 0.75rem);
--font-size-s: clamp(0.64rem, 0.5vi + 0.52rem, 0.91rem);
--font-size-r: clamp(1rem, 1.1761rem + -0.2273vw, 1.125rem);
--font-size-m: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
--font-size-l: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
--font-size-xl: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
--font-size-2xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
--font-size-3xl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
--font-size-4xl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);

/* Font weights and line heights */
--font-light-normal: "wght" 300, "wdth" 100;
--font-regular-normal: "wght" 400, "wdth" 100;
--font-semi-normal: "wght" 500, "wdth" 100;
--font-bold-normal: "wght" 600, "wdth" 100;
--font-light-condensed: "wght" 300, "wdth" 80;
--font-regular-condensed: "wght" 400, "wdth" 80;
--font-semi-condensed: "wght" 500, "wdth" 80;
--font-bold-condensed: "wght" 600, "wdth" 80;
--lineheight-r: 1.6;
--lineheight-s: 1.4;

/*
* COLOR SYSTEM
* Light theme with accent colors for visual hierarchy
*/

--color-accent: color(display-p3 0.32 0.634 0.638); /* Primary brand accent (Green) */
--color-background-default: color(display-p3 0.98 0.977 0.984); /* Main background */
--color-background-alt: color(display-p3 0.21 0.368 0.439); /* Alternative background */
--color-base: color(display-p3 0.968 0.931 0.888); /* Base colour for panels */
--color-border: color(display-p3 0.691 0.713 0.688); /* Border colour */
--color-contrast: color(display-p3 0.21 0.368 0.439); /* Contrasting colour */
--color-text-default: color(display-p3 0.21 0.368 0.439); /* Primary text color */
--color-text-alt: color(display-p3 0.98 0.977 0.984); /* Text on dark backgrounds */
--color-text-link: var(--color-contrast);
--color-text-link-hover: var(--color-accent);
--color-text-link-decoration: var(--color-contrast);
--color-text-link-decoration-hover: var(--color-accent);
--color-button-background: var(--color-accent);
--color-button-text: var(--color-text-alt);
--color-input-background: var(--color-background-default);

/*
* BORDER SYSTEM
* Consistent border widths and radii
*/

--border-width-s: .5px;
--border-width-r: 1px;
--border-width-l: 2px;
--border-radius-s: 3px;
--border-radius-r: 6px;
--border-radius-l: 12px;

/*
* LAYOUT SYSTEM
* Grid and spacing for consistent layouts
*/

--grid-12-col: repeat(12, 1fr); /* 12-column grid system */
--grid-column-gap: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
--grid-row-gap: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.31rem);
--max-width: 85rem; /* Maximum content width */

/*
* SPACING SYSTEM
* Fluid spacing scale for consistent vertical rhythm
*/

--spacing-xs: .25rem;
--spacing-s: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
--spacing-r: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
--spacing-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
--spacing-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
--spacing-xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);

/* Sizing for SVG icons */
--svg-width: clamp(1.50rem, calc(1.34rem + 0.80vw), 2.06rem);

/*
* ANIMATION SYSTEM
* Standardized timing for consistent interactions
*/

--animate-duration: 1s;
--animate-duration-fast: .25s;
--animate-duration-faster: .15s;
--animate-delay: 1s;
--animate-function: ease-in;
--animate-repeat: 1;

/* Transform scales for interactive elements */
--scale-up: 1.025;
--scale-down: .98;

/* Filter effects for hover states */
--brightness-up: 1.15;
--brightness-down: .85;
--saturate-up: 1.25;
--saturate-down: .85; }

[data-theme="dark"] {
--color-accent: color(display-p3 0.299 0.657 0.859); /* Primary brand accent (Desert Sand) */
--color-background-default: color(display-p3 0.14 0.152 0.16); /* Main background */
--color-background-alt: color(display-p3 0.98 0.977 0.984); /* Alternative background */
--color-base: color(display-p3 0.968 0.931 0.888); /* Base colour for panels */
--color-border: color(display-p3 0.691 0.713 0.688); /* Border colour */
--color-contrast: color(display-p3 0.98 0.977 0.984); /* Contrasting colour */
--color-text-default: color(display-p3 0.98 0.977 0.984); /* Primary text color */
--color-text-alt: color(display-p3 0.14 0.152 0.16); /* Text on dark backgrounds */
--color-text-link: var(--color-contrast);
--color-text-link-hover: var(--color-accent);
--color-text-link-decoration: var(--color-contrast);
--color-text-link-decoration-hover: var(--color-accent);
--color-button-background: var(--color-accent);
--color-button-text: var(--color-text-default);
--color-input-background: var(--color-background-default); }

/* ==========================================================================
UTILITY STYLES
========================================================================== */

/* Viewport configuration for responsive design */
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/* CSS View Transitions API for page navigation animations */
@view-transition { navigation: auto; }

/* Text selection styling */
::-moz-selection {
background-color: #e0e8ef;
text-shadow: none; }

::selection {
background-color: #e0e8ef;
text-shadow: none; }

/* Custom scrollbar styling */
::-webkit-scrollbar {
height: 6px;
width: 6px; }

::-webkit-scrollbar-thumb {
background-color: var(--color-accent);
border-radius: 6px;
width: 6px; }

::-webkit-scrollbar-track {
background-color: var(--color-base);
border-radius: 0; }

/* Anchor positioning for jump links */
[id] { scroll-margin-top: var(--spacing-l); }

/* Visually hidden utility for accessibility */
:is([data-visibility="hidden"], .visually-hidden) {
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
border: 0;
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px; }

/*
* LAYOUT UTILITIES
* Helper classes for common layout patterns
*/

/* Horizontal alignment */
[data-align-h="center"] {
text-align: center;
text-wrap: balance; /* Balances text for better readability */}
[data-align-h="right"] { text-align: right; }

/* Vertical alignment */
[data-align-v="center"] { align-items: center; }

/* Responsive visibility */
[data-visibility="small"] { display: block; }
[data-visibility="large"] { display: none; }

/* Custom font face declaration */
@font-face {
font-display: swap;
font-family: 'Bankside Sans VF';
font-style: normal;
font-weight: normal;
src: url('/fonts/bankside-sans-vf.woff2') format('woff2'); }

/* ==========================================================================
BASE ELEMENT STYLES
========================================================================== */

/* HTML base styles */
/* ================================================
REDUCED MOTION — GLOBAL METHODOLOGY
================================================ */

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
*, *::before, *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}

@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}

html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: 100%;
background-color: var(--color-background-default);
min-height: 100vh;
overflow-x: hidden;
scroll-behavior: smooth;
text-size-adjust: none; }

/* Body base styles */
body {
-webkit-font-smoothing: auto;
background-color: var(--color-background-default);
color: var(--color-text-default);
font-family: var(--font-family-default);
font-feature-settings: liga 1;
font-optical-sizing: auto;
font-size: 1em;
font-style: normal;
font-variation-settings: var(--font-regular-normal);
font-weight: normal;
line-height: var(--lineheight-r);
margin: 0 auto;
padding-inline: var(--spacing-r); }

/* Enhanced ligature support */
@supports (font-variant-ligatures: common-ligatures) {

body {
font-feature-settings: normal;
font-variant-ligatures: common-ligatures; }
}

/* ==========================================================================
LINK STYLES
========================================================================== */

/* Base link styles */
:is(a, a:visited) {
color: var(--color-text-link);
text-decoration: underline;
text-decoration-color: var(--color-text-link-decoration);
text-decoration-skip-ink: auto;
text-decoration-style: solid;
text-decoration-thickness: var(--border-width-r);
transform: translateY(0);
transition: all var(--animate-duration-faster) var(--animate-function); }

/* Link interaction states */
a:is(:hover, :active, :focus-visible) {
color: var(--color-text-link-hover); }

a:hover { text-decoration-color: var(--color-text-link-decoration-hover); }
a:is(:active, :focus-visible) { outline: none; }

.alt-arrow {
align-items: center;
display: inline-flex;
font-variation-settings: var(--font-semi-normal);
gap: var(--spacing-s); }

.alt-arrow path {
fill: var(--color-text-link); }

/* ==========================================================================
TYPOGRAPHY COMPONENTS
========================================================================== */

/*
* HEADING STYLES
* Consistent heading hierarchy with variable font settings
*/

:is(h1, h2, h3, h4) {
font-family: var(--font-family-default);
font-style: normal;
font-variation-settings: var(--font-bold-condensed);
font-weight: normal;
line-height: var(--lineheight-s);
margin-block: 0 var(--spacing-s);
text-wrap: balance; /* Prevents single words on last line */}

/* Heading size scale */

h1 {
font-size: var(--font-size-3xl);
line-height: 1;
margin-block: 0 var(--spacing-l); }

h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-l); }
h4 { font-size: var(--font-size-m); }

/* Heading span styles */
:is(h1, h2, h3, h4) span {
color: var(--color-text-default);
display: inline-block;
font-size: var(--font-size-r);
font-variation-settings: var(--font-regular-normal);
font-weight: normal;
margin-inline-end: var(--spacing-s); }

/* Heading anchor styles */
:is(h1, h2, h3, h4) a,
:is(h1, h2, h3, h4) a:visited {
color: var(--color-text-default) !important; }

:is(h1, h2, h3, h4) a:hover {
color: var(--color-text-link-hover) !important; }

.alt-bg {
align-self: center;
background-color: var(--color-contrast);
color: var(--color-text-alt);
display: inline-block;
margin-block-end: var(--spacing-m);
padding: 0 .5rem; }

.alt-bg a,
.alt-bg a:visited,
.alt-bg a:hover {
color: var(--color-text-alt) !important;
text-decoration: none !important; }

:where(.alt-category, .alt-tag) {
border-radius: 5px;
display: inline-block;
font-size: var(--font-size-xs);
font-variation-settings: var(--font-semi-condensed);
padding: .1rem .5rem;
text-decoration: none !important; }

.alt-category {
background-color: var(--color-accent);
color: var(--color-text-alt) !important; }

.alt-tag {
background-color: #fff !important;
color: #455254 !important;
border: .5px solid #A7BEA7; }

[data-variant="bordered-l"] {
border-inline-start: var(--border-width-l) solid var(--color-text-default);
margin-block: var(--spacing-m);
padding-inline-start: var(--spacing-r); }

/*
* PARAGRAPH STYLES
* Basic paragraph formatting with typographic refinements
*/

p {
font-family: var(--font-family-default);
font-size: var(--font-size-r);
orphans: 3; }

/* Heading + paragraph spacing */
h3:has(+ p) { margin-block-end: 0; }

h3 + p { margin-block-start: var(--spacing-s); }

main p:first-of-type::first-line {
font-variation-settings: var(--font-semi-normal); }

/* ==========================================================================
TEXT TREATMENT CLASSES
========================================================================== */

/*
* TEXT VARIANT CLASSES
* Utility classes for specific text treatments
*/

.alt-accent { color: var(--color-accent); } /* Accent color text */

.alt-lede {
font-size: var(--font-size-m);
font-variation-settings: var(--font-regular-condensed);
line-height: var(--lineheight-s);
text-transform: uppercase; }

.alt-uppercase {
text-transform: uppercase; }

/* ==========================================================================
QUOTE COMPONENTS
========================================================================== */

/*
* BLOCKQUOTE STYLES
* Styled quote blocks with citation support
*/

blockquote {
margin: 0;
padding: 0;
position: relative; }

:is(blockquote p, blockquote footer) { padding: 0; }

blockquote p {
font-variation-settings: var(--font-semi-normal);
margin-block: 0 var(--spacing-s); }

blockquote footer {
align-items: start;
display: flex;
font-size: var(--font-size-r);
font-style: normal;
gap: var(--spacing-s);
margin-block-start: var(--spacing-r); }

blockquote svg {
display: block;
margin: 0 auto var(--spacing-s);
max-inline-size: 48px; }

blockquote svg path {
fill: var(--color-border); }

/* Medium quote variant */
blockquote[data-variant="m"] {
margin-block: var(--spacing-m); }

blockquote[data-variant="m"] svg {
display: block;
inline-size: 48px;
margin-block-end: var(--spacing-s); }

blockquote[data-variant="m"] p {
font-size: var(--font-size-m);
line-height: var(--lineheight-s); }

/* Large quote variant */
blockquote[data-variant="l"] {
margin-block: var(--spacing-l);
margin-inline: auto;
max-width: 80ch; }

blockquote[data-variant="l"] svg {
display: block;
inline-size: 64px;
margin-block-end: var(--spacing-s); }

blockquote[data-variant="l"] p {
font-size: var(--font-size-l);
line-height: 1.1; }

/* ==========================================================================
LIST COMPONENTS
========================================================================== */

/*
* LIST STYLES
* Various list types with custom markers
*/

/* Unordered lists with custom bullet */
ul {
list-style-type: none;
margin-block: 0 var(--spacing-r);
margin-inline: 0;
padding-inline-start: 0; }

ul li:before {
color: var(--color-text-default);
content: "• "; }

/* Ordered lists */
ol {
margin-block: 0 var(--spacing-r);
margin-inline: 0;
padding-inline-start: 0; }

ol li {
margin-block-end: var(--spacing-s); }

/* Remove default markers from styled lists */
:is(ul[class*="alt-"], ol[class*="alt-"]) li:before {
content: "";
display: none; }

/* Inline list variant */
.alt-inline { align-items: center; }

.alt-inline li {
display: inline-block;
line-height: 1;
vertical-align: middle; }

.alt-inline li:not(:last-child) { margin-inline-end: var(--spacing-s); }

/* ==========================================================================
TEXT-LEVEL SEMANTICS
========================================================================== */

/* Small text for disclaimers, captions, etc. */
small {
display: block;
font-size: var(--font-size-s);
line-height: var(--lineheight-r);
margin-block-end: var(--spacing-s); }

/* Time element styling */
time {
display: block;
font-size: var(--font-size-r);
margin-block-end: 0;
text-transform: uppercase; }

/* ==========================================================================
HORIZONTAL RULES
========================================================================== */

/* Base horizontal rule */
hr {
border: 0;
border-block-start: var(--border-width-r) solid var(--color-border);
clear: both;
display: block;
height: 1px;
margin-block: var(--spacing-r);
margin-inline: 0;
padding: 0; }

/* Width variants */
[data-width="l"] { border-width: var(--border-width-l); }

/* Functional variants */
[data-function="spacer"] {
border-block-start: 0;
grid-column: 1 / -1;
margin-block: var(--spacing-r);
margin-inline: 0; }

/* ==========================================================================
MEDIA COMPONENTS
========================================================================== */

/*
* FIGURE AND IMAGE STYLES
* Responsive images with captions
*/

figure {
margin-block: var(--spacing-m);
margin-inline: 0;
padding: 0; }

figure img { margin-block: 0 var(--spacing-s); }

figure[data-fill="contain"] {
width: 100%; }

figure[data-fill="contain"] img {
margin-block: unset;
object-fit: contain;
width: 100%; }

figcaption {
font-size: var(--font-size-s);
font-style: normal;
text-align: center; }

/* Responsive media elements */
:is(img, video) {
block-size: auto;
inline-size: 100%;
max-inline-size: 100%; }

img { border-width: 0; }

[data-blend] {
mix-blend-mode: screen;
opacity: .8; }

.img-cover {
height: 100%;
object-fit: cover; }

.img-icon path {
fill: var(--color-contrast);
transition: fill var(--animate-duration-faster) var(--animate-function); }

.img-icon:hover path {
fill: var(--color-accent); }

.img-index-text {
fill: #023c50; }

.img-toolbar-fill {
fill: var(--color-border);
transition: stroke var(--animate-duration-faster) var(--animate-function); }

.img-toolbar:hover .img-toolbar-fill {
fill: var(--color-text-link-hover);
transition: fill var(--animate-duration-faster) var(--animate-function); }

.img-toolbar-stroke {
stroke: var(--color-border);
transition: stroke var(--animate-duration-faster) var(--animate-function); }

.img-toolbar:hover .img-toolbar-stroke {
stroke: var(--color-text-link-hover);
transition: stroke var(--animate-duration-faster) var(--animate-function); }

.graphic-text-dark {
fill: var(--color-contrast); }

video {
border-radius: var(--border-radius-r);
margin-bottom: var(--spacing-r); }

::view-transition-old(photo-zoom) {
animation: 0.3s ease-out both zoom-out; }

::view-transition-new(photo-zoom) {
animation: 0.4s ease-out both zoom-in; }

@keyframes zoom-out {
from { transform: scale(1); opacity: 1; }
to { transform: scale(.8); opacity: 0; }
}

@keyframes zoom-in {
from { transform: scale(1.2); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
FORM COMPONENTS
========================================================================== */

/* Form base styles */
form {
font-family: var(--font-family-default);
margin: 0;
padding: 0; }

/* Label styles */
label {
display: inline-block;
font-family: inherit;
font-size: var(--font-size-r);
line-height: 1;
margin-block-end: var(--spacing-s);
margin-block-start: 0;
margin-inline: 0;
text-transform: uppercase; }

/* Form input styles */
:is([type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], textarea) {
-webkit-appearance: none;
appearance: none;
background-color: var(--color-input-background);
border: var(--border-width-r) solid var(--color-border);
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
caret-color: var(--color-accent);
color: var(--color-text-default);
display: inline-block;
font-family: var(--font-family-default);
font-size: var(--font-size-r);
inline-size: 100%;
margin: 0;
padding: var(--spacing-s);
scale: 1;
transition: all var(--animate-duration-faster) var(--animate-function); }

/* Form input states */
:is([type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], textarea):hover {
border-color: var(--color-border); }
:is([type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], textarea):focus {
accent-color: var(--color-accent);
background-color: var(--color-input-background);
border-color: var(--color-accent);
color: var(--color-text-default);
outline: 0; }

textarea { min-height: 12rem; }

/* Placeholder styling */
input[type]::placeholder {
color: var(--color-text-default);
font-family: var(--font-family-default);
font-size: var(--font-size-r); }

input:focus::-webkit-input-placeholder {
opacity: 0;
transition: opacity .5s .25s ease !important; }

input:focus::placeholder {
opacity: 0;
transition: opacity .5s .25s ease !important; }

/* ==========================================================================
BUTTON COMPONENTS
========================================================================== */

/*
* BUTTON STYLES
* Interactive button elements with variants
*/

:is(.btn, .btn:visited, button) {
background-color: var(--color-button-background);
border: none;
border-radius: var(--border-radius-s);
box-shadow: none;
color: var(--color-button-text);
cursor: pointer;
font-family: var(--font-family-default);
font-size: var(--font-size-r);
font-variation-settings: var(--font-semi-normal);
inline-size: fit-content;
line-height: 1;
margin: 0;
padding-block: 15px;
padding-inline: var(--spacing-r);
scale: 1;
text-align: center;
touch-action: manipulation;
transition: scale var(--animate-duration-faster) var(--animate-function);
-webkit-user-select: none;
user-select: none;
white-space: nowrap; }

/* Button interaction states */
.btn:is(:active, :focus, :hover) {
background-color: var(--color-text-link-hover);
color: var(--color-button-text);
scale: var(--scale-down);
text-decoration: none; }

.btn[data-variant="s"] {
padding-block: 7px;
padding-inline: var(--spacing-s); }

/* ==========================================================================
FONT SIZE UTILITIES
========================================================================== */

/* Size utility classes for consistent typography */
[data-size="xs"] { font-size: var(--font-size-r); }
[data-size="s"] { font-size: var(--font-size-r); }
[data-size="r"] { font-size: var(--font-size-r); }
[data-size="m"] { font-size: var(--font-size-m); }
[data-size="l"] { font-size: var(--font-size-l); }
[data-size="xl"] { font-size: var(--font-size-xl); }
[data-size="2xl"] { font-size: var(--font-size-2xl); }

[data-size="3xl"] {
font-size: var(--font-size-3xl);
line-height: 1; }

/* ==========================================================================
TEXT COLUMN LAYOUT
========================================================================== */

/* Multi-column text layout */
.alt-columns {
column-width: 22em;
gap: var(--grid-column-gap);
margin-trim: block; /* Trims margin at block boundaries */}

.alt-columns p {
font-size: var(--font-size-r);
margin-block-start: 0; }

/* ==========================================================================
NAVIGATION COMPONENTS
========================================================================== */

/* Main navigation */
nav ul {
display: grid;
gap: var(--spacing-xs) var(--spacing-r);
grid-template-columns: 1fr 1fr;
font-size: var(--font-size-l);
margin: 0; }

nav li:before {
content: "";
display: none; }

nav a,
nav a:hover,
nav a:focus { text-decoration: none; }

nav a:not(.btn),
nav a:not(.btn):visited,
nav a:not(.btn):hover {
border-block-start: var(--border-width-r) solid var(--color-border);
display: block;
font-family: var(--font-family-default);
font-size: var(--font-size-r);
font-variation-settings: var(--font-semi-normal);
padding-block-start: var(--spacing-xs);
position: relative;
text-decoration: none; }

nav a:not(.btn),
nav a:not(.btn):visited {
color: var(--color-text-default); }

nav a:not(.btn):hover {
color: var(--color-text-link-hover);
border-color: var(--color-text-link-hover); }

#nav-block {
display: grid;
gap: var(--spacing-xs) var(--spacing-r);
grid-template-columns: repeat(3, 1fr); }

#nav-block a,
#nav-block a:visited {
border-block-start: var(--border-width-r) solid var(--color-border);
color: var(--color-text-default);
display: block;
font-size: var(--font-size-r);
font-variation-settings: var(--font-semi-normal);
padding-block-start: var(--spacing-xs);
text-decoration: none; }

#nav-block a:hover {
color: var(--color-text-link-hover);
border-color: var(--color-text-link-hover); }

/* ============= BANNER COMPONENT ========== */

#banner-logo a {
display: block;
margin-block-start: var(--spacing-r);
margin-inline: auto;
width: 100px; }

#banner-index-s {
margin: var(--spacing-r) auto;
max-inline-size: 150px; }

.logo-bg {
fill: var(--color-accent); }

/* ============= BORDERED ELEMENT ========== */

.alt-bordered {
align-items: center;
display: flex;
gap: var(--grid-column-gap);
justify-content: space-between;
margin-block-end: var(--spacing-m);
margin-trim: block; }

[data-content="posts"] .alt-bordered { margin-block-end: var(--spacing-s); }

.alt-bordered::after {
border-top: var(--border-width-r)solid var(--color-border);
content: "";
display: block;
flex: 1;
height: 1px;
order: 2; }

.alt-bordered > *:last-child {
order: 3; }

/* ============= BOXED ELEMENT ========== */

.alt-box {
border: var(--border-width-r)solid var(--color-border);
margin-trim: block;
padding: var(--spacing-r); }

/* ==========================================================================
DETAILS/SUMMARY COMPONENT
========================================================================== */

/* Details/summary styling for accordions */
details:not(:last-of-type) {
border-block-end: var(--border-width-r) solid var(--color-border);
margin-block-end: var(--spacing-r);
padding-block-end: var(--spacing-r); }

/* Smooth height transitions (future CSS) */
@supports (interpolate-size: allow-keywords) {
:root { interpolate-size: allow-keywords; }
::details-content {
height: 0;
overflow: clip;
transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete; }
[open]::details-content { height: auto; }}

details p {
margin-block: var(--spacing-s) 0; }

/* Custom summary marker */
summary::marker {
color: var(--color-accent);
content: ""; }

summary {
anchor-name: --summary;
border: none;
color: var(--color-accent);
cursor: pointer;
font-variation-settings: var(--font-semi-normal);
position: relative; }

/* Custom toggle indicator (plus/minus) */
:is(summary::before, summary::after) {
border-block-start: var(--border-width-r) solid var(--color-accent);
content: "";
height: 0;
inset-block-start: 50%;
inset-inline-end: 0;
position: absolute;
position-anchor: --summary;
position-area: top end;
width: 1rem; }

summary::after {
transform: rotate(90deg);
transform-origin: 50%; }

details[open] summary::after { transform: rotate(0deg); }

/* ============= EXTENDED COMPONENT ========== */

.extended-content[hidden] {
display: none; }

/* Optional: Smooth animation when revealing */
.extended-content {
transition: opacity 0.3s ease; }

.read-more-toggle {
align-items: center;
display: flex;
gap: var(--spacing-s);
margin: 0 auto !important;
transition: transform 0.3s ease; }

.read-more-toggle[aria-expanded="true"] svg {
transform: rotate(90deg); }

.read-more-toggle path {
fill: var(--color-text-alt); }

/* ============= FILTERS COMPONENT ========== */

#letter-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
list-style-type: none;
padding: 0;
margin-block-end: var(--spacing-l); }

#letter-list li:before {
content: "";
display: none; }

.letter-link,
.letter-view {
align-items: center;
block-size: 28px;
display: flex;
inline-size: 28px;
justify-content: center;
line-height: 1;
scale: 1;
text-decoration: none !important; }

.letter-link {
background-color: var(--color-background-default);
border: var(--border-width-r) solid var(--color-border);
border-radius: 3px;
color: var(--color-text-default); }

.letter-link:nth-of-type(1) {
padding-inline: 5px; }

.letter-link:hover,
.letter-link.active {
background-color: var(--color-accent);
color: var(--color-text-alt);
border-color: var(--color-accent); }

.letter-link:active {
scale: .95; }

.letter-section.filtered {
display: none; }

.letter-section.filtered.active {
display: block; }

.letter-view {
display: block;
scale: 1;
translate: 0 -1px; }

.letter-view svg {
inline-size: 32px; }

.letter-view:active {
scale: .95; }

:not([data-layout="flex"]) > .item-lexicon:not(:last-of-type) {
border-block-end: var(--border-width-r) solid var(--color-border);
margin-block-end: var(--spacing-r);
padding-block-end: var(--spacing-s); }

/* ============= HEADER COMPONENT ========== */

[role="banner"] {
margin-block-end: var(--spacing-l); }

/* ============= FOOTER COMPONENT ========== */

[role="contentinfo"] {
border-block-start: var(--border-width-r) solid var(--color-border);
margin-block: var(--spacing-r);
padding-block-start: var(--spacing-r);
text-align: center; }

#footer-logo {
display: block;
margin-block-end: var(--spacing-s); }

#footer-logo a {
display: block;
inline-size: 100%;
margin-inline: auto;
max-inline-size: 250px; }

[role="contentinfo"] + small {
margin-block-end: 0;
padding-block-end: var(--spacing-l); }

/* ============= PARTNERS COMPONENT ========== */

#partners {
align-items: center;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-r);
margin-inline: var(--spacing-l); }

#partners > * {
display: block;
text-align: center; }

#partners-list {
align-items: center;
display: grid;
gap: var(--spacing-l) var(--spacing-xl);
grid-template-columns: 1fr 1fr; }

#partners-list > * {
display: block; }

/* ==========================================================================
FLEX LAYOUT
========================================================================== */

[data-layout="flex"] { text-align: left; }
[data-layout="flex"] > * { margin-block-end: var(--spacing-r); }

/* ==========================================================================
PAGE LAYOUTS
========================================================================== */

/* Section spacing */
section { margin-block-end: var(--spacing-l); }

/* Layout container */
.layout > * {
margin-block: 0 var(--spacing-l);
margin-trim: block; }

/* Specific layout variants */
[data-layout="yogi"] { padding-block-end: var(--spacing-s); }



/* Blog / news */

.item-post {
border-block-end: var(--border-width-l) solid var(--color-border);
margin-block-end: var(--spacing-l);
padding-block-end: var(--spacing-r); }

/* Resources */

.item-resource:not(:last-of-type) {
margin-block-end: var(--spacing-l); }

/*Team */

.item-team {
border-block-end: var(--border-width-r) solid var(--color-border);
margin-block-end: var(--spacing-r);
padding-block-end: var(--spacing-s); }

.item-team > *:nth-child(1) {
text-align: center; }

.item-team img{
clip-path: circle(50% at 50% 50%); }

.item-team img {
inline-size: 200px;
rotate: -2deg;
scale: 1;
transition: all var(--animate-duration-faster) var(--animate-function); }

.item-team:hover img {
rotate: 0deg;
scale: 1.05; }

aside .item-team {
align-items: center;
border-block-end: unset;
display: flex;
gap: var(--spacing-r);
margin-block: var(--spacing-m);
padding-block-end: unset;}

aside .item-team img {
inline-size: 60px; }

/* Peers */

#peers {
display: grid;
gap: var(--grid-row-gap) var(--grid-column-gap);
grid-template-columns: 1fr 1fr; }

.item-peer {
align-items: center;
display: flex;
gap: var(--spacing-r); }

.item-peer > *:nth-child(1) {
text-align: center; }

.item-peer img{
clip-path: circle(50% at 50% 50%); }

.item-peer img {
inline-size: 80px;
rotate: -2deg;
scale: 1;
transition: all var(--animate-duration-faster) var(--animate-function); }

.item-team:hover img {
rotate: 0deg;
scale: 1.05; }

/*Terms */

#author-info,
.author-info {
border: var(--border-width-r) solid var(--color-border);
margin-block-end: var(--spacing-r);
margin-trim: block;
padding: var(--spacing-s); }

#author-info p,
.author-info p {
margin-block: 0; }

#author-info p + p,
.author-info p + p {
font-size: var(--font-size-s); }



#terms {
position: relative; }

.item-term {
align-items: center;
background-color: var(--color-accent);
display: flex;
justify-content: center;
margin-block-end: var(--spacing-s);
margin-trim: block;
opacity: 1;
rotate: 0deg;
scale: 1;
transition: all var(--animate-duration-faster) var(--animate-function); }

.item-term:has(.term-toggle.active) {
background-color: var(--color-background-alt); }

.item-term h2 {
font-size: var(--font-size-m);
line-height: 1.2;
margin: 0;
text-align: center; }

.item-term :is(a, a:visited, a:hover) {
color: var(--color-text-alt) !important;
display: block;
padding: var(--spacing-r);
text-decoration: none; }

.item-term-content {
display: block;
opacity: 0;
padding: var(--spacing-r); }

.item-term-content.visible {
opacity: 1; }

.item-term-content[hidden] {
display: none; }

.sticky-content {
position: absolute;
right: -5px;
top: 0;
left: -5px; }

.close-content {
align-items: center;
background-color: var(--color-accent);
border-radius: 50%;
color: var(--color-text-alt);
cursor: pointer;
display: flex;
font-size: var(--font-size-r);
height: 2rem;
justify-content: center;
line-height: 1;
position: absolute;
right: -10px;
text-decoration: none !important;
top: -10px;
width: 2rem; }

.close-content:hover {
background-color: var(--color-text-link-hover);
text-decoration: none; }

/* Panels */

#panel-highlight {
margin-bottom: var(--spacing-l);
margin-trim: block;
position: relative; }


/* ==========================================================================
RESPONSIVE DESIGN - MEDIA QUERIES
========================================================================== */

/*
*MOBILE STYLES (32em)
*/

[data-layout="chugga-boom"] {
background-image: url(/images/img-index-1.webp);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
margin-inline: calc(-1 * var(--spacing-r)); }

@media screen and (min-width: 32em) {

[data-layout="sneekly"] {
align-items: end;
display: grid;
grid-template-columns: 100px 1fr;
gap: 0 var(--grid-column-gap);
padding-block-start: var(--spacing-r); }

[data-layout="sneekly"] > * {
margin: 0; }

#banner-logo a {
margin-block-start: unset;
margin-inline: unset;
width: 100%; }
}



/*
* TABLET AND DESKTOP STYLES (48em+ / 768px+)
*/

@media screen and (min-width: 48em) {

/* Body padding adjustment */
body { padding-inline: var(--spacing-m); }

/* Enhanced textarea for larger screens */
textarea {
min-block-size: 12rem;
resize: vertical;
transition: min-height .5s ease-in-out; }

.item-team {
align-items: center;
display: grid;
gap: 0 var(--spacing-r);
grid-template-columns: 1fr 3fr; }

.item-team {
border-block-end: unset;
margin-block-end: unset;
padding-block-end: unset; }

.item-team:not(:last-of-type) > *:nth-child(2) {
border-block-end: var(--border-width-r) solid var(--color-border);
margin-block-end: var(--spacing-r);
padding-block-end: var(--spacing-s); }

.item-team > *:nth-child(1) {
text-align: left; }

aside .item-team:not(:last-of-type) > *:nth-child(2) {
border-block-end: unset;
margin-block-end: unset;
padding-block-end: unset; }

.letter-section {
display: grid;
grid-template-columns: 3rem 1fr; }

.letter-section .item-lexicon {
grid-column: 2; }

[role="banner"] {
border-block-end: var(--border-width-l) solid var(--color-border); }

@media (prefers-reduced-motion: no-preference) {

@keyframes fadeInDown {
from { opacity: 0;
transform: translate3d(0, -100%, 0); }

to { opacity: 1;
transform: translate3d(0, 0, 0); }
}

#banner-logo {
animation-delay: .5s;
animation-duration: var(--animate-duration);
animation-fill-mode: both;
animation-iteration-count: 1;
animation-name: fadeInDown;
opacity: 0; }
}

/* Logo interaction states */
:is(#banner-logo a):hover { scale: var(--scale-up); }
:is(#banner-logo a):is(:active, :focus) { scale: var(--scale-down); }

#partners {
align-items: start;
gap: var(--spacing-m);
grid-template-columns: repeat(4, 1fr);
margin-inline: unset;
max-inline-size: 600px; }

#partners > * {
text-align: left; }

#peers {
grid-template-columns: repeat(4, 1fr); }

[data-layout="softy"] {
display: grid;
gap: 0 var(--grid-column-gap);
grid-template-columns: 1fr 320px; }

[role="contentinfo"] {
border-block-start: unset;
display: grid;
gap: 0 var(--grid-column-gap);
grid-template-columns: var(--grid-12-col);
margin-block: var(--spacing-l) var(--spacing-r);
padding-block-start: unset;
text-align: unset; }

[role="contentinfo"] > *:nth-child(1) { grid-column: 1 / 2; }

[role="contentinfo"] > *:nth-child(2) {
align-items: center;
display: flex;
gap: var(--grid-column-gap);
grid-column: 2 / -1;
justify-content: space-between; }

[role="contentinfo"] > *:nth-child(2)::before {
border-top: var(--border-width-r)solid var(--color-border);
content: "";
display: block;
flex: 1;
height: 1px;
/* border-image-slice: 0 0 16 0;
border-image-width: 0 0 16px 0;
border-image-outset: 0 0 0 0;
border-image-repeat: round;
border-image-source: url("/images/icon-border.svg");
border-style: solid;
border-top-width: 10px; */ }

#footer-logo {
display: block;
margin-block-end: unset; }

#footer-logo a {
display: block;
inline-size: 100%;
margin-inline: unset;
max-inline-size: unset; }
}

/*
* DESKTOP STYLES (64em+ / 1024px+)
* Comprehensive desktop layout enhancements
*/

@media screen and (min-width: 64em) {

/* Responsive visibility */
[data-visibility="small"] { display: none; }
[data-visibility="large"] { display: block; }

[data-border="r"] > * { padding-inline-end: var(--spacing-r); }
[data-border="r"] > *:not(:last-of-type) {
border-inline-end: var(--border-width-r) solid var(--color-border); }

/* Body padding adjustment */
body { padding-inline: var(--spacing-l); }

blockquote[data-variant="inverted"] path {
fill: #f3f0f5; }

blockquote[data-variant="inverted"] p {
color: #f3f0f5;
margin-block-end: var(--spacing-m);
margin-inline: var(--spacing-r);
text-shadow: 1px 1px 5px rgba(0,0,0,.25); }

[data-content="posts"] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem calc(var(--grid-column-gap) * 2); }

.item-post {
border-block-end: unset;
margin-block-end: unset;
padding-block-end: unset; }

#terms {
align-items: start; }

.terms-column {
display: grid;
gap: var(--spacing-r);
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
justify-content: center; }

.content-column {
position: sticky;
top: 2rem; }

.item-term {
margin-block-end: unset;
opacity: 1; }

.item-term:hover {
scale: 1.1; }

.item-term:active {
scale: .9; }

.item-term-content {
transform: translateY(10px);
transition: all var(--animate-duration-faster) var(--animate-function); }

.item-term-content.visible {
transform: translateY(-1.5rem); }

#terms:has(.item-term:hover) .item-term:not(:hover) {
opacity: .75;
scale: .95;
transition-delay: .05s; }

#terms:has(.item-term:active) .item-term:not(:active) {
opacity: .75; }

.sticky-content {
position: static; }

/* Flex layout */
[data-layout="flex"] {
display: flex;
gap: var(--spacing-l);
margin-block-end: var(--spacing-r); }

[data-layout="flex"] > * {
flex: 1;
margin-block-end: unset; }

/* Main layout system */
.layout {
display: grid;
gap: var(--grid-row-gap) var(--grid-column-gap);
grid-template-columns: var(--grid-12-col); }

.layout > * { margin-block-end: var(--spacing-r); }

/* Named layout systems (cartoon-themed) */
[data-layout="yogi"] { padding-block-end: unset; }
[data-layout="yogi"] > *:nth-child(1) { grid-column: 1 / 8; }
[data-layout="yogi"] > *:nth-child(2) { grid-column: 9 / -1; }

[data-layout="boo-boo"] > *:nth-child(1) { grid-column: 1 / 9; }
[data-layout="boo-boo"] > *:nth-child(2) { grid-column: 10 / -1; }

[data-layout="ranger"] > *:nth-child(1) {
align-items: flex-start;
display: flex;
grid-column: 1 / 3;
justify-items: flex-end; }

[data-layout="ranger"] > *:nth-child(2) { grid-column: 4 / -1; }

[data-layout="muttley"] > *:nth-child(1) { grid-column: 1 / 6; }
[data-layout="muttley"] > *:nth-child(2) { grid-column: 8 / -1; }

[data-layout="pitstop"] > *:nth-child(1) { grid-column: 1 / 7; }
[data-layout="pitstop"] > *:nth-child(2) { grid-column: 8 / -1; }

[data-layout="zilly"] > *:nth-child(1) {
align-items: flex-start;
display: flex;
grid-column: 1 / 3;
justify-items: flex-end; }

[data-layout="zilly"] > *:nth-child(2) { grid-column: 4 / 10; }
[data-layout="zilly"] > *:nth-child(3) { grid-column: 10 / -1; }

[data-layout="klunk"] > *:nth-child(1) { grid-column: 1 / 8; }
[data-layout="klunk"] > *:nth-child(2) { grid-column: 8 / -1; }

[data-layout="claw"] > *:nth-child(1) { grid-column: 1 / 4; }
[data-layout="claw"] > *:nth-child(2) { grid-column: 4 / -1; }

[data-layout="clyde"] > *:nth-child(1) { grid-column: 1 / 4; }
[data-layout="clyde"] > *:nth-child(2) { grid-column: 5 / 9; }
[data-layout="clyde"] > *:nth-child(3) { grid-column: 10 / -1; }

[data-layout="dum-dum"] > *:nth-child(1) {
align-items: flex-start;
display: flex;
grid-column: 1 / 3;
justify-items: flex-end; }

[data-layout="dum-dum"] > *:nth-child(2) { grid-column: 4 / 8; }
[data-layout="dum-dum"] > *:nth-child(3) { grid-column: 8 / -1; }

[data-layout="snoozy"] > *:nth-child(1) {
align-items: flex-start;
display: flex;
grid-column: 1 / 3;
justify-items: flex-end; }

[data-layout="snoozy"] > *:nth-child(2) { grid-column: 3 / 8; }
[data-layout="snoozy"] > *:nth-child(3) { grid-column: 8 / 12; }

[data-layout="pockets"] > *:nth-child(1) {
align-items: flex-start;
display: flex;
grid-column: 1 / 3;
justify-items: flex-end; }

[data-layout="pockets"] > *:nth-child(2) {
grid-column: 4 / -1; }

[data-layout="yak-yak"] { margin-block-start: var(--spacing-r); }
[data-layout="yak-yak"] > * { grid-column: 3 / 11; }

[data-layout="dastardly"] > * { grid-column: 1 / 12; }

[data-layout="softy"] {
grid-template-columns: var(--grid-12-col); }

[data-layout="softy"] > *:nth-child(1) { grid-column: 1 / 8; }
[data-layout="softy"] > *:nth-child(2) { grid-column: 9 / -1; }

[data-layout="chugga-boom"] {
grid-template-columns: 1fr 1.5fr 1fr;
margin-block-end: var(--spacing-l);
margin-inline: calc(-1 * var(--spacing-l));
padding-block-start: var(--spacing-l); }

[data-layout="chugga-boom"] > *:nth-child(1) {
grid-column: 1 / -1;
grid-row: 1;
padding-inline: 20vw; }

[data-layout="chugga-boom"] > *:nth-child(2) {
grid-column: 2;
grid-row: 2; }

[data-layout="chugga-boom"] > *:nth-child(3) {
grid-column: 1;
grid-row: 2; }

[data-layout="chugga-boom"] > *:nth-child(4) {
grid-column: 3;
grid-row: 2; }

[data-layout="sneekly"] {
align-items: center;
grid-template-columns: var(--grid-12-col); }

[data-layout="sneekly"] > *:nth-child(1) { grid-column: 1; }
[data-layout="sneekly"] > *:nth-child(2) { grid-column: 8 / -1; }

[data-layout="gruesome-twosome"] > * { grid-row: 1; }
[data-layout="gruesome-twosome"] > *:nth-child(1) { grid-column: 3 / 6; }
[data-layout="gruesome-twosome"] > *:nth-child(2) { grid-column: 7 / 11; }

[data-layout="gruesome-twosome"] > *:nth-child(3) {
align-self: end;
grid-column: 1 / 6;
padding-inline: var(--spacing-r);
text-align: center; }

.modular {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 1.5rem; }

/* Form input states */
:is([type="email"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"], textarea):focus {
scale: var(--scale-up); }

.btn[data-variant="l"] {
font-size: var(--font-size-r);
padding-block: 20px;
padding-inline: var(--spacing-m); }

/* Size utilities */
[data-size="xs"] { font-size: var(--font-size-s); }

[data-size="3xl"] {
font-size: 5cqi; /* Container query units for responsive sizing */
margin-block: 0 var(--spacing-r); }
}

/* ==========================================================================
ACCESSIBILITY: REDUCED MOTION
========================================================================== */

/* Respect user motion preferences */
@media screen and (prefers-reduced-motion: reduce) {

html {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto;
transition-duration: 1ms !important; }}

@media (prefers-reduced-motion: reduce) {
:is(*, *::before, *::after) {
animation: none !important;
transition: none !important; }
}


/* ==========================================================================
THEMES
========================================================================== */

[data-theme="inverted"] {
background-color: var(--color-background-alt);
color: var(--color-text-alt);
padding: var(--spacing-r);

/* Optimized link styles */
& :is(a, a:visited) {
color: var(--color-text-alt) !important;

&:hover {
text-decoration-color: var(--color-text-link-hover); }
}

&:has(.alt-bordered, [data-variant="bordered-l"]) {
& .alt-bordered::after,
& [data-variant="bordered-l"] {
border-color: var(--color-border); }
}

.alt-arrow path,
.graphic-text-dark {
fill: var(--color-text-alt); }
}

.theme-toggle {
background: transparent !important;
block-size: 24px !important;
border: none !important;
box-shadow: none !important;
color: inherit !important;
cursor: pointer;
display: inline-block;
inline-size: 24px !important;
margin: 0 !important;
padding: 0 !important;
scale: 1 !important;
translate: 0 6px;
transition: none !important; }

.theme-toggle:is(:active, :focus, :hover) {
background: transparent !important;
color: inherit !important;
scale: 1 !important;
text-decoration: none !important; }

[data-theme="light"] .dark-icon,
[data-theme="dark"] .light-icon {
display: none; }

[data-theme="light"] .light-icon,
[data-theme="dark"] .dark-icon {
display: block; }

[data-theme="dark"] .img-index-text {
fill: #fff; }

[data-theme="dark"] .alt-arrow path {
fill: #fff; }

[data-theme="dark"] [data-blend] {
mix-blend-mode: screen; }

[data-theme="dark"] [data-theme="inverted"] {
background-color: #1a1d1e;
color: var(--color-text-default); }

[data-theme="dark"] [data-theme="inverted"] .alt-arrow path,
[data-theme="dark"] [data-theme="inverted"] .graphic-text-dark {
fill: var(--color-text-default); }

[data-theme="dark"] [data-theme="inverted"] :is(a, a:visited) {
color: var(--color-text-default) !important;

[data-theme="dark"] [data-theme="inverted"] a:hover {
text-decoration-color: var(--color-text-link-hover); }