:root{--cream:#F8F4ED;--parch:#F0E9D8;--gold:#B8860B;--gold2:#D4A017;--pale:#F5EDD5;--burg:#6B2737;--burg2:#8B3A4C;--ink:#1C1810;--brown:#1C1810;--brown2:#0E0B07;--soft:#3A3228;--dust:#8A7968;--dust2:#B3A491;--bd:rgba(184,134,11,.18);--bd2:rgba(184,134,11,.1);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);font-weight:300;line-height:1.75;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
/* header */
.hdr{position:sticky;top:0;z-index:100;background:var(--brown2);border-bottom:1px solid rgba(184,134,11,.25);display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:70px}
.hdr .logo img{height:40px;width:auto}
.hdr nav{display:flex;gap:26px;align-items:center}
.hdr nav a{font-size:12.5px;letter-spacing:.06em;color:rgba(240,234,216,.7);text-decoration:none;transition:color .25s;padding:6px 0;border-bottom:1px solid transparent}
.hdr nav a:hover,.hdr nav a.on{color:var(--gold2);border-bottom-color:var(--gold2)}
.hdr .don{background:var(--gold);color:#FFF8F0!important;padding:8px 20px!important;border-radius:2px;border:0!important}
.hdr .don:hover{background:var(--gold2)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:1.5px;background:#F0EAD8;margin:5px 0}
/* type */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.2}
.eb{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.eb::before{content:'';width:24px;height:1px;background:var(--gold);opacity:.6}
.ctr .eb{justify-content:center}.ctr .eb::after{content:'';width:24px;height:1px;background:var(--gold);opacity:.6}
.t{font-size:clamp(28px,4vw,46px);font-weight:300;margin-bottom:18px}
p{font-size:15px;color:var(--soft);line-height:1.9;max-width:700px}
p+p{margin-top:14px}
p strong{font-weight:500;color:var(--ink)}
.lead{font-size:16.5px;color:var(--dust)}
.ctr{text-align:center}.ctr p{margin-left:auto;margin-right:auto}
/* sections */
.sec{padding:52px 6%;border-bottom:1px solid var(--bd2)}
.sec.alt{background:var(--parch)}
.sec.dk{background:var(--brown);border-bottom:0}
.dk .t,.dk h3,.dk h4{color:#F0EAD8}.dk p{color:rgba(240,234,216,.6)}.dk p strong{color:rgba(240,234,216,.9)}
.dk .lead{color:rgba(240,234,216,.5)}
.wrap{max-width:1120px;margin:0 auto}
.two{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
.two.rev{grid-template-columns:340px 1fr}
.two.eq{grid-template-columns:1fr 1fr}
/* hero */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 6% 64px;border-bottom:1px solid var(--bd);background:radial-gradient(ellipse at 50% 0%,rgba(212,160,23,.1),transparent 60%)}
.hero .org{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.hero h1{font-size:clamp(40px,6.4vw,80px);font-weight:500;max-width:880px;margin-bottom:20px;line-height:.92}
.hero h1 em{color:var(--gold)}
.hero .sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,24px);color:var(--dust);margin-bottom:24px}
.hero p{margin-left:auto;margin-right:auto}
.hero .note{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--dust2);margin:22px auto 34px}
.btns{display:flex;gap:12px;flex-wrap:wrap}.ctr .btns,.hero .btns{justify-content:center}
.btn{font:500 12.5px var(--sans);letter-spacing:.07em;padding:12px 26px;background:var(--gold);color:#FFF8F0;border:1px solid var(--gold);border-radius:2px;text-decoration:none;display:inline-block;transition:.25s}
.btn:hover{background:var(--gold2);border-color:var(--gold2);transform:translateY(-1px)}
.btn.g{background:transparent;color:var(--soft);border-color:var(--bd)}.btn.g:hover{border-color:var(--gold);color:var(--gold)}
.dk .btn.g{color:rgba(240,234,216,.75);border-color:rgba(184,134,11,.4)}
.lnk{font-size:13px;letter-spacing:.06em;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--bd)}
.lnk:hover{border-color:var(--gold)}
/* page header */
.ph{background:var(--brown);padding:30px 6% 38px;border-bottom:1px solid rgba(184,134,11,.2);position:relative}
.ph .crumb{font-size:11.5px;letter-spacing:.06em;color:rgba(212,160,23,.7);margin-bottom:14px}
.ph .crumb a{text-decoration:none}.ph .crumb a:hover{color:var(--gold)}
.ph h1{font-size:clamp(36px,5vw,60px);font-weight:300;color:#F0EAD8;margin-bottom:14px}
.ph .sub{font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(240,234,216,.5);max-width:640px;line-height:1.7}
.ph .grid2{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:center}
.sub-nav{position:sticky;top:70px;z-index:90;background:var(--parch);border-bottom:1px solid var(--bd);display:flex;overflow-x:auto;padding:0 5%}
.sub-nav a{font-size:12px;letter-spacing:.06em;padding:14px 18px;color:var(--dust);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.sub-nav a:hover{color:var(--ink)}.sub-nav a.on{color:var(--gold);border-bottom-color:var(--gold)}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:26px}
.card{border:1px solid var(--bd2);background:var(--cream);border-radius:3px;padding:20px;transition:.25s}
.alt .card{background:var(--cream)}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card .tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.card h3{font-size:20px;margin-bottom:8px}
.card p{font-size:13.5px;color:var(--dust);line-height:1.75}
.card .n{font-size:12px;color:var(--dust2);font-style:italic;margin-top:10px}
.card a.lnk{display:inline-block;margin-top:12px}
.dk .card{background:rgba(184,134,11,.05);border-color:rgba(184,134,11,.2)}
.dk .card:hover{border-color:rgba(184,134,11,.5)}
.dk .card p{color:rgba(240,234,216,.5)}
.num{font-family:var(--serif);font-size:38px;font-weight:300;color:var(--gold);opacity:.3;line-height:1;margin-bottom:10px}
/* quote & misc */
.q{margin:24px 0;padding:20px 24px;border-left:2px solid var(--gold);background:var(--pale);border-radius:0 3px 3px 0}
.q p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--soft);line-height:1.7;max-width:none}
.q cite{display:block;margin-top:10px;font-size:12px;font-style:normal;color:var(--dust);letter-spacing:.04em}
.dk .q{background:rgba(184,134,11,.07)}.dk .q p{color:rgba(240,234,216,.78)}
.side{background:var(--parch);border:1px solid var(--bd);border-radius:3px;padding:26px 22px;position:sticky;top:130px}
.side h4{font-size:18px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--bd2)}
.side li{list-style:none;padding:9px 0;border-bottom:1px solid var(--bd2);font-size:13px;color:var(--dust);line-height:1.55;display:flex;gap:10px}
.side li:last-child{border:0}.side li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold);margin-top:8px;flex:none;opacity:.6}
.fig img{width:100%;border-radius:3px;border:1px solid var(--bd);object-fit:cover}
.fig figcaption{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--dust);margin-top:10px;text-align:center}
.ch{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ch .n{font-family:var(--serif);font-size:46px;font-weight:300;color:var(--gold);opacity:.25;line-height:1}
.ch h2{font-size:clamp(24px,3vw,32px);font-weight:400}
.miracle{background:var(--brown);border:1px solid rgba(184,134,11,.2);border-radius:3px;padding:28px 32px;margin-bottom:16px}
.miracle .tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.75;margin-bottom:10px}
.miracle p{font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(240,234,216,.72);max-width:none}
.miracle p strong{font-style:normal;color:rgba(240,234,216,.92);font-weight:400}
.tl{position:relative;padding-left:32px}.tl::before{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--bd)}
.tl div{position:relative;margin-bottom:22px}.tl div::before{content:'';position:absolute;left:-32px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--cream);border:1.5px solid var(--gold)}
.tl b{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--gold);font-weight:400}
.tl h4{font-size:17px}.tl span{font-size:13px;color:var(--dust);display:block;line-height:1.6}
.gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0;border-top:1px solid var(--bd)}
.gl div{padding:16px 18px 16px 0;border-bottom:1px solid var(--bd)}.gl h4{font-size:18px;color:var(--gold)}.gl span{font-size:13px;color:var(--dust);line-height:1.6;display:block}
.cat{margin-bottom:44px}
.cat>h3{font-size:26px;margin-bottom:6px}.cat>.k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.list li{list-style:none;padding:10px 0 10px 20px;border-bottom:1px solid var(--bd2);font-size:14px;color:var(--soft);position:relative}
.list li::before{content:'';position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--gold)}
.ntc{border:1px solid var(--bd);border-left:3px solid var(--gold);background:var(--pale);padding:18px 22px;border-radius:0 3px 3px 0;margin-top:22px}
.ntc p{font-size:14px;max-width:none}
.strip{background:var(--parch);padding:46px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--bd2)}
.strip p{font-family:var(--serif);font-style:italic;font-size:21px;max-width:none}
/* footer */
.ftr{background:var(--brown2);padding:52px 6% 26px;border-top:1px solid rgba(184,134,11,.2)}
.ftr .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:34px;border-bottom:1px solid rgba(184,134,11,.12);margin-bottom:20px}
.ftr img{height:38px;width:auto;margin-bottom:14px}
.ftr p{font-size:13px;color:rgba(240,234,216,.38);max-width:280px;line-height:1.75}
.ftr h4{font:400 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:14px}
.ftr li{list-style:none;margin-bottom:8px}.ftr li a{font-size:13px;color:rgba(240,234,216,.45);text-decoration:none}.ftr li a:hover{color:var(--gold)}
.ftr .bot{font-size:11.5px;color:rgba(240,234,216,.28);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}.rv.v{opacity:1;transform:none}
[hidden]{display:none!important}
@media(max-width:980px){
 .burger{display:block}
 .hdr nav{position:absolute;top:70px;left:0;right:0;background:var(--brown2);flex-direction:column;align-items:flex-start;gap:0;padding:8px 5% 20px;border-bottom:1px solid rgba(184,134,11,.25);display:none}
 .hdr nav.open{display:flex}.hdr nav a{padding:13px 0;width:100%;font-size:14px}.hdr .don{margin-top:10px;text-align:center}
 .two,.two.rev,.two.eq,.ph .grid2{grid-template-columns:1fr;gap:36px}
 .side{position:static}.ph .fig{max-width:300px}
 .ftr .top{grid-template-columns:1fr 1fr}.ftr .top>div:first-child{grid-column:1/-1}
}
@media(max-width:600px){.sec{padding:48px 5%}.ph{padding:24px 5% 30px}.hero{padding:40px 5% 52px}.ftr .top{grid-template-columns:1fr}}

.hm{list-style:none;margin-top:26px;border-top:1px solid rgba(184,134,11,.15)}.hm li{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid rgba(184,134,11,.15);font-size:13.5px;color:rgba(240,234,216,.7)}.hm b{width:100px;flex:none;font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(184,134,11,.65);padding-top:2px}

.ph3{font-size:22px;margin:30px 0 10px}.hm b{width:130px}

@media(max-width:1180px){.hdr nav{gap:18px}.hdr nav a{font-size:12px}}

[id]{scroll-margin-top:125px}

@media(min-width:601px) and (max-width:980px){.sec{padding:56px 5%}.cards{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:clamp(40px,8vw,64px)}.ph .grid2{gap:24px}}
img{height:auto}

/* Thiruppugazh titles: editorial list rather than cards */
.work-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;margin-top:28px;border-top:1px solid var(--bd)}
.work-item{display:grid;grid-template-columns:minmax(145px, .72fr) 1.5fr;gap:16px;align-items:start;padding:17px 0;border-bottom:1px solid var(--bd)}
.work-item .tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);line-height:1.6;padding-top:5px}
.work-item h3{font-size:19px;font-weight:400;margin:0 0 4px}
.work-item p{font-size:13px;color:var(--dust);line-height:1.65;margin:0}
@media(max-width:760px){.work-list{grid-template-columns:1fr;column-gap:0}.work-item{grid-template-columns:minmax(120px,.65fr) 1.5fr}}
@media(min-width:981px){.sec{padding-top:48px;padding-bottom:48px}.ph .wrap{max-width:1120px}}

/* ===== Responsive and visual refinement — layout only; existing palette and typefaces retained ===== */
:root{scroll-padding-top:126px}
body{min-width:320px}
.wrap{width:min(100%,1120px)}
.sec{padding:clamp(42px,5vw,64px) clamp(20px,6%,84px)}
.sec>.wrap,.ph>.wrap{min-width:0}
.sec .wrap>*{min-width:0}
.two,.ph .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px)}
.two:not(.eq){grid-template-columns:minmax(0,1fr) minmax(260px,340px)}
.two.rev{grid-template-columns:minmax(260px,340px) minmax(0,1fr)}
.two.eq{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));align-items:stretch;gap:clamp(12px,1.5vw,18px)}
.card{height:100%;min-width:0;display:flex;flex-direction:column}
.card p{max-width:none}
.card .lnk{align-self:flex-start;margin-top:auto;padding-top:12px}
.forms-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.forms-cards .card{padding:clamp(17px,2vw,22px)}
.forms-cards .card h3{font-size:clamp(18px,1.7vw,21px);line-height:1.22}
.forms-cards .card p{font-size:13.5px;line-height:1.72}
.work-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,52px)}
.work-item{grid-template-columns:minmax(125px,.72fr) minmax(0,1.5fr);min-width:0}
.work-item>div{min-width:0}
.ph{padding:clamp(28px,4vw,44px) clamp(20px,6%,84px)}
.ph .grid2{align-items:center}
.ph .sub{max-width:760px}
.hero{padding:clamp(46px,6vw,76px) clamp(20px,6%,84px) clamp(52px,6.5vw,82px)}
.hero>p{max-width:820px}
.hero .note{margin:20px auto 28px}
.fig img{max-height:560px;object-fit:contain}
.side{min-width:0}
.q,.ntc,.miracle{max-width:100%;min-width:0}
.q p{max-width:none}
.ftr .top{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3.5vw,48px)}
.ftr .top>div{min-width:0}
.ftr p{max-width:360px}
.ftr .bot{line-height:1.6}
.sub-nav{scrollbar-width:thin;overscroll-behavior-x:contain}
.sub-nav a{flex:0 0 auto}
.btns{align-items:center}
.btn{white-space:normal;text-align:center}
#overview .two:has(> :only-child){grid-template-columns:minmax(0,1fr)}
#overview .two:has(> :only-child)>:only-child{max-width:900px}
#thiruppugazh{background:var(--cream)}
#paths{background:var(--parch)}
#grace{background:var(--cream)}

@media(max-width:980px){
  .hdr{padding-inline:4%;}
  .hdr nav{max-height:calc(100dvh - 70px);overflow-y:auto}
  .two,.two.rev,.two.eq,.ph .grid2{grid-template-columns:minmax(0,1fr);gap:28px}
  .two:not(.eq),.two.rev{grid-template-columns:minmax(0,1fr)}
  .side{position:static;top:auto}
  .ph .fig{max-width:min(100%,360px);margin-inline:auto}
  .forms-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr .top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr .top>div:first-child{grid-column:1/-1}
}
@media(max-width:640px){
  .hdr{height:64px}
  .hdr .logo img{height:35px;max-width:min(68vw,260px)}
  .hdr nav{top:64px}
  .sub-nav{top:64px;padding-inline:3%}
  .sub-nav a{font-size:11.5px;padding:12px 13px}
  .sec{padding:42px 5%}
  .ph{padding:24px 5% 30px}
  .hero{padding:42px 5% 48px}
  .hero .org{font-size:9.5px;letter-spacing:.15em;margin-bottom:20px}
  .hero h1{font-size:clamp(36px,10vw,54px);line-height:.98;margin-bottom:18px}
  .hero .sub{margin-bottom:18px}
  .hero p{font-size:14px;line-height:1.8}
  .hero .note{font-size:13px;line-height:1.55;margin:18px auto 24px}
  .ph h1{font-size:clamp(34px,9vw,48px);line-height:1.05}
  .ph .sub{font-size:16px;line-height:1.6}
  .t{font-size:clamp(27px,7.5vw,36px);line-height:1.12;margin-bottom:14px}
  p{font-size:14px;line-height:1.8}
  .lead{font-size:15px}
  .cards,.forms-cards{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:22px}
  .card{padding:18px}
  .card h3{font-size:20px}
  .work-list{grid-template-columns:minmax(0,1fr);column-gap:0}
  .work-item{grid-template-columns:minmax(105px,.65fr) minmax(0,1.5fr);gap:12px;padding:15px 0}
  .work-item h3{font-size:18px;overflow-wrap:anywhere}
  .work-item .tag{font-size:9px;overflow-wrap:anywhere}
  .q{padding:17px 18px;margin:20px 0}
  .q p{font-size:18px;line-height:1.6}
  .miracle{padding:22px 20px}
  .strip{padding:34px 5%}
  .strip p{font-size:19px}
  .btns{gap:10px}
  .btn{padding:11px 18px;font-size:12px}
  .ftr{padding:38px 5% 22px}
  .ftr .top{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;padding-bottom:26px}
  .ftr .top>div:first-child{grid-column:1/-1}
  .ftr .bot{display:grid;gap:8px;font-size:10.5px}
  .hm li{gap:10px;align-items:flex-start}
  .hm b{width:105px;flex:0 0 105px}
  [id]{scroll-margin-top:112px}
}
@media(max-width:380px){
  .work-item{grid-template-columns:minmax(0,1fr)}
  .work-item .tag{padding-top:0}
  .ftr .top{grid-template-columns:minmax(0,1fr)}
  .ftr .top>div:first-child{grid-column:auto}
  .btns .btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ===== Site-wide content-flow correction =====
   Keep the existing palette and typefaces. Remove the global paragraph
   bottleneck and let each content layout determine its own readable width. */
.wrap{width:min(100%,1320px);max-width:1320px}
.sec>.wrap,.ph>.wrap{width:min(100%,1320px);max-width:1320px}
p{max-width:none}
.wrap>p,.wrap>.lead,.ph .sub{max-width:1000px}
.two p,.two .lead,.ph .grid2 p{max-width:none}
.ctr p{max-width:1000px}
.card p,.q p,.miracle p,.ntc p,.strip p{max-width:none}
.ftr p{max-width:360px}

/* Let section content and grids use the full width of their parent. */
.sec .wrap,.ph .wrap,.hero .wrap{min-width:0;width:100%}
.cards,.forms-cards,.work-list,.gl{width:100%;min-width:0}
.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr))}
/* Philosophy: six grace-practice cards arranged as two balanced rows of three. */
.philosophy-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.forms-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.card,.work-item,.work-item>div,.two>*{min-width:0}
.work-item p{max-width:none}
.fig,.fig img{max-width:100%}

/* Medium desktop and tablet: preserve useful text measure within columns. */
@media(max-width:1180px){
  .wrap,.sec>.wrap,.ph>.wrap{width:100%;max-width:100%}
  .sec{padding-inline:5%}
  .two,.two.rev,.two.eq,.ph .grid2{gap:clamp(22px,3vw,34px)}
  .two:not(.eq),.two.rev{grid-template-columns:minmax(0,1fr) minmax(240px,34%)}
  .two.rev{grid-template-columns:minmax(240px,34%) minmax(0,1fr)}
  .forms-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .philosophy-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .two,.two.rev,.two.eq,.ph .grid2{grid-template-columns:minmax(0,1fr);gap:26px}
  .two:not(.eq),.two.rev{grid-template-columns:minmax(0,1fr)}
  .wrap>p,.wrap>.lead,.ctr p,.ph .sub{max-width:900px}
}
@media(max-width:640px){
  .wrap,.sec>.wrap,.ph>.wrap{width:100%;max-width:100%}
  .sec{padding-inline:5%}
  .wrap>p,.wrap>.lead,.ctr p,.ph .sub{max-width:none}
  .forms-cards,.cards{grid-template-columns:minmax(0,1fr)}
  .philosophy-steps{grid-template-columns:minmax(0,1fr)}
  .two,.two.rev,.two.eq,.ph .grid2{gap:22px}
  .work-item{grid-template-columns:minmax(0,1fr)}
  .work-item .tag{padding-top:0}
  .side{width:100%}
  .hm b{width:105px;flex:0 0 105px}
}


/* ===== v8.1 photo frames ===== */
/* A fine line sits close to each selected photograph; the page background remains unchanged. */
.photo-frame{
  border:1px solid var(--bd);
  padding:6px;
  background:transparent;
}
.photo-frame img{
  display:block;
  box-sizing:border-box;
  padding:0;
  border:0;
  background:transparent;
  max-width:100%;
}

/* Philosophy: give the grace quotation a deliberate, centred position below the introduction. */
.name-intro{max-width:1000px}
.grace-quote{max-width:820px;margin:28px auto 34px;text-align:center;padding:26px 34px}
.grace-quote p{font-size:clamp(20px,2vw,25px);line-height:1.55}
.grace-quote cite{margin-top:14px}

/* Donation compliance note. */
.donation-note{max-width:900px;margin:26px auto 0;padding:20px 24px;border:1px solid var(--bd);background:rgba(184,134,11,.06)}
.donation-note p{max-width:none;margin:4px 0;color:rgba(240,234,216,.82)}
.donation-note p:first-child{color:var(--gold)}

/* Contact page, based on the supplied reference layout. */
.contact-section .wrap{max-width:1320px}
.contact-heading{text-align:center;max-width:1050px;margin:0 auto 54px}
.contact-heading .eb{justify-content:center}
.contact-heading .t{font-size:clamp(38px,5vw,62px);margin:20px 0 24px}
.contact-heading>p{max-width:1000px;margin:0 auto;color:rgba(240,234,216,.68);font-size:clamp(16px,1.55vw,21px);line-height:1.9}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1220px;margin:0 auto}
.contact-card{min-width:0;padding:34px 38px 36px;border:1px solid var(--bd);background:rgba(184,134,11,.055);border-radius:4px;display:flex;flex-direction:column;align-items:flex-start}
.contact-card .tag{color:var(--gold);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.contact-card h3{font:400 30px var(--serif);color:var(--cream);margin:0 0 14px}
.contact-card .contact-value{font-size:17px;font-weight:500;color:var(--cream);overflow-wrap:anywhere;margin:0 0 26px}
.contact-card .btn{margin-top:auto;min-width:172px;text-align:center}
body[data-page="foundation"] .sec>.wrap{max-width:1120px!important;width:min(100%,1120px)}
body[data-page="foundation"] .sec .cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr))}
body[data-page="foundation"] .sec .two{align-items:start;gap:clamp(28px,4vw,56px)}
body[data-page="foundation"] .sec .side{align-self:start}
body[data-page="foundation"] .sec p{max-width:1000px}
@media(max-width:900px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-heading{margin-bottom:38px}}
@media(max-width:600px){.contact-grid{grid-template-columns:minmax(0,1fr);gap:14px}.contact-card{padding:26px 24px}.contact-heading .t{margin:14px 0 18px}.grace-quote{padding:20px 18px;margin:22px auto 28px}.donation-note{padding:17px 18px}}


/* ===== v7 site-wide visual balance and section rhythm =====
/* Keep the established palette and typefaces; use existing section variants deliberately. */
.sec{position:relative}
.sec + .sec{border-top:1px solid var(--bd2)}
.sec.alt{background:var(--parch)}
.sec:not(.alt):not(.dk){background:var(--cream)}
/* Homepage: give the foundation section its own cream field after the parchment works section. */
body[data-page="home"] #participate{background:var(--cream)}
/* Philosophy: keep the grace explanation and quotation side-by-side on desktop,
   with the quotation centred within the right-hand column. */
.two.grace-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:clamp(28px,4vw,56px);align-items:center}
.grace-layout>.q{align-self:center;justify-self:stretch;margin:0;min-height:180px;display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3vw,34px)}
.grace-layout>.q p{text-align:center}
.grace-layout>.q cite{text-align:center}
/* Donate and Contact pages: contrasting parchment content beneath the dark page title. */
body[data-page="give"] #donate .card{background:var(--cream);border-color:var(--bd)}
body[data-page="give"] #donate .card h3{color:var(--ink)}
body[data-page="give"] #donate .card p{color:var(--soft)}
body[data-page="give"] #donate .list li{color:var(--soft)!important}
body[data-page="give"] .donation-note{background:var(--cream);border-color:var(--bd)}
body[data-page="give"] .donation-note p{color:var(--soft)}
body[data-page="give"] .donation-note p:first-child{color:var(--gold)}
.contact-section .contact-heading>p{color:var(--soft)}
.contact-section .contact-card{background:var(--cream);border-color:var(--bd)}
.contact-section .contact-card h3{color:var(--ink)}
.contact-section .contact-card .contact-value{color:var(--soft)}
.contact-section .contact-card .btn.g{color:var(--soft)}
/* Keep section content and card grids aligned to the same visual edges. */
body[data-page="foundation"] .sec>.wrap{width:min(100%,1180px);max-width:1180px}
body[data-page="foundation"] .sec .cards{align-items:stretch}
body[data-page="foundation"] .sec .two{grid-template-columns:minmax(0,1.5fr) minmax(260px,.85fr);align-items:center}
body[data-page="foundation"] .sec .side{position:static;align-self:center}
/* Contact Us is a first-class destination in the shared navigation. */
.hdr nav a{white-space:nowrap}
@media(max-width:980px){
  .two.grace-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .grace-layout>.q{min-height:0}
  body[data-page="foundation"] .sec .two{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .hdr nav{gap:16px}
  .hdr nav a{font-size:11.5px}
}