:root {
  color-scheme: light;
  --green: #282626;
  --paper: #f7f9f4;
  --lime: #86deff;
  --muted: #565b50;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: var(--green);
  background: var(--green);
}

* { box-sizing: border-box; }
body { margin: 0; padding: 14px; min-width: 280px; }
.page {
  min-height: calc(100svh - 28px);
  padding: 28px 42px 24px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--paper);
  border-radius: 3px;
}
.masthead, footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: .875rem;
}
.masthead { padding-bottom: 24px; border-bottom: 1px solid #163d2b35; }
.shop-name { font-weight: 600; }
.status { font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; }
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0 42px;
  text-align: center;
}
.wordmark {
  width: min(100%, 370px);
  aspect-ratio: 1417 / 1469;
  position: relative;
  overflow: hidden;
  margin: 0 0 30px;
}
.official-logo {
  /* Frame the original artwork's alpha bounds; the source file is unchanged. */
  position: absolute;
  width: 141.1432604%;
  max-width: none;
  height: auto;
  left: -18.5603387%;
  top: -20.6943499%;
}
h1 { margin: 0 0 14px; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.25; }
p { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--muted); }
.instagram {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  margin-top: 28px;
  padding: 17px 22px;
  min-height: 58px;
  background: var(--green);
  color: var(--paper);
  border: 1px solid var(--green);
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.instagram svg { flex-shrink: 0; }
.instagram .arrow { margin-left: 12px; }
.instagram:hover { background: var(--lime); color: var(--green); transform: translateY(-2px); }
.instagram:active { transform: translateY(0); }
.instagram:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.handle { display: block; margin-top: 15px; font-size: .875rem; color: var(--muted); }
footer { border-top: 1px solid #163d2b35; padding-top: 23px; }
.signoff { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.125rem; }

@media (max-width: 600px) {
  body { padding: 9px; }
  .page { min-height: calc(100svh - 18px); padding: 22px 20px 20px; }
  .masthead { padding-bottom: 21px; gap: 10px; }
  .status { font-size: .75rem; letter-spacing: .055em; }
  .shop-name { font-size: .875rem; }
  main { padding: 34px 0; }
  .wordmark { width: min(100%, 270px); margin-bottom: 26px; }
  h1 { max-width: 260px; margin-left: auto; margin-right: auto; font-size: 1.65rem; }
  p { max-width: 320px; font-size: 1rem; line-height: 1.65; }
  .desktop-break { display: none; }
  .instagram { gap: 10px; padding: 16px; margin-top: 26px; }
  .instagram .arrow { margin-left: 0; }
  footer { padding-top: 20px; }
}
@media (max-width: 350px) {
  .masthead { align-items: flex-start; flex-direction: column; gap: 8px; }
  .instagram { flex-wrap: wrap; }
  .instagram .arrow { display: none; }
  footer { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .instagram { transition: none; }
}

.header-links { display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:flex-end; }
.header-links a, .events-link { color:var(--green); text-underline-offset:5px; font-weight:600; }
.header-links a { padding:10px 0; }
.events-link { display:inline-block; margin-top:24px; padding:12px 8px; }
.events-link:focus-visible,.header-links a:focus-visible {outline:3px solid var(--green);outline-offset:4px;}
.events-page main { display:block; text-align:left; padding:42px 0 20px; }
.events-intro { max-width:760px; margin:0 auto 28px; text-align:center; }
.events-intro h1 { max-width:none; font-size:clamp(2rem,4vw,3.25rem); }
.events-intro p { max-width:none; }
.events-calendar { display:block; width:100%; height:920px; border:1px solid #163d2b25; border-radius:20px; background:#f8f4ea; }
.calendar-fallback { margin-top:18px; text-align:center; font-size:.875rem; }
.calendar-fallback a {color:var(--green);text-underline-offset:4px;}
@media(max-width:600px){.header-links{gap:12px}.events-page .page{padding-inline:14px}.events-page main{padding-top:30px}.events-calendar{height:850px;border-radius:14px}.calendar-fallback{max-width:none}.events-page .masthead{align-items:center;flex-direction:row}}