@font-face { font-family: Fredoka; font-style: normal; font-weight: 500; font-display: swap; src: url(fredoka-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Fredoka; font-style: normal; font-weight: 700; font-display: swap; src: url(fredoka-latin-700-normal.woff2) format("woff2"); }

:root {
  --orange: #f28c28;
  --coral: #e15a45;
  --cyan: #2ec4e6;
  --cream: #f6f1e8;
  --plum: #5c1646;
  --ink: #100814;
  --ink-deep: #07050a;
}
* { box-sizing: border-box; }
html { margin: 0; background: var(--ink-deep); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Fredoka, "Avenir Next", sans-serif;
  color: var(--cream);
  background:
    radial-gradient(ellipse 120% 95% at 6% -8%,
      rgba(242, 140, 40, .42) 0%,
      rgba(242, 140, 40, .22) 26%,
      rgba(242, 140, 40, .08) 52%,
      transparent 82%),
    radial-gradient(ellipse 105% 88% at 108% 0%,
      rgba(225, 90, 69, .46) 0%,
      rgba(225, 90, 69, .24) 28%,
      rgba(225, 90, 69, .08) 54%,
      transparent 80%),
    radial-gradient(ellipse 110% 78% at 70% 118%,
      rgba(92, 22, 70, .58) 0%,
      rgba(92, 22, 70, .32) 32%,
      rgba(92, 22, 70, .10) 58%,
      transparent 84%),
    linear-gradient(168deg, #2d1232 0%, #160a18 48%, #0a060c 100%);
}
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: max(56px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(96px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.about-link {
  position: fixed;
  top: max(6px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 4;
  color: var(--cream);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: .92;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  transition: opacity .3s ease;
}
.about-link:hover { color: var(--orange); }
.about-link.out { opacity: 0; }
.veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #07050a;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease .18s;
}
.veil.on { opacity: 1; pointer-events: auto; }
body.leaving { overflow: hidden; }
.slide-sheet {
  position: fixed;
  inset: 0;
  z-index: 42;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(246,241,232,.16), rgba(246,241,232,.05)),
    radial-gradient(ellipse 120% 95% at 6% -8%, rgba(242,140,40,.42), transparent 82%),
    radial-gradient(ellipse 105% 88% at 108% 0%, rgba(225,90,69,.46), transparent 80%),
    #160a18;
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  transform: translateX(108%);
}
body.slide-leave .slide-sheet {
  transform: translateX(0);
  transition: transform .78s cubic-bezier(.18, .9, .24, 1);
}
body.slide-leave .hero {
  transform: translateX(-38%) scale(.88) rotate(-6deg);
  filter: blur(1.5px);
  transition: transform .78s cubic-bezier(.4, 0, .2, 1), filter .5s ease;
  transform-origin: 50% 45%;
}
body.slide-leave .about-link { opacity: 0; }
.obj {
  position: absolute;
  left: 50%;
  top: 46%;
  animation: burst 1.15s var(--ease, cubic-bezier(.16, 1, .3, 1)) both;
  animation-delay: var(--d, 0s);
}
.obj .bob {
  position: relative;
  animation: bob var(--bt, 5.4s) var(--ease, ease-in-out) infinite;
  animation-delay: var(--d, 0s);
  transform-origin: center;
}
/* 7.55vmin = 68px on a 900px-tall screen; smaller screens get smaller icons so they never crowd. tools/build_public_site.py mirrors these numbers to keep the layout overlap-free. */
.noun { width: clamp(38px, 7.55vmin, 68px); height: auto; aspect-ratio: 68 / 72; display: block; color: #f6f1e8; fill: currentColor; }
.credit {
  position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 3;
  font-size: 11px; color: rgba(246,241,232,.55); letter-spacing: .01em;
  max-width: calc(100% - 32px);
}
.credit a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: inherit; }
.credit .sep { opacity: .6; padding: 0 4px; }
@keyframes burst {
  0% { transform: translate(-50%, -50%) translate(calc(var(--mx) * 0.12), calc(var(--my) * 0.12)) rotate(calc(var(--r) * 2)) scale(0.45); }
  100% { transform: translate(-50%, -50%) translate(calc(var(--mx) * 1.18), calc(var(--my) * 1.12)) rotate(var(--r)) scale(var(--s, 1)); }
}
@keyframes bob {
  0%, 100% { transform: none; }
  50% { transform: translateY(var(--by, -6px)) rotate(var(--br, 4deg)) scale(var(--bs, 1.03)); }
}
.stage {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .32s ease;
}
.stage.out { opacity: 0; }
.mark { margin: 0; width: 100%; }
.logo {
  display: block;
  width: min(460px, 78vw);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.lp {
  animation: logo-pop 0.9s var(--d, 0s) cubic-bezier(.16, 1, .3, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}
.lp.the   { --lx: 0px; --ly: -36px; --lr: -6deg; --d: .30s; }
.lp.r     { --lx: -48px; --ly: 8px; --lr: -16deg; --d: .14s; }
.lp.a     { --lx: 0px; --ly: 18px; --lr: 8deg; --d: .20s; }
.lp.d     { --lx: 48px; --ly: 8px; --lr: 16deg; --d: .26s; }
.lp.place { --lx: 0px; --ly: 32px; --lr: 3deg; --d: .40s; }
.logo .letter.a { fill: #00C7ED; }
@keyframes logo-pop {
  0% {
    opacity: 0;
    transform: translate(var(--lx), var(--ly)) rotate(var(--lr)) scale(0.38);
  }
  64% {
    opacity: 1;
    transform: translate(calc(var(--lx) * -0.14), calc(var(--ly) * -0.14)) rotate(calc(var(--lr) * -0.18)) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.tagline {
  margin: 28px 0 0;
  padding: 9px 20px;
  max-width: min(460px, 100%);
  box-sizing: border-box;
  background: rgba(16, 8, 20, .82);
  border-radius: 999px;
  color: var(--cream);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
  animation: rise 0.7s 0.62s cubic-bezier(.16, 1, .3, 1) both;
}
.actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
  margin-top: 20px; /* the tagline sits between the logo and the buttons */
  padding: 8px;
  background: rgba(16, 8, 20, .82);
  border-radius: 999px;
  animation: rise 0.7s 0.72s cubic-bezier(.16, 1, .3, 1) both;
  max-width: 100%;
}
@keyframes news-up {
  from { opacity: 0; transform: translateY(96px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.actions a {
  color: var(--cream);
  text-decoration: none;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .035em; /* a touch of tracking on the button text */
  padding: 14px 22px;
  border-radius: 999px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.actions a.book {
  background: var(--cyan);
  color: var(--ink);
}
.actions a.book:hover { filter: brightness(1.08); }
.news {
  width: min(410px, 100%);
  margin-top: 22px;
  text-align: left;
  padding: 22px 22px 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.42);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  animation: news-up 1.25s 2.5s cubic-bezier(.22, 1, .36, 1) both;
}
.news h2 {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: 0.035em;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  text-transform: none;
  font-weight: 700;
  color: #fff;
  opacity: .92;
}
.feed {
  display: flex;
  flex-direction: column;
}
.card {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  background: transparent;
  color: #fff;
  border-radius: 0;
  padding: 12px 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.card:last-child { border-bottom: 0; }
.card img {
  width: 56px;
  height: 56px;
  object-fit: contain;  /* posters show whole */
  border-radius: 12px;
  flex: none;
  background: rgba(16,8,20,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.card b {
  display: block;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.card span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: rgba(246,241,232,.72);
}
.feed-empty { margin: 8px; opacity: .7; font-size: 14px; }
.ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* The settle blur lives on .ico, a padded HTML wrapper, never on the <svg> itself: browsers rasterise a
   CSS filter at the filtered box's edge, and on an SVG box (here also scaled) that drew hard hairlines
   along the icon borders. The padding gives the blur room; nothing is clipped at the box edge. */
.ico {
  display: block;
  padding: 24px;
  margin: -24px;
  animation: icon-settle 1s 1.4s ease both;
  /* Safari draws stray magenta/grey hairlines along blurred icon edges unless the blurred layer is
     promoted and told not to take its blur shortcut. Measured in real Safari 27: 301 stray pixels
     without these three lines, 0 with them. */
  will-change: filter, opacity;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.obj svg {
  display: block;
  overflow: hidden;
  scale: 1.2325; /* the original 1.45, 15% smaller */
}
@keyframes icon-settle {
  from { filter: blur(0); opacity: 1; }
  to { filter: blur(1.8px); opacity: .86; }
}
@keyframes icon-settle-mobile {
  from { filter: blur(0); opacity: 1; }
  to { filter: blur(3.6px); opacity: var(--o, .68); }
}
@media (max-width: 700px) {
  .hero { padding-top: max(64px, env(safe-area-inset-top)); }
  .logo { width: min(340px, 86vw); }
  .noun { width: clamp(34px, 11.8vmin, 56px); aspect-ratio: 46 / 50; }
  .obj svg { scale: 0.85; } /* was 1; 15% smaller */
  .ico { animation-name: icon-settle-mobile; }
  .tagline { margin-top: 22px; width: min(320px, 100%); font-size: 15px; border-radius: 22px; padding: 9px 16px; }
  .actions {
    flex-direction: column;
    width: min(320px, 100%);
    border-radius: 28px;
    gap: 6px;
    margin-top: 16px;
  }
  .actions a {
    width: 100%;
    font-size: 16px;
    padding: 14px 16px;
    text-align: center;
    box-sizing: border-box;
  }
  .credit {
    left: max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
    max-width: none;
    text-align: center;
    font-size: 10px;
  }
  .about-link { font-size: 13px; }
  .news { margin-top: 16px; border-radius: 24px; }
}
@media (max-width: 400px) {
  .logo { width: min(300px, 90vw); }
  .actions a { font-size: 15px; padding: 13px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .obj, .obj .bob, .lp, .tagline, .actions, .news, .ico { animation: none; }
  .ico { filter: blur(1.8px); opacity: .86; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .ico { filter: blur(3.6px); opacity: var(--o, .68); }
}

a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 12px; }
.actions a:focus-visible { outline-offset: -3px; outline-color: var(--cream); }
.actions a.book:focus-visible { outline-color: var(--ink); }

.news, .card > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .stage { width: 100%; } }

/* "What's on": a picture-first vertical feed under the hero, one post per published event. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.social {
  width: min(480px, 100%);
  margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-left)) max(64px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
}
#whats-on { scroll-margin-top: 24px; }
.social > h2 { margin: 0 0 16px; font-size: 22px; letter-spacing: 0.01em; }
.post {
  margin: 0 0 20px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.32);
}
.post-media { display: block; background: rgba(16,8,20,.55); }
.post-media img {
  display: block;
  width: 100%;
  height: auto;               /* width/height attributes give the aspect ratio: the poster shows whole */
  max-height: 82vh;
  max-height: 82svh;
  object-fit: contain;
}
/* Event cards crop the display only; detail pages retain the original photo. */
#whats-on .post-media { aspect-ratio: 5 / 4; overflow: hidden; }
#whats-on .post-media img {
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
#whats-on .post-media[href="/events/little-potters-open-studio-portland-friday"] img,
#whats-on .post-media[href="/events/little-potters-open-studio-edgecomb-saturday"] img {
  object-position: center 65%;
}
#whats-on .post-media[href="/events/little-potters-open-studio-portland-saturday"] img {
  object-position: center 60%;
}
.post-body { padding: 16px 18px 18px; min-width: 0; overflow-wrap: anywhere; }
.post-when { margin: 0 0 4px; font-size: 14px; color: var(--orange); font-weight: 600; letter-spacing: 0.01em; }
.post h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.15; letter-spacing: 0.02em; }
.post-blurb { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: rgba(246,241,232,.82); }
.post-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.post--text { background: linear-gradient(160deg, rgba(92,22,70,.55), rgba(255,255,255,.06)); }
.post--text h3 { font-size: 26px; }
.social a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 6px;
  color: var(--cyan);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Intro hold: home-intro.js adds .intro-wait until the icon sprite and fonts have loaded, so the whole
   intro plays from its first frame instead of finishing before anything can be seen. */
html.intro-wait .obj, html.intro-wait .obj .bob, html.intro-wait .lp, html.intro-wait .tagline, html.intro-wait .actions,
html.intro-wait .news, html.intro-wait .ico { animation-play-state: paused; }