.CatTag {transition-duration: var(--transition-duration-fast); transition-property: background-color, color, outline-color;}
.ArtControls :is(a, button) {transition-duration: var(--transition-duration-fast); transition-property: background-color, color, outline-color, box-shadow, gap;}
.ArtControls :is(a, button) [fill] {transition-duration: var(--transition-duration-fast); transition-property: fill;}

.ArticleCard {transition-property: box-shadow;}
.ArticleCard::after {transition-property: outline-color;}
.ArticleCard .Image img {transition-property: outline-color;}
.ArticleCard .Info h2 {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 3px; transition-property: text-decoration-color;}
.ArticleCard .More {transition-property: color;}
.ArticleCard .More path {transition-property: fill;}

@media (hover: hover) and (pointer: fine) {
	.CatTag:hover {background-color: #EACBD4; color: var(--semi-dark-green);}

	/* Same flat ring as .Button, scaled down: the shadow is the fill colour, so the pill grows. */
	.ArtControls :is(a, button):not(.Saved):hover {background-color: var(--hover-tint); outline-color: var(--hover-ring); box-shadow: 0 0 0 3px var(--hover-tint);}
	.ArtControls .Saved:hover {box-shadow: 0 0 0 3px var(--dark-green);}

	.ArticleCard:hover .Image img {outline-color: var(--hover-ring);}
	.ArticleCard:hover .Info h2 {text-decoration-color: var(--hover-underline);}
	.ArticleCard:hover .More {color: var(--hover-accent);}
	.ArticleCard:hover .More path {fill: var(--hover-accent);}
}

@media (hover: hover) and (pointer: fine) and (min-width: 800px) {
	.ArticleCard:hover {box-shadow: var(--hover-lift);}
	.ArticleCard:hover::after {outline-color: var(--hover-ring);}
}

@media (hover: none), (pointer: coarse) {
	.CatTag:active {background-color: #EACBD4;}
	.ArtControls :is(a, button):not(.Saved):active {background-color: var(--hover-tint);}
}
.TrioArticles article {transition-property: box-shadow;}
.TrioArticles article::after {transition-property: outline-color;}
.TrioArticles h2 a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 4px; transition-property: text-decoration-color;}

@media (hover: hover) and (pointer: fine) {
	.TrioArticles article:hover {box-shadow: var(--hover-lift-on-dark);}
	.TrioArticles article:hover::after {outline-color: var(--hover-ring-on-dark);}
	.TrioArticles article:hover h2 a {text-decoration-color: var(--hover-underline-on-dark);}
}
:root {
	--transition-duration: 250ms;
	--transition-duration-fast: calc(var(--transition-duration) / 2);

	/* Shared hover language. Every hover state in the project is built from these. */
	--hover-accent: #315D1F;
	--hover-tint: #E5EAE2;
	--hover-ring: rgba(49, 93, 31, 0.45);
	--hover-underline: rgba(25, 48, 22, 0.35);
	--hover-lift: 0 6px 20px rgba(23, 54, 31, 0.1);

	/* On dark surfaces the same effects have to brighten instead of darken. */
	--hover-ring-on-dark: rgba(255, 255, 255, 0.45);
	--hover-underline-on-dark: rgba(255, 255, 255, 0.55);
	--hover-lift-on-dark: 0 6px 20px rgba(0, 0, 0, 0.22);
}

*, *::before, *::after {transition-duration: var(--transition-duration); transition-property: none;}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {transition-duration: 1ms;}
}

.Text a {transition-duration: var(--transition-duration-fast); transition-property: color, text-decoration-color;}

@media (hover: hover) and (pointer: fine) {
	.Text a:hover {color: var(--hover-accent); text-decoration-color: var(--hover-underline);}
}

.Button {--hover-bg: color-mix(in srgb, var(--main-color) 78%, var(--text-color)); --active-bg: color-mix(in srgb, var(--hover-bg) 88%, var(--dark)); --hover-outline: color-mix(in srgb, var(--hover-bg) 60%, var(--pure-white)); --hover-text: color-mix(in srgb, var(--text-color) 85%, var(--dark)); --hover-spread: 4px; transition-duration: var(--transition-duration-fast); transition-property: background-color, color, outline-color, outline-offset, box-shadow;}
.Button [fill] {transition-duration: var(--transition-duration-fast); transition-property: fill;}
.Button [stroke] {transition-duration: var(--transition-duration-fast); transition-property: stroke;}
.Button img {transition-duration: var(--transition-duration-fast); transition-property: filter;}
.Button:focus-visible {background-color: var(--hover-bg); color: var(--hover-text); outline: 1px solid var(--hover-outline); outline-offset: var(--hover-spread); box-shadow: 0 0 0 var(--hover-spread) var(--hover-bg);}
.Button:focus-visible [fill] {fill: var(--hover-text);}
.Button:focus-visible [stroke] {stroke: var(--hover-text);}
.Button:focus-visible img {filter: brightness(0.85);}
.Button:active {--hover-spread: 2px; transition-duration: 60ms; background-color: var(--active-bg); color: var(--hover-text); outline: 1px solid var(--hover-outline); outline-offset: var(--hover-spread); box-shadow: 0 0 0 var(--hover-spread) var(--active-bg);}
.Button:active [fill] {fill: var(--hover-text);}
.Button:active [stroke] {stroke: var(--hover-text);}
.Button:active img {filter: brightness(0.85);}

@media (hover: hover) and (pointer: fine) {
	.Button:hover {background-color: var(--hover-bg); color: var(--hover-text); outline: 1px solid var(--hover-outline); outline-offset: var(--hover-spread); box-shadow: 0 0 0 var(--hover-spread) var(--hover-bg);}
	.Button:hover [fill] {fill: var(--hover-text);}
	.Button:hover [stroke] {stroke: var(--hover-text);}
	.Button:hover img {filter: brightness(0.85);}
}
.Dialog {position: fixed; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0,0,0,0.08); backdrop-filter: blur(2px); opacity: 1; transition: 0.5s width, 0.5s height, 50ms background-color, 0.25s opacity;}
.Dialog.Closed:not(.OpenIt) {opacity: 0;}
.Dialog .Content {display: flex; flex-direction: column; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%) scale(1); max-width: 90vw; max-height: 90vh; background: white; border-radius: 40px; outline: 2px solid rgba(1,25,1,0.2); outline-offset: -2px; padding: 25px; opacity: 1; transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) transform, 0.25s ease opacity;}
.Dialog.Closed:not(.OpenIt) .Content {opacity: 0; transform: translateY(-50%) translateX(-50%) scale(0.4);}
.Dialog .Controls {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -5px -5px 15px; flex-shrink: 0;}
.Dialog .ControlsMain {display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1;}
.Dialog .ControlsMain:empty {display: none;}
.Dialog .ControlsMain:empty + .CloseDialog {margin-left: auto;}
.Dialog .Controls .Heading {font-size: 28px; color: var(--semi-dark-green); line-height: 1.2;}
.Dialog .CloseDialog {flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 99px; background: none; color: #101010; cursor: pointer; transition-duration: var(--transition-duration-fast); transition-property: background-color, color;}
.Dialog .CloseDialog:focus-visible {outline: none; background-color: var(--hover-tint); color: var(--hover-accent);}
.Dialog .Body {min-width: 0; overflow: auto;}
.Dialog .ButtonBox {display: flex; gap: 10px; margin-top: 15px;}
.Dialog:not(.Minimized) .Body:has(audio) {min-width: 500px; transition: 0.5s min-width;}
.Dialog audio {width: 100%;}

.Dialog.Minimized {width: 250px; height: 150px; pointer-events: none; background-color: transparent;}
.Dialog.Minimized .Content {pointer-events: auto;}
.Dialog.Minimized .Body:has(audio) {min-width: 200px;}

@media (hover: hover) and (pointer: fine) {
	.Dialog .CloseDialog:hover {background-color: var(--hover-tint); color: var(--hover-accent);}
}/* Dark with white text: the default would lighten the fill and dim the text, both backwards. */
form .Button {--hover-bg: color-mix(in srgb, var(--main-color) 88%, var(--dark)); --hover-text: var(--pure-white);}

form :is(label, textarea) {transition-duration: var(--transition-duration-fast); transition-property: background-color, outline-color;}
/* The label carries the focus ring for the whole pill, so the input must not draw a second one. */
form input:focus-visible {outline: none;}
form label:focus-within, form textarea:focus {background-color: rgba(49, 93, 31, 0.14); outline-color: var(--hover-accent);}

@media (hover: hover) and (pointer: fine) {
	form :is(label, textarea):hover {outline-color: var(--hover-ring);}
	form label:focus-within:hover, form textarea:focus:hover {outline-color: var(--hover-accent);}
}
/* Keep the breakpoint in sync with GALLERY_MIN_WIDTH in Design/JS/GalleryTriggers.js. */
@media (min-width: 800px) {
	.MediaGallery > .MediaItem[role="button"], .Gallery > .Image {cursor: zoom-in;}
}

.Dialog.GalleryDialog {background: rgba(0,0,0,0.45);}
.Dialog.GalleryDialog .Content {width: min(1400px, 94vw); max-width: 94vw; height: min(900px, 92vh); max-height: 92vh; padding: 20px;}
.Dialog.GalleryDialog .Body {display: flex; flex: 1; min-height: 0; overflow: hidden;}

.GalleryView {display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 12px; width: 100%; min-height: 0; outline: none;}
.GalleryView.Single .GalleryNav, .GalleryView.Single .GalleryThumbs {display: none;}

.GalleryStage {position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 68px; border-radius: 25px; background: var(--white); overflow: hidden; touch-action: pan-y; user-select: none;}
.GalleryImage {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; transition-duration: var(--transition-duration-fast); transition-property: opacity, transform;}
.GalleryStage.Loading .GalleryImage {opacity: 0;}
.GalleryStage.Dragging .GalleryImage {transition-property: opacity;}

.GalleryNav {position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 99px; background: var(--pure-white); outline: 1px solid var(--dark-green); outline-offset: -1px; color: var(--dark-green); cursor: pointer; transition-duration: var(--transition-duration-fast); transition-property: background-color, outline-offset;}
.GalleryPrev {left: 12px;}
.GalleryPrev svg {transform: scaleX(-1);}
.GalleryNext {right: 12px;}
.GalleryNav:focus-visible {background: var(--white); outline-offset: 2px;}
@media (hover: hover) and (pointer: fine) {
	.GalleryNav:hover {background: var(--white);}
}

.GalleryInfo {display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 14px; line-height: 1.4;}
.GalleryCaption {min-width: 0;}
.GalleryCounter {flex: none; font-family: var(--georgia); font-size: 16px; color: var(--semi-dark-green);}

.GalleryThumbs {display: flex; flex: none; gap: 8px; padding-bottom: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--light-border) transparent;}
.GalleryThumb {flex: none; width: 96px; height: 64px; padding: 0; border: 0; border-radius: 12px; background: var(--white); outline: 2px solid transparent; outline-offset: -2px; overflow: hidden; opacity: 0.55; cursor: pointer; transition-duration: var(--transition-duration-fast); transition-property: opacity, outline-color;}
.GalleryThumb img {display: block; width: 100%; height: 100%; object-fit: cover;}
.GalleryThumb.On {opacity: 1; outline-color: var(--dark-green);}
.GalleryThumb:focus-visible {opacity: 1; outline-color: var(--light-green);}
@media (hover: hover) and (pointer: fine) {
	.GalleryThumb:hover {opacity: 1;}
}

@media (max-width: 1099px) {
	.GalleryStage {padding: 0 56px;}
	.GalleryThumb {width: 76px; height: 52px;}
}
/* .Letters and .Group .Items are shared verbatim by the dictionary and the tag index. */
.Letters a {transition-property: background-color, color, outline-color;}
.Letters a:focus-visible {outline-color: var(--hover-accent);}
.Group .Items a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 3px; transition-property: color, text-decoration-color;}

@media (hover: hover) and (pointer: fine) {
	.Letters a:hover {background-color: var(--hover-tint); outline-color: var(--hover-ring); color: var(--hover-accent);}
	.Group .Items a:hover {color: var(--hover-accent); text-decoration-color: var(--hover-underline);}
}
html.HeaderSubmenuOpen {overflow: hidden; scrollbar-gutter: stable;}

#Header :is(.Top, .Mid) a, .HeadUser .LoginLink {transition-duration: var(--transition-duration-fast); transition-property: color;}
#Foot :is(.Top, .Bottom) a {transition-duration: var(--transition-duration-fast); transition-property: opacity, text-decoration-color; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 3px;}
.Socials a {transition-duration: var(--transition-duration-fast); transition-property: opacity;}

/* The icon has no padding of its own, so the halo is drawn with a box-shadow spread. */
.SearchButton {border-radius: 99px; transition-duration: var(--transition-duration-fast); transition-property: background-color, box-shadow, transform;}
.SearchButton path {transition-duration: var(--transition-duration-fast); transition-property: fill;}
.SearchButton:active {transition-duration: 60ms; transform: scale(0.9);}
.SearchButton:focus-visible {outline: none; background-color: var(--hover-tint); box-shadow: 0 0 0 8px var(--hover-tint);}
.SearchButton:focus-visible path {fill: var(--hover-accent);}

@media (hover: hover) and (pointer: fine) {
	#Header :is(.Top, .Mid) a:hover, .HeadUser .LoginLink:hover {color: var(--hover-accent);}
	/* The footer sits on dark green, so links brighten instead of darkening. */
	#Foot .Top a:hover {text-decoration-color: var(--hover-underline-on-dark);}
	#Foot .Bottom a:hover {opacity: 1;}
	.Socials a:hover {opacity: 0.7;}

	.SearchButton:hover {background-color: var(--hover-tint); box-shadow: 0 0 0 8px var(--hover-tint);}
	.SearchButton:hover path {fill: var(--hover-accent);}
}

.HeaderSubmenuCover {position: fixed; inset: 0; z-index: 3; background: rgba(0,0,0,0.08); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.18s ease-out;}
.HeaderSubmenuCover.Visible {opacity: 1; pointer-events: auto;}

@media (min-width: 800px) {
	#Header {position: sticky;}
	#Header.SubmenuOpen {z-index: 4;}
	#Header .SubmenuPreload {position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none;}
	#Header .Submenu:empty {display: none;}
	#Header .Submenu {position: absolute; top: 100%; left: 0; right: 0; background: white; padding-top: 31px; padding-bottom: 47px; --container-width: calc(1065px + calc(var(--container-padding) * 2)); border-bottom: 1px solid rgba(0,0,0,0.2);}
	#Header .Submenu.Loading {min-height: 120px;}
	#Header .Mid li.Pending > a {color: var(--hover-accent);}
	#Header .Mid li.Pending > a::after {opacity: 0.35; animation: HeaderSubmenuPending 0.55s ease-in-out infinite alternate;}
	#Header .Mid li.Active > a {color: var(--hover-accent); font-weight: 600;}
	#Header .Submenu .Container {display: grid; grid-template-columns: 21.6% 1fr 254px; gap: 25px; align-items: start;}
	#Header .Submenu .Container.PressSubmenu {grid-template-columns: 21.6% 1fr 300px;}
	#Header .Submenu .AboutCat .Heading {color: #315D1F; font-size: 24px; font-weight: bold; margin-bottom: 3px;}
	#Header .Submenu .AboutCat .Text {color: var(--black70); font-size: 12px;}
	#Header .Submenu ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;}
	#Header .Submenu li a {display: block; height: 100%; outline: 1.5px solid rgba(0,0,0,0.1); outline-offset: -1.5px; border-radius: 20px; padding: 16px 23px; background: #FBFAF4; transition-property: background-color, outline-color, box-shadow;}
	#Header .Submenu li a:has(.Text) {padding-bottom: 23px;}
	#Header .Submenu li a .Name {font-family: var(--sora); color: var(--dark); font-size: 14px; font-weight: 600; transition-property: color;}
	#Header .Submenu li a .Text {font-size: 12px; line-height: 16px; color: rgba(0,0,0,0.5); margin-top: 14px;}
	#Header .Submenu .ComInfo {outline: 1.5px solid rgba(0,0,0,0.1); outline-offset: -1.5px; border-radius: 20px; padding: 16px 23px 23px 23px; background: #FBFAF4;}
	#Header .Submenu .ComInfo .Heading {font-size: 20px; font-weight: bold; color: var(--dark); line-height: normal; font-family: var(--open-sans); margin-bottom: 12px;}
	#Header .Submenu .ComInfo .Text {color: rgba(0,0,0,0.5); --font-size: 12px; --line-height: 20px; margin-bottom: 21px;}
	#Header .Submenu .ComInfo .StealthTag {color: #315D1F; font-size: 12px; font-weight: bold; font-family: var(--sora); letter-spacing: 0.2em; margin-bottom: 6px;}
	#Header .Submenu .ComInfo .Button {--main-color: #17361F; --text-color: white; --hover-bg: color-mix(in srgb, var(--main-color) 88%, var(--dark)); --hover-text: var(--pure-white);}
}

/* The submenu only exists on desktop, so its hover rules carry the same width gate. */
@media (hover: hover) and (pointer: fine) and (min-width: 800px) {
	#Header .Submenu li a:hover {background-color: var(--pure-white); outline-color: var(--hover-ring); box-shadow: var(--hover-lift);}
	#Header .Submenu li a:hover .Name {color: var(--hover-accent);}
}

@keyframes HeaderSubmenuPending {from {opacity: 0.2; transform: translateY(0);} to {opacity: 0.85; transform: translateY(1px);}}
article.QA {transition-property: outline-color, box-shadow;}
article.QA h2 {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 4px; transition-property: text-decoration-color;}
article.QA .Answer {transition-property: outline-color;}

@media (hover: hover) and (pointer: fine) {
	article.QA:hover {outline-color: var(--hover-ring); box-shadow: var(--hover-lift);}
	article.QA:hover h2 {text-decoration-color: var(--hover-underline);}
	article.QA:hover .Answer {outline-color: var(--hover-ring);}
	/* The pill sits inside a link that covers the card, so it has to answer to the card's hover. */
	article.QA:hover .Button {background-color: var(--hover-bg); color: var(--hover-text); outline: 1px solid var(--hover-outline); outline-offset: var(--hover-spread); box-shadow: 0 0 0 var(--hover-spread) var(--hover-bg);}
}
/* The arrows have no background of their own; the pill only becomes visible on interaction. */
.CalendariumPanel .DateBar button {border-radius: 99px; transition-property: background-color, transform;}
.CalendariumPanel .DateBar button path {transition-property: fill;}
.CalendariumPanel .DateBar button:active {transition-duration: 60ms; transform: scale(0.88);}
.CalendariumPanel .DateBar button:focus-visible {outline: none; background-color: var(--hover-tint);}
.CalendariumPanel .CalName {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 4px; transition-property: color, text-decoration-color;}
.CalendariumPanel .More {transition-property: color, gap;}
.CalendariumPanel .More path {transition-property: fill;}

@media (hover: hover) and (pointer: fine) {
	.CalendariumPanel .DateBar button:hover {background-color: var(--hover-tint);}
	.CalendariumPanel .DateBar button:hover path {fill: var(--hover-accent);}
	.CalendariumPanel .CalName:hover {color: var(--hover-accent); text-decoration-color: var(--hover-underline);}
	.CalendariumPanel .More:hover {color: var(--hover-accent); gap: 13px;}
	.CalendariumPanel .More:hover path {fill: var(--hover-accent);}
}
.Breadcrumbs a {text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 3px; transition-property: color, text-decoration-color;}

@media (hover: hover) and (pointer: fine) {
	.Breadcrumbs a:hover {color: var(--hover-accent); text-decoration-color: var(--hover-underline);}
}