/* ============================================================
   sunlit-catalog.css — the Sunlit Collection catalog
   (/collection, /homes/<slug>, /<collection>/preview).
   Layout only. Tokens come from sunlit-brand.css, type from
   sunlit-type.css, the page frame from sunlit-pages.css.
   Never redeclare a token here.
   Source: sunlit-render-pipeline/catalog/runtime/site/ — edit there,
   then run catalog/build_catalog.py. The site copy is generated.
   ============================================================ */

/* ---------- Shared ---------- */
.cat-sec{padding:clamp(56px,8vw,104px) 0; border-top:1px solid var(--stone-line)}
.cat-sec.paper{background:var(--paper)}
.cat-sec.stone{background:var(--stone-lt)}
.cat-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin:0 0 clamp(28px,4vw,48px)}
.cat-head h2{max-width:22ch}
.cat-head p{margin:12px 0 0; color:var(--greige); max-width:56ch}
.cat-meta{font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em;
  color:var(--greige); margin:0}
.cat-meta .sep{color:var(--brass); padding:0 .55em}
.cat-sf{font-family:var(--display); font-size:1.05rem; letter-spacing:.04em; color:var(--ink); margin:6px 0 0}
.cat-link{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  color:var(--brass-d); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px}
.cat-link:hover{border-bottom-color:var(--brass)}
.cat-btns{display:flex; gap:12px; flex-wrap:wrap}
.cat-btns .btn{white-space:normal; text-align:center; max-width:100%}
.cat-pic{margin:0; background:var(--stone-lt); overflow:hidden}
/* Owner rule 2026-10-02: a home image is NEVER cropped. Every image is shown
   whole (contain). Frames that can follow the image use its own ratio (--ar,
   set per figure by build_catalog.py); fixed grids show it on a matching mat. */
.cat-pic img{width:100%; height:100%; object-fit:contain}
.cat-pic.natural{aspect-ratio:var(--ar)}
.crumb{font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  color:var(--greige); margin:0 0 22px}
.crumb a{color:var(--greige); text-decoration:none}
.crumb a:hover{color:var(--brass-d)}
.crumb span{padding:0 .6em; color:var(--brass)}

/* ---------- Collection hero ---------- */
.cat-hero{background:var(--stone-lt); padding:clamp(56px,9vw,112px) 0 clamp(40px,6vw,64px)}
.cat-hero h1{max-width:20ch; margin:0 0 22px}
.cat-hero .standfirst{color:var(--greige); font-size:1.08rem; max-width:56ch; margin:0 0 32px}
.cat-hero-img{margin:clamp(40px,6vw,72px) 0 0; aspect-ratio:var(--ar)}

/* ---------- Browse by scale ---------- */
.scales{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,40px)}
.scale{display:flex; flex-direction:column; text-decoration:none; color:var(--ink)}
/* One wide architectural frame for all three Series, at every width (owner revision
   2026-10-02): 3:2, so the representative images are shown whole. */
.scale .cat-pic.series-pic{aspect-ratio:3/2; width:100%; max-width:100%; margin:0 0 22px}
.scale h3{font-size:clamp(1.3rem,2.2vw,1.6rem); margin:0 0 6px}
.scale .range{font-family:var(--display); font-style:italic; color:var(--brass-d); font-size:1.08rem; margin:0 0 12px}
.scale p{color:var(--greige); font-size:.95rem; margin:0 0 18px; max-width:40ch}
.scale > div{display:flex; flex-direction:column; flex:1}   /* links align across the three panels */
.scale .cat-link{margin-top:auto; align-self:flex-start}

/* ---------- Sticky scale bar (homes section) ---------- */
.scale-bar{position:sticky; top:0; z-index:20; background:rgba(247,244,239,.96);
  border-bottom:1px solid var(--stone-line); backdrop-filter:saturate(1.2) blur(6px)}
.scale-bar ul{list-style:none; margin:0; padding:0; display:flex; gap:clamp(18px,4vw,40px);
  overflow-x:auto; scrollbar-width:none}
.scale-bar ul::-webkit-scrollbar{display:none}
.scale-bar a{display:block; padding:16px 0; font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--greige); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent; margin-bottom:-1px}
.scale-bar a:hover,.scale-bar a[aria-current="true"]{color:var(--ink); border-bottom-color:var(--brass)}

/* ---------- Home groups + cards ---------- */
.home-group{padding:clamp(48px,7vw,88px) 0 0; scroll-margin-top:56px}
.home-group:last-child{padding-bottom:clamp(56px,8vw,104px)}
.home-group .g-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:24px;
  align-items:end; padding-bottom:22px; border-bottom:1px solid var(--brass); margin-bottom:clamp(28px,4vw,44px)}
.home-group .g-head h2{margin:0}
.home-group .g-head .range{font-family:var(--display); font-style:italic; color:var(--brass-d); font-size:1.1rem; margin:6px 0 0}
.home-group .g-head > p{color:var(--greige); margin:0; max-width:52ch; justify-self:end}
.homes-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(36px,5vw,64px) clamp(24px,3vw,44px)}
.home-card{display:flex; flex-direction:column; color:var(--ink); text-decoration:none}
.home-card .cat-pic{aspect-ratio:3/2; margin:0 0 20px}
.home-card h3{font-size:clamp(1.45rem,2.6vw,1.95rem); letter-spacing:.06em; font-weight:500; margin:0 0 8px}
.home-card .cat-sf{margin:8px 0 0}
.home-card .cat-link{margin-top:16px; align-self:flex-start}
a.home-card:hover .cat-link{border-bottom-color:var(--brass)}

/* ---------- Collections (editorial features) ---------- */
.collection-feature{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:center}
.collection-feature + .collection-feature{margin-top:clamp(56px,8vw,104px)}
.collection-feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.collection-feature.flip .cat-pic{order:2}
.collection-feature .cat-pic{aspect-ratio:var(--ar)}
.collection-feature h3{font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:.04em; font-weight:500; margin:10px 0 16px}
.collection-feature .lede{color:var(--greige); margin:0 0 18px; max-width:48ch}
.collection-feature .homes-line{font-family:var(--display); font-size:1.05rem; color:var(--ink); margin:0 0 28px}
.collection-feature .material{font-size:.68rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--brass-d); margin:0 0 26px}

/* ---------- Next steps / builders ---------- */
.next-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; border-top:1px solid var(--stone-line)}
.next-steps li{padding:26px 22px 4px 0}
.next-steps .n{font-family:var(--display); color:var(--brass); font-size:1.3rem; display:block; margin:0 0 8px}
.next-steps h3{font-size:1.05rem; margin:0 0 6px}
.next-steps p{color:var(--greige); font-size:.92rem; margin:0 0 14px; max-width:28ch}
.builders-band{background:var(--cream); padding:clamp(48px,7vw,80px) 0; border-top:1px solid var(--stone-line)}
.builders-band .inner{display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:28px; align-items:end}
.builders-band h2{max-width:24ch; margin:0 0 12px}
.builders-band p{color:var(--greige); margin:0; max-width:52ch}

/* ---------- Home detail ---------- */
.hd-hero{background:var(--stone-lt); padding:clamp(28px,5vw,48px) 0 0}
.hd-hero .top{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(24px,4vw,56px);
  align-items:end; margin:0 0 clamp(28px,4vw,44px)}
.hd-hero h1{font-size:clamp(2.6rem,7vw,5rem); letter-spacing:.06em; margin:6px 0 14px}
.hd-hero .descriptor{font-family:var(--display); font-style:italic; font-size:clamp(1.1rem,2vw,1.35rem);
  color:var(--brass-d); margin:0}
.hd-hero .side .cat-sf{font-size:1.4rem; margin:0 0 22px}
.hd-hero .hero-img{aspect-ratio:var(--ar)}
.hd-story{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,72px)}
.hd-story .pull{font-family:var(--display); font-size:clamp(1.45rem,2.8vw,2.05rem); line-height:1.3; margin:0}
.hd-story .copy p{color:var(--greige); margin:0 0 16px; max-width:58ch}
.glance{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0;
  border-top:1px solid var(--brass)}
.glance div{padding:22px 20px 22px 0; border-bottom:1px solid var(--stone-line)}
.glance dt{font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--greige); margin:0 0 8px}
.glance dd{margin:0; font-family:var(--display); font-size:1.3rem; letter-spacing:.02em}
.glance dd a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--stone-line)}
.glance dd a:hover{border-bottom-color:var(--brass)}
.char-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px)}
.char-list{list-style:none; margin:0; padding:0; columns:2; column-gap:32px}
.char-list li{break-inside:avoid; padding:12px 0; border-bottom:1px solid var(--stone-line); font-size:.95rem}
.char-grid .copy p{color:var(--greige); margin:0 0 16px; max-width:52ch}
.char-grid h2,.in-collection h2{margin:0 0 18px}
.hd-convert{background:var(--cream); padding:clamp(56px,8vw,96px) 0; text-align:center; border-top:1px solid var(--stone-line)}
.hd-convert h2{max-width:20ch; margin:0 auto 26px}
.hd-convert .cat-btns{justify-content:center; margin:0 0 40px}
.ladder{list-style:none; margin:0 auto; padding:0; display:flex; justify-content:center; flex-wrap:wrap; gap:6px 0;
  font-family:var(--display); font-size:1.12rem; letter-spacing:.06em}
.ladder li + li::before{content:"\2192"; color:var(--brass); padding:0 .7em}
.ladder .on{color:var(--brass-d)}
.in-collection{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(24px,5vw,64px); align-items:center}
.in-collection .cat-pic{aspect-ratio:var(--ar)}
.in-collection p{color:var(--greige); max-width:50ch; margin:0 0 24px}

/* ---------- Collection Preview page ---------- */
.cp-hero{position:relative; color:var(--paper); background:#1E1A15}
.cp-hero .cat-pic{aspect-ratio:var(--ar); max-height:92vh; width:100%; background:#1E1A15}
.cp-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(30,26,21,0) 35%,rgba(30,26,21,.62) 100%)}
.cp-hero .wrap{position:absolute; left:0; right:0; bottom:0; z-index:1; padding-bottom:clamp(40px,7vw,80px)}
.cp-hero .eyebrow{color:#EADFC9}
.cp-hero h1{color:var(--paper); font-size:clamp(2.6rem,7vw,5.2rem); letter-spacing:.05em; margin:0 0 16px}
.cp-hero p{max-width:52ch; margin:0; font-size:1.05rem; color:#F3EDE2}
.cp-gated[hidden]{display:none !important}
.cp-locked{padding:clamp(56px,8vw,96px) 0; text-align:center}
.cp-locked h2{margin:0 auto 14px; max-width:22ch}
.cp-locked p{color:var(--greige); margin:0 auto 28px; max-width:46ch}
.cp-home{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:center}
.cp-home + .cp-home{margin-top:clamp(56px,8vw,104px)}
.cp-home.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.cp-home.flip .cat-pic{order:2}
.cp-home .cat-pic{aspect-ratio:var(--ar)}
.cp-home .cat-pic.portrait{max-height:760px}
.cp-home h3{font-size:clamp(1.9rem,3.6vw,2.7rem); letter-spacing:.05em; font-weight:500; margin:10px 0 6px}
.cp-home .copy p{color:var(--greige); margin:16px 0 24px; max-width:46ch}
.cp-home .actions{display:flex; gap:18px 26px; flex-wrap:wrap; align-items:center}
.scale-map{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--brass)}
.scale-map div{padding:24px 24px 24px 0; border-bottom:1px solid var(--stone-line)}
.scale-map h3{font-size:1.05rem; margin:0 0 4px}
.scale-map .range{font-family:var(--display); font-style:italic; color:var(--brass-d); margin:0 0 12px}
.scale-map ul{list-style:none; margin:0; padding:0; font-family:var(--display); font-size:1.2rem}
.scale-map .also{grid-column:1/-1; color:var(--greige); font-size:.92rem}

/* ---------- Collection Preview gate (dialog) ---------- */
.cp-gate{border:0; padding:0; max-width:min(920px,calc(100vw - 32px)); width:100%;
  background:var(--paper); color:var(--ink); box-shadow:0 30px 80px rgba(30,26,21,.28)}
.cp-gate::backdrop{background:rgba(43,38,32,.58)}
.cp-gate .g{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cp-gate .cat-pic{min-height:100%; aspect-ratio:auto; background:var(--stone-lt); display:flex; align-items:center}
.cp-gate .cat-pic img{height:auto}
.cp-gate .panel{padding:clamp(28px,4vw,52px); position:relative}
.cp-gate h2{font-size:clamp(1.6rem,3vw,2.1rem); margin:6px 0 14px}
.cp-gate .intro{color:var(--greige); margin:0 0 24px; font-size:.97rem}
.cp-gate label.f{display:block; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em;
  color:var(--greige); margin:0 0 8px}
.cp-gate input[type=email]{width:100%; font:inherit; font-size:1.02rem; padding:9px 0; border:0;
  border-bottom:1px solid var(--ink); background:transparent; color:var(--ink); border-radius:0}
.cp-gate input[type=email]:focus{outline:none; border-bottom-color:var(--brass-d); box-shadow:0 1px 0 var(--brass-d)}
.cp-gate .fields{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 18px}
.cp-gate .fld{min-width:0}
.cp-gate .fld:nth-child(3){grid-column:1/-1}            /* email spans both columns */
.cp-gate .fld-wide{grid-column:1/-1}
.cp-gate .f .opt{text-transform:none; letter-spacing:.02em; font-weight:400}
.cp-gate input[type=text],.cp-gate select{width:100%; font:inherit; font-size:1.02rem; padding:9px 0; border:0;
  border-bottom:1px solid var(--ink); background:transparent; color:var(--ink); border-radius:0}
.cp-gate select{appearance:none; -webkit-appearance:none; padding-right:22px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--greige) 50%),linear-gradient(135deg,var(--greige) 50%,transparent 50%);
  background-position:calc(100% - 10px) 52%,calc(100% - 5px) 52%; background-size:5px 5px; background-repeat:no-repeat}
.cp-gate input[type=text]:focus,.cp-gate select:focus{outline:none; border-bottom-color:var(--brass-d); box-shadow:0 1px 0 var(--brass-d)}
.cp-gate [aria-invalid="true"]{border-bottom-color:#8A3B2E}
.cp-gate .err{font-size:.76rem; color:#8A3B2E; margin:5px 0 0}
.cp-gate .err:empty{display:none}
.cp-gate .btn{width:100%; margin:22px 0 0; cursor:pointer; font-family:var(--body)}
.cp-gate .btn[disabled]{opacity:.6; cursor:progress}
.cp-gate .consent{font-size:.78rem; color:var(--greige); line-height:1.5; margin:16px 0 0}
.cp-gate .consent a{color:var(--greige)}
.cp-gate .optin{display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--greige);
  margin:18px 0 0; line-height:1.45; cursor:pointer}
.cp-gate .optin input{margin:3px 0 0; accent-color:var(--brass-d); flex:none}
.cp-gate .msg{font-size:.85rem; margin:12px 0 0; min-height:1.2em; color:#8A3B2E}
.cp-gate .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cp-gate .close{position:absolute; top:10px; right:10px; width:44px; height:44px; border:0; background:none;
  font-size:1.6rem; line-height:1; color:var(--greige); cursor:pointer}
.cp-gate .close:hover{color:var(--ink)}
.cp-gate .alt{display:block; margin:14px 0 0; font-size:.78rem; color:var(--greige); background:none; border:0;
  padding:0; text-decoration:underline; cursor:pointer; font-family:var(--body)}
.cp-gate .returning-note{font-size:.92rem; color:var(--ink); margin:0 0 4px}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .scales{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
  .next-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glance{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .scales{grid-template-columns:1fr; gap:48px}
  .scale .cat-pic.series-pic{margin:0 0 18px}
  .home-group .g-head{grid-template-columns:1fr}
  .home-group .g-head > p{justify-self:start}
  .collection-feature,.collection-feature.flip,.in-collection,.cp-home,.cp-home.flip,.hd-story,.char-grid{grid-template-columns:1fr}
  .collection-feature.flip .cat-pic,.cp-home.flip .cat-pic{order:0}
  .hd-hero .top{grid-template-columns:1fr; align-items:start}
  .builders-band .inner{grid-template-columns:1fr; align-items:start}
  .scale-map{grid-template-columns:1fr}
  .cp-gate .g{grid-template-columns:1fr}
  .cp-gate .cat-pic{aspect-ratio:var(--ar); min-height:0}
}
@media (max-width:640px){
  .homes-grid{grid-template-columns:1fr; gap:48px}
  .next-steps{grid-template-columns:1fr}
  .next-steps li{padding:22px 0 4px; border-bottom:1px solid var(--stone-line)}
  .char-list{columns:1}
  .glance{grid-template-columns:1fr 1fr}
  .cp-hero::after{display:none}
  .cp-hero .wrap{position:relative; padding-top:28px; padding-bottom:36px}
  /* Phones: the gate becomes a full-height sheet, not a floating box. */
  .cp-gate{max-width:100vw; max-height:100dvh; height:100dvh; margin:0; inset:0}
  .cp-gate .cat-pic{aspect-ratio:var(--ar); max-height:34vh}
  .cp-gate .panel{padding:28px 20px 40px}
}
@media (prefers-reduced-motion:reduce){
  .scale .cat-pic img,.home-card .cat-pic img{transition:none}
}

/* ---------- /privacy (rendered from catalog/content) ---------- */
.pp-draft{border:1px solid var(--brass); background:var(--paper); color:var(--ink); padding:14px 18px;
  font-size:.86rem; margin:0 0 28px; max-width:68ch}
.pp-body{max-width:68ch}
.pp-body h2{font-size:clamp(1.25rem,2.4vw,1.55rem); margin:44px 0 14px}
.pp-body h2:first-of-type{margin-top:28px}
.pp-body p,.pp-body li{color:var(--ink); font-size:1rem; line-height:1.65}
.pp-body p{margin:0 0 14px}
.pp-body ul{margin:0 0 16px; padding-left:1.2em}
.pp-body li{margin:0 0 8px}
.pp-body li::marker{color:var(--brass)}
.pp-body .pp-updated{color:var(--greige); font-size:.9rem}