/* TOAM — Turn On Airplane Mode
   Rebuilt from the Squarespace 7.1 site settings (fluid-engine grid, type scale,
   section dividers, shape blocks, buttons). Values are the site's own. */

@font-face {
  font-family: "Fredoka One";
  src: url("fonts/fredoka-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Site palette (Squarespace names in comments) ---------- */
:root {
  --green: #223f31;        /* "white"       hsl(151 29% 19%) */
  --ink: #292929;          /* "black"       hsl(0 0% 16%)    */
  --cream: #f7f2e8;        /* "accent"      hsl(40 48% 94%)  */
  --slate: #6e8691;        /* "darkAccent"  hsl(199 14% 50%) */
  --amber: #f5a524;        /* "lightAccent" hsl(37 91% 55%)  */

  --heading: "Fredoka One", ui-rounded, system-ui, sans-serif;
  --body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max-w: 1680px;
  --gutter: 3vw;           /* --pagePadding */
  --m-gutter: 6vw;         /* --sqs-mobile-site-gutter */
  --divider: 6vw;
  --header-h: 69px;
}
@media (min-width: 768px) {
  :root { --header-h: 3.411vw; }
}

/* ---------- Type scale ----------
   Squarespace: desktop/landscape = min((v-1)*1.2vw + 1rem, max((v-1)*.012*1680px + 1rem, v*1rem))
                portrait phones   = (v-1)*.012*min(100vh, 900px) + 1rem                        */
:root {
  --fs-h1: calc(6 * .012 * min(100vh, 900px) + 1rem);
  --fs-h2: calc(3 * .012 * min(100vh, 900px) + 1rem);
  --fs-h3: calc(2 * .012 * min(100vh, 900px) + 1rem);
  --fs-h4: calc(1.5 * .012 * min(100vh, 900px) + 1rem);
  --fs-normal: calc(1.75 * .012 * min(100vh, 900px) + 1rem);
  --fs-small: calc(.6 * .012 * min(100vh, 900px) + 1rem);
  --fs-marquee: calc(.7 * .012 * min(100vh, 900px) + 1rem);
  --fs-button: calc(.3 * .012 * min(100vh, 900px) + 1rem);
}
@media (min-width: 768px), (orientation: landscape) {
  :root {
    --fs-h1: min(calc(6 * 1.2vw + 1rem), max(calc(6 * .012 * 1680px + 1rem), 7rem));
    --fs-h2: min(calc(3 * 1.2vw + 1rem), max(calc(3 * .012 * 1680px + 1rem), 4rem));
    --fs-h3: min(calc(2 * 1.2vw + 1rem), max(calc(2 * .012 * 1680px + 1rem), 3rem));
    --fs-h4: min(calc(1.5 * 1.2vw + 1rem), max(calc(1.5 * .012 * 1680px + 1rem), 2.5rem));
    --fs-normal: min(calc(1.75 * 1.2vw + 1rem), max(calc(1.75 * .012 * 1680px + 1rem), 2.75rem));
    --fs-small: min(calc(.6 * 1.2vw + 1rem), max(calc(.6 * .012 * 1680px + 1rem), 1.6rem));
    --fs-marquee: min(calc(.7 * 1.2vw + 1rem), max(calc(.7 * .012 * 1680px + 1rem), 1.7rem));
    --fs-button: min(calc(.3 * 1.2vw + 1rem), max(calc(.3 * .012 * 1680px + 1rem), 1.3rem));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--green);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--fs-normal);
  line-height: 1.1;
  letter-spacing: calc(var(--fs-normal) * -.03);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--heading);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 0;
}
h1, .t-h1 { font-size: var(--fs-h1); line-height: .912; }
h2, .t-h2 { font-size: var(--fs-h2); line-height: 1.056; }
h3, .t-h3 { font-size: var(--fs-h3); line-height: 1.104; }
h4, .t-h4 { font-size: var(--fs-h4); line-height: 1.128; }
p  { margin: 1rem 0; }
.small { font-size: var(--fs-small); }

.c { color: var(--cream); }        /* sqsrte-text-color--accent */
.dot { color: var(--amber); }      /* sqsrte-text-color--lightAccent */

/* Punctuation is always amber, including inside buttons. */
.btn .dot { color: var(--amber); }

.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;
}

/* ---------- Top bar (inner pages) ---------- */
.topbar {
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-h);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--m-gutter);
  font-family: var(--heading);
  letter-spacing: normal;
  color: var(--cream);
}
.topbar a { text-decoration: none; }
.topbar__logo { font-size: 1.6rem; }
.topbar__link { font-size: 1rem; }
.topbar__link:hover, .topbar__logo:hover { opacity: .75; }
@media (min-width: 768px) {
  .topbar { padding: 0 max(var(--gutter), calc((100% - 1100px) / 2 + var(--gutter))); }  /* lines up with page content */
}

/* ---------- Sections ---------- */
.sec { position: relative; }
.sec__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.sec__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sec__bg::after { content: ""; position: absolute; inset: 0; background: var(--overlay, transparent); }
.sec + .sec .sec__bg { top: calc(var(--divider) * -1); }  /* runs up under the divider above */

.sec--divider { padding-bottom: var(--divider); }
.sec--divider .sec__bg {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 99.89% calc(100% - 5.882vw), 99.27% calc(100% - 5.742vw), 98.42% calc(100% - 5.555vw), 97.35% calc(100% - 5.327vw), 96.07% calc(100% - 5.063vw), 94.59% calc(100% - 4.766vw), 92.93% calc(100% - 4.444vw), 91.10% calc(100% - 4.102vw), 89.10% calc(100% - 3.743vw), 86.95% calc(100% - 3.374vw), 84.65% calc(100% - 3.000vw), 82.22% calc(100% - 2.626vw), 79.68% calc(100% - 2.257vw), 77.02% calc(100% - 1.898vw), 74.27% calc(100% - 1.556vw), 71.42% calc(100% - 1.234vw), 68.51% calc(100% - 0.937vw), 65.52% calc(100% - 0.673vw), 62.48% calc(100% - 0.445vw), 59.40% calc(100% - 0.258vw), 56.29% calc(100% - 0.118vw), 53.15% calc(100% - 0.031vw), 50.00% 100%, 46.85% calc(100% - 0.031vw), 43.71% calc(100% - 0.118vw), 40.60% calc(100% - 0.258vw), 37.52% calc(100% - 0.445vw), 34.48% calc(100% - 0.673vw), 31.49% calc(100% - 0.937vw), 28.58% calc(100% - 1.234vw), 25.73% calc(100% - 1.556vw), 22.98% calc(100% - 1.898vw), 20.32% calc(100% - 2.257vw), 17.78% calc(100% - 2.626vw), 15.35% calc(100% - 3.000vw), 13.05% calc(100% - 3.374vw), 10.90% calc(100% - 3.743vw), 8.90% calc(100% - 4.102vw), 7.07% calc(100% - 4.444vw), 5.41% calc(100% - 4.766vw), 3.93% calc(100% - 5.063vw), 2.65% calc(100% - 5.327vw), 1.58% calc(100% - 5.555vw), 0.73% calc(100% - 5.742vw), 0.11% calc(100% - 5.882vw), 0 calc(100% - 6vw));
}
.sec__stroke {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--divider);
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.sec__stroke path {
  fill: none;
  stroke: var(--stroke);
  stroke-width: 8px;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

.sec__content { position: relative; z-index: 1; }
.sec--hero .b { text-shadow: 0 1px 14px rgba(0, 0, 0, .22); }   /* keeps cream legible over bright sky */
.sec--medium {                     /* section-height--medium */
  min-height: 66vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sec--medium .sec__content { padding: 6.6vh 0; }
@media (min-width: 768px) {
  .sec--medium .sec__content { padding: 6.6vw 0; }
}

/* ---------- Fluid-engine grid ---------- */
.fe {
  --grid-gutter: calc(var(--m-gutter) - 11px);
  --cell-max-width: calc((var(--max-w) - 11px * 7) / 8);
  display: grid;
  position: relative;
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  grid-template-columns: minmax(var(--grid-gutter), 1fr) repeat(8, minmax(0, var(--cell-max-width))) minmax(var(--grid-gutter), 1fr);
  gap: 11px;
  overflow-x: clip;
}
@media (min-width: 768px) {
  .fe {
    --grid-gutter: calc(var(--gutter) - 11px);
    --cell-max-width: calc((var(--max-w) - 11px * 23) / 24);
    --container-width: min(var(--max-w), calc(100vw - var(--gutter) * 2));
    grid-template-rows: repeat(var(--rows-d), minmax(calc(var(--container-width) * .0215), auto));
    grid-template-columns: minmax(var(--grid-gutter), 1fr) repeat(24, minmax(0, var(--cell-max-width))) minmax(var(--grid-gutter), 1fr);
  }
}
.b {
  grid-area: var(--m);
  z-index: var(--z, auto);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  min-width: 0;
}
@media (min-width: 768px) { .b { grid-area: var(--d); } }
.b--mid { justify-content: center; }
.b > * { margin: 0; }
.b > p + p { margin-top: 1rem; }    /* flex children don't collapse margins */

/* Scaled text ("TOAM"): font-size tracks block width */
.b--scaled { container-type: inline-size; }
.b--scaled .t-h1 { font-size: 33.42cqw; line-height: 1; white-space: nowrap; }

/* Shape blocks (the four cards): 6px cream stroke centred on a 47px-radius rect */
.shape {
  position: absolute;
  inset: -6px;
  border: 6px solid var(--cream);
  border-radius: 50px;
  background: var(--fill);
}
.b--shape { position: relative; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: max-content;
  min-width: 100%;
  height: 100%;
  padding: 0 3rem;
  border: 3px solid var(--cream);
  border-radius: 300px;
  font-family: var(--heading);
  font-size: var(--fs-button);
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  color: var(--cream);
  background: transparent;
  transition: opacity .1s linear;
}
.btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease; text-shadow: none; }
.btn:hover { background: var(--cream); color: var(--green); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.btn--primary { background: var(--cream); color: var(--green); border-color: var(--green); }
.btn--primary:hover { background: var(--green); color: var(--cream); border-color: var(--cream); }


/* Icon block (WhatsApp) */
.b--img { position: relative; }
.b--img svg { position: absolute; inset: 0; margin: auto; height: min(100%, 84px); width: auto; }

/* Marquee (text on a wave) */
.b--marquee { overflow: visible; }
.marquee {
  width: 100%;
  font-size: var(--fs-marquee);
  line-height: 1.4;
  color: var(--cream);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.marquee svg {
  display: block;
  width: 100%;
  height: calc(1.4em + 30px);
  overflow: visible;
  transform: translateY(.208em);
  fill: currentColor;
}
.marquee .dot { fill: var(--amber); }

/* ---------- Scroll fade ----------
   Content is visible by default. site.js only hides blocks that start below the fold,
   then fades them in as they scroll into view, so nothing ever waits on JS to appear. */
.fade { transition: opacity .6s ease; }
.fade.pre { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fade, .fade.pre { opacity: 1; transition: none; }
}

/* ---------- Footer ---------- */
.foot {
  background: var(--green);
  color: var(--cream);
  text-align: center;
  padding: 44px var(--m-gutter) 48px;
  font-size: var(--fs-small);
  letter-spacing: calc(var(--fs-small) * -.02);
}
.foot__logo { font-family: var(--heading); font-size: var(--fs-h4); letter-spacing: -.01em; margin: 0 0 .6rem; }
.foot nav { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: .9rem; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--amber); }
.foot__fine { font-weight: 500; font-size: .95rem; letter-spacing: normal; opacity: .7; margin: 0; }

/* ---------- Inner pages (events, posts, 404) ---------- */
.inner { background: var(--green); color: var(--cream); }
.inner .foot { border-top: 3px solid rgba(247, 242, 232, .12); }

.label {
  font-family: var(--heading);
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 1rem;
}

/* Cards share the home page's shape language: 6px cream stroke, 50px radius. */
.card {
  border: 6px solid var(--cream);
  border-radius: 50px;
  overflow: hidden;
}

/* ---------- Events ---------- */
.list {
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 11px) var(--m-gutter) 72px;
}
.list__title { font-size: var(--fs-h2); line-height: 1.056; margin: 0 0 1.5rem; }
.next {
  background: var(--slate);
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3.5rem);
  margin: 0 0 3.5rem;
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.next .label { color: var(--cream); margin: 0; }
.next h2 { font-size: var(--fs-h3); line-height: 1.104; }
.next p { margin: 0; font-size: var(--fs-small); font-weight: 500; letter-spacing: normal; line-height: 1.4; max-width: 34em; }
.next .btn { height: 59px; min-width: 0; margin-top: .5rem; }

.posts { display: grid; gap: 2rem; }
.post-card {
  display: grid;
  text-decoration: none;
  background: rgba(247, 242, 232, .05);
  transition: background-color .15s ease;
}
.post-card:hover { background: rgba(247, 242, 232, .1); }
.post-card img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post-card__body { padding: 1.5rem clamp(1.5rem, 5vw, 2.5rem) 2rem; align-self: center; }
.post-card__date { font-weight: 500; font-size: 16px; letter-spacing: normal; line-height: 1; opacity: .75; margin: 0 0 .75rem; }
.post-card h2 { font-size: var(--fs-h3); line-height: 1.104; margin: 0 0 .6rem; }
.post-card__excerpt { margin: 0 0 1rem; font-size: var(--fs-small); font-weight: 500; letter-spacing: normal; line-height: 1.4; }
.post-card__more {
  font-family: var(--heading);
  font-size: 1.1rem;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 2px;
}
.post-card:hover .post-card__more { text-decoration-thickness: 3px; }
@media (min-width: 768px) {
  .list { padding: calc(var(--header-h) + var(--gutter)) var(--gutter) 96px; }
  .next { grid-template-columns: 1fr auto; align-items: center; column-gap: 3rem; }
  .next > :not(.btn) { grid-column: 1; }
  .next .btn { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .post-card { grid-template-columns: 38% 1fr; }
  .post-card img { aspect-ratio: auto; min-height: 100%; }
  .post-card__body { padding: 2rem 2.5rem; }
}

/* ---------- Post ---------- */
.post {
  padding: calc(var(--header-h) + 11px) var(--m-gutter) 86px;
}
.post__inner { max-width: 100%; margin: 0 auto; }
.post .post__meta { font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: normal; margin: 0 0 32px; opacity: .75; }
.post__meta .sep { margin: 0 .6em; }
.post h1 { font-size: var(--fs-h1); line-height: 1.2; text-align: start; margin-bottom: 51px; }
/* Reading copy: smaller, lighter and looser than the original 46px bold. */
.post__body p {
  margin: 0 0 1.1em;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.005em;
}
.post__body .lead { font-size: var(--fs-h4); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.post__end {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 3px solid rgba(247, 242, 232, .2);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.post__end .btn { height: 59px; min-width: 0; }
@media (min-width: 768px) {
  .post { padding: calc(var(--header-h) + var(--gutter)) var(--gutter) 86px; }
  .post__inner { width: 50%; }
}