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

:root{
--font-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
--font-sans-serif: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
--text-xs: 12px;
--text-s: 14px;
--text-m: 16px;
--text-d: 20px;
--text-l: 24px;
--text-xl: 28px;
--text-xxl: 36px;
--text-xxxl: 48px;
--color1: #000000;
--color2: #003300; 
--color3: #007500; 
--color4: #7b9971; 
--color5: #f6edd9;
--color6: #f3fcf0;
--color7: #FFFFFF; 
--color8: #00FF00;
--width-normal: 960px;
--width-narrow: 640px;
--gap-xs: 5px;
--gap-s: 10px;
--gap-m: 20px;
--gap-l: 30px;
--gap-xl: 40px;
}


body { font-family: var(--font-serif); font-weight: normal; font-size: var(--text-d); color: var(--color1); line-height: 1.5; padding: 0; background-color: var(--color6); margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


img { max-width: 100%; height: auto; }	
h1,h2,h3,h4,h5,h6 { font-family: var(--font-serif); letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 30px 0; }
h1 { font-size: var(--text-xxxl); font-weight: 700; font-size: clamp(var(--text-xxl), 5vw, var(--text-xxxl)); }
h2 { font-size: var(--text-xl); font-weight: 700; font-size: clamp(var(--text-l), 4vw, var(--text-xl)); }
h3 { font-size: var(--text-l); }
h4,h5,h6 { font-size: var(--text-d); }
p {  margin: 0 0 30px 0; }
ul { margin: 0 0 30px 30px; }
ul ul { margin-top: 0; margin-bottom: 0; }
ol { margin: 0 0 30px 30px; }
dl { margin: 0 0 30px 0; }
hr { margin: 45px 0; height: 7px; background: var(--color5); border: 0; border-radius: 7px; }
h2::before { content: "\272B  "; }
small { font-family: var(--font-sans-serif); font-size: var(--text-s); }
blockquote { position: relative; font-family: sans-serif; font-size: var(--text-l); color: var(--color2); padding: 30px 30px 30px 60px; margin: 0 0 30px 0; opacity: 0.75; }
blockquote::before { content: "\275D"; position: absolute; left: 0; font-size: var(--text-xxl); color: var(--color2); line-height: 1; }
blockquote p { margin: 0; }
blockquote cite { font-size: var(--text-m); }
figure { text-align: center; margin: 0 0 30px 0; }
figure img { display: block; width: 100%; }
figcaption { font-family: var(--font-sans-serif); font-size: var(--text-m); text-align: center; padding-top: 5px; }
code { font-size: var(--text-m); padding: 3px 5px; background: var(--color6); border-radius: 3px; }
pre { margin: 30px 0; }
pre::before { content: "CODE"; display: block; width: 40px; font-size: var(--text-s); padding: 5px 10px 0 15px; background: var(--color6); clear; right; border-radius: 7px 7px 0 0; }
pre code { display: block; padding: 15px; background: var(--color6); border-radius: 0 7px 7px 7px; }
audio { width: 100%; background: #555; }
time { font-weight: var(--text-m); }
a { color: var(--color3); text-decoration: underline; }
a:hover,a:focus { color: var(--color2); }

/*FORMS*/
fieldset { border: 0; }
legend { font-family: var(--font-sans-serif); font-size: var(--text-d); font-weight: 700; text-transform: uppercase; margin-bottom: var(--gap-m); }
.form-item { margin-bottom: var(--gap-l); }
form p { margin-top: 0; }
form ul { list-style: none; margin: 0; }
form ul li { margin-bottom: var(--gap-s); }
input[type='text'],input[type='search'],input[type='email'] { width: 100%; height: 40px; font-size: var(--text-m); text-indent: 5px; background: var(--color7); border: 1px solid var(--color4); }
input[type=number] { width: 60px; height: 40px; font-size: var(--text-m); text-indent: 5px; background: var(--color7); border: 2px solid var(--color4); }
input[type='radio'],input[type='checkbox'] { zoom: 125%; }
select { width: 100%; height: 40px; font-size: var(--text-m); background: var(--color7); border: 1px solid var(--color4); }
textarea { width: 100%; min-height: 140px; font-size: var(--text-m); padding: 5px; }
button { height: 40px; font-size: var(--text-m); font-weight: 700; color: var(--color7); padding: 0 var(--gap-m); background: var(--color3); border: 0; }

.global-wrapper { max-width: var(--width-normal); padding: var(--gap-l); margin: 0 auto; }

.nav { position: relative; display: flex; justify-content: space-between; margin-bottom: var(--gap-l); }
.logo a { color: black; text-decoration: none; letter-spacing: -0.03em; }
.menu-toggle { width: 30px; height: 35px; padding: 0; background: transparent; }
.menu-toggle .bar { display: block; width: 30px; height: 5px; background: #000; margin-bottom: 5px; }
#menu { position: absolute; top: -999em; right: 0; }
#menu.menu-active { top: 40px; background: var(--color5); }
.menu-links { list-style: none; padding: var(--gap-xs) var(--gap-m); margin: 0; }
.menu-links li { margin-bottom: var(--gap-xs); }
.menu-links a { display: block; text-decoration: none; padding: var(--gap-xs); }

.header {}
.tagline { font-size: var(--text-xl); }
.story-block {  }
@media only screen and (min-width: 640px) {
.story-block.has-image { display: grid; gap: var(--gap-m); grid-template-columns: 30% 1fr; }
}
.workshops-list { list-style: none; margin-left: 0; }
.workshops-list li { margin-bottom: var(--gap-s); }

.footer { }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--gap-s); list-style: none; margin-left: 0; }