/* =====================================================================
   CENTER FOR ARTS & ECOLOGY — "COMMON GROUND"
   Warm, bold, community-arts identity. Orange-forward color blocking.
   Bricolage Grotesque (display) · Schibsted Grotesk (text)
   ===================================================================== */

:root {
  /* brand */
  --orange:   #ea5733;   /* primary — from the logo */
  --orange-2: #f46b45;   /* lighter */
  --orange-deep: #c8431f;
  --teal:     #03564d;   /* logo dark — grounding */
  --teal-2:   #0a6a5e;
  --teal-deep:#02332d;

  /* surfaces */
  --cream:    #f6f0e2;   /* page base — bright, warm */
  --cream-2:  #efe7d4;
  --sun:      #f6c05a;   /* warm highlight / tertiary */
  --ink:      #241b12;   /* warm near-black text */
  --paper:    #fffaf0;   /* raised cards */

  /* on dark */
  --on-teal:  #eaf3ee;
  --on-teal-dim: color-mix(in srgb, var(--on-teal) 90%, var(--teal));
  --on-orange: #fff6ee;

  /* ink shades */
  --ink-70: color-mix(in srgb, var(--ink) 74%, var(--cream));
  --ink-45: color-mix(in srgb, var(--ink) 68%, var(--cream));
  --line:   color-mix(in srgb, var(--ink) 15%, transparent);
  --line-teal: color-mix(in srgb, var(--on-teal) 22%, transparent);

  --disp: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --wrap: 1360px;
  --pad: clamp(20px, 4.2vw, 68px);
  --r: 22px;             /* card radius */
  --r-lg: 40px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.03, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--orange); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Type ---------- */
.display {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 11rem);
  line-height: 0.9; letter-spacing: -0.035em;
  margin: 0; text-wrap: balance;
}
h1, h2, h3 { font-family: var(--disp); font-weight: 700; margin: 0; line-height: 0.98; letter-spacing: -0.03em; }
.h-xl { font-size: clamp(2.6rem, 6.5vw, 6rem); line-height: 0.92; letter-spacing: -0.035em; }
.h-lg { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 0.96; letter-spacing: -0.03em; }
.h-md { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.0; letter-spacing: -0.025em; }
.italic-note { font-style: italic; font-weight: 400; }

.lede { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.42; letter-spacing: -0.01em; color: var(--ink); font-weight: 420; }
.body-lg { font-size: clamp(1.02rem, 1.15vw, 1.18rem); line-height: 1.6; color: var(--ink-70); }
.body-lg p { margin: 0 0 1.1em; } .body-lg p:last-child { margin-bottom: 0; }

/* (eyebrow labels removed from the system: use real headings + .sec-sub) */

/* ---------- Links & buttons ---------- */
.arrow { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; transition: gap 0.35s var(--ease), color 0.3s; }
.arrow svg { width: 1em; height: 1em; transition: transform 0.35s var(--ease); }
.arrow:hover { color: var(--orange); gap: 0.8em; }
.on-dark-sec .arrow:hover { color: var(--sun); }

.link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1.5px; background-repeat: no-repeat; background-position: left 100%; padding-bottom: 2px; transition: color .3s; }
.link-underline:hover { color: var(--orange); }

.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  height: 56px; padding: 0 1.8rem; border-radius: 999px;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.005em;
  background: var(--ink); color: var(--cream); border: 1.5px solid var(--ink);
  cursor: pointer; transition: transform 0.35s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn-orange { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn-teal { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.btn-teal:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-cream { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-cream:hover { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn-ghost-light { background: transparent; color: var(--on-teal); border-color: var(--line-teal); }
.btn-ghost-light:hover { background: var(--on-teal); color: var(--teal); border-color: var(--on-teal); }
.btn-lg { height: 64px; padding: 0 2.2rem; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* rotating seal (signature motif) */
.seal { position: relative; width: 128px; height: 128px; display: grid; place-items: center; }
.seal svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.seal svg.ring text { font-family: var(--sans); font-size: 8.1px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; fill: currentColor; }
.seal .core { width: 46px; height: 46px; border-radius: 999px; background: var(--orange); display: grid; place-items: center; }
.seal .core svg { width: 24px; height: 24px; color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seal svg.ring { animation: none; } }

/* =====================================================================
   Header
   ===================================================================== */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: 14px; transition: transform 0.5s var(--ease); }
.top.hidden { transform: translateY(-130%); }
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 66px; padding: 0 10px 0 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  border: 1.5px solid var(--line);
  backdrop-filter: blur(16px) saturate(1.3);
}
.brand { display: flex; align-items: center; }
.brand img { width: auto; height: 46px; max-width: min(52vw, 400px); object-fit: contain; }
.brand b { display: none; }
.nav { display: flex; align-items: center; gap: clamp(2px, 0.9vw, 8px); }
.nav a { padding: 8px 13px; border-radius: 999px; font-size: 0.92rem; font-weight: 500; transition: background-color 0.25s, color 0.25s; }
.nav a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav a.active { background: var(--ink); color: var(--cream); }
.top-cta { display: flex; align-items: center; gap: 8px; }
.top-cta .btn { height: 46px; padding: 0 1.3rem; font-size: 0.9rem; }
.burger { display: none; width: 46px; height: 46px; border-radius: 999px; border: 0; background: var(--ink); color: var(--cream); align-items: center; justify-content: center; cursor: pointer; }
.burger span { position: relative; width: 18px; height: 10px; display: block; }
.burger span i, .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.8px; border-radius: 2px; background: currentColor; transition: 0.3s var(--ease); }
.burger span::before { top: 0; } .burger span i { top: 4px; } .burger span::after { top: 8px; }

@media (max-width: 1040px) {
  .nav, .top-cta .btn.donate-desktop { display: none; }
  .burger { display: inline-flex; }
  .brand img { height: 40px; max-width: min(62vw, 330px); }
}
@media (max-width: 420px) { .brand img { height: 34px; max-width: 60vw; } }

.msheet { position: fixed; inset: 0; z-index: 200; background: var(--teal); color: var(--on-teal); display: flex; flex-direction: column; padding: 22px var(--pad) 40px; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0.45s; }
.msheet.open { opacity: 1; visibility: visible; }
.msheet-top { display: flex; align-items: center; justify-content: space-between; }
.msheet-top .brand img { height: 40px; background: var(--cream); padding: 7px 12px; border-radius: 12px; }
.msheet-close { width: 46px; height: 46px; border-radius: 999px; border: 1.5px solid var(--line-teal); background: transparent; color: var(--on-teal); font-size: 1.5rem; cursor: pointer; }
.msheet nav { display: flex; flex-direction: column; margin: auto 0; }
.msheet nav a { font-family: var(--disp); font-weight: 700; font-size: clamp(2.2rem, 10vw, 3.8rem); letter-spacing: -0.03em; padding: 8px 0; border-bottom: 1.5px solid var(--line-teal); }
.msheet nav a:hover { color: var(--sun); }
.msheet-foot { display: flex; gap: 10px; }

/* =====================================================================
   Section primitives
   ===================================================================== */
.section { padding: clamp(60px, 9vw, 140px) 0; position: relative; }
.section-sm { padding: clamp(40px, 5vw, 80px) 0; }
.sec-cream2 { background: var(--cream-2); }
.sec-teal { background: var(--teal); color: var(--on-teal); }
.sec-orange { background: var(--orange); color: var(--on-orange); }
.on-dark-sec { color: var(--on-teal); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: clamp(34px, 4vw, 58px); }
.sec-head h2 { max-width: 20ch; }

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .rv.in { opacity: 1; transform: none; }
  .rv-1 { transition-delay: 0.07s; } .rv-2 { transition-delay: 0.14s; } .rv-3 { transition-delay: 0.21s; } .rv-4 { transition-delay: 0.28s; }
  .clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ease-io); }
  .clip.in { clip-path: inset(0 0 0 0); }
  .pop { opacity: 0; transform: scale(0.86); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .pop.in { opacity: 1; transform: none; }
}

/* =====================================================================
   Footer
   ===================================================================== */
.foot { background: var(--teal-deep); color: var(--on-teal-dim); padding: clamp(52px, 6vw, 96px) 0 32px; }
.foot-cta { display: flex; align-items: center; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap; justify-content: space-between; padding-bottom: clamp(40px, 5vw, 72px); border-bottom: 1.5px solid var(--line-teal); }
.foot-cta h2 { font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.9; letter-spacing: -0.035em; color: var(--on-teal); max-width: 14ch; }
.foot-cta h2 em { font-style: italic; color: var(--sun); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 34px; padding-top: 44px; }
.foot-col h4 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-teal); margin: 0 0 1rem; }
.foot-col a, .foot-col address { display: block; color: var(--on-teal-dim); font-style: normal; margin-bottom: 0.55rem; font-size: 0.96rem; line-height: 1.5; }
.foot-col a:hover { color: var(--sun); }
.foot-brand p { max-width: 32ch; font-size: 0.95rem; margin: 1rem 0 0; }
.foot-brand .brand img { height: 52px; background: var(--cream); padding: 10px 16px; border-radius: 14px; }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1.5px solid var(--line-teal); font-size: 0.82rem; color: var(--on-teal-dim); }
.foot-bottom a { color: var(--on-teal); }
.socials { display: flex; gap: 8px; }
.socials a { width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid var(--line-teal); display: inline-flex; align-items: center; justify-content: center; }
.socials a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.socials svg { width: 17px; height: 17px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 500px) { .foot-grid { grid-template-columns: 1fr; } }