		:root {
			/* Colours */
			--background-colour: #fff;
			--background-color: var(--background-colour); /* alias for consistency */
			--text-colour: #424242;
			--primary-colour: #025a92;
			--secondary-colour: #b30000;
			--border-colour: #e4e4e4;
			--copy-colour: #666666;       /* slightly darker for better contrast */
			--light-gray: #e4e4e4;
			
			/* Typography */
			--font-family: 'Roboto', -apple-system, system-ui, BlinkMacSystemFont,
			"Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
			"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
			--font-size: 1.0625rem;
			--line-height: 1.8;
			--letter-spacing: .01875rem;
			
			/* Spacing */
			--padding-small: .4375rem .625rem;
			--padding-medium: .875rem;
			--padding-large: 1.25rem;
			--margin-small: 1em 0;
			--margin-medium: 1.25rem auto;
			--margin-large: 1.875rem;
			--spacing-base: 1rem;
			--spacing-small: .3rem;
			
			/* Icons */
			--search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23B30000' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
		}

		html {
			font-size: 18px;
          scroll-behavior: smooth;
			box-sizing: border-box;
			overflow-wrap: break-word;
			-webkit-text-size-adjust: 100%
		}
		*, *::before, *::after {
			box-sizing: inherit;
		}
		html:focus-within { scroll-behavior: smooth; } 
		body {
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			font-family: var(--font-family);
			line-height: var(--line-height);
			letter-spacing: var(--letter-spacing);
			background-color: var(--background-colour);
			color: var(--text-colour);
			font-size: var(--font-size);
			font-weight: 400;
			text-rendering: optimizeSpeed;  
			font-synthesis-weight: none
		}
		
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			line-height: 1.4;
			margin: var(--spacing-small) 0
		}
		h1 {
			font-size: 2.5rem;
		}
		h2,
		.h2 {
			font-size: 1.75rem
		}
		h3,
		.h3 {
			font-size: 1.5rem
		}
		h4 {
			font-size: 1.25rem
		}
		h5 {
			font-size: 1.125rem
		}
		h6 {
			font-size: 1rem
		}
		table {
			border-collapse: collapse;
			width: 100%;
			text-align: left;
			margin-bottom: var(--margin-medium);
			overflow-x: auto;
			display: block
		}
		thead {
			background: #f9f9f9
		}
		th,
		td {
			padding: var(--padding-small)
		}
		thead th {
			padding: var(--padding-medium)
		}
		tbody th,
		tbody td {
			font-weight: 400;
			border: 1px solid var(--border-colour)
		}
		img,
		picture,
		svg {
			max-width: 100%;
			height: auto;
			display: block;
			image-rendering: auto
		}
		
		img{			margin: 0 auto
		}
		
		.b,
		.msgist,
		strong {
			font-weight: 700
		}
		.i,
		.italic,
		em {
			font-style: italic
		}
		.alignnone {
			margin: .3125rem 1.25rem 1.25rem 0
		}
		.aligncenter {
			margin: var(--margin-medium)
		}
		a img.aligncenter {
			display: block;
			margin-left: auto;
			margin-right: auto
		}
		#maincontent {
			margin: 0 auto;
			max-width: 75rem;
			min-width: 15rem;
			padding: 0 .9375rem;
			clear: both
		}
		
		p {
			hyphens: auto;
			margin: var(--margin-small)
		}
		a {
			color: var(--primary-colour);
			font-weight: 500;
			text-decoration: underline;
			text-decoration-thickness: 0.08em;
			text-underline-offset: 0.15em;
		}
		
		a:visited {
			color: #5a2f82; 
		}
				a:hover,
		a:focus-visible {
			color: #013a61;
		}
		
		/* Components that intentionally have “button-like” links without underlines */
		.reading-time a,
		.navitem a,
		.myschoolgistsharing a.button,
		.read-also ul li a {
			text-decoration: none;
		}
		
		.reading-time a:hover,
		.reading-time a:focus-visible,
		.navitem a:hover,
		.navitem a:focus-visible,
		.myschoolgistsharing a.button:hover,
		.myschoolgistsharing a.button:focus-visible,
		.read-also ul li a:hover,
		.read-also ul li a:focus-visible {
			text-decoration: underline;
		}

		#copyright-note {
			font-weight: 500;
			font-size: 1rem;
			color: var(--copy-colour);
			margin: 0 auto;
			clear: both;
			width: 100%
		}
		.main-container {
			width: 100%;
			margin: 0 auto;
			display: block;
			padding: 0
		}
		header {
			width: 100%
		}
		#header {
			position: relative;
			max-width: 100%;
			overflow: hidden
		}
		.clearfix:after,
		.clearfix:before {
			content: "";
			display: table
		}
		.clearfix:after {
			clear: both
		}
		.clearfix {
			clear: both
		}
		article img.aligncenter,
		article img.center,
		.wp-caption.aligncenter {
			margin: .3em auto .5em;
			display: block
		}
		.wp-caption {
			background: var(--background-colour);
			border: 1px solid #f0f0f0;
			max-width: 100%;
			padding: .3125rem .1875rem .625rem;
			text-align: center
		}
		.wp-caption p.wp-caption-text {
			line-height: 1.0625rem;
			margin: 0;
			padding: 0 .25rem;
			font-size: .875rem;
			font-style: italic;
			font-weight: 500
		}
		article img.aligncenter,
		article img.alignnone {
			margin: 1em auto;
			display: block;
			clear: both
		}
		hr {
			width: 100%;
			margin: .625rem 0;
			border-bottom: 1px solid var(--primary-colour)
		}
		footer {
			background: var(--primary-colour);
			margin-top: var(--margin-large);
			position: relative;
			clear: both;
			content-visibility: auto
		}
		.copyrights {
			float: left;
			width: 100%;
			clear: both;
			padding-top: var(--padding-large);
			background: #f5f5f5;
			text-align: center
		}
		.avatar {
			float: left;
			border-radius: 50%;
			padding-right: .625rem
		}
		.update {
			font-size: 1.3125rem;
			margin-bottom: .3125rem
		}
		.home-title {
			display: block;
			margin: 0
		}
		.headingblue {
			color: var(--primary-colour)
		}
		.fbicon,
		.tkicon,
		.twittericon {
			display: inline-block;
			font-size: 1.5rem;
			margin: 0 1.125rem 0 0
		}
		.article {
			width: 100%;
			float: left;
			margin-bottom: .3125rem
		}
		.headingorange {
			color: var(--secondary-colour)
		}
		.msg-icon {
			display: inline-block;
			fill: var(--secondary-colour);
			font-size: 1rem;
			height: 1em;
			width: 1em
		}
		.msg {
			max-width: 98%;
			display: block;
			border: 1px solid #eee;
			padding: var(--padding-large) 0 .5rem;
			margin: .625rem auto;
			font-weight: 700;
			font-style: italic
		}
				
		.s_m {
			margin: 0 auto .625rem
		}
		blockquote {
			border-left: .25rem solid var(--primary-colour);
			padding: .9375rem 1.25rem;
			margin: 1.25rem 0;
			font-style: italic;
			font-size: 1.15em;
			border-radius: .1875rem;
			box-shadow: 0 .25rem .5rem rgba(0,0,0,.1)
		}
		.sumt {
			font-weight: 500;
			font-size: 1.125rem;
			border-top: 1px solid var(--primary-colour);
			border-bottom: 1px solid var(--primary-colour);
			padding: 0 1.25rem;
			margin: .3125rem 0
		}
		.adg {
			padding-bottom: 5rem
		}
		.sim {
			margin: .2em 0 .1em .9375rem;
			padding-left: .9375rem
		}
		.sim:before {
			content: none
		}
		.topda a:hover {
			text-decoration: underline
		}
		.topda {
			display: block;
			max-width: 75rem;
			text-align: center;
			margin: 1.25rem auto;
			font-size: 1rem;
			min-height: 1.875rem
		}
		.skip-link {
			position: absolute;
			top: -2.5rem;
			left: 0;
			background: #fff;
			color: var(--primary-colour);
			padding: .5rem;
			z-index: 100;
			transition: top .2s ease-in-out;
		}
		
		.skip-link:focus,
		.skip-link:focus-visible {
			top: 0;
		}
		.author-bo {
			border-bottom: 1px solid #025a92;
			color: #424242;
			padding: 1.875rem;
			overflow: hidden;
			margin-bottom: .625rem
		}
		.cfot {
			color: var(--text-colour)
		}
		.author-descriptio {
			margin: .625rem
		}
		.sheader {
			padding: .3125rem
		}
		.ad-cont {
			display: block;
			margin: .9375rem auto;
			min-height: 12.5rem;
			width: 100%
		}
		.mmm {
			overflow: hidden
		}
		.site-header {
			position: relative;
			width: 100%;
			top: 0;
			z-index: 1000;
			background: var(--background-color);
			border-bottom: 1px solid var(--light-gray);
			box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.3); /* 2px 5px */
			overflow-x: visible;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
		}
		.container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			margin-left: auto;
			margin-right: auto;
			max-width: 100%;
}
		
		
		.container svg {
			width: 18.75rem;
			height: 3.75rem;
			
		}
		
		
		
		.reading-time {
			display: inline-flex;
			align-items: center;
			font-size: .875rem;
			color: #555;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis
		}
		.reading-time a {
			color: #555
		}
		.reading-time-icon {
			margin-right: .25rem;
			width: 1rem;
			height: 1rem;
			fill: currentColor
		}
		
		.post-navigation {
			margin-top: 3rem;
			padding-top: 2rem;
			border-top: 1px solid #eee;
		}
		
		.post-navigation__inner {
			display: flex;
			justify-content: space-between;
			gap: 1.5rem;
			flex-wrap: wrap;
		}
		
		.post-navigation__item {
			flex: 1 1 240px;
			text-decoration: none;
			border-radius: 8px;
			padding: 1rem 1.25rem;
			border: 1px solid #e5e5e5;
			transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
		}
		
		.post-navigation__item--prev {
			text-align: left;
		}
		
		.post-navigation__item--next {
			text-align: right;
		}
		
		.post-navigation__label {
			display: block;
			font-size: 0.75rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			color: var(--secondary-colour);
			margin-bottom: 0.25rem;
		}
		
		.post-navigation__title {
			display: block;
			font-size: 0.95rem;
			font-weight: 600;
			line-height: 1.3;
		}
		
		.post-navigation__item:hover {
			transform: translateY(-2px);
			border-color: #ccc;
			box-shadow: 0 6px 16px rgba(0,0,0,0.05);
		}

		.email-box {
			display: block;
			padding: 10px 14px;
			font-size: 16px;
			margin: 0 auto;        
			text-align: center;    
		}
		
		.email-icon {
			font-size: 20px;
			margin-right: 8px;
		}
		
		.email-box a {
			text-decoration: none;
			color: var(--primary-colour);
			font-weight: 500;
		}
		
		.email-box a:hover {
			text-decoration: underline;
		}

		.myschoolgistsharing {
			display: flex;
			gap: 1rem;
			justify-content: flex-start;
			align-items: center;
			margin: 1.125rem auto 1rem;
			height: auto
		}
		.myschoolgistsharing .button {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: .5rem;
			padding: .8rem 1rem;
			font-size: 1rem;
			font-weight: bold;
			text-transform: uppercase;
			text-decoration: none;
			border: 0;
			border-radius: .3125rem;
			transition: background-color .3s ease;
			color: #fff
		}
		.myschoolgistsharing .button svg {
			width: 1.2em;
			height: 1.2em
		}
		.myschoolgistsharing__icon {
			fill: currentColor
		}
		.myschoolgistsharing a.button {
			border: 0;
			border-radius: 0;
			box-shadow: none;
			color: #fff;
			line-height: 1;
			margin: .5rem;
			padding: 1rem;
			text-align: center;
			text-decoration: none
		}
		.myschoolgistsharing__buttons {
			display: flex;
			flex-wrap: wrap
		}
		.myschoolgistsharing__buttons a.button {
			border: 1px solid;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: .75rem;
			flex: 1
		}
		.myschoolgistsharing__icon+.sss-name {
			margin-left: .5rem;
			font-weight: 600;
			height: auto
		}
		.myschoolgistsharing .button.twitter {
			background-color: #000
		}
		.twitter {
			color: #fff
		}
		.myschoolgistsharing .button.facebook {
			background-color: #3b5998
		}
		.myschoolgistsharing .button.whatsapp {
			background-color: #075e54
		}
		.separator {
			color: #000
		}
	
		.botbox {
			background-color: var(--background-colour);
			color: var(--text-colour);
			border-left: .25rem solid var(--primary-colour);
			padding: 1rem 1.25rem;
			margin: 2rem auto;
			font-size: 1rem;
			line-height: 1.6;
			box-shadow: 0 .125rem .375rem rgba(0,0,0,.1);
			border-radius: .5rem;
			max-width: 43.75rem;
			text-align: center
		}
		.botbox .b {
			font-weight: bold;
			color: var(--text-colour)
		}
		.botbox .b.phone,
		.botbox a {
			color: var(--primary-colour);
			word-break: break-word
		}
		.botbox p {
			margin: 0
		}
		
		
		.navfo {
			display: flex;
			list-style: none;
			margin: .625rem 0;
			padding: 0;
			flex-wrap: wrap;
			justify-content: center;
			gap: 1rem
		}
		.navitem {
			position: relative
		}
		.navitem:not(:last-child)::after {
			content: '•';
			position: absolute;
			right: -.75rem;
			top: 50%;
			transform: translateY(-50%);
			color: #666;
			font-size: .8rem
		}
		.navitem a {
			text-decoration: none;
			color: #333;
			padding: .5rem 1rem;
			font-size: 1rem;
			transition: color .3s ease
		}
		.navitem a:hover {
			color: #007bff
		}
		:focus-visible {
			outline: 2px solid var(--primary-colour);
			outline-offset: 2px
		}
		#sidebar-search {
			width: 100%;
			padding: 1.5rem;
			margin: 2rem 0;
			background-color: #f7f9fc;
			border-radius: .5rem;
			box-shadow: 0 .125rem .5rem rgba(0,0,0,.1)
		}
		#sidebar-search .search-form {
			display: flex;
			width: 100%;
			gap: .5rem
		}
		#sidebar-search .search-input {
			flex: 1;
			width: 100%;
			padding: .75rem;
			font-size: 1rem;
			border: 1px solid #ccc;
			border-radius: .25rem;
			box-sizing: border-box
		}
		#sidebar-search .sbutton {
			background-color: #025A92;
			color: #fff;
			border: none;
			padding: .75rem 1.25rem;
			font-size: 1rem;
			border-radius: .25rem;
			cursor: pointer;
			transition: background-color .3s ease
		}
		#sidebar-search .sbutton:hover {
			background-color: #01466f
		}
		
		
		/* Main Navigation */
		.main-nav {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background:  #fff;
			color: #424242;
			padding: 1.25rem; /* 20px */
			transform: translateX(-100%);
			transition: transform 0.3s ease;
		}
		
		.main-nav.open {
			display: block;
			transform: translateX(0);
		}
		
		/* Prevent body from scrolling when menu is open */
		body.menu-open {
			overflow: hidden;
		}
		
		.main-nav .close-nav {
			background: none;
			border: none;
			color: #b30000;
			font-size: 1.5rem; /* 24px */
			cursor: pointer;
			margin-bottom: 1.25rem; /* 20px */
			transition: color 0.3s ease;
			font-weight: 700;
		}
		
		.main-nav .close-nav.active {
			color: #b30000;
		}
		
		.main-nav .nav-list {
			list-style: none;
			padding: 0;
		}
		
		.main-nav .nav-list li {
			margin-bottom: 0.625rem; /* 10px */
			position: relative;
		}
		
		.main-nav .nav-list li a {
			text-decoration: none;
			color: #424242;
			white-space: nowrap;
		}
		
		/* Dropdown Menu Styles */
		.main-nav .dropdown {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			background: #fff;
			color: #424242;
			border: 1px solid #ddd;
			list-style: none;
			padding: 0.625rem; /* 10px */
			box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
			z-index: 10;
			width: max-content;
		}
		
		.main-nav .dropdown.open {
			display: block;
		}
		
		.main-nav .dropdown li {
			margin-bottom: 0.3125rem; /* 5px */
		}
		
		.main-nav .dropdown li a {
			color: #424242;
			text-decoration: none;
			padding: 0.3125rem 0.625rem; /* 5px 10px */
			display: block;
		}
		
		.main-nav .dropdown li a:hover,
		.main-nav .dropdown li a:focus-visible {
			background-color: #f2f7fb;
			text-decoration: none;
		}
		
		/* Nested Dropdown Styles (Children of Children) */
		.main-nav .dropdown .dropdown {
			display: none;
			background:  #fff;
			border: none;
			padding: 0.625rem 0; /* 10px */
			box-shadow: none;
		}
		
		.main-nav .dropdown .dropdown.open {
			display: block;
		}
		
		.main-nav .dropdown .dropdown li {
			border-bottom: 1px solid #ddd;
		}
		
		.main-nav .dropdown .dropdown li:last-child {
			border-bottom: none;
		}
		
		/* Dropdown Toggle Link */
		.toggle-link {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-decoration: none;
			color: inherit;
			cursor: pointer;
			position: relative;
		}
		
		.toggle {
			margin-left: 0.625rem; /* 10px */
			font-size: 1.125rem; /* 18px */
		}
		
		/* Hamburger Button */
		.menu-toggle {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 2.5rem; /* 40px */
			height: 1.5625rem; /* 25px */
			background: transparent;
			border: none;
			cursor: pointer;
			margin-right: 0.625rem; /* 10px */
		}
		
		.menu-toggle .bar {
			width: 100%;
			height: 0.1875rem; /* 3px */
			background: #424242;
			border-radius: 0.125rem; /* 2px */
		}
		
		button.toggle-link.nnnav {
			padding: 0.625rem 1.25rem; /* 10px 20px */
		}
		
		/* Reset button styles to match links */
		.mlink-style {
			all: unset;
			display: inline;
			cursor: pointer;
			text-decoration: none;
			font-weight: 500;
			white-space: nowrap;
		}
		
		
		
		
		.form-inline {
			align-items: center;
		}
		
		.form-control {
			border: 1px solid #b30000;
			border-radius: 0.125rem; /* 2px */
			padding: 0.625rem; /* 10px */
		}
		
		:focus {
			outline: 2px solid var(--primary-colour);
			outline-offset: 2px;
		}
		
		:focus:not(:focus-visible) {
			outline: none;
		}
		
		:focus-visible {
			outline: 2px solid var(--primary-colour);
			outline-offset: 2px;
		}
		
		.btn:active,
		.btn:focus,
		.form-control:focus {
			box-shadow: none;
		}
		
		.form-control::placeholder {
			color: #424242;
			opacity: 1;
		}
		
		.visually-hidden {
			position: absolute !important;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			clip-path: inset(50%);
			white-space: nowrap;
			border: 0;
		}
		
		.search-input {
			background: var(--search-icon) no-repeat 50% 50%;
			background-repeat: no-repeat;
			background-position: right 0.625rem center; /* 10px */
			background-size: 1.25rem; /* 20px */
			padding-right: 1.875rem; /* 30px */
		}
		
		.nav-list {
			margin: 0;
			padding: 0;
		}
		
		#toc_container {
			
			border-bottom: 1px solid #000;
			
			border-top: 1px solid #000;
			
			margin: 1.25rem auto
			
			
		}
		.breadcrumbs {
			font-size: 0.875rem;
			line-height: 1.4;
			overflow: hidden;           /* hide overflow */
			white-space: nowrap;        /* keep everything on one line */
		}
		
		/* Flex layout for nice, responsive behaviour */
		.breadcrumb-list {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			gap: 0.25rem;
			min-width: 0;               /* important for ellipsis in flex items */
		}
		
		.breadcrumb-list li {
			display: inline-flex;
			align-items: center;
			flex: 0 0 auto;
		}
		
		/* Separator between items */
		.breadcrumb-list li + li::before {
			content: "\00BB";           /* » */
			margin: 0 0.35rem;
			color: #777;
		}
		
		/* Links */
		.breadcrumbs a {
			color: var(--primary-colour);
			text-decoration: none;
		}
		
		.breadcrumbs a:hover,
		.breadcrumbs a:focus {
			text-decoration: underline;
		}
		
		/* Make the last (current) crumb flexible and ellipsized */
		.breadcrumb-list li:last-child {
			flex: 1 1 auto;             /* allow it to shrink */
			min-width: 0;               /* allow it to actually shrink */
		}
		
		.breadcrumb-current {
			display: inline-block;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;    /* "eclippse" the remaining part */
			vertical-align: bottom;
		}
		
		/* Optional: slightly smaller on very small screens */
		@media (max-width: 480px) {
			.breadcrumbs {
				font-size: 0.8rem;
			}
		}

		/* Container */
		.read-also {
			background: var(--background-colour);
			border-radius: .25rem;
			box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
			max-width: 95%;
			margin: 1rem auto 1.5rem;
			padding: 1rem 1.25rem;
		}
		
		
		/* List reset */
		.read-also ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		/* Mobile-first: vertical list, image + text in a row */
		.read-also ul li {
			display: flex;
			align-items: flex-start;
			gap: .75rem;
			font-weight: 400;
			font-size: 1rem;
			color: var(--primary-colour);
			margin-bottom: .75rem;
			padding-bottom: .75rem;
			border-bottom: 1px solid rgba(0,0,0,.05);
		}
		
		
		
		/* Last item – no border/margin */
		.read-also ul li:last-child {
			margin-bottom: 0;
			padding-bottom: 0;
			border-bottom: none;
		}
		
		/* Thumbnail: FORCE 150x150 visually */
		.read-also picture, .read-also img {
			width: 100px !important;
			height: 100px !important;
			max-width: none !important; /* override global img { max-width: 100%; } */
			object-fit: cover;
			border-radius: .25rem;
			flex-shrink: 0;
		}
		
		/* Link styling */
		.read-also ul li a {
			display: block;
			font-weight: 600;
			text-decoration: none;
			color: var(--primary-colour);
			line-height: 1.35;
		}
		
		.read-also ul li a:hover,
		.read-also ul li a:focus {
			text-decoration: underline;
		}
		
		
	
		
		/* --------- Responsive: 2-column grid on bigger screens --------- */
		
		@media (min-width: 768px) {
			/* Turn the list into a 2-column grid (max 2 columns) */
			.read-also ul {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr)); /* <= 2 columns max */
				gap: 1rem 1.25rem;
			}
			
			.read-also ul li {
				margin: 0;
				padding: .75rem;
				border-bottom: none;
				flex-direction: column;          /* image on top, text below */
				align-items: flex-start;
				background: rgba(255,255,255,.7);
				border-radius: .25rem;
				box-shadow: 0 .15rem .3rem rgba(0,0,0,.04);
				transition: transform .15s ease, box-shadow .15s ease;
			}
			
			.read-also ul li:hover {
				transform: translateY(-2px);
				box-shadow: 0 .35rem .7rem rgba(0,0,0,.08);
			}
			
			.read-also picture, .read-also img{
				margin-bottom: .5rem;
			}
		}
		
		/* Optional: slightly wider container on very large screens */
		@media (min-width: 1100px) {
			.read-also {
				max-width: 100%;
			}
		}

		/* Desktop Styles */
		@media (min-width: 1200px) {
			.main-nav .close-nav, .menu-toggle {
				display: none;
			}
			
			.main-nav {
				display: block;
				position: static;
				transform: none;
				background:  #fff;
				color: #424242;
				padding: 0;
				margin-right: 0;
			}
			
			.main-nav .nav-list {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex-wrap: nowrap;
			}
			
			.main-nav .nav-list li {
				margin: 0 0.9375rem; /* 15px */
				position: relative;
			}
			
			.main-nav .nav-list li a {
				color: #424242;
				text-decoration: none;
				white-space: nowrap;
			}
			
			.main-nav .dropdown {
				position: absolute;
				top: 100%;
				left: 0;
				width: max-content;
			}
			
			.main-nav .dropdown .dropdown {
				position: absolute;
				top: 0;
				left: 100%;
				width: max-content;
			}
			
			.main-nav .dropdown {
				background:  #fff;
				border: none;
				padding: 0.625rem 0; /* 10px */
				box-shadow: none;
				width: max-content;
			}
			
			.main-nav .dropdown.open {
				display: block;
			}
			
			.main-nav .toggle-link .toggle {
				display: inline-block;
			}
			
			.main-nav .dropdown li {
				margin-bottom: 0.3125rem; /* 5px */
				border-bottom: 1px solid #ddd;
			}
			
			.main-nav .dropdown li:last-child {
				border-bottom: none;
			}
			
			.main-nav .dropdown li a {
				color: #424242;
				text-decoration: none;
				padding: 0.625rem 1.25rem; /* 10px 20px */
				display: block;
			}
			
			.main-nav .dropdown li a:hover {
				text-decoration: underline;
			}
			
			.mlink-style {
				color: #424242;
			}
		}
		
		/* Mobile Dropdown Menu Styles */
		@media (max-width: 1199px) {
			.main-nav .dropdown {
				display: none;
				position: static;
				background: inherit;
				border: none;
				padding: 0;
				box-shadow: none;
				width: 100%;
			}
			
			.main-nav .dropdown.open {
				display: block;
			}
			
			.main-nav .nav-list li {
				margin-bottom: 0;
			}
			
			.main-nav .nav-list li .dropdown li {
				padding: 0.625rem 1.25rem; /* 10px 20px */
				border-top: 1px solid #ddd;
			}
			
			
			
			.main-nav .dropdown li a {
				color: #424242;
			}
			
			.main-nav .dropdown {
				position: static;
				width: 100%;
			}
			
			.main-nav .dropdown .dropdown {
				position: static;
				padding-left: 1.25rem; /* 20px */
			}
			
			.main-nav {
				overflow-y: auto;
				height: 100vh;
			}
			
			button.mnavv, .mnavv {
				padding: 0.625rem 1.25rem; /* 10px 20px */
			}
		}
		
		@media (max-width:768px) {
			:root {
				--font-size: 1rem
			}
			h1 {
				font-size: 2rem
			}
			h2,
			.h2 {
				font-size: 1.5rem
			}
			h3,
			.h3 {
				font-size: 1.25rem
			}
			h4 {
				font-size: 1.125rem
			}
			h5 {
				font-size: 1rem
			}
			h6 {
				font-size: .875rem
			}
			.reading-time {
				font-size: .75rem
			}
			main {
				margin: .1875rem
			}
			.navfo {
				flex-direction: column;
				align-items: center;
				gap: .5rem
			}
			.navitem:not(:last-child)::after {
				display: none
			}
			.navitem a {
				display: block;
				padding: .75rem;
				text-align: center
			}
		}
		@media (min-width:768px) and (max-width:991px) {
			.adg {
				padding-bottom: 6.25rem
			}
		}
		@media (min-width:992px) {
			.adg {
				padding-bottom: 6.25rem
			}
		}
		@media screen and (max-width:865px) {
			.main-container {
				position: relative;
				left: 0
			}
			.mobile-menu-active .main-container {
				left: 18.75rem
			}
		}
		@media screen and (max-width:550px) {
			.sbutton {
				float: right
			}
		}
		@media screen and (max-width:480px) {
			.copyrights {
				text-align: center
			}
			#copyright-note {
				float: none;
				width: 100%
			}
			.navitem a {
				font-size: .9rem;
				padding: .5rem
			}
		}
		@media (max-width:600px) {
			main {
				margin: .1875rem
			}
		}
		@media print {
			.myschoolgistsharing {
				display: none
			}
		}
		@media only screen and (max-width:767px) {
			.myschoolgistsharing .sss-name {
				position: absolute;
				clip: rect(1px,1px,1px,1px);
				height: 1px;
				width: 1px;
				border: 0
			}
		}
		
		
		@media print {
			.ad-container,
			.inartad,
			.inartad-wrapper,
			.myschoolgistsharing,
			.rads {
				display: none!important
			}
			body {
				font-size: 12pt;
				line-height: 1.3;
				color: #424242;
				background: none
			}
			a::after {
				content: " (" attr(href) ")";
				font-size: smaller
			}
		}
		@media (prefers-reduced-motion: reduce) {
			html, html:focus-within { scroll-behavior: auto; }
			*, *::before, *::after {
				animation-duration: 0.01ms !important;
				animation-iteration-count: 1 !important;
				transition-duration: 0.01ms !important;
				scroll-behavior: auto !important
			}
		}
		
          
     