/* CSS Document */

        :root {
            /* Theme Colors: UN Blue, Khaki/Olive tones, neutrals */
            --color-bg: #ffffff;
            --color-text: #222222;
            --color-un-blue: #1b63a5; /* High-contrast UN Blue variant */
            --color-un-blue-hover: #14497a;
            --color-khaki: #6b6338;  /* Accessible military khaki tone */
            --color-khaki-light: #f3f2e8;
            --color-card-bg: #f9f9f6;
            --color-card-border: #e2e0d2;
            --color-focus: #1b63a5;
            --color-shadow: rgba(0, 0, 0, 0.08);

            --font-heading: 'Permanent Marker', cursive, sans-serif;
            --font-body: 'Nunito', system-ui, sans-serif;
            
            --transition-speed: 0.3s;
        }

        /* Dark Mode Preferences (#333333 background requested) */
        @media (prefers-color-scheme: dark) {
            :root {
                --color-bg: #333333;
                --color-text: #f0f0f0;
                --color-un-blue: #5ca1e6;
                --color-un-blue-hover: #83b9f0;
                --color-khaki: #b8af77;
                --color-khaki-light: #424036;
                --color-card-bg: #3d3d3d;
                --color-card-border: #525252;
                --color-focus: #5ca1e6;
                --color-shadow: rgba(0, 0, 0, 0.3);
            }
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Sticky Footer Setup via Flexbox on body */
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: var(--color-bg);
            color: var(--color-text);
            font-family: var(--font-body);
            line-height: 1.6;
            transition: background-color var(--transition-speed), color var(--transition-speed);
        }

        main {
            flex: 1 0 auto; /* Ensures footer stays attached to bottom */
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 1.5rem 1rem 3rem;
        }

        /* Accessible Skiplink */
        .skiplink {
            position: absolute;
            top: -100px;
            left: 1rem;
            background: var(--color-un-blue);
            color: #ffffff;
            padding: 0.75rem 1.25rem;
            z-index: 9999;
            text-decoration: none;
            font-weight: 700;
            border-radius: 0 0 8px 8px;
            transition: top 0.2s ease;
        }
        .skiplink:focus {
            top: 0;
            outline: 3px solid var(--color-khaki);
        }

        /* Noscript Banner */
        #noscript {
            background-color: var(--color-khaki);
            color: #ffffff;
            text-align: center;
            padding: 0.5rem 1rem;
            font-weight: 600;
            font-size: 0.95rem;
        }

        /* Accessibility utility for sr-only/invisible elements */
        .invisible {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        .page-header {
            background-color: var(--color-card-bg);
            border-bottom: 2px solid var(--color-card-border);
            position: relative;
            width: 100%;
            z-index: 100;
        }
/* --------------- */
/* SITE NAVIGATION */
/* --------------- */

        /* Menu Toggle Button for Mobile */
        .menu-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: transparent;
            border: 2px solid var(--color-un-blue);
            color: var(--color-un-blue);
            font-family: var(--font-heading);
            font-size: 1rem;
            font-weight: 600;
            padding: 0.5rem 1rem;
            margin: 0.75rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .menu-toggle:hover,
        .menu-toggle:focus-visible {
            background-color: var(--color-un-blue);
            color: #ffffff;
            outline: 3px solid var(--color-khaki);
        }

        .menu-toggle svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        /* Navigation List Mobile First */
        #sitenav ol {
            list-style: none;
            display: none; /* Collapsed by default on small viewports */
            flex-direction: column;
            width: 100%;
            padding: 0.5rem 1rem 1rem;
            max-height: calc(100vh - 80px);
            overflow-y: auto; /* Scrollable if menu height exceeds viewport */
        }

        #sitenav.nav-open ol {
            display: flex; /* Displayed when menu toggle activated */
        }

        #sitenav ol li {
            width: 100%;
        }

        #sitenav ol a {
            display: block;
            padding: 0.75rem 1rem;
            color: var(--color-text);
            text-decoration: none;
            font-family: var(--font-heading);
			letter-spacing: 0.05em;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 8px;
            transition: background 0.2s, color 0.2s;
        }

        #sitenav ol a:hover,
        #sitenav ol a:focus-visible {
            background-color: var(--color-khaki-light);
            color: var(--color-un-blue);
            outline: 2px solid var(--color-un-blue);
        }

        #sitenav ol a.current {
            color: var(--color-un-blue);
            border-left: 4px solid var(--color-un-blue);
            background-color: var(--color-khaki-light);
        }

        /* Fallback placeholder style for logo link */
        .logo-placeholder {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-un-blue);
            color: #ffffff;
            font-family: var(--font-heading);
			letter-spacing: 0.04em;
            font-weight: 700;
            font-size: 1.1rem;
            border-radius: 6px;
            padding: 0.25rem 0.5rem;
            width: 120px;
            height: 40px;
            text-decoration: none;
        }

        /* Navigation Layout for Larger Viewports */
        @media (min-width: 640px) {
            .menu-toggle {
                display: none; /* Hide button on desktop */
            }

            #sitenav ol,
            #sitenav.nav-open ol {
                display: flex !important;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                width: 100%;
                max-width: 1100px;
                margin: 0 auto;
                padding: 0.75rem 1rem;
                overflow-y: visible;
            }

            /* First link aligned left, remaining links aligned right */
            #sitenav ol li:first-child {
                margin-right: auto;
                width: auto;
            }

            #sitenav ol li {
                width: auto;
            }

            #sitenav ol a.current {
                border-left: none;
                border-bottom: 3px solid var(--color-un-blue);
            }
        }

        .intro {
            margin: 2rem 0 3rem;
            text-align: center;
        }

        .intro h1 {
            font-family: var(--font-heading);
            font-size: clamp(2rem, 5vw, 5rem);
            color: var(--color-un-blue);
            letter-spacing: 0.03em;
            margin-bottom: 0.5rem;
        }
		.intro h1 span {
		color:red;
		text-shadow: 0px 0px 2px white;
		}
        .intro p {
			font-family: var(--font-heading);
			letter-spacing: 0.05em;
            font-size: 1.5rem;
            color: var(--color-khaki);
            font-weight: 600;
        }
/* ----- */
/* CARDS */
/* ----- */

        .toon-cards h2 {
            font-family: var(--font-heading);
			letter-spacing: 0.03em;
            font-size: clamp(2rem, 5vw, 4rem);
            margin-bottom: 1.5rem;
            color: var(--color-text);
            border-bottom: 2px dashed var(--color-card-border);
            padding-bottom: 0.5rem;
        }

        /* Card Container & List - Responsive Flexbox */
        .card-list {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        .card {
            flex: 1 1 280px; /* Responsive auto-fit cards */
            max-width: 100%;
            display: flex;
        }

        /* Entire card is an accessible block link */
        .card-link {
            display: flex;
            flex-direction: column;
            width: 100%;
            background-color: var(--color-card-bg);
            border: 2px solid var(--color-card-border);
            border-radius: 12px;
            padding: 1.25rem;
            text-decoration: none;
            color: var(--color-text);
            box-shadow: 0 4px 6px var(--color-shadow);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .card-link:hover,
        .card-link:focus-visible {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px var(--color-shadow);
            border-color: var(--color-un-blue);
            outline: 3px solid var(--color-focus);
            outline-offset: 2px;
        }

        /* Uniform Cartoon Cover Images */
        .card-link img.cover {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            background-color: var(--color-khaki-light);
            margin-bottom: 1rem;
            border: 1px solid var(--color-card-border);
        }

        .card-link h3 {
            font-family: var(--font-heading);
			letter-spacing: 0.04em;
            font-size: 1.35rem;
            color: var(--color-un-blue);
            margin-bottom: 0.5rem;
        }

        .card-link p {
            font-size: 1.2em;
			font-family: var(--font-heading);
			letter-spacing: 0.04em;
            color: var(--color-text);
            flex-grow: 1; /* Equal height paragraph expansion */
        }

        abbr[title] {
            text-decoration: underline dotted var(--color-khaki);
            cursor: help;
        }

/* ------ */
/* FOOTER */
/* ------ */
        footer {
            flex-shrink: 0; /* Ensures sticky footer behavior */
            background-color: var(--color-card-bg);
            border-top: 2px solid var(--color-card-border);
            padding: 1.5rem 1rem;
            text-align: center;
            font-family: var(--font-heading);
			letter-spacing: 0.04em;
            color: var(--color-khaki);
        }

        footer p.copyright {
            font-size: 1rem;
            font-weight: 600;
        }
		.sr-only, .hidden {
			  position: absolute;
			  width: 1px;
			  height: 1px;
			  padding: 0;
			  margin: -1px;
			  overflow: hidden;
			  clip: rect(0, 0, 0, 0);
			  white-space: nowrap;
			  border: 0;
			}
/* -----------*/
/* TOON FIGURE*/
/* -----------*/
		.toon-archive {
		margin:5rem 0 10rem 0;
		}
		.toon-archive h2 {
		font-size: clamp(2rem, 5vw, 4rem);
		font-family: var(--font-heading);
		}
		figure {margin:0 0 3rem 0;}
		figure h3 {
		font-family:var(--font-heading);
		font-size: clamp(1.5rem, 5vw, 2rem);
		}
		figure header {
		position:relative;
		padding:0;
		padding-right:130px;
		background:none;
		color:inherit;
	
		}
		figure header .starAward {
		position:absolute;
		display:inline-block;
		width:130px;
		top:0;
		right:0;
		text-align:right;
	}
	.stars {
		font-size:1.5em;
		color:goldenrod;/*Contrast ratio 4.96:1 Pass AA normal, AAA large */
		text-shadow:1px 1px 3px rgba(0,0,0,0.5);
	}
	/* SHAPES */
			/*STAR LEGACY*/
			.starAward {
			}
				.starShape {
				  margin:0px 0;
				  position: relative;
				  display: inline-block;
				  color: black;
				  width: 0px;
				  height: 0px;
				  border-right: 12.5px solid transparent;
				  border-bottom: 8.5px solid black;
				  border-left: 12.5px solid transparent;
				  transform: rotate(35deg);
				}
				.starShape:before {
				  border-bottom: 10px solid black;
				  border-left: 3.25px solid transparent;
				  border-right: 3.25px solid transparent;
				  position: absolute;
				  height: 0;
				  width: 0;
				  top: -5.5px;
				  left: -8.0px;
				  display: block;
				  content: '';
				  transform: rotate(-35deg);
				}
				.starShape:after {
				  position: absolute;
				  display: block;
				  color: red;
				  top: 1px;
				  left: -13px;
				  width: 0px;
				  height: 0px;
				  border-right: 12.5px solid transparent;
				  border-bottom: 8.5px solid black;
				  border-left: 12.5px solid transparent;
				  transform: rotate(-70deg);
				  content: '';
				}
	figcaption {
		position:relative;
		border:3px solid var(--color-un-blue);
		border-radius:6px;
		background:white;
		color:#333;
		font-size:100%;
		/*Animation*/
		display: grid;
		grid-template-rows: 0fr; /* Collapsed state */
		transition: grid-template-rows 300ms cubic-bezier(0.2, 0, 0.2, 1);
		/*overflow: hidden;*/
	}
	
		/*Animation*/
		.figcaption-content {
		  min-height: 0;
		  transition: visibility 500ms ease;
		}
		.figcaption-content:before {
			content:"";
			position:absolute;
			top:-20px;
			right:72px;
			width: 0;
			height: 0;
			border-left: 16px solid transparent;
			border-right: 16px solid transparent;
			border-bottom: 20px solid var(--color-un-blue);
		}
		figcaption.showCaption {
  			grid-template-rows:1fr; /* Expanded state */
		}
		figcaption.showCaption > .figcaption-content {
			padding:1rem 1rem 2rem 1rem;
		}

		/* Accessibility & Usability Improvements */
		/* Respect reduced motion preferences */
		@media (prefers-reduced-motion: reduce) {
		  figcaption {
			transition: none;
		  }
		}/*Animation*/
		
	@media screen and (min-width:760px){
		figcaption{
			max-width:100%;
		}
	}/* x media */
	
		picture img {
		display:block;
		width:100%;
		height:auto;
		margin: 1rem auto 1rem auto;
		border:3px solid var(--color-un-blue);
		border-radius:6px;
		box-shadow: 0 4px 6px var(--color-shadow);

		}
		
	/* Caption Toggle button */
    .talkbubble {
		display:block;
		position: relative;
		margin:-0.5rem 0 0.5rem 0.0rem;
		width: auto;
		/*font-family:var(--font-heading);
		letter-spacing: 0.07em;
		font-size:1.2em;*/
		padding:0.5rem 1rem;
		background: var(--color-un-blue);
		border:0;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 20px;
		color:white;
		z-index:50;
    }
    .talkbubble:after {
		content: "";
		position: absolute;
		right: 6px;
		top: -7px;
		width: 0;
		height: 0;
		border-top: 8px solid transparent;
		border-right: 16px solid var(--color-un-blue);
		border-bottom: 8px solid transparent;
		transform: rotate(0deg);
		z-index:49;
    }
	.talkbubble:hover,
	.talkbubble:focus {
		background: aqua;
		color:black;
		cursor:pointer;
	}
	.talkbubble:hover:after,
	.talkbubble:focus:after {
		border-top: 8px solid transparent;
      	border-right: 16px solid aqua;
      	border-bottom: 8px solid transparent;
		
	}