/* Simply Buds — pages.css (Simply Agentic build, Nov 2026)
   Inner pages only: weddings.html + about.html. Loaded after site.css; same tokens, same type scale.
   .ed is the one editorial grid: 12 columns on desktop, 2 on a phone. A piece places itself with
   custom properties in its own style attribute:
     --c desktop columns · --row desktop row · --r aspect ratio
     --m phone columns (1/-1 = full width) · --rm phone-only aspect ratio */
:root{--g:clamp(12px,1.8vw,26px)}
.paper{background:var(--paper)}
.mt{margin-top:22px}
.link{position:relative}
.link::before{content:"";position:absolute;inset:-7px 0}

/* page hero: words left, one picture right.
   .phero>.hero is an empty marker: site.js watches the first .hero on a page and keeps the sticky
   button and the theme dot off it on a phone, the same as the home page. */
.phero{position:relative}
.phero>.hero{position:absolute;inset:0;display:block;min-height:0;background:none;pointer-events:none}
.phero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr auto;column-gap:clamp(24px,6vw,100px);align-items:end}
.phero h1{font-size:clamp(46px,7.3vw,116px)}
.phero h1 span,.phero h1 em{display:block}
.phero h1 em{padding-bottom:.08em}
.ph-text{grid-column:1;grid-row:1}
.ph-text .btn{margin-top:30px}
.ph-media{grid-column:2;grid-row:1/3;aspect-ratio:4/5}
.ph-more{grid-column:1;grid-row:2;margin-top:clamp(28px,3.4vw,48px)}
.toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.toc a{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:68px;padding:14px 12px 14px 0;border-bottom:1px solid var(--line)}
.toc b{font:300 clamp(20px,1.9vw,27px)/1.05 var(--serif);letter-spacing:-.02em;font-variation-settings:"opsz" 72,"SOFT" 50,"WONK" 0}
.toc span{font:500 11px/1.35 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){.toc a:hover b{font-style:italic;color:var(--accent)}}

/* editorial grid */
.ed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:start}
.ed+.ed{margin-top:var(--g)}
.ed>*{grid-column:var(--c,span 4);grid-row:var(--row,auto);min-width:0}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
.ed .tile,.pair .tile{aspect-ratio:var(--r,4/5)}
.ed>.end{align-self:end}
.ed>.fill{align-self:stretch;aspect-ratio:auto}
.ed>.fill>img{position:absolute;inset:0}
.side{display:flex;flex-direction:column;justify-content:space-between;gap:var(--g);align-self:stretch}
.dn1{margin-top:clamp(20px,3.2vw,48px)}
.dn2{margin-top:clamp(40px,6.4vw,96px)}

/* wedding stories */
.story{padding:clamp(56px,7vw,104px) 0}
.st-text h2,.st-head h2{margin:18px 0 24px}
.st-text p{color:var(--ink-2);font-size:clamp(16px,1.2vw,18px);max-width:46ch;margin-bottom:16px}
.st-text .link{margin-top:10px}
.st-head{max-width:760px;margin:0 auto clamp(32px,4.5vw,64px);text-align:center}
.st-head .lead{margin:0 auto}
.credit,.cap{font:500 11.5px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.credit{margin-top:18px}
.cap{padding-top:12px}
.pull{font:300 clamp(28px,3.6vw,54px)/1.06 var(--serif);letter-spacing:-.025em;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 0;max-width:13ch}
.pull em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 70,"WONK" 1;color:var(--accent)}
.pull.q{display:flex;align-items:flex-end;max-width:none;font-size:clamp(18px,2.2vw,34px);line-height:1.1;background:var(--paper);border-radius:2px;padding:clamp(14px,2vw,30px)}

/* dark bands */
.dark{background:var(--espresso);color:var(--on-dark)}
.dark .eyebrow,.dark .lead,.dark .st-text p{color:var(--on-dark-2)}
.dark .eyebrow.dot::before{background:var(--accent-dark)}
.dark h2 em,.dark .pull em{color:var(--accent-dark)}
.dark .tile{background:rgba(247,240,228,.07)}

/* what a wedding includes */
.rows{border-top:1px solid var(--line)}
.rows li{display:flex;align-items:center;gap:clamp(14px,2vw,26px);padding:clamp(11px,1.3vw,16px) 0;border-bottom:1px solid var(--line)}
.rows img{flex:none;width:clamp(52px,5vw,70px);height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.rows b{font:300 clamp(23px,2.7vw,40px)/1.05 var(--serif);letter-spacing:-.025em;font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 0}

/* the review in full */
.love .more{display:block;font:400 clamp(16px,1.3vw,19px)/1.6 var(--sans);letter-spacing:0;color:var(--on-dark-2);max-width:44ch;margin:0 auto 26px}
.love .more~.more{margin:26px auto 0}

/* closing band */
.close{text-align:center}
.close h2{max-width:15ch;margin:18px auto 24px}
.close .lead{margin:0 auto 30px}
.acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px}
.sig{display:block;margin-top:34px;font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

/* about: portrait pair, kinda chic, three steps */
.collage{position:relative;padding:0 13% 11% 0}
.collage .inset{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:1;border:clamp(6px,.8vw,10px) solid var(--cream)}
.kc .kinda{margin-top:0}
.kc .tile{aspect-ratio:4/5}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);margin:0;padding:0;list-style:none}
.how li{border-top:1px solid var(--line);padding-top:22px}
.how .n{display:block;font:300 clamp(46px,5.4vw,78px)/1 var(--serif);font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 70,"WONK" 1;letter-spacing:-.03em;color:var(--accent)}
.how h3{font-size:clamp(26px,2.5vw,36px);margin:16px 0 10px}
.how p{color:var(--ink-2);max-width:34ch}
@media (min-width:901px){
  .kc .kinda{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);max-width:var(--wrap);margin:0 auto;overflow:visible}
  .kc .card:nth-child(even){margin-top:clamp(20px,3.2vw,48px)}
}

/* ≤ 900: phone + small tablet */
@media (max-width:900px){
  .phero .wrap{display:block}
  .ph-media{margin-top:28px}
  .ph-more{margin-top:24px}
  .ed{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense}
  .ed>*{grid-column:var(--m,auto);grid-row:auto}
  .ed .tile,.pair .tile{aspect-ratio:var(--rm,var(--r,4/5))}
  .ed>.fill{aspect-ratio:var(--r,9/16)}
  .dn1,.dn2{margin-top:0}
  .st-text{margin-bottom:8px}
  .side .pull{margin:16px 0 6px}
  .kc .kinda .card{flex-basis:72vw}
  .how{grid-template-columns:1fr;gap:28px}
}