/* The Insiders look, across the whole site (Amanda 2026-10-18: "It needs to
   feel like the same graphic designs and colors as the insiders page").
   Loaded after styles.css on every page, so it only restyles: palette from
   /insiders/ (olive ink, butter + amber, cream and tan grounds, salmon dots),
   stitched butter buttons, rounded white cards on tan hairlines, Outfit
   headings like Insiders. */

:root {
  --page:       #F9EADC;
  --card:       #FFFFFF;
  --card-white: #FFFFFF;
  --band:       #FEF1D8;
  --header:     #FFFFFF;
  --hairline:   #ECC798;
  --hairline-2: #ECC798;
  --butter:     #F8BC51;
  --butter-hov: #DE9C30;
  --amber:      #DE9C30;
  --rose:       #DE9884;
  --ink:        #555537;
  --body:       #555537;
  --sage:       #46574E;
  --sage-quiet: #6C6C48;
  --green:      #46574E;
  --sage-deep:  #33433C;
  --cream-text: #FEF1D8;
  --radius:     28px;
  --shadow:     none;
}

body { background: #F9EADC; color: #555537; font-family: 'DM Sans', 'Helvetica Neue', sans-serif; }
h1, h2, h3, h4 { font-family: Urbanist, 'DM Sans', sans-serif; color: #555537; letter-spacing: -0.015em; }
h1 em, h2 em, .hero h1 em { color: #DE9C30; font-style: normal; font-weight: 700; }
a { color: #555537; }

/* header: white bar, tan hairline, like Insiders */
.site-header { background: #FFFFFF; border-bottom: 1px solid #ECC798; backdrop-filter: none; }
.site-nav a { color: #555537; font-weight: 500; }
.site-nav a:hover { color: #DE9C30; }

/* buttons: the Insiders stitched butter button */
.btn,
.btn-butter {
  border-radius: 18px;
  border: 2px solid #DE9C30;
  background: #F8BC51;
  color: #555537;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  outline: 2px dashed #555537;
  outline-offset: -7px;
  box-shadow: none;
  transition: transform .15s;
}
.btn:hover,
.btn-butter:hover { background: #F8BC51; color: #555537; transform: translateY(-2px); }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn-outline {
  background: #ECC798;
  border: 2px solid #ECC798;
  color: #555537;
  outline: 2px dashed #555537;
  outline-offset: -7px;
  border-radius: 18px;
}
.btn-outline:hover { background: #ECC798; color: #555537; transform: translateY(-2px); }
.link-arrow { color: #555537; font-weight: 700; }

/* eyebrows + ledes */
.eyebrow { color: #DE9C30; }
.eyebrow::before { background: #DE9C30; }
.lede, .section-lede, p { color: #555537; }

/* grounds: cream hero, then cream / white / tan bands, olive feature band */
.hero, .page-hero, .page-hero-tint { background: #FEF1D8; }
.content-section { background: #FFFFFF; }
.band-light { background: #FFFFFF; border-color: #ECC798; }
.band-dark { background: #F9EADC; border-color: #ECC798; }
.preview-band { background: #F9EADC; }
.band-forest,
.band-deep { background: #46574E; border-color: #46574E; }
.band-forest h2, .band-deep h2,
.band-forest h3, .band-deep h3 { color: #FFFFFF; }
.band-forest p, .band-deep p,
.band-forest .section-lede, .band-forest .way-list p { color: #FEF1D8; }
.band-forest .eyebrow, .band-deep .eyebrow { color: #F8BC51; }
.band-forest .eyebrow::before, .band-deep .eyebrow::before { background: #F8BC51; }
.band-forest .way-list li { background: rgba(255,255,255,.08); border-color: rgba(254,241,216,.35); }
.band-forest .way-list li::before { color: #F8BC51; }
.band-forest .way-label { color: #FFFFFF; }
.support-band { background: #FEF1D8; border-color: #ECC798; }

/* cards: white, tan hairline, big round corners */
.card {
  background: #FFFFFF;
  border: 1px solid #ECC798;
  border-radius: 28px;
  box-shadow: none;
}
.card-label { color: #DE9C30; }
.card p:last-child { color: #555537; }
.card h3 { color: #555537; }

/* FAQ: Insiders' cream pills with the butter plus */
.faq-list details,
.faq-list .faq-item {
  background: #F9EADC;
  border: 1px solid #ECC798;
  border-radius: 18px;
}
.band-dark .faq-list details { background: #FFFFFF; }
.faq-list summary { font-family: Urbanist, 'DM Sans', sans-serif; font-weight: 600; color: #555537; }

/* footer: tan, like the Insiders footer */
.site-footer { background: #ECC798; border-top: 0; color: #555537; }
.site-footer a, .footer-copy, .footer-disclaimer, .footer-tagline { color: #555537; }
.site-footer a:hover { color: #FFFFFF; }

/* Insiders headings are heavy and tight */
h1, h2 { font-weight: 700; line-height: 1.15; }
h3, h4 { font-weight: 700; }
.hero h1 { font-size: clamp(38px, 4.4vw, 54px); }

/* ---------- round 2 (Amanda 2026-10-18): no Pat scenes, more of the
   Insiders details: sparkle eyebrows, chips with dots, tape, number seals,
   dashed pills, polaroid founders photo. ---------- */

/* the photo scenes with Pat are gone; heroes go centered like Insiders */
.hero-art:not(.hero-art-founders),
.page-hero-art:not(.hero-art-founders),
.page-hero-pat,
.hero-pat,
.closing-pat { display: none !important; }
.hero-grid:not(:has(.hero-art-founders)) { display: block; text-align: center; }
.hero-grid:not(:has(.hero-art-founders)) .hero-copy { max-width: 920px; margin: 0 auto; }
.hero-grid:not(:has(.hero-art-founders)) .hero-actions { justify-content: center; }
.hero-grid:not(:has(.hero-art-founders)) .lede { margin-left: auto; margin-right: auto; max-width: 44em; }
.page-hero-grid:not(:has(.hero-art-founders)) { display: block; text-align: center; }
.page-hero-grid:not(:has(.hero-art-founders)) h1,
.page-hero-grid:not(:has(.hero-art-founders)) .lede { margin-left: auto; margin-right: auto; }

/* sparkle eyebrows: ✦ LABEL ✦ */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; letter-spacing: .14em; font-weight: 700; }
.eyebrow::before, .eyebrow::after {
  content: "✦"; width: auto; height: auto; background: none !important;
  color: #F8BC51; font-size: 13px; letter-spacing: 0;
}
.band-forest .eyebrow::before, .band-forest .eyebrow::after,
.band-deep .eyebrow::before, .band-deep .eyebrow::after { color: #F8BC51; }

/* section heads centered, like every Insiders section */
.band > .shell > .eyebrow, .band > .shell > h2, .band > .shell > .section-lede,
.content-section > .shell > h2, .content-section > .shell > .section-lede,
.butter-way .eyebrow, .butter-way h2, .butter-way .section-lede { text-align: center; margin-left: auto; margin-right: auto; }
.band > .shell, .butter-way > .shell { text-align: center; }
.band .card, .band .way-list li, .band .faq-list, .band .cb-window { text-align: left; }
.band > .shell > .eyebrow, .butter-way .eyebrow { display: flex; justify-content: center; }

/* cards: a strip of butter tape on top */
.card { position: relative; overflow: visible; padding-top: 34px; }
.card::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 96px; height: 22px;
  transform: translateX(-50%) rotate(-2deg); background: rgba(248,188,81,.85); border-radius: 3px;
}
.card:nth-child(even)::before { transform: translateX(-50%) rotate(2deg); background: rgba(236,199,152,.95); }

/* card labels become chips with a salmon dot */
.card-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: #F9EADC; border: 1px solid #ECC798;
  color: #555537; font-weight: 700; letter-spacing: .04em; text-transform: none; font-size: 13px;
}
.card-label::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #DE9884; flex-shrink: 0; position: static; }

/* links become little dashed pills */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border: 2px dashed #46574E; border-radius: 999px;
  background: #FFFFFF; color: #555537; font-size: 14px; font-weight: 700; text-decoration: none;
}
.link-arrow:hover { border-color: #DE9C30; color: #555537; }

/* The Butter Way: numbers sit in round seals, butter / salmon / cream / white */
.butter-way .way-list li { text-align: left; }
.way-list li::before {
  content: counter(way); display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; margin-bottom: 12px;
  background: #F8BC51; color: #555537; font-size: 20px; font-weight: 700;
}
.way-list li:nth-child(2)::before { background: #DE9884; color: #FFFFFF; }
.way-list li:nth-child(3)::before { background: #FEF1D8; color: #555537; }
.way-list li:nth-child(4)::before { background: #FFFFFF; color: #555537; }

/* FAQ: the butter plus circle */
.faq-list details { padding: 0 24px; }
.faq-list summary { padding: 20px 44px 20px 0; }
.faq-list summary::after {
  content: "+"; width: 28px; height: 28px; border-radius: 999px; background: #F8BC51; color: #555537;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; right: 0;
}
.faq-list details[open] summary::after { content: "–"; }

/* founders photo becomes the Insiders polaroid with tape */
.hero-art-founders { position: relative; background: #FFFFFF; padding: 14px 14px 46px; border-radius: 6px; box-shadow: 0 18px 40px -22px rgba(85,85,55,.45); transform: rotate(-2deg); }
.hero-art-founders::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 24px; transform: translateX(-50%) rotate(2deg); background: rgba(248,188,81,.85); border-radius: 3px; z-index: 2; }
.hero-art-founders img { border-radius: 2px; }

/* a sparkle row above the closing band */
.band-deep::before { content: "✦   ✦   ✦"; display: block; text-align: center; color: #F8BC51; letter-spacing: .3em; margin-bottom: 18px; white-space: pre; }
.card-label::before { display: inline-block !important; position: static !important; margin: 0 !important; top: auto; left: auto; }
.way-list li:nth-child(1)::before { color: #555537 !important; }
.card:hover .card-label::before, .card:focus-within .card-label::before { background: #DE9884; }

/* Amanda 2026-10-18: the olive read as "vomit green". Every green ground is
   the brand sage #46574E now. */
.band-forest .way-list li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.band-forest .way-list li { padding: 26px 28px; border-radius: 22px; border: 1px solid rgba(255,255,255,.18); }

/* Sections take turns (Amanda 2026-10-18: "we can't have cream on cream
   sections"): odd = cream, even = white, sage bands stay sage. A tan hairline
   marks every change of ground. Cards and FAQ rows take the opposite ground
   so they still stand out. */
main > section:nth-of-type(odd):not(.band-forest):not(.band-deep) { background: #FEF1D8; }
main > section:nth-of-type(even):not(.band-forest):not(.band-deep) { background: #FFFFFF; }
main > section:not(.band-forest):not(.band-deep) { border-top: 1px solid #ECC798; border-bottom: 0; }
main > section:first-of-type { border-top: 0; }
main > section:nth-of-type(odd) .card,
main > section:nth-of-type(odd) .faq-list details { background: #FFFFFF; }
main > section:nth-of-type(even) .card,
main > section:nth-of-type(even) .faq-list details { background: #FEF1D8; }
main > section:nth-of-type(even) .card-label { background: #FFFFFF; }

/* Amanda 2026-10-18: the amber "Butter" vanishes on the tan footer, so the
   footer carries no logo at all. */
.site-footer .wordmark, .site-footer .wordmark-logo, .site-footer .logo-img { display: none !important; }

/* Amanda 2026-10-18: dark sage footer on every page */
.site-footer { background: #33433C; color: #FEF1D8; border-top: 0; }
.site-footer a, .site-footer .footer-copy, .site-footer .footer-disclaimer, .site-footer .footer-tagline, .site-footer p { color: #FEF1D8; }
.site-footer a:hover { color: #F8BC51; }
.site-footer .footer-copy { opacity: .8; }

/* Givers ticker keeps its original sage (Amanda 2026-10-18) */
.thanks-band { background: #46574E; }
.thanks-total { background: #33433C; }

/* ---------- round 3 (Amanda 2026-11-08): buttons that pop, like Insiders ---------- */
.btn,.btn-butter,.btn-outline{box-shadow:0 4px 0 #DE9C30,0 10px 18px -10px rgba(85,85,55,.45)!important;transition:transform .15s ease,box-shadow .15s ease}
.btn-outline{box-shadow:0 4px 0 #D9AE78,0 10px 18px -10px rgba(85,85,55,.4)!important}
.btn:hover,.btn-butter:hover,.btn-outline:hover{transform:translateY(-3px)!important;box-shadow:0 7px 0 #DE9C30,0 16px 24px -12px rgba(85,85,55,.5)!important}
.btn:active,.btn-butter:active,.btn-outline:active{transform:translateY(2px)!important;box-shadow:0 1px 0 #DE9C30!important}
.card{transition:transform .18s ease,box-shadow .18s ease}
a.card:hover,.card:has(a):hover{transform:translateY(-4px);box-shadow:0 14px 28px -16px rgba(85,85,55,.45)}
.hero-banner{background:#FEF1D8;line-height:0}
.hero-banner img{width:100%;height:auto;max-height:520px;object-fit:cover;object-position:center 60%;display:block}
.hero-banner + .hero{padding-top:44px}

/* ---------- round 4 (Amanda 2026-11-08): more sage and pink, buttons pop sideways, logo not squeezed ---------- */
.wordmark-logo{flex:none!important}
.wordmark-logo .logo-img{flex:none;max-width:none;width:auto!important;aspect-ratio:801/240}
.btn,.btn-butter{box-shadow:4px 4px 0 #DE9C30!important}
.btn:hover,.btn-butter:hover{transform:translate(-2px,-3px)!important;box-shadow:7px 7px 0 #DE9C30!important}
.btn:active,.btn-butter:active{transform:translate(2px,2px)!important;box-shadow:1px 1px 0 #DE9C30!important}
.btn-outline,.btn-sage{background:#46574E!important;border-color:#33433C!important;color:#FFFFFF!important;outline:2px dashed #FEF1D8!important;box-shadow:4px 4px 0 #2A362F!important}
.btn-outline:hover,.btn-sage:hover{background:#46574E!important;color:#FFFFFF!important;box-shadow:7px 7px 0 #2A362F!important}
.btn-pink{background:#F4C6C0!important;border-color:#DE9884!important;color:#555537!important;outline:2px dashed #555537!important;box-shadow:4px 4px 0 #DE9884!important}
.btn-pink:hover{background:#F4C6C0!important;box-shadow:7px 7px 0 #DE9884!important}
.hero .link-arrow,.hero-actions a:not(.btn){background:#F4C6C0;border:2px solid #DE9884;outline:2px dashed #555537;outline-offset:-6px;border-radius:16px;padding:12px 22px;text-decoration:none;font-weight:700;box-shadow:4px 4px 0 #DE9884;transition:transform .15s,box-shadow .15s;display:inline-block}
.hero .link-arrow:hover,.hero-actions a:not(.btn):hover{transform:translate(-2px,-3px);box-shadow:7px 7px 0 #DE9884}
.card:nth-child(3n+1){border-top:6px solid #46574E}
.card:nth-child(3n+2){border-top:6px solid #F4C6C0}
.card:nth-child(3n){border-top:6px solid #F8BC51}
a.card:hover,.card:has(a):hover{transform:translate(-2px,-4px)}
.hero-banner img{max-height:none;object-fit:contain}
.radio-stick-img{display:inline-block;width:72px;height:auto;vertical-align:middle;margin:-6px 12px 0 0}
/* Butter Way cards get tape; the numbers look like little stitched buttons (Amanda 2026-11-08) */
.way-list li{position:relative;overflow:visible}
.way-list li::after{content:"";position:absolute;top:-11px;left:50%;width:96px;height:22px;transform:translateX(-50%) rotate(-2deg);background:rgba(248,188,81,.85);border-radius:3px;pointer-events:none}
.way-list li:nth-child(even)::after{transform:translateX(-50%) rotate(2deg);background:rgba(244,198,192,.95)}
.way-list li::before{outline:2px dashed rgba(85,85,55,.75);outline-offset:-6px;box-shadow:3px 3px 0 rgba(0,0,0,.28);border:2px solid rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s}
.way-list li:hover::before{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,0,0,.28)}
.way-list li:nth-child(2)::before{outline-color:rgba(255,255,255,.85)}
/* scrapbook hovers, copied from the Insiders page (Amanda 2026-11-08) */
.way-list li,.card,.faq-list details{transition:transform .25s ease,box-shadow .25s ease}
.way-list li::before{transition:transform .25s ease,box-shadow .25s ease}
.way-list li:hover::before{transform:rotate(-10deg) scale(1.08)!important}
.way-list li:nth-child(odd):hover,.card:nth-child(odd):hover{transform:translateY(-6px) rotate(-.8deg)!important}
.way-list li:nth-child(even):hover,.card:nth-child(even):hover{transform:translateY(-6px) rotate(.8deg)!important}
.card:hover{box-shadow:0 18px 30px -18px rgba(85,85,55,.5)}
.radio-stick-img{transition:transform .25s ease}
.radio-band:hover .radio-stick-img{transform:rotate(-6deg) scale(1.06)}
.tool-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:34px 0 10px;text-align:left}
.tool-card{display:flex;flex-direction:column;text-decoration:none;padding:0 0 20px!important;overflow:visible}
.tool-card img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:26px 26px 0 0;border-bottom:1px solid #ECC798}
.tool-card h3{margin:16px 20px 6px;font-size:1.2rem}
.tool-card p{margin:0 20px 12px;font-size:15px}
.tool-open{margin:auto 20px 0;font-weight:700;color:#DE9884}
@media (max-width:860px){.tool-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tool-cards{grid-template-columns:1fr}}

/* Meet Kim & Amanda, brought over from the Insiders page (Amanda 2026-11-08) */
.cbf{font-family:'DM Sans',sans-serif;color:#555537}
.cbf section{box-sizing:border-box}
.cbf-m{display:none}
.cbf .cb-fc{position:relative;display:flex;flex-direction:column;gap:16px;padding:40px 32px 32px;border-radius:28px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cbf .cb-fc:hover{transform:translateY(-6px) rotate(-.6deg)}
.cbf .cb-fc-q{position:absolute;top:-6px;left:24px;font-family:Georgia,serif;font-size:110px;line-height:1;font-weight:700}
.cbf .cb-fc blockquote{padding-top:26px;margin:0}
.cbf .cb-pol{position:relative;margin:0;padding:14px 14px 0;background:#FFFFFF;border-radius:6px;box-shadow:0 18px 40px rgba(85,85,55,.18),0 2px 6px rgba(85,85,55,.12);transform:rotate(-2.5deg);transition:transform .4s cubic-bezier(.2,.9,.3,1.3);width:100%;box-sizing:border-box}
.cbf .cb-pol:hover{transform:rotate(0deg) scale(1.02)}
.cbf .cb-pol img{display:block;width:100%;height:330px;object-fit:cover;object-position:center 20%;border-radius:3px}
.cbf .cb-pol figcaption{text-align:center;padding:14px 0 16px}
.cbf .cb-pol-tape{position:absolute;top:-14px;left:50%;width:110px;height:30px;margin-left:-55px;background:rgba(248,188,81,.75);transform:rotate(3deg);border-radius:3px}
.cbf h2,.cbf h3{letter-spacing:-.01em}
@media (max-width:1240px){.cbf-d section{padding-left:40px!important;padding-right:40px!important}}
@media (max-width:899px){.cbf-d{display:none}.cbf-m{display:block}
 .cbf .cb-fc{gap:12px;padding:24px 22px 22px;border-radius:22px}.cbf .cb-fc-q{top:-4px;left:16px;font-size:84px}.cbf .cb-fc blockquote{padding-top:22px}
 .cbf .cb-pol{padding:12px 12px 0;width:88%;align-self:center}.cbf .cb-pol img{height:180px}.cbf .cb-pol figcaption{padding:10px 0 12px}}
/* one Events page (Amanda 2026-11-08) */
.ev-jump{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.ev-sec{scroll-margin-top:90px}
.ev-alt{background:#FEF1D8}
.ev-sec h2{margin-bottom:10px}
.ev-sub{margin-top:28px}
/* card buttons sit apart from the card text and from the next card (Amanda 2026-11-08) */
.card-btn{margin:24px 0 0}
.card-grid{gap:34px 28px}
.card-pink{border-top-color:#F4C6C0!important}.card-sage{border-top-color:#46574E!important}
.footer-more{margin-top:10px}
.ev-more{margin-top:34px}
/* nothing narrow and smashed left (Amanda, every site): section text spans the section */
.section-lede,.content-section p,.band p{max-width:none!important}
/* wide sections like the Insiders page, not a narrow blog column (Amanda 2026-11-08) */
.shell{max-width:min(1440px,calc(100vw - 96px))!important}
.shell-narrow{max-width:min(1200px,calc(100vw - 96px))!important}
.hero-grid:not(:has(.hero-art-founders)) .hero-copy,.page-hero-copy{max-width:1100px!important}
@media (max-width:700px){.shell,.shell-narrow{max-width:calc(100vw - 40px)!important}}
.card-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card-grid:has(> .card:nth-child(5):last-child){grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (min-width:1300px){.card-grid:has(> .card:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}}
.card-grid > .card:has(.card-btn){display:flex;flex-direction:column}
.card-grid > .card .card-btn{margin-top:auto;padding-top:22px}