:root{
  --olive:#2f3a26; --olive-2:#3d4a30; --sage:#8f9a80; --sage-lt:#c9cfbc;
  --ivory:#f5f0e6; --ivory-2:#ede6d8; --taupe:#cbbfae; --clay:#a5604a; --bronze:#8f6a3a;
  --ink:#2b2a25; --ink-2:#5c5a52;
  --display:"Cormorant Garamond",Georgia,serif; --caps:"Cormorant SC",Georgia,serif; --body:"EB Garamond",Georgia,serif;
  --gutter:clamp(16px,5vw,72px); --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.1;margin:0 0 .5em;color:var(--olive)}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:clamp(20px,2.2vw,24px)}
p{margin:0 0 1em}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.eyebrow{font-family:var(--body);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);margin-bottom:14px}
.eyebrow.light{color:var(--sage-lt)}
.wordmark{font-family:var(--caps);font-weight:600;letter-spacing:.14em;font-size:22px;color:var(--olive)}
.tagline-sm{display:block;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.wordmark-lg{font-family:var(--caps);font-weight:600;letter-spacing:.12em;font-size:clamp(34px,5.2vw,68px);margin:6px 0 4px;white-space:nowrap}
.script{font-family:var(--display);font-style:italic;font-size:clamp(24px,3vw,34px);color:var(--olive-2);margin:0 0 28px}
.script-lg{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.4vw,28px);line-height:1.35;color:var(--olive-2)}
.rule{border:0;height:1px;background:var(--bronze);width:56px;margin:18px 0}
.hero .rule{margin-left:auto;margin-right:auto}
.note{font-size:14px;color:var(--ink-2);font-style:italic}
.btn{display:inline-block;font-family:var(--body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding:14px 26px;border:1px solid var(--olive);cursor:pointer;transition:background .2s,color .2s}
.btn-solid{background:var(--olive);color:var(--ivory)}
.btn-solid:hover{background:var(--olive-2)}
.btn-ghost{background:transparent;color:var(--olive)}
.btn-ghost:hover{background:var(--olive);color:var(--ivory)}
.btn-light{border-color:var(--ivory);color:var(--ivory)}
.btn-light:hover{background:var(--ivory);color:var(--olive)}
.btn.wide{width:100%;text-align:center}
.textlink{font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border:1px solid var(--olive);padding:12px 22px;display:inline-block}
.textlink:hover{background:var(--olive);color:var(--ivory)}
.lede.narrow{max-width:760px;margin-left:auto;margin-right:auto}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gutter);background:var(--ivory);border-bottom:1px solid var(--ivory-2);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:46px;height:33px}
.links{display:flex;align-items:center;gap:26px}
.links a{text-decoration:none;font-size:14px;letter-spacing:.04em}
.links a:not(.btn):hover{color:var(--bronze)}
.links .btn{padding:11px 18px;font-size:11px}
.nav .wordmark,.links .btn{white-space:nowrap}
@media(max-width:700px){.links a:not(.btn){display:none}.tagline-sm{display:none}.nav{gap:10px}.nav .wordmark{font-size:18px;letter-spacing:.1em}.brand-mark{width:38px;height:27px}.links .btn{padding:10px 13px}}
@media(max-width:480px){.hero .eyebrow{font-size:10.5px;letter-spacing:.18em}}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,640px);background:var(--ivory) radial-gradient(ellipse at 10% 20%,#ece4d3 0,transparent 55%)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:56px var(--gutter)}
.hero-branch{width:190px;height:auto;margin-bottom:6px}
/* the sprig sways from the cut end of its stem, like a breeze through a window */
.hero-branch{transform-origin:7% 88%;animation:sway 7s ease-in-out infinite alternate;will-change:transform}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(2.2deg)}}
@media (prefers-reduced-motion:reduce){.hero-branch{animation:none}}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:30% 100%}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero-art{order:-1;height:66vw;max-height:420px;overflow:hidden}}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(48px,7vw,96px) var(--gutter);max-width:var(--max);margin:0 auto}
.split-copy{position:relative;padding-right:120px}
.deco-branch{position:absolute;right:0;top:-10px;width:120px;height:auto;opacity:.85}
.deco-branch.small{position:static;width:84px;margin-top:8px}
.frame{border:1px solid var(--taupe);padding:12px;background:#fff}
.frame img{width:100%}
.split-art.frame img{aspect-ratio:16/10;object-fit:cover}
@media(max-width:820px){.split{grid-template-columns:1fr}.split-copy{padding-right:0}.deco-branch{display:none}}

/* about */
.about{background:var(--ivory-2)}
.about{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:clamp(28px,5vw,72px);padding:clamp(48px,7vw,96px) max(var(--gutter),calc((100% - var(--max))/2))}
.about-side{position:sticky;top:96px;align-self:start}
.about-side .script-lg{margin:28px 0 0}
.about-copy p:not(.eyebrow){font-size:19px}
@media(max-width:900px){.about{grid-template-columns:1fr}.about-side{position:static;max-width:460px}}

/* services */
.services{padding:clamp(56px,8vw,110px) var(--gutter);max-width:var(--max);margin:0 auto}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:40px}
.card{background:#fbf8f1;border:1px solid var(--taupe);padding:30px clamp(20px,2.4vw,30px);display:grid;grid-template-columns:132px 1fr;gap:clamp(18px,2.2vw,28px);align-items:start}
.arch{width:132px;height:168px;border-radius:66px 66px 0 0;overflow:hidden;border:1px solid var(--taupe)}
.arch img{width:100%;height:100%;object-fit:cover}
.card-body{display:flex;flex-direction:column;height:100%}
.card h3{font-size:clamp(23px,2.4vw,28px);margin-bottom:.3em}
.card .sub{font-style:italic;color:var(--olive-2);font-size:19px;margin-bottom:14px}
.card p{font-size:17px}
.card-link{margin-top:auto;padding-top:6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--bronze)}
.card-link:hover{color:var(--olive)}
@media(max-width:1000px){.cards{grid-template-columns:1fr}}
@media(max-width:520px){.card{grid-template-columns:1fr}.arch{margin:0 auto;width:170px;height:200px;border-radius:85px 85px 0 0}}

/* talks */
.talks{display:grid;grid-template-columns:.8fr 1.2fr;grid-template-areas:"art copy" "list list";gap:0 clamp(24px,5vw,72px);background:var(--ivory-2);padding:0 0 48px}
.talks-art{grid-area:art}
.talks-art{position:relative;min-height:440px}
.talks-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.talks-copy{grid-area:copy;padding:clamp(40px,6vw,72px) var(--gutter) 40px 0;align-self:center}
.talk-list{grid-area:list;list-style:none;margin:0;padding:40px var(--gutter) 0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.talk-list li{display:flex;gap:16px;border-top:1px solid var(--taupe);padding-top:20px}
.talk-num{font-family:var(--display);font-size:34px;color:var(--bronze);line-height:1}
.talk-list h3{font-size:25px;margin-bottom:.2em}
.talk-list p{font-size:16.5px;margin-bottom:8px}
.talk-meta{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.talk-list .sub{font-style:italic;color:var(--olive-2);font-size:18px}
@media(max-width:820px){.talks{grid-template-columns:1fr;grid-template-areas:"art" "copy" "list"}.talks-copy{padding:32px var(--gutter) 8px}.talk-list{grid-template-columns:1fr}.talks-art{min-height:0;height:96vw;max-height:520px}}

/* band */
.band{display:grid;grid-template-columns:1fr 1fr;background:var(--olive);color:var(--ivory)}
.band h2{color:var(--ivory)}
.band-copy{padding:clamp(48px,7vw,96px) var(--gutter);align-self:center}
.band-art img{width:100%;height:100%;object-fit:cover;object-position:88% 60%;min-height:380px}
@media(max-width:820px){.band{grid-template-columns:1fr}.band-art img{min-height:0;height:70vw;max-height:440px}}

/* book */
.book{background:var(--ivory-2);padding:clamp(56px,8vw,110px) var(--gutter)}
.book-inner{max-width:760px;margin:0 auto}
.lede{font-size:20px;color:var(--ink-2)}
.book-form{margin-top:32px;display:grid;gap:18px}
.book-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.book-form label{display:grid;gap:6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.book-form input,.book-form select,.book-form textarea{font:inherit;font-size:17px;letter-spacing:0;text-transform:none;color:var(--ink);padding:12px 14px;border:1px solid var(--taupe);background:#fff;width:100%}
.book-form textarea{resize:vertical}
.book-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.6em;margin:0;color:var(--olive);font-style:italic}
.note a{color:inherit}
@media(max-width:600px){.book-form .row{grid-template-columns:1fr}}

/* closing */
.closing{position:relative;text-align:center;padding:clamp(64px,9vw,120px) var(--gutter);overflow:hidden;background:#ece5d6}
.closing .trees{position:absolute;bottom:0;height:100%;width:auto;opacity:.5;mix-blend-mode:multiply;pointer-events:none;-webkit-mask-image:linear-gradient(to right,#000 40%,transparent);mask-image:linear-gradient(to right,#000 40%,transparent)}
.closing .trees.right{-webkit-mask-image:linear-gradient(to left,#000 40%,transparent);mask-image:linear-gradient(to left,#000 40%,transparent)}
.closing .trees.left{left:0}.closing .trees.right{right:0}
.closing h2{position:relative}
.closing .btn{position:relative}
@media(max-width:820px){.closing .trees{opacity:.25}}

/* footer */
.footer{background:var(--olive);color:var(--ivory);padding:40px var(--gutter);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.footer .wordmark,.footer .tagline-sm{color:var(--ivory)}
.footer .tagline-sm{color:var(--sage-lt)}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{text-decoration:none;font-size:14px}
.footer-links a:hover{color:var(--sage-lt)}
.footer-base{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:18px}
.footer .copy{font-size:14px;line-height:1.7;color:var(--sage-lt);margin:0}
.footer .credit{font-size:13px;color:var(--sage);margin:0;white-space:nowrap;text-align:right}
.footer .credit a{color:var(--sage-lt);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.footer .credit a:hover{color:var(--ivory)}
@media(max-width:700px){.footer-base{flex-direction:column;align-items:flex-start}.footer .credit{align-self:flex-end}}
.footer .copy a{color:inherit}
@media(max-width:700px){.footer{grid-template-columns:1fr}}

/* inner pages */
.page{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,72px) var(--gutter)}
.page h1{font-size:clamp(34px,5vw,54px)}
.page h2{font-size:clamp(24px,3vw,32px);margin-top:1.6em}
.page ul,.page ol{padding-left:22px}
.page li{margin-bottom:.5em}
.page li strong{color:var(--olive)}
.page li.done{color:var(--ink-2)}
.page li.done::marker{content:"✓  ";color:var(--bronze)}
.page code{font-family:ui-monospace,Menlo,monospace;font-size:.82em;background:var(--ivory-2);padding:2px 6px}
.callout{background:var(--ivory-2);border-left:3px solid var(--bronze);padding:18px 22px;margin:28px 0}
.sheet{max-width:900px;margin:0 auto;padding:clamp(32px,5vw,64px) var(--gutter);display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(24px,4vw,56px)}
.sheet-side{background:var(--olive);color:var(--ivory);padding:32px 26px}
.sheet-side .headshot{width:100%;margin-bottom:22px;border:1px solid rgba(255,255,255,.25)}
.sheet-main .sub{font-style:italic;color:var(--olive-2)}
.sheet-main ol{padding-left:22px}
.sheet-main li{margin-bottom:1em}
.sheet-side h2,.sheet-side h3{color:var(--ivory);font-size:20px}
.sheet-side .eyebrow{color:var(--sage-lt)}
.sheet-side p{font-size:16px}
.sheet-main h1{font-size:clamp(30px,4vw,44px)}
.sheet-main h3{margin-top:1.4em}
.sheet-main p,.sheet-main li{font-size:17px}
@media(max-width:760px){.sheet{grid-template-columns:1fr}}
@media print{.reveal{opacity:1!important;transform:none!important}.nav,.footer,.btn{display:none!important}body{background:#fff}.sheet-side{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* anchors clear the sticky nav */
[id]{scroll-margin-top:92px}

/* ---- calm motion --------------------------------------------------------------------------
   Bryce, 4 Oct 2026: "soft animation throughout the site. make people feel at home...
   comfortable and calm". Slow, small, and never in the way. All of it is off for visitors who
   ask for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  /* blocks fade up once as they scroll into view (index.html adds .reveal) */
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.6,.2,1)}
  .js .reveal.in{opacity:1;transform:none}

  /* the hero settles in: sprig, name, line, tagline, buttons */
  .hero-copy > *{animation:settle 1.2s cubic-bezier(.2,.6,.2,1) both}
  .hero-copy > .hero-branch{animation:sway 7s ease-in-out infinite alternate,fade 1.6s ease both}
  .hero-copy > :nth-child(2){animation-delay:.15s}
  .hero-copy > :nth-child(3){animation-delay:.3s}
  .hero-copy > :nth-child(4){animation-delay:.42s}
  .hero-copy > :nth-child(5){animation-delay:.55s}
  .hero-copy > :nth-child(6){animation-delay:.75s}
  @keyframes settle{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}

  /* the two big scenes drift very slowly, like looking a little closer */
  .hero-art,.band-art{overflow:hidden}
  .hero-art img,.band-art img{animation:drift 32s ease-in-out infinite alternate;will-change:transform}
  @keyframes drift{from{transform:scale(1)}to{transform:scale(1.06)}}

  /* the small sprigs breathe; the trees at the close lean a touch */
  .deco-branch{transform-origin:7% 88%;animation:sway 9s ease-in-out infinite alternate}
  .closing .trees.left{animation:lean 18s ease-in-out infinite alternate}
  .closing .trees.right{animation:lean 22s ease-in-out infinite alternate-reverse}
  @keyframes lean{from{transform:translateX(-6px)}to{transform:translateX(6px)}}

  /* things you can touch answer gently */
  .card{transition:transform .5s cubic-bezier(.2,.6,.2,1),box-shadow .5s ease}
  .card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(47,58,38,.10)}
  .arch img,.frame img{transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
  .card:hover .arch img,.frame:hover img{transform:scale(1.04)}
  .frame{overflow:hidden}
  .btn,.textlink{transition:background .35s ease,color .35s ease,transform .35s ease,box-shadow .35s ease}
  .btn:hover,.textlink:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(47,58,38,.12)}
  .card-link{transition:color .3s ease,letter-spacing .4s ease}
  .card-link:hover{letter-spacing:.24em}
  .links a:not(.btn){transition:color .3s ease}
  .book-form input,.book-form select,.book-form textarea{transition:border-color .3s ease,box-shadow .3s ease}
  .book-form input:focus,.book-form select:focus,.book-form textarea:focus{outline:none;border-color:var(--olive-2);box-shadow:0 0 0 3px rgba(143,154,128,.28)}
}
