:root {
  --teal: #0f3d46;
  --ochre: #d99a2e;
  --pink: #e07a6a;
  --cream: #f6f1e7;
  --charcoal: #3a332c;
  --paper: #fffaf1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: "Avenir Next", Avenir, Montserrat, system-ui, sans-serif;
}

.site-header {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  max-width: 1440px;
  margin: auto;
  padding: 28px clamp(24px, 6vw, 88px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand img { display: block; width: clamp(600px, 75vw, 1080px); height: auto; }
.opening-pill {
  color: var(--ochre);
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 13px 22px 11px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero {
  min-height: 760px;
  background: var(--teal);
  color: var(--cream);
  padding: 145px clamp(24px, 7vw, 100px) 72px;
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(460px, 1.2fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  overflow: hidden;
}
.hero-copy { max-width: 560px; justify-self: end; }
.eyebrow {
  color: var(--ochre);
  margin: 0 0 12px;
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, .closing h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}
h1 {
  margin: 0;
  font-size: clamp(3.4rem, 6vw, 6.8rem);
  line-height: .91;
  letter-spacing: -.045em;
}
h1 em { color: var(--ochre); font-weight: 400; }
.hero-location {
  display: block;
  margin-top: .35em;
  font-size: .38em;
  line-height: 1.1;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
}
.intro {
  margin: 28px 0 18px;
  padding-left: 34px;
  position: relative;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.55;
}
.intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 20px;
  height: 20px;
  background: repeating-conic-gradient(from -20deg, var(--pink) 0 9deg, transparent 9deg 38deg);
}
address {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-style: normal;
  line-height: 1.45;
  margin: 0 0 24px;
}
address > span:first-child { color: var(--ochre); font-size: .75rem; margin-top: 5px; }
.primary-cta {
  display: inline-block;
  background: var(--ochre);
  color: var(--teal);
  font-family: "Patrick Hand", "Bradley Hand", cursive;
  text-decoration: none;
  border-radius: 999px;
  padding: 16px 28px 14px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease;
}
.primary-cta:hover { transform: translateY(-2px); background: #e6ab48; }
.join-list { width: max-content; max-width: 100%; margin-top: 16px; text-align: center; }
.secondary-cta {
  display: inline-block;
  color: var(--cream);
  text-decoration: none;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 14px 24px 12px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.join-list p {
  margin: 9px 0 0;
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .92rem;
}

.hero-visual {
  position: relative;
  width: min(100%, 790px);
  aspect-ratio: 1.12 / 1;
  justify-self: start;
}
.hero-sun-spray {
  position: absolute;
  z-index: 0;
  top: -27%;
  left: -20%;
  width: 142%;
  height: auto;
  opacity: .48;
  transform: rotate(-3deg);
  pointer-events: none;
}
.hero-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  border-radius: 48% 48% 10% 10% / 32% 32% 8% 8%;
  display: block;
}
.hero-sketch-line {
  position: absolute;
  z-index: 2;
  right: -1%;
  bottom: -45px;
  width: 68%;
  height: auto;
  transform: rotate(-2deg);
  pointer-events: none;
}
.roundel {
  position: absolute;
  z-index: 3;
  left: -38px;
  bottom: 16%;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #edbbd4;
  color: var(--cream);
  border: 5px solid var(--teal);
  display: grid;
  place-items: center;
  transform: rotate(-8deg);
}
.roundel-type {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.roundel-type path { fill: none; }
.roundel-type text {
  fill: var(--cream);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 1.25px;
}
.roundel img { position: relative; z-index: 1; width: 58px; height: 58px; object-fit: contain; }

.welcome {
  position: relative;
  isolation: isolate;
  background: var(--paper);
  padding: 84px clamp(24px, 7vw, 100px) 104px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.1fr;
  gap: 0;
}
.welcome::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: -18px;
  height: 20px;
  background: radial-gradient(circle at 20px -2px, transparent 20px, var(--paper) 21px) 0 0 / 40px 22px repeat-x;
}
.welcome article, .feeling { padding: 0 clamp(20px, 3vw, 44px); text-align: center; }
.welcome article + article, .feeling { border-left: 1px solid rgba(58,51,44,.2); }
.mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 17px;
  border-radius: 43% 57% 51% 49%;
  background: color-mix(in srgb, var(--pink) 22%, transparent);
  color: var(--ochre);
  display: grid;
  place-items: center;
  font: 2.5rem Georgia, serif;
}
.mark.illustrated { overflow: visible; }
.mark.illustrated img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  max-width: none;
}
.mark.wheel-mark img { width: 116px; height: 116px; }
.mark.tall-pot-mark { margin-bottom: 19px; }
.mark.tall-pot-mark img { width: 78px; height: 98px; transform: translateY(-5px) rotate(2deg); }
.mark.pot-mark img { width: 100px; height: 100px; }
.welcome h2 {
  margin: 0 0 10px;
  color: var(--teal);
  font-family: "Patrick Hand", "Bradley Hand", cursive;
  font-size: .96rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.welcome article p { max-width: 240px; margin: auto; line-height: 1.55; font-family: Georgia, serif; font-size: 1rem; }
.feeling { position: relative; display: grid; place-content: center; color: var(--teal); border-left: 0; }
.feeling::before {
  content: "";
  position: absolute;
  left: 0;
  top: 118px;
  bottom: 12px;
  width: 1px;
  background: rgba(58,51,44,.2);
}
.feeling-title {
  position: relative;
  z-index: 3;
  margin: 0 -70px;
  font-family: "Patrick Hand", "Bradley Hand", cursive;
  font-style: italic;
  font-size: clamp(3rem, 4.8vw, 4.8rem);
  line-height: 1.05;
  transform: translateY(-28px) rotate(-7deg);
}
.feeling-title span { white-space: nowrap; }
.feeling-splash {
  position: absolute;
  right: -4px;
  bottom: -42px;
  width: clamp(72px, 7vw, 108px);
  height: auto;
  transform: rotate(21deg);
}
.feeling-subtitle { max-width: 240px; margin: 18px auto 0; font-family: Georgia, serif; font-size: .98rem; line-height: 1.5; }
.feeling > img { width: 64px; height: 72px; object-fit: contain; justify-self: center; margin-top: 8px; transform: rotate(5deg); }
.dots-accent {
  position: absolute;
  z-index: 1;
  height: auto;
  opacity: .78;
  pointer-events: none;
}
.dots-right-main { right: clamp(18px, 3vw, 44px); bottom: 34px; width: clamp(74px, 8vw, 120px); transform: rotate(-7deg); }
.dots-right-large { right: clamp(70px, 8vw, 118px); bottom: 4px; width: clamp(92px, 10vw, 148px); transform: rotate(16deg); clip-path: inset(18% 0 0 24%); opacity: .62; }
.dots-right-edge { right: clamp(-70px, -4vw, -38px); bottom: -48px; width: clamp(74px, 8vw, 120px); transform: rotate(-18deg); }
.dots-left-main { left: clamp(-28px, -1vw, -10px); top: 22%; width: clamp(62px, 6vw, 92px); transform: rotate(12deg); clip-path: inset(0 24% 20% 0); opacity: .65; }
.dots-left-small { left: clamp(28px, 4vw, 58px); bottom: 18px; width: clamp(42px, 4.5vw, 68px); transform: rotate(-20deg); clip-path: inset(28% 0 0 18%); opacity: .56; }
.dot-left-large {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 3vw, 46px);
  top: 31%;
  width: clamp(30px, 3vw, 44px);
  aspect-ratio: 1;
  border-radius: 46% 54% 49% 51%;
  background: var(--teal);
  opacity: .72;
  transform: rotate(14deg);
  pointer-events: none;
}
.scallop-divider {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 78px;
  background: url("assets/handdrawn-scallop.png") center 53% / min(1100px, 94vw) auto no-repeat;
  pointer-events: none;
}

.closing {
  min-height: 250px;
  background: var(--ochre);
  display: grid;
  grid-template-columns: auto minmax(300px, .8fr) minmax(380px, 1.2fr);
  align-items: center;
  gap: 28px;
  overflow: hidden;
  padding-left: clamp(24px, 7vw, 100px);
}
.closing-sun {
  position: relative;
  width: clamp(98px, 11vw, 158px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
}
.closing-sun-ring {
  position: absolute;
  z-index: 1;
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: fill;
  transform: rotate(-6deg);
}
.closing-sun-mark {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
  padding: clamp(10px, 1.2vw, 17px);
  border-radius: 50%;
}
.closing h2 { color: var(--teal); margin: 0 0 10px; font-size: clamp(2.2rem, 4vw, 4.3rem); line-height: 1; }
.closing p { margin: 0; color: var(--teal); font-size: 1rem; font-weight: 800; line-height: 1.7; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.closing-message span { display: block; }
.closing-image { align-self: stretch; background: linear-gradient(90deg, var(--ochre), transparent 22%), url("assets/pottery-tools.png") 88% 61% / 175% auto no-repeat; }

footer {
  background: var(--teal);
  color: var(--cream);
  padding: 28px clamp(24px, 7vw, 100px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: .78rem;
  letter-spacing: .08em;
}

@media (min-width: 901px) {
  .hero { min-height: 940px; padding-top: clamp(330px, 33vw, 470px); }
}

@media (max-width: 1120px) and (min-width: 901px) {
  .site-header { justify-content: center; }
  .opening-pill { display: none; }
}

@media (max-width: 900px) {
  .site-header { position: relative; background: var(--teal); padding-bottom: 10px; }
  .opening-pill { display: none; }
  .hero { min-height: auto; padding-top: 36px; grid-template-columns: 1fr; }
  .hero-copy { justify-self: stretch; }
  h1 { font-size: clamp(3.4rem, 14vw, 5.5rem); }
  .hero-visual { justify-self: center; width: min(100%, 650px); }
  .welcome { grid-template-columns: 1fr 1fr; row-gap: 54px; }
  .welcome article:nth-child(3) { border-left: 0; }
  .closing { grid-template-columns: auto 1fr; padding-block: 44px; }
  .closing-image { display: none; }
}

@media (max-width: 600px) {
  .site-header { justify-content: center; }
  .brand img { width: min(98vw, 760px); }
  .hero { padding-inline: 22px; padding-bottom: 64px; gap: 48px; }
  h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
  .hero-visual { aspect-ratio: .84 / 1; width: 92%; }
  .hero-photo { border-radius: 48% 48% 12% 12% / 25% 25% 8% 8%; }
  .hero-sketch-line { width: 72%; right: -3%; bottom: -34px; }
  .roundel { width: 116px; left: -22px; bottom: 12%; }
  .roundel img { width: 42px; height: 42px; }
  .welcome { grid-template-columns: 1fr; padding-top: 70px; padding-bottom: 90px; }
  .welcome article, .feeling { padding: 34px 12px; border-left: 0 !important; }
  .welcome article + article, .feeling { border-top: 1px solid rgba(58,51,44,.2); }
  .feeling::before { display: none; }
  .feeling-title { margin-inline: -12px; font-size: clamp(2.9rem, 13vw, 4.2rem); transform: translateY(-22px) rotate(-7deg); }
  .feeling-splash { right: 0; bottom: -38px; width: 76px; }
  .dots-right-main { right: 8px; bottom: 28px; width: 76px; }
  .dots-right-large { right: 52px; bottom: 2px; width: 92px; }
  .dots-right-edge { right: -48px; bottom: -36px; width: 76px; }
  .dots-left-main { left: -24px; top: 20%; width: 62px; }
  .dots-left-small { left: 18px; bottom: 18px; width: 46px; }
  .dot-left-large { left: 18px; top: 27%; width: 32px; }
  .closing { grid-template-columns: 84px 1fr; padding: 38px 22px; gap: 18px; }
  .closing-sun { width: 84px; }
  .closing h2 { font-size: 2.2rem; }
  footer { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .primary-cta { transition: none; }
}