/*
Theme Name:		Racine Art Museum 2026
Author:			John Green @ Phire Group
Author URI:		https://phiregroup.com/
Version:		1.0
*/

:root {--mw: 73.125rem; --hs: 1.25rem; --vs: 3.125rem;}

/* basic styles */
* {margin: 0; padding: 0;}
*, ::before, ::after {box-sizing: border-box;}
html {font: medium sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; color: #000; background-color: #fff;}
a {text-decoration-thickness: from-font; color: inherit;}
button {border-width: 0; font: inherit; color: inherit; background-color: transparent; cursor: pointer; touch-action: manipulation;}
dialog {overscroll-behavior: contain;}
dialog::backdrop {overflow: hidden; overscroll-behavior: contain;}
h1, h2, h3, h4, h5, h6 {text-wrap: balance;}
iframe {display: block; max-width: 100%; border: 0;}
img, picture, svg, video {height: auto; max-width: 100%; vertical-align: middle;}
input, select, textarea {font: inherit; letter-spacing: inherit; word-spacing: inherit;}
ol, ul {list-style: none;}
p {text-wrap: pretty;}
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
svg[width="0"][height="0"] {position: fixed;}
svg[width="0"][height="0"][aria-hidden="true"] {display: none;}
[hidden] {display: none !important;}

/* utility classes */
.btn {}
.btn:hover {}
.screen-reader-text {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.wrap {margin-inline: max(var(--hs), ((100% - var(--mw)) / 2));}
.wys *:where(:not(.btn)) {margin: revert; margin-bottom: 0; padding: revert; list-style: revert;}
.wys > :first-child {margin-top: 0;}

/* header */
.header-skip {display: block; padding: .5rem; text-align: center;}
.header-skip:not(:focus) {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.header-skip:focus {outline: none;}
.header-skip span {padding-right: .25rem; padding-left: .25rem;}
.header-skip:focus-visible span {outline: 1px solid;}



@media print {

	*, *::before, *::after {border-color: #000 !important; text-shadow: none !important; color: #000 !important; background-color: transparent !important;}
	blockquote, figure {break-inside: avoid;}

}

@media (prefers-reduced-motion: no-preference) {

	html:focus-within {scroll-behavior: smooth;}

	@view-transition {navigation: auto;}

}

@media (prefers-reduced-motion: reduce) {

	*, *::before, *::after {scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important;}

}

@media (forced-colors: active) {

	/* @TODO */

}
