@import url(https://fonts.bunny.net/css?family=gochi-hand:400|noto-sans:100,100i,300,300i,500,700|noto-sans-display:100,400,600);

:root {
  --white: #fff;
  --paper: #f7f7f7;
  --charcoal: #333;
  --smoke: #efefef;
  --lightGrey: #bababa;
  --grey: #969696;
  --sky: #41A7D6;
  --morningSky: #d4f0fa;
  --dusk: #4482AF;
  --candy: #DC8CCC;
  --jelly: #b250d0;
  --deepSea: #2B4972;
  --deepVelvet: #5C1E3F;
  --blaze: #871C1E;
  --sunShine: #F2E493;
}

html { scroll-behavior: smooth; scroll-padding-top: 4.75em; }
body { font-family: 'Noto Sans', sans-serif; font-size: 100%; color: var(--charcoal); line-height: 1.5em; margin: 0; padding: 0; background: url('../img/paper.png') var(--paper) repeat top left; background-attachment: fixed; }

h1, h2, h3, summary { font-family: 'Noto Sans Display', sans-serif; font-stretch: condensed; color: var(--deepSea); }

h1 { font-size: 2.2500em;; line-height: 1.3333em; margin: 1.24em 0 0; }
h2 { font-size: 1.7500em; line-height: 1.3em; margin: 1.75em 0 0; }
h3, summary { font-size: 1.5em; line-height: 1.4em; margin: 2em 0 0; }

p, ul, ol, pre, table, blockquote { margin: 1.5em 0 0; }
blockquote, #testimonials p { font-size: 1.3125em; line-height: 1.6em; margin: 1.1429em 0; }

p.intro { font-size: 1.1250em; line-height: 1.3333em; margin: 1.3333em 0 0; }
p.date { margin-top: 0.75em; font-style: italic; font-weight: 500; }

p.logo { font-family: 'Gochi Hand', handwriting; font-size: 4em; color: var(--charcoal); text-transform: uppercase; letter-spacing: -1px; margin: 0; }

ul ul, ol ol, ul ol, ol ul { margin-top: 0em; margin-bottom: 0em; }

header, main>div, footer { padding: 0 10vw; }
header { position: relative; z-index: 2; align-items: center; border-bottom: 1px solid var(--sky); padding-top: 1.5em; padding-bottom: 1.5em; }
footer { margin-top: 3em; padding-top: 2em; padding-bottom: 3em; background: var(--paper); border-top: 1px solid var(--grey); }

main > div { margin: 6em 0; }

figure {margin: 0; padding: 0; overflow: hidden; border-radius: 4px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); position: relative; }
figure.drawing, header figure { box-shadow: none; }
figure img { display: block; width: 100%; height: auto; }

header figure { width: 90px; }
header button { display: none; }

figure.fullWidth { width: 80%; margin: 3em auto; }
figure.drawing.fullWidth { margin: 0 auto; }
figure.half { width: 48%; margin: 1.5em 0; flex-shrink: 0; }
figure.third { width: 31%; margin: 1.5em 0; flex-shrink: 0; }
figure.quarter { width: 25%; margin: 1.5em 0; flex-shrink: 0; }

.drawing img { mix-blend-mode: multiply; }

.flex { display: flex; gap: 2.4em; margin-top: 1.5em; }
.between { justify-content: space-between; }
.alignStart { align-items: flex-start; }
.wrap { flex-wrap: wrap; }

header.flex, header .flex { margin: 0; }
header .flex { align-items: center; }

nav a { display: inline-block; padding: 0.5em 1em; }
nav.sticky { position: fixed; top: 0; left: 0; width: 100%; padding: 0.5em 0; z-index: 3; display: flex; justify-content: center; background: var(--paper); border-bottom: 1px solid var(--sky); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); }

a.button { display: inline-block; padding: 1em 2em; margin-left: 1em; border-radius: 6px; background: var(--jelly); color: var(--white); text-transform: uppercase; text-decoration: none; font-weight: 500; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); }
a.button:hover { background: var(--candy); color: var(--deepVelvet); box-shadow: none; }

.whitebg .cta { margin-top: 6em; background: none; }
.cta a.button { margin-left: auto; display: block; width: fit-content; }

.whitebg { padding-top: 2.2em; padding-bottom: 2.2em; background: url('../img/paper.png') repeat top left rgba(255, 255, 255, 0.5); background-attachment: fixed; background-blend-mode: screen; }
.whitebg h2 { margin-top: 0; }
.shiftedContent p:last-of-type { width: 50%; margin-left: auto; }

.staggered figure:first-of-type { margin-top: -16em; }
.staggered figure { margin-top: 8em; }
.staggered figure:last-of-type { margin-top: 22em; }

.shiftedUp { margin-top: -12em; padding-top: 10em; padding-bottom: 12em; }

.shiftedUp + div { margin-top: -18em; }

.offSet { padding-top: 28em; margin-top: -24em; }
.offSet + div { margin-top: 12em; }

.flex:has(.topic), .zines { margin-top: 3em; }
.zines { margin-bottom: -10em; }

details { padding: 2em; box-sizing: border-box; background: var(--paper); border-radius: 4px; border: 1px solid var(--grey); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); margin-top: 1.5em; }
.topic { flex-basis: 48%; text-align: right; position: relative; }
div.topic:nth-child(even) { text-align: left; }

.topic h3, summary { margin-top: 0; padding: 0.25em 0; border-bottom: 1px solid var(--dusk);}
summary { font-weight: 700; }
.topic h3 { font-weight: 400; color: var(--dusk); }
.topic h3 strong { font-weight: 600; color: var(--deepSea); }

.faq.closed h3:hover span, .faq h3 span { transform: rotate(90deg); }
.faq.closed h3:hover span::after, .faq h3 span::after { transform: translate(-50%, -50%) rotate(-90deg); } */

.zines.flex figure { flex-basis: 17%; }

.hero { position: relative; margin-top: 6em; }
.hero figure.drawing { position: absolute; top: -5em; left: 10vw; width: 50%; }
.hero div figure { width: 50%; min-width: 360px; margin: 8.5em 0 0 auto; }
.hero div { width: 62%; margin-left: auto; }

.hero + div { margin-top: -10em; }
.hero + div h2 { width: 60%; }

form { width: 70%; margin: 1.5em auto; }
label, input, textarea { display: block; width: 100%; margin: 2em 0 0; font-size: 1em; padding: 0 1em; }
input, textarea { margin: 1em 0 0; padding: 1em; border-radius: 4px; border: 1px solid var(--dusk); box-sizing: border-box; }
input[type="submit"] { width: fit-content; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; color: var(--white); background: var(--sky); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); margin-left: auto; padding: 1em 2em;}
input[type="submit"]:hover { background: var(--dusk); box-shadow: none;  }

.hide { display: none; }

@keyframes appear {
  0% { top: 2em; opacity: 0; }
  70% { top: 0.5em; }
  100% { top: 0; opacity: 1; }
}

@keyframes slideLeft {
  0% { left: -10vw; opacity: 0; }
  70% { opacity: 1; }
  100% { left: 0; }
}

@keyframes slideRight {
  0% { right: -10vw; opacity: 0; }
  70% { opacity: 1; }
  100% { right: 0; }
}

.appear { animation: appear 0.6s ease-in forwards; }


div.topic:nth-child(odd).slide { animation: slideLeft 0.5s ease-in forwards; }
div.topic:nth-child(even).slide { animation: slideRight 0.5s ease-in forwards; }

.cookies { position: fixed; bottom: 0; left: 0; width: 100dvw; padding: 1em; box-sizing: border-box; background: var(--paper); border-top: 1px solid var(--grey); box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.1); max-height: 60em; transition: max-height 0.2s ease-in-out; transition: padding 0.2s ease-in-out; }
.cookies p, .cookies button { font-size: 0.9em; margin: 0; }
.cookies p { margin-bottom: 1em; }
.cookies button { min-width: 135px; }
.cookies .flex { margin: 0; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end;  gap: 1em; }
.cookies.hide { max-height: 0; padding: 0; overflow: hidden; }

footer .cookies button { display: block; background: var(--deepSea); color: var(--white); border: none; padding: 0.5em 0.75em; font-size: 1em; border-radius: 4px; }
footer .cookies button.reject { background: var(--blaze); }

#testimonials p { font-weight: 300; position: relative; padding: 1em 0 0 2em; margin: 3em 0 0; }
#testimonials p:first-of-type { margin-top: 1.5em; }
#testimonials p::before { font-weight: 900; font-style: italic; content: "\0022"; display: block; font-size: 15em; color: var(--lightGrey); position: absolute; top: 0.3em; left: -0.1em; z-index: -1; }

@media screen and (max-width: 1110px) {
  header, main>div, footer { padding-left: 5vw; padding-right: 5vw; }
  .flex { gap: 1em; }
  form { width: 80%;}
  .hero figure.drawing { left: 5vw; }
}

@media screen and (max-width: 975px) {
  .hero a.button { margin-left: 0; margin-top: 1.5em; }
  .hero div figure { display: none; }
  .hero + div { margin-top: 3em; }
  .hero + div h2 {width: 100%; }
  form { width: 100%; }
}

@media screen and (max-width: 940px) {
  p.logo { font-size: 3em; }
  header figure { width: 75px; margin-left: 1em; }
}

@media screen and (max-width: 895px) {
  nav a { padding: 0.5em; }
}

@media screen and (max-width: 840px) {
  .shiftedContent p:last-of-type { width: 100%; }
  .staggered figure:first-of-type { margin-top: 0; }
  .staggered figure:last-of-type { margin-top: 8em; }
  .shiftedUp { margin-top: -8em; }
  .zines.flex figure { flex-basis: 30%; }

  .flex:has(figure.drawing.half) { display: block; }
  .flex.staggered:has(figure.drawing.half) { display: flex; }
  .flex figure.drawing.half { width: 70%; margin: 1.5em auto; }
  .flex.staggered figure.drawing.half { width: 48%; }
}

@media screen and (max-width: 790px) {
  header nav { display: none; }

  header nav.sticky { display: none; }
  header nav.active, header nav.active.sticky { display: block; position: fixed; top: 0; right: 0; left: auto; width: 60%; height: 100vh; background: var(--paper); border-left: 1px solid var(--sky); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); padding: 20% 5vw 10% 1.5em; box-sizing: border-box; }

  header nav a { display: block; text-align: right; padding: 1.5em 0 1.5em 1em; }

  header button { display: block; position: relative; width: 3em; height: 2.5em; background: none; border: none; transform: rotate(0deg); transition: .4s ease-in-out; cursor: pointer; }
  header button span { display: block; position: absolute; height: 18%; width: 100%; background: var(--charcoal); border-radius: 4px; opacity: 1; left: 0; top: 50%; transform: translateY(-50%) rotate(0deg); transition: .2s ease-in-out; }
  header button span:first-child { top: 0px; transform: translateY(0); }
  header button span:last-child { bottom: 0; top: auto; transform: translateY(0); }

  header button.active { position: fixed; top: 3em; right: 5vw; z-index: 5; }
  header button.active span:first-child { top: 50%; transform: translateY(-50%); transform: rotate(135deg); }
  header button.active span:last-child { opacity: 0; left: -100%; }
  header button.active span { top: 50%; transform: rotate(-135deg);}

}

@media screen and (max-width: 770px) {
  .hero figure.drawing { position: relative; left: 0; top: 0; width: 80%; margin: 1.5em auto; }
  .hero div { width: 100%; }
  .hero { display: flex; flex-direction: column-reverse; margin-top: 1em; }
  .hero a.button { margin-left: 1em; margin-top: 0; }

  .flex:has(.topic) { display: block; }
  .topic { margin: 3em 0 0;}
  .topic:nth-child(odd) { text-align: left; }

  .flex.staggered { display: block; }
  .flex.staggered figure.drawing.half { width: 80%; }
  .staggered figure.drawing.quarter { display: none; }
}

@media screen and (max-width: 680px) {
  figure.fullWidth { width: 100%; }
  .whitebg .cta, #about, #faq, #contact { margin-top: 5em; }
}

@media screen and (max-width: 600px) {
  .flex.alignStart { flex-direction: column; }
  .flex.alignStart figure.third { width: 100%; }
  .flex.alignStart figure.third + div h3 { margin-top: 0; }
  .hero a.button { margin-left: 0; margin-top: 1.5em; }
  .faq h3 { font-size: 1.2em; }
  div.topic:nth-child(odd).slide, div.topic:nth-child(even).slide { animation: none; }
}

@media screen and (max-width: 560px) {
    .cookies p { margin-bottom: 0; }
    .cookies .flex { display: block; }
    .cookies button { width: 100%; margin-top: 1em; }
}

@media screen and (max-width: 500px) {
  .zines.flex figure { flex-basis: 45%; }
  a.button, .cta a.button, input[type="submit"] { display: block; width: 100%; margin: 1.5em 0; box-sizing: border-box; text-align: center; }
}