/* ============================================================
   Dartmouth Common Oven — Stylesheet
   Tokens: brand-guidelines.pdf (te Bulte Design Co., April 2026)
   ============================================================ */

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --forest-green:  #1D633A;
  --leaf-green:    #31A56D;
  --lime-green:    #B8D87C;
  --pale-green:    #EAF2D0;
  --ocean-blue:    #1B75BC;
  --sky-blue:      #B9E5F7;
  --pale-blue:     #DDF1F7;
  --bright-yellow: #F8D848;
  --pale-yellow:   #FFF4CA;
  --charcoal:      #1C1C1B;
  --off-white:     #FBFBF7;
  --white:         #FFFFFF;

  /* Semantic */
  --bg:           var(--off-white);
  --bg-soft:      var(--pale-green);
  --surface:      var(--white);
  --fg:           var(--charcoal);
  --fg-muted:     #4a5a4e;
  --fg-subtle:    #7d8a7f;
  --fg-on-dark:   var(--off-white);
  --fg-brand:     var(--forest-green);
  --border:       #d9e0d0;
  --border-strong:var(--forest-green);
  --rule:         #c5cfb6;

  /* Type */
  --font-display: "Averia Libre", Georgia, serif;
  --font-accent:  "Courgette", cursive;
  --font-body:    "Rubik", system-ui, Arial, sans-serif;

  /* Scale */
  --fs-12: 0.75rem;  --fs-14: 0.875rem; --fs-16: 1rem;
  --fs-18: 1.125rem; --fs-20: 1.25rem;  --fs-24: 1.5rem;
  --fs-32: 2rem;     --fs-40: 2.5rem;   --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  /* Line heights */
  --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.55;

  /* Tracking */
  --tr-loose:  0.06em;
  --tr-looser: 0.12em;

  /* Spacing (4pt base) */
  --space-1:4px; --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;
  --radius-arch-top: 999px 999px 0 0;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(28,28,27,.06), 0 1px 2px rgba(28,28,27,.04);
  --shadow-md: 0 6px 16px rgba(28,28,27,.08), 0 2px 4px rgba(28,28,27,.05);
  --shadow-lg: 0 14px 32px rgba(28,28,27,.10), 0 4px 8px rgba(28,28,27,.06);
  --shadow-focus: 0 0 0 3px rgba(49,165,109,.35);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ─── Accessibility ──────────────────────────────────────── */
.dco-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;
}

/* ─── Reset / base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
::selection { background: var(--lime-green); color: var(--charcoal); }

/* ─── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-brand);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
}
h1 {
  font-size: clamp(var(--fs-40), 5vw, var(--fs-72));
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--tr-loose);
}
h2 { font-size: clamp(var(--fs-32), 3.2vw, var(--fs-56)); }
h3 { font-size: var(--fs-24); }
h4 { font-size: var(--fs-20); }
h5 { font-size: var(--fs-18); }
h6 {
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: var(--tr-looser);
  color: var(--fg-muted);
}
p {
  margin: 0 0 var(--space-4);
  color: var(--fg);
  text-wrap: pretty;
  max-width: 68ch;
}
.lead { font-size: var(--fs-20); color: var(--fg-muted); }
small, .small { font-size: var(--fs-14); color: var(--fg-muted); }
a {
  color: var(--forest-green);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--leaf-green); }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-8) 0; }

/* Accent / eyebrow */
.accent-heading, .dco-eyebrow-accent {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--fs-24);
  color: var(--leaf-green);
  letter-spacing: 0;
  line-height: 1.1;
  display: block;
  margin-bottom: var(--space-2);
}
.dco-eyebrow-accent--light { color: var(--lime-green); }
.dco-eyebrow {
  font: 700 var(--fs-12)/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leaf-green);
  display: block;
  margin-bottom: var(--space-2);
}

/* ─── Logo masks ──────────────────────────────────────────── */
/* SVGs are used as CSS masks; background colour paints them. */
.dco-logo-mask {
  display: inline-block;
  background: currentColor;
  mask-position: center; -webkit-mask-position: center;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-size: contain;     -webkit-mask-size: contain;
}
.dco-header__logo-mark {
  width: 200px; height: 40px;
  color: var(--pale-green);
  mask-image: url('/static/logo.svg');
  -webkit-mask-image: url('/static/logo.svg');
}
.dco-hero__arch-mark {
  width: 100%; height: 100%;
  color: var(--leaf-green);
  mask-image: url('/static/logo-arch.svg');
  -webkit-mask-image: url('/static/logo-arch.svg');
}
.dco-footer__mark {
  width: 180px; height: 96px;
  color: var(--lime-green);
  display: block;
  margin-bottom: var(--space-4);
  mask-image: url('/static/logo-stacked.svg');
  -webkit-mask-image: url('/static/logo-stacked.svg');
  mask-position: left center; -webkit-mask-position: left center;
}

/* ─── Layout helpers ──────────────────────────────────────── */
.dco-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.dco-section   { padding: var(--space-20) var(--space-6); max-width: var(--container); margin: 0 auto; }
.dco-section-head { margin-bottom: var(--space-10); }
.dco-section-head h2 { margin: var(--space-2) 0 0; }

/* ─── Buttons ─────────────────────────────────────────────── */
.dco-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 15px/1 var(--font-body);
  letter-spacing: 0.02em;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}
.dco-btn--sm { font-size: 13px; padding: 10px 18px; }
.dco-btn--primary { background: var(--forest-green); color: var(--off-white); }
.dco-btn--primary:hover { background: var(--leaf-green); color: var(--off-white); transform: translateY(-1px); }
.dco-btn--primary:active { transform: scale(.98); }
.dco-btn--ghost { background: transparent; color: var(--forest-green); padding-left: 0; padding-right: 0; border-color: transparent; }
.dco-btn--ghost:hover { color: var(--leaf-green); }
.dco-btn--cta { background: var(--lime-green); color: var(--forest-green); }
.dco-btn--cta:hover { background: var(--bright-yellow); color: var(--forest-green); }
.dco-link-arrow { font: 700 14px/1 var(--font-body); color: var(--pale-green); text-decoration: none; letter-spacing: 0.02em; }
.dco-link-arrow:hover { color: var(--off-white); }
.dco-link-arrow--dark { color: var(--forest-green); }
.dco-link-arrow--dark:hover { color: var(--charcoal); }

/* ─── Header ──────────────────────────────────────────────── */
.dco-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: var(--forest-green);
  border-bottom: 1px solid rgba(184,216,124,.18);
}
.dco-header__logo { display: inline-flex; align-items: center; text-decoration: none; }
.dco-header__right { display: flex; align-items: center; gap: 28px; }
.dco-header__nav { display: flex; gap: 28px; }
.dco-header__nav a {
  font: 400 14px/1 var(--font-body);
  color: var(--pale-green);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.dco-header__nav a:hover { color: var(--lime-green); }

/* ─── Hero ────────────────────────────────────────────────── */
.dco-hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-20) 32px var(--space-24);
  align-items: center;
}
.dco-hero h1 {
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.05; letter-spacing: .02em;
  text-wrap: balance;
  color: var(--forest-green);
  margin: 4px 0 var(--space-6);
}
.dco-hero .dco-lead { font-size: 19px; color: var(--fg-muted); max-width: 44ch; }
.dco-hero__ctas { display: flex; gap: 16px; align-items: center; margin-top: var(--space-6); flex-wrap: wrap; }
.dco-hero__art { position: relative; aspect-ratio: 1/1; }
.dco-hero__placeholder {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.dco-hero__placeholder span {
  font-size: var(--fs-14); color: var(--off-white);
  font-style: italic; opacity: 0.7;
}
.dco-hero__social-callout {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 48px 32px;
  gap: var(--space-4);
}
.dco-hero__social-callout p {
  color: rgba(255,255,255,.88);
  font-size: 16px; line-height: var(--lh-body);
  max-width: 26ch; margin: 0;
}
.dco-hero__social-btns {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: var(--space-2);
}
.dco-btn--social-ghost {
  background: transparent;
  color: var(--off-white);
  border: 1.5px solid rgba(255,255,255,.5);
}
.dco-btn--social-ghost:hover {
  border-color: var(--off-white);
  color: var(--off-white);
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}
.dco-hero__arch {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}

/* ─── Split feature ───────────────────────────────────────── */
.dco-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  max-width: var(--container); margin: 0 auto; padding: 0 32px var(--space-20);
}
.dco-split__tile {
  border-radius: 999px 999px 64px 64px;
  padding: 64px 44px 44px;
  box-shadow: var(--shadow-sm);
  min-height: 360px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.dco-split__tile h2 {
  font-size: 40px; line-height: 1.0;
  margin: 6px 0 var(--space-4); letter-spacing: 0; max-width: 14ch;
}
.dco-split__tile p { max-width: 30ch; margin: 0 auto var(--space-6); }
.dco-split__tile--forest { background: var(--forest-green); color: var(--off-white); }
.dco-split__tile--forest h2 { color: var(--off-white); }
.dco-split__tile--forest p { color: rgba(255,255,255,.88); }
.dco-split__tile--lime { background: var(--lime-green); color: var(--forest-green); }
.dco-split__tile--lime h2 { color: var(--forest-green); }
.dco-split__tile--lime p { color: var(--charcoal); }

/* ─── Where to find us ────────────────────────────────────── */
.dco-where { background: var(--pale-blue); padding: var(--space-20) 32px; }
.dco-where__inner { max-width: var(--container); margin: 0 auto; }
.dco-where h2 { color: var(--forest-green); }
.dco-where__desc { margin: var(--space-2) 0 var(--space-6); color: var(--fg-muted); max-width: 60ch; }
.dco-where__desc a { color: var(--ocean-blue); }
.dco-where__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.dco-where__list li {
  background: var(--white); border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: var(--space-4) var(--space-5);
  line-height: var(--lh-body);
}
@media (max-width: 640px) { .dco-where__list { grid-template-columns: 1fr; } }

/* ─── Hero Instagram embed ────────────────────────────────── */
.dco-hero__instagram {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.dco-hero__instagram iframe,
.dco-hero__instagram .instagram-media {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}
.dco-instagram-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1/1; max-height: 460px;
  background: var(--pale-green); border-radius: var(--radius-lg);
  font: 700 15px/1 var(--font-body); letter-spacing: .02em;
}
.dco-instagram-fallback a { color: var(--forest-green); text-decoration: none; }
.dco-instagram-fallback a:hover { color: var(--leaf-green); text-decoration: underline; }

/* ─── Events section ──────────────────────────────────────── */
.dco-events { background: var(--pale-green); padding: var(--space-20) 32px; }
.dco-events > * { max-width: var(--container); margin-left: auto; margin-right: auto; }
.dco-events h2 { color: var(--forest-green); }
.dco-events__list { display: flex; flex-direction: column; gap: 14px; margin-top: var(--space-6); }
.dco-event {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center;
  background: var(--white); border-radius: 22px; padding: 18px 22px 18px 18px;
  border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.dco-event:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: inherit; }
.dco-event__date {
  background: var(--forest-green); color: var(--off-white);
  border-radius: 14px; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
.dco-event__m { font: 700 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--lime-green); }
.dco-event__d { font: 700 32px/1 var(--font-display); margin-top: 4px; }
.dco-event__body h3 {
  font: 700 22px/1.1 var(--font-display); color: var(--forest-green);
  margin: 2px 0 4px;
}
.dco-event__meta { font: 500 14px/1.3 var(--font-body); color: var(--fg-muted); }
.dco-event__rsvp {
  font: 700 13px/1 var(--font-body); letter-spacing: .02em;
  padding: 12px 20px; border-radius: var(--radius-pill);
  background: var(--lime-green); color: var(--forest-green);
  text-decoration: none; white-space: nowrap;
  transition: background 150ms var(--ease-out);
  flex-shrink: 0;
}
.dco-event__rsvp:hover { background: var(--bright-yellow); color: var(--forest-green); }

/* ─── News section ────────────────────────────────────────── */
.dco-news { padding: var(--space-20) 32px; max-width: var(--container); margin: 0 auto; }
.dco-news h2 { color: var(--forest-green); }
.dco-news__list { list-style: none; margin: var(--space-6) 0 var(--space-8); padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dco-news__list li {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--lime-green);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}
.dco-news__list a { font-weight: 600; text-decoration: none; }
.dco-news__list a:hover { text-decoration: underline; }
.dco-news__meta { font-size: var(--fs-14); color: var(--fg-muted); margin-top: 2px; display: block; }

/* ─── Newsletter ──────────────────────────────────────────── */
.dco-newsletter {
  background: var(--pale-yellow);
  padding: var(--space-16) 32px;
}
.dco-newsletter__inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
}
.dco-newsletter h2 { color: var(--forest-green); margin: var(--space-2) 0 var(--space-2); font-size: 36px; line-height: 1.05; }
.dco-newsletter p { color: var(--fg-muted); max-width: 48ch; }
.dco-newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; }
.dco-newsletter__form input {
  flex: 1; min-width: 200px;
  font: 500 15px/1 var(--font-body); color: var(--charcoal);
  padding: 14px 18px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--rule); background: var(--white); outline: none;
}
.dco-newsletter__form input:focus { border-color: var(--leaf-green); box-shadow: var(--shadow-focus); }

/* ─── Article pages ───────────────────────────────────────── */
.dco-article { max-width: var(--container-narrow); margin: var(--space-12) auto; padding: 0 var(--space-6); }
.dco-article h1 { color: var(--forest-green); margin-bottom: var(--space-2); }
.dco-article time { display: block; color: var(--fg-subtle); font-size: var(--fs-14); margin-bottom: var(--space-8); }
.dco-article .dco-article__body { margin-top: var(--space-6); line-height: 1.75; }
.dco-article .dco-article__body h2 { font-size: var(--fs-24); margin-top: var(--space-8); }
.dco-article .summary { font-size: var(--fs-18); color: var(--fg-muted); font-style: italic; margin-bottom: var(--space-6); }
.dco-article .location { font-size: var(--fs-16); margin-bottom: var(--space-4); }
.dco-back { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--rule); }
.dco-back a { font-weight: 500; text-decoration: none; }
.dco-back a:hover { text-decoration: underline; }

/* Event/news list page */
.dco-list-page { padding: var(--space-12) 32px; max-width: var(--container); margin: 0 auto; }
.dco-list-page h1 { color: var(--forest-green); margin-bottom: var(--space-8); }
.dco-list-page h2 { color: var(--forest-green); font-size: var(--fs-24); margin: var(--space-10) 0 var(--space-4); }
.dco-news-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dco-news-list li { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--lime-green); border-radius: var(--radius-md); padding: 14px 18px; }
.dco-news-list a { font-weight: 600; text-decoration: none; }
.dco-news-list a:hover { text-decoration: underline; }
.dco-news-list .meta { font-size: var(--fs-14); color: var(--fg-muted); display: block; margin-top: 2px; }
.dco-events-past .dco-event { opacity: 0.75; }

/* ─── Footer ──────────────────────────────────────────────── */
.dco-footer { background: var(--forest-green); color: var(--off-white); padding: var(--space-16) 32px var(--space-8); }
.dco-footer__top { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 56px; }
.dco-footer__brand p { color: var(--lime-green); font-size: 13px; max-width: 30ch; margin-bottom: 0; }
.dco-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.dco-footer__cols h5 {
  font: 700 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--lime-green); margin: var(--space-2) 0 14px;
}
.dco-footer__cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dco-footer__cols a { color: var(--off-white); text-decoration: none; font-size: 14px; }
.dco-footer__cols a:hover { color: var(--lime-green); }
.dco-footer__acknowledgment {
  max-width: var(--container); margin: var(--space-10) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(184,216,124,.2);
  font-size: 13px; line-height: 1.65;
  color: rgba(255,255,255,.55);
}
.dco-footer__acknowledgment p { color: rgba(255,255,255,.55); max-width: 80ch; margin: 0; }

.dco-footer__bottom {
  max-width: var(--container); margin: var(--space-12) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(184,216,124,.25);
  display: flex; justify-content: space-between; gap: 24px;
  color: var(--lime-green); font-size: 13px; flex-wrap: wrap;
}
.dco-footer__social { display: flex; gap: 10px; align-items: center; }
.dco-footer__social a { color: var(--off-white); text-decoration: none; }
.dco-footer__social a:hover { color: var(--lime-green); }
.dco-footer__social span { color: rgba(255,255,255,.4); }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .dco-hero, .dco-split, .dco-newsletter__inner { grid-template-columns: 1fr; gap: 32px; }
  .dco-hero__art { aspect-ratio: 4/3; max-height: 320px; }
  .dco-split { padding: 0 var(--space-6) var(--space-12); }
  .dco-footer__top { grid-template-columns: 1fr; gap: 32px; }
  .dco-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .dco-header { padding: 14px 20px; }
}
@media (max-width: 640px) {
  .dco-header .dco-btn--cta { display: none; }
  .dco-event { grid-template-columns: 72px 1fr; }
  .dco-event__rsvp { display: none; }
  .dco-footer__cols { grid-template-columns: 1fr; }
  .dco-events, .dco-news, .dco-list-page { padding-left: var(--space-6); padding-right: var(--space-6); }
  .dco-split__tile { padding: 52px 28px 36px; min-height: 300px; }
}
@media (max-width: 480px) {
  .dco-hero { padding: var(--space-12) var(--space-6); }
  .dco-newsletter { padding: var(--space-12) var(--space-6); }
}