/* PREVIEW 1 ONLY: revised content flow. Each text section is a headline, a short description and a few bullet points. */

.sx{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,7vw,120px);align-items:center;padding:clamp(100px,18vh,200px) var(--pad)}
.sx .label.sec{color:var(--tan)}
.sx[data-tone=sand] .label.sec{color:#7A5D44}
.sx h2{font-weight:200;font-size:clamp(40px,4.6vw,76px);line-height:1;letter-spacing:-.025em;color:var(--navy);margin-top:24px}
.sx h2 b{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.sx .desc{margin-top:clamp(26px,4vh,40px);max-width:40ch;font:400 clamp(19px,1.5vw,23px)/1.55 var(--serif);color:var(--navy)}
.sx-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;outline:1px solid rgba(245,243,239,.35);outline-offset:-14px}
.sx-photo figcaption{margin-top:12px;font-size:13px;color:var(--slate)}

/* bullet points: a short tan rule, no dividing lines */
.pts{list-style:none;display:grid;gap:14px;margin-top:clamp(28px,4.5vh,44px);max-width:46ch}
.pts li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.6;color:#3b4a57}
.pts li::before{content:"";position:absolute;left:0;top:.8em;width:16px;height:1px;background:var(--tan)}
.pts li b{font-family:var(--serif);font-weight:400;font-size:1.12em;color:var(--navy)}

/* events: description left, the four kinds of event right, photos underneath */
.sx-wide{align-items:start}
.sx-wide .pts-lg{max-width:none;gap:26px;margin-top:clamp(8px,2vh,24px)}
.sx-wide .pts-lg li{font-size:16px}
.sx-wide .pts-lg .ask{margin:10px 0 0}
.sx-wide .pts-lg li.needs{outline-offset:8px}
.sx-wide .pair{grid-column:1/-1;margin-top:clamp(40px,7vh,80px)}

/* invitation: apply steps under the signature */
.letter .pts{margin-top:clamp(32px,5vh,48px)}
.letter .pts li{color:#1d2833;font-size:16px}
.letter .pts li::before{background:var(--deep-ink)}
.letter .btn{margin-top:30px}

/* host: points on deep navy */
.host .pts{margin:clamp(26px,4vh,40px) 0 clamp(30px,5vh,48px)}
.host .pts li{color:rgba(245,243,239,.8)}

@media (max-width:900px){
  .sx{grid-template-columns:1fr;gap:44px}
  .sx-photo img{aspect-ratio:3/2}
}
@media (max-width:600px){.sx{padding:clamp(72px,11vh,110px) var(--pad)}}

/* photos: no darkened copies and no frame line, except the hero */
.sx-photo img,.why-photo img,.pair img,.fade img{outline:0}
.letter figure::after{content:none}

/* events: one large photo fading between breakfast and evening */
.sx-wide .fade{grid-column:1/-1;margin-top:clamp(40px,7vh,80px)}
.fade-imgs{position:relative;aspect-ratio:16/9;max-height:80svh;width:100%;overflow:hidden;background:var(--stone)}
.fade-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden}
.fade-imgs img+img,.fade figcaption span+span{animation:fadeswap 14s ease-in-out infinite;will-change:opacity}
.fade figcaption{position:relative;margin-top:12px;font-size:13px;color:var(--slate);min-height:1.5em}
.fade figcaption span{display:block}
.fade figcaption span+span{position:absolute;inset:0}
.fade figcaption span:first-child{animation:fadeback 14s ease-in-out infinite;will-change:opacity}
@keyframes fadeswap{0%,43%{opacity:0}50%,93%{opacity:1}100%{opacity:0}}
@keyframes fadeback{0%,43%{opacity:1}50%,93%{opacity:0}100%{opacity:1}}
@media (max-width:700px){.fade-imgs{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.fade-imgs img+img,.fade figcaption span+span{animation:none;opacity:0}.fade figcaption span:first-child{animation:none}}

/* professions strip: smaller, upright, bold capitals */
.ticker{padding:20px 0}
.ticker .track>span{font:400 clamp(14px,1.15vw,18px)/1.2 "Outfit",sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.14em;margin-right:40px}
.ticker .track>span::after{margin-left:40px}

/* hero header: menu on the left, opposite "Request an invitation" (the hidden logo no longer holds space) */
.top .brand{display:none}
.top .cta{margin-left:auto}

/* seats headline: both words in the same upright font so they sit level */
.table h2 b{font-family:inherit;font-style:normal;font-weight:400;letter-spacing:-.02em}

/* invitation: photo moves to the right, letter on the left (desktop) */
@media (min-width:901px){
  .letter{grid-template-columns:7fr 5fr}
  .letter figure{order:2}
  .letter .body{order:1}
}

/* The network: points at the same size as the description above */
#network .pts{max-width:none;gap:16px}
#network .pts li{font-size:clamp(19px,1.5vw,23px);line-height:1.55;padding-left:34px}

/* footer: middle line centred on the page, not between the logo and the contact line */
@media (min-width:901px){
  footer{display:grid;grid-template-columns:1fr auto 1fr}
  footer span:nth-of-type(1){text-align:center}
  footer span:nth-of-type(2){justify-self:end;text-align:right}
}

/* hero line: larger and wider, two balanced lines instead of a small three-line block */
.hero .row p{max-width:62ch;font-size:clamp(18px,1.75vw,28px);line-height:1.45;font-weight:300;opacity:.95;text-wrap:balance}
@media (max-width:900px){.hero .row p{font-size:clamp(17px,4.4vw,20px)}}

/* Images shown whole at their own shape, scaled to the screen: never wider than their column,
   never taller than the screen below the header. Hero slideshow stays full-bleed. */
.sx-photo img,.letter figure img,.host .portrait img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100svh - 140px);aspect-ratio:auto;object-fit:contain;transform:none}
.letter figure{aspect-ratio:auto;overflow:visible;transform:none}
.sx-photo img,.letter figure img{margin-left:auto}
.fade-imgs{aspect-ratio:3/2;max-height:none}
.sx-wide .fade{width:min(100%,calc((100svh - 140px) * 1.5));justify-self:center}
@media (max-width:700px){.fade-imgs{aspect-ratio:3/2}}
@media (max-width:900px){.sx-photo img,.letter figure img{margin-left:0}}

/* Your host: the four facts as one paragraph under the lead */
.host p.bio{max-width:52ch;margin:clamp(4px,1vh,10px) 0 clamp(30px,5vh,48px);font-size:clamp(17px,1.25vw,19px);line-height:1.7;color:rgba(245,243,239,.8)}

/* Your host: Susan's accolades as badges under the paragraph */
.host .badges{display:flex;align-items:center;gap:clamp(24px,3vw,40px);margin:0 0 clamp(30px,5vh,48px)}
.host .badges img{display:block;height:auto;opacity:.92}
.host .badges img:first-child{width:clamp(76px,6vw,96px)}
.host .badges img:last-child{width:clamp(120px,9.5vw,152px)}
.host p.bio{margin-bottom:clamp(22px,3.5vh,34px)}

/* The network: Susan's tagline under the points */
#network .tagline{margin-top:clamp(34px,5vh,52px);padding-top:clamp(20px,3vh,28px);border-top:1px solid rgba(51,85,115,.18);max-width:none;text-wrap:balance;font:400 clamp(22px,1.9vw,30px)/1.3 var(--serif);color:var(--navy)}
#network .tagline em{font-style:italic}

/* The strength of our local community: Susan's statement, heading left, two paragraphs right */
.stmt{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px);align-items:start;padding:clamp(100px,18vh,200px) var(--pad)}
.stmt h2{font-weight:200;font-size:clamp(40px,4.6vw,76px);line-height:1.02;letter-spacing:-.025em;color:var(--paper)}
.stmt h2 b{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.stmt-body{max-width:62ch}
.stmt-body p{font-size:clamp(17px,1.25vw,19px);line-height:1.75;margin-bottom:1.3em}
.stmt-body p:first-child{font:400 clamp(20px,1.6vw,25px)/1.55 var(--serif);color:var(--paper)!important}
@media (max-width:900px){.stmt{grid-template-columns:1fr;gap:28px}}

/* The seats: the hovered seat's name grows so it is easy to read, anchored at the dot side */
@media (hover:hover){
  .seat em{transform:scale3d(1,1,1);transform-origin:0 50%;backface-visibility:hidden;transition:opacity .8s ease,color .3s ease,border-color .3s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
  .seat.l em{transform-origin:100% 50%}
  .seat.t em{transform-origin:50% 100%}
  .seat.b em{transform-origin:50% 0}
  .seat:hover,.seat:focus-visible{z-index:5}
  .seat:hover em,.seat:focus-visible em{transform:scale3d(1.32,1.32,1)}
}
@media (prefers-reduced-motion:reduce){.seat em{transition:none}}
/* the ring's staggered entrance delay must not hold up the hover growth */
.ring.done .seat em,.ring .seat:hover em,.ring .seat:focus-visible em{transition-delay:0s}

/* tighter gap between the text and picture columns across the page */
@media (min-width:901px){
  :is(.sx,.letter,.host,.stmt,.faq){column-gap:clamp(32px,4vw,64px)!important}
  .sx-photo img,.letter figure img{margin-left:0}
}

/* The network: photo larger beside the text - wider column, gentle 3:2 crop */
@media (min-width:901px){
  #network{grid-template-columns:5fr 6fr}
  #network .sx-photo img{width:100%;max-width:none;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%}
}

/* Nick's amends 2026-11-05: new horizontal logo lockup (mark beside the words) in the bar and footer */
.bar .brand img.logo-h{height:34px;width:auto;display:block}
.top .brand img.logo-h{height:38px;width:auto}
footer img.logo-h{height:40px;width:auto}

/* events photo: the white symbol in the centre */
.fade-mark{position:absolute;left:50%;top:50%;width:clamp(72px,9vw,128px);aspect-ratio:1;transform:translate3d(-50%,-50%,0);background:url(mark-white.svg) center/contain no-repeat;z-index:2;pointer-events:none;filter:drop-shadow(0 2px 18px rgba(20,34,47,.35))}

/* footer: credit sits at the end of the contact line, links in the footer's own colour */
footer a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(245,243,239,.25)}
footer a:hover{color:var(--paper);border-color:var(--tan)}
footer a.credit{border-bottom:0;color:rgba(245,243,239,.85)}

/* Nick's amends: reduce the central gap between heading and text (community, events, questions)
   and between letter and photo. The heading column now hugs its words instead of taking a fixed share. */
@media (min-width:901px){
  #community.stmt,#faq.faq{grid-template-columns:fit-content(370px) minmax(0,1fr);column-gap:clamp(48px,6vw,104px)!important}
  #community .stmt-body{max-width:66ch}
  #faq .qs{max-width:880px}
  #meet.sx-wide{grid-template-columns:fit-content(520px) minmax(0,1fr);column-gap:clamp(48px,6vw,104px)!important}
  #meet .pts-lg{max-width:62ch}
  #letter.letter{grid-template-columns:minmax(0,620px) auto;justify-content:center;column-gap:clamp(40px,5vw,80px)!important}
}

/* footer on one line on wide screens: credit at the end of the contact line, on the right */
@media (min-width:1280px){footer span{white-space:nowrap}}
.table header p{text-wrap:balance}
/* 2026-11-05: section titles without numbers, a touch larger */
.label.sec{font-size:15px;letter-spacing:.24em}
@media (max-width:600px){.label.sec{font-size:13px}}