@font-face {
  font-family:Atelier Display;
  src:url('assets/tan-st-canard.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:Atelier Script;
  src:url('assets/fineday-one.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
:root {
  --green:#0C3722;
  --pink:#FFB5B1;
  --coral:#FEA5A1;
  --cream:#FFFFDB;
  --display:'Atelier Display',Georgia,serif;
  --script:'Atelier Script',cursive;
  --body:Arial,Helvetica,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}
body {
  margin:0;
  background:var(--green) url('assets/green-paper.webp') repeat;
  background-size:690px 150px;
  color:var(--pink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.65
}
a {
  color:inherit;
  text-underline-offset:.25em
}
a,button {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible {
  outline:3px solid currentColor;
  outline-offset:6px
}
img {
  display:block;
  max-width:100%;
  height:auto
}
figure,p,h1,h2,h3 {
  margin:0
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:400;
  line-height:1.28
}
p+p {
  margin-top:1rem
}
.wrap {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto
}
.eyebrow {
  font-size:.75rem;
  letter-spacing:.14em;
  font-weight:700;
  line-height:1.5
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:28px;
  border-bottom:1px solid #ffb5b15e
}
.wordmark {
  font-family:var(--display);
  font-size:2rem;
  line-height:1;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:14px
}
.wordmark span {
  font-family:var(--body);
  font-size:.6875rem;
  letter-spacing:.2em;
  writing-mode:vertical-rl;
  border-left:1px solid currentColor;
  padding-left:10px;
  line-height:1.3
}
.site-header nav {
  display:flex;
  gap:34px;
  font-size:.875rem
}
.site-header nav a {
  text-decoration:none;
  padding-block:10px
}
.site-header nav a:hover {
  text-decoration:underline
}
.hero {
  padding-top:68px;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:30px 60px;
  align-items:center
}
.hero h1 {
  font-size:clamp(4rem,7.8vw,7.5rem);
  letter-spacing:0;
  margin:44px 0 38px
}
.script {
  font-family:var(--script);
  font-weight:400
}
.hero h1 .script {
  display:block;
  font-size:1.05em;
  line-height:1.1;
  letter-spacing:0;
  white-space:nowrap;
  transform:rotate(-6deg);
  margin:0 0 0 18px
}
.hero-intro {
  color:var(--cream);
  font-size:1.0625rem;
  margin-bottom:28px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:var(--pink);
  color:var(--green);
  font-size:.9375rem;
  font-weight:700;
  text-decoration:none;
  padding:16px 22px;
  min-height:54px;
  transition:transform .2s,background .2s
}
.button:hover {
  background:var(--cream);
  transform:translateY(-2px)
}
.button span[aria-hidden] {
  font-size:1.4rem;
  font-weight:400;
  line-height:1
}
.hero-poster {
  width:100%;
  max-width:370px;
  justify-self:center;
  transform:rotate(4deg)
}
.hero-poster img {
  border:1px solid #ffb5b157
}
.hero-poster figcaption {
  font-size:.6875rem;
  letter-spacing:.12em;
  margin-top:14px;
  text-align:center
}
.hero-bottom {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:40px 24px;
  margin-top:15px;
  font-size:.6875rem;
  letter-spacing:.1em
}
.hero-bottom a {
  font-size:.875rem;
  letter-spacing:0;
  text-decoration:none
}
.hero-bottom a span {
  margin-left:20px
}
.about {
  background:var(--cream);
  color:var(--green);
  padding-block:90px
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:64px
}
.about-grid>.eyebrow {
  padding-top:12px
}
.about h2 {
  font-size:clamp(2.2rem,4.2vw,4rem);
  letter-spacing:0;
  margin-bottom:32px
}
.about-copy {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px
}
.about-copy p {
  margin:0;
  max-width:36ch
}
.club {
  padding-block:94px 100px
}
.club-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:64px
}
.club-heading>.eyebrow {
  padding-top:12px
}
.club h2 {
  font-size:clamp(2.15rem,4.2vw,4rem);
  letter-spacing:0
}
.accent {
  color:var(--coral)
}
.club-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
  margin-top:64px
}
.club-poster {
  width:100%;
  max-width:355px;
  justify-self:center;
  transform:rotate(-4deg)
}
.club-copy {
  max-width:440px
}
.invitation {
  font-size:2.8rem;
  line-height:1.2;
  transform:rotate(-5deg);
  margin-bottom:28px
}
.club h3 {
  font-size:clamp(1.7rem,2.5vw,2.5rem);
  margin-bottom:24px
}
.club-copy>p:not(.script) {
  color:var(--cream)
}
.club-copy .aside {
  font-size:1.125rem;
  font-style:italic;
  margin-top:16px
}
.next-event {
  border-top:1px solid #ffb5b15e;
  margin-top:32px;
  padding-top:26px
}
.next-event>p:not(.eyebrow) {
  color:var(--cream);
  font-size:.9375rem
}
.text-link {
  display:inline-flex;
  gap:34px;
  align-items:center;
  font-weight:700;
  margin-top:18px
}
.contact {
  background:var(--green);
  padding-top:65px;
  border-top:1px solid #ffb5b14a
}
.contact-grid {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:80px;
  align-items:center;
  margin:40px 0 75px
}
.contact h2 {
  font-size:clamp(2.5rem,5.6vw,5.25rem);
  letter-spacing:0
}
.contact-grid p {
  color:var(--cream);
  max-width:32ch;
  margin-bottom:25px
}
.email {
  display:block;
  width:fit-content;
  margin-top:20px;
  font-size:.9375rem;
  overflow-wrap:anywhere
}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-block:30px;
  border-top:1px solid #ffb5b15e
}
footer p {
  font-size:.875rem
}
footer .wordmark {
  font-size:1.6rem
}
.font-credit {
  font-size:.75rem
}
.skip-link {
  position:absolute;
  z-index:5;
  top:0;
  left:20px;
  background:var(--cream);
  color:var(--green);
  padding:12px;
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:translateY(0)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@media(min-width:1500px) {
  .hero {
    padding-top:85px;
    padding-bottom:10px
  }
  .hero-poster {
    max-width:410px
  }
}
@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .hero {
    gap:35px
  }
  .hero h1 {
    font-size:7.5vw
  }
  .hero-poster {
    max-width:310px
  }
  .about-grid,.club-heading {
    grid-template-columns:1fr 2.4fr;
    gap:30px
  }
  .club-grid {
    gap:60px
  }
  .contact-grid {
    gap:35px
  }
  .about-copy {
    gap:24px
  }
}
@media(max-width:650px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    padding-block:23px
  }
  .wordmark {
    font-size:1.65rem;
    gap:10px
  }
  .wordmark span {
    font-size:.6rem;
    padding-left:8px
  }
  .site-header nav {
    gap:18px
  }
  .site-header nav a {
    font-size:.875rem
  }
  .site-header nav a:first-child {
    display:none
  }
  .hero {
    padding-top:45px;
    grid-template-columns:1fr;
    gap:35px
  }
  .hero h1 {
    font-size:clamp(3.25rem,15.5vw,6rem);
    margin:32px 0
  }
  .hero h1 .script {
    margin-left:12px;
    max-width:100%
  }
  .hero-intro {
    font-size:1rem
  }
  .hero-poster {
    max-width:270px;
    margin:20px 0 0;
    transform:rotate(3deg)
  }
  .hero-bottom {
    margin:0;
    gap:20px;
    padding:16px 0 25px
  }
  .hero-bottom>span {
    max-width:20ch;
    font-size:.625rem
  }
  .hero-bottom a {
    font-size:.8125rem
  }
  .hero-bottom a span {
    margin-left:8px
  }
  .about {
    padding-block:54px
  }
  .about-grid,.club-heading {
    grid-template-columns:1fr;
    gap:25px
  }
  .about h2 {
    font-size:2.25rem;
    margin-bottom:25px
  }
  .about-copy {
    grid-template-columns:1fr;
    gap:18px
  }
  .club {
    padding-block:55px 60px
  }
  .club h2 {
    font-size:clamp(1.7rem,7vw,2.6rem)
  }
  .club-grid {
    grid-template-columns:1fr;
    gap:40px;
    margin-top:38px
  }
  .club-poster {
    max-width:270px;
    order:2
  }
  .club-copy {
    max-width:none
  }
  .invitation {
    font-size:2.5rem;
    margin-bottom:24px
  }
  .club h3 {
    font-size:1.9rem
  }
  .next-event {
    margin-top:26px
  }
  .contact {
    padding-top:44px
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:30px;
    margin:30px 0 48px
  }
  .contact h2 {
    font-size:clamp(2.5rem,10vw,3.6rem)
  }
  footer {
    flex-wrap:wrap;
    gap:25px
  }
  footer p {
    font-size:.8125rem
  }
  .font-credit {
    width:100%
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    transform:none!important
  }
}