/* Shared styles for the inner pages (why, how-it-works, vendors, planner), 28 Oct 2026.
   Tokens, type, header, buttons, reveals and footer are copied from home-v3.html so the pages read as the same site.
   Copy: "RWP page copy for approval — 27 Oct 2026.html" (Carrie: "all yes", 28 Oct). */
:root{
  --white:#FBF9F6;
  --paper:#FFFFFF;
  --stone:#F3EEE8;
  --sand:#E9E0D6;
  --taupe:#A29176;
  --brown:#79654F;
  --brown-d:#5E4D3C;
  --ink:#2B2420;
  --ink-2:#5A4E45;
  --rule:#DCD2C6;
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Instrument Sans", system-ui, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --gut:clamp(16px, 4vw, 64px);
  --hdr:72px;
  /* REVIEW FIXES 28 Oct (item 40): one type scale for every page. Display 92px, H1 64px, H2 52px, H3 32px at 1440,
     each scaling down on phones. The home hero headline is the largest heading on the home page. */
  --fs-display:clamp(3.4rem, 1.4rem + 5vw, 5.75rem);
  --fs-h1:clamp(2.5rem, 1.3rem + 3.1vw, 4rem);
  --fs-h2:clamp(2.1rem, 1.3rem + 2.2vw, 3.25rem);
  --fs-h3:clamp(1.45rem, 1rem + 1.1vw, 2rem);
}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%}
picture{display:contents}
a{color:var(--brown-d);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
::selection{background:var(--sand);color:var(--ink)}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:2px}
html{scrollbar-color:var(--taupe) var(--stone)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.05;margin:0;text-wrap:balance;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:italic}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gut)}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 1.6em;background:var(--brown);color:#fff;border:0;border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:transform 160ms ease-out, background 200ms ease}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--brown-d);color:#fff}}
.btn:active{transform:scale(0.97)}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){.btn:hover svg{transform:translateX(3px)}}
.btn.ghost{background:transparent;color:var(--brown-d);box-shadow:inset 0 0 0 1px var(--taupe)}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover{background:var(--stone);color:var(--ink)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:60;background:var(--paper);padding:10px 14px}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0;font:500 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--taupe);flex:none}

/* reveals, exactly as on home: only hidden once JS has confirmed motion is allowed */
html.motion [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
html.motion [data-reveal].in{opacity:1;transform:none}
html.motion [data-reveal][data-d="1"]{transition-delay:60ms}
html.motion [data-reveal][data-d="2"]{transition-delay:120ms}
html.motion [data-reveal][data-d="3"]{transition-delay:180ms}

/* ---------- header (home's, with page links) ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr);background:var(--white);border-bottom:1px solid transparent;transition:transform 200ms var(--ease-out), border-color 200ms ease}
.hdr.small{transform:translateY(-14px);border-color:var(--rule)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none;transition:transform 200ms var(--ease-out)}
.hdr.small .wrap{transform:translateY(7px)}
.mark{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1}
.mark b{font:400 27px/1 var(--serif);letter-spacing:-.005em;transition:transform 200ms var(--ease-out)}
.mark span{font-size:11.5px;letter-spacing:.04em;color:var(--ink-2);margin-top:4px;transition:opacity 150ms ease}
.hdr.small .mark span{opacity:0}
.hdr.small .mark b{transform:translateY(var(--mark-drop,8px))}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:15px;color:var(--ink);text-decoration:none}
.nav a:not(.btn):hover,.nav a[aria-current]{text-decoration:underline}
.nav a.btn{min-height:44px;padding:0 1.3em;color:#fff}
.nav a.btn:hover{color:#fff;text-decoration:none}
@media (max-width:1180px) and (min-width:1081px){.nav{gap:20px}.nav a{font-size:14.5px}}

/* ---------- page hero: home's stone text panel beside a real vendor photo, shorter than home ---------- */
.ph{position:relative;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);min-height:clamp(520px,84svh,860px);padding-top:var(--hdr)}
.ph-text{background:var(--stone);margin:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4.5vh,64px) clamp(28px,4vw,72px)}
.ph h1{margin-top:22px;font-size:min(var(--fs-h1), 8.4vh);max-width:14ch}
.ph h1 em{color:var(--brown-d)}
.ph .dek{margin-top:clamp(14px,2.4vh,26px);max-width:34ch;font:italic 400 clamp(1.3rem,1rem + .7vw,1.75rem)/1.35 var(--serif);color:var(--ink-2)}
.ph .ctas{margin-top:clamp(22px,3.6vh,38px)}
.ph-media{position:relative;overflow:hidden;background:var(--sand)}
.ph-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-media figcaption,.cap-tag{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);background:var(--white);padding:7px 13px;font:italic 400 17px/1.2 var(--serif);color:var(--ink)}

/* ---------- sections ---------- */
.sec{padding:clamp(72px,7.5vw,112px) 0}
.sec.stone{background:var(--stone)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:start}
.sec h2{font-size:var(--fs-h2);max-width:14ch}
.sec h2 em{color:var(--brown-d)}
.prose p{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:58ch}
.prose p + p{margin-top:18px}
.prose p.lead{font-size:clamp(20px,1.4vw,23px);line-height:1.55;color:var(--ink)}
.prose .more{margin-top:28px}

/* wide band picture inside the page width (never wider than its pixels) */
.band{margin:clamp(48px,6vw,88px) 0 0;position:relative}
.band .frame{overflow:hidden;background:var(--sand);aspect-ratio:2/1}
.band img{width:100%;height:100%;object-fit:cover}

/* ---------- closing call to action: paper panel overlapping a photo (With Grace and Gold, as on home and Learn) ---------- */
.close{background:var(--stone);padding:clamp(72px,8vw,120px) 0}
.close .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.close .pic{grid-column:1;grid-row:1;overflow:hidden;background:var(--sand);aspect-ratio:4/5;max-width:620px;width:100%}
.close .pic img{width:100%;height:100%;object-fit:cover}
.close-panel{grid-column:2;grid-row:1;position:relative;z-index:2;background:var(--paper);margin-left:-14%;padding:clamp(30px,3.6vw,56px);box-shadow:0 30px 60px -36px rgba(60,45,30,.4)}
.close h2{font-size:var(--fs-h2)}
.close h2 em{color:var(--brown-d)}
.close p{margin-top:16px;color:var(--ink-2);font-size:17px;max-width:44ch}
.close .btn{margin-top:28px}

/* ---------- footer (home's warm brown bar) ---------- */
.foot{background:var(--brown);color:#fff;padding:44px 0 60px}
.foot .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.foot b{font:400 30px/1 var(--serif)}
.foot p{margin-top:8px;font-size:14.5px;color:#F3EEE8}
.foot a{color:#fff}
.foot a:hover{color:var(--stone)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14.5px}
.foot nav a{text-decoration:none}
.foot nav a:hover{text-decoration:underline}

/* =================== WHY =================== */
.intro-prose{padding:clamp(80px,9vw,140px) 0 clamp(64px,7vw,100px)}
.intro-prose .prose{max-width:760px;margin:0 auto}
.intro-prose p.lead{font:400 clamp(1.7rem,1.1rem + 1.5vw,2.6rem)/1.25 var(--serif);color:var(--ink);max-width:none;text-wrap:balance}
.intro-prose p.lead + p{margin-top:28px}
.intro-prose p.close-line{margin-top:26px;font:italic 400 clamp(1.4rem,1.1rem + .7vw,1.8rem)/1.35 var(--serif);color:var(--brown-d)}
.group{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);border-top:1px solid var(--rule)}
.group p{padding:26px 0 30px;border-bottom:1px solid var(--rule);font-size:18px;line-height:1.7;color:var(--ink-2)}
.team{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.team li{padding:24px clamp(16px,2vw,30px) 8px}
.team li:first-child{padding-left:0}
.team li + li{border-left:1px solid var(--rule)}
.team b{display:block;font:400 var(--fs-h3)/1.1 var(--serif)}
.team .role{display:block;margin-top:8px;font:500 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.team p{margin-top:14px;font-size:15.5px;color:var(--ink-2)}
@media (max-width:1100px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team li:nth-child(3){padding-left:0;border-left:0}
  .team li:nth-child(n+3){border-top:1px solid var(--rule)}
}

/* =================== HOW IT WORKS: the journey =================== */
.journey{position:relative;padding:clamp(72px,7.5vw,112px) 0 clamp(40px,4vw,64px)}
.j-list{position:relative;--rail:clamp(44px,5vw,72px)}
.j-rail{position:absolute;left:calc(var(--rail) / 2 - 1px);top:12px;bottom:12px;width:2px;background:var(--rule)}
.j-fill{position:absolute;inset:0;background:var(--brown);transform-origin:50% 0}
html.jr .j-fill{transform:scaleY(0)}
.j-step{position:relative;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:clamp(20px,3vw,48px);padding-bottom:clamp(64px,7vw,110px)}
.j-step:last-child{padding-bottom:0}
.j-dot{position:relative;z-index:1;width:var(--rail);height:var(--rail);border-radius:50%;display:grid;place-items:center;font:italic 400 clamp(1.25rem,1rem + .6vw,1.7rem)/1 var(--serif);background:var(--brown);color:#fff;box-shadow:0 0 0 8px var(--white);transition:background-color 300ms ease, color 300ms ease}
html.jr .j-step:not(.on) .j-dot{background:var(--white);color:var(--taupe);box-shadow:0 0 0 8px var(--white), inset 0 0 0 1.5px var(--rule)}
.j-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,5vw,80px);align-items:start;padding-top:calc(var(--rail) / 2 - .6em)}
.j-body.solo{grid-template-columns:minmax(0,1fr)}
.j-body.solo .prose{max-width:760px}
.j-body h2{font-size:var(--fs-h2);max-width:18ch;margin-bottom:22px}
.j-body .prose p{max-width:56ch}
.j-media{margin:0;overflow:hidden;background:var(--sand);box-shadow:0 34px 60px -40px rgba(60,45,30,.5)}
.j-media img{width:100%;height:100%;object-fit:cover}
.j-media.r43{aspect-ratio:4/3}
.j-media.r45{aspect-ratio:4/5;max-width:420px}
.periods{margin-top:22px;border-top:1px solid var(--rule);max-width:520px}
.periods li{padding:13px 0;border-bottom:1px solid var(--rule);font:italic 400 clamp(1.3rem,1.05rem + .5vw,1.6rem)/1.2 var(--serif);color:var(--brown-d);font-variant-numeric:tabular-nums}
/* example invoice (home's invoice, still) */
.invoice{background:var(--paper);width:min(100%,520px);padding:26px 32px 22px;box-shadow:0 30px 60px -30px rgba(60,45,30,.45),0 1px 3px rgba(60,45,30,.08);color:var(--ink)}
.iv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.iv-from{display:block;font:400 25px/1.1 var(--serif)}
.iv-to{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.iv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.iv-word{font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.pill{display:inline-block;font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brown-d);border:1px solid var(--taupe);border-radius:999px;padding:6px 10px;white-space:nowrap}
.iv-rows{margin-top:4px;font-variant-numeric:tabular-nums;font-size:15.5px}
.r{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #EFE9E1}
.r.rwp{margin:0 -12px;padding:8px 12px;background:var(--stone);color:var(--brown-d);font-weight:500;border-bottom:0}
.r.sub{font-weight:600;border-top:1px solid var(--ink-2)}
.r .soft{color:var(--ink-2);font-style:italic}
/* questions shops ask */
.faq{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);border-top:1px solid var(--rule)}
.faq div{padding:26px 0 30px;border-bottom:1px solid var(--rule)}
.faq h3{font:italic 400 var(--fs-h3)/1.15 var(--serif);color:var(--brown-d)}
.faq p{margin-top:10px;color:var(--ink-2);font-size:16.5px;max-width:52ch}

/* =================== VENDORS =================== */
.cats{margin-top:clamp(36px,4vw,56px);columns:3;column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--rule)}
.cats li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--rule);font:italic 400 clamp(1.3rem,1.05rem + .6vw,1.75rem)/1.2 var(--serif);color:var(--brown-d)}
.wall{margin-top:clamp(56px,6vw,96px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
.wall figure{margin:0}
.wall .pic{overflow:hidden;background:var(--sand);aspect-ratio:4/5;box-shadow:0 30px 50px -36px rgba(60,45,30,.5)}
.wall .pic img{width:100%;height:100%;object-fit:cover}
.wall figcaption{margin-top:12px;font:italic 400 18px/1.2 var(--serif);color:var(--ink)}
.wall figure:nth-child(4n+2),.wall figure:nth-child(4n+4){margin-top:clamp(0px,5vw,80px)}

/* =================== PLANNER =================== */
.ph-fan{position:relative;overflow:hidden;background:var(--sand)}
.fan{position:absolute;inset:0}
.fan img{position:absolute;left:50%;top:50%;width:clamp(170px,17vw,290px);aspect-ratio:1105/1430;height:auto;object-fit:cover;box-shadow:0 30px 50px -28px rgba(60,45,30,.5), 0 2px 6px rgba(60,45,30,.08);transform-origin:50% 90%;
  transition:transform 900ms var(--ease-out), opacity 500ms var(--ease-out)}
/* the finished, fanned state is the default (phones, reduced motion, no JS) */
.fan .f1{z-index:4;transform:translate(-50%,-50%) rotate(-1.5deg)}
.fan .f2{z-index:3;transform:translate(-128%,-44%) rotate(-8deg)}
.fan .f3{z-index:2;transform:translate(28%,-44%) rotate(7deg)}
.fan .f4{z-index:1;transform:translate(-50%,-38%) rotate(2deg) translateY(14%)}
.fan .f2{transition-delay:60ms}.fan .f3{transition-delay:120ms}.fan .f4{transition-delay:180ms}
/* before it opens: a neat stack */
html.fan-js .fan:not(.open) img{transform:translate(-50%,-50%) rotate(-1.5deg)}
html.fan-js .fan:not(.open) .f4{opacity:0}
.pages-list{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule)}
.pages-list li{display:grid;grid-template-columns:clamp(110px,12vw,170px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--rule)}
.pages-list .thumb{margin:0}
.pages-list .thumb img{width:100%;height:auto;aspect-ratio:340/440;object-fit:cover;box-shadow:0 18px 30px -20px rgba(60,45,30,.45),0 1px 3px rgba(60,45,30,.08);background:#F9F6EF}
.pages-list .thumb figcaption{margin-top:10px;font:500 11.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.pages-list p{font-size:18px;line-height:1.7;color:var(--ink-2);max-width:60ch}
.pages-list p b{font:italic 400 1.4em/1.2 var(--serif);color:var(--brown-d);display:block;margin-bottom:6px}
.bda{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.bda div{padding:24px clamp(18px,2.4vw,36px) 6px}
.bda div:first-child{padding-left:0}
.bda div + div{border-left:1px solid var(--rule)}
.bda h3{font:italic 400 clamp(1.9rem,1.3rem + 1.3vw,2.8rem)/1.1 var(--serif);color:var(--brown-d)}
.bda p{margin-top:12px;color:var(--ink-2);font-size:16.5px}

/* reduced motion: everything still and visible */
@media (prefers-reduced-motion: reduce){
  .hdr,.hdr .wrap,.mark b,.mark span,.btn,.j-dot,.fan img{transition:none}
}

/* short wide screens (Carrie's 1700x770) */
@media (min-width:1000px) and (max-height:820px){
  .ph-text{padding-top:24px;padding-bottom:24px}
}

/* ---------- phone and tablet ---------- */
@media (max-width:900px){
  :root{--hdr:64px}
  .hdr.small{transform:translateY(-6px)}
  .hdr.small .wrap{transform:translateY(3px)}
  .hdr .mark{--mark-drop:14px}
  .mark b{font-size:23px}
  .ph{grid-template-columns:1fr;min-height:0}
  .ph-media{order:-1;height:46svh;min-height:300px}
  .ph-fan{height:62svh;min-height:380px;max-height:560px}
  .ph-text{margin:0;padding:34px var(--gut) 42px}
  .split{grid-template-columns:1fr}
  .group,.faq{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .team li,.team li:nth-child(3){padding-left:0;border-left:0}
  .team li + li{border-left:0;border-top:1px solid var(--rule)}
  .j-body{grid-template-columns:1fr;row-gap:28px}
  .j-media.r45{max-width:none}
  .invoice{padding:22px 20px 18px}
  .iv-from{font-size:21px}
  .cats{columns:2}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall figure:nth-child(4n+2),.wall figure:nth-child(4n+4){margin-top:0}
  .wall figure:nth-child(2n){margin-top:40px}
  .fan img{width:clamp(130px,36vw,220px)}
  .fan .f2{transform:translate(-108%,-44%) rotate(-7deg)}
  .fan .f3{transform:translate(8%,-44%) rotate(6deg)}
  .bda{grid-template-columns:1fr}
  .bda div,.bda div:first-child{padding:22px 0 8px}
  .bda div + div{border-left:0;border-top:1px solid var(--rule)}
  .close .wrap{grid-template-columns:1fr}
  .close .pic{grid-column:1;grid-row:1;aspect-ratio:4/3;max-width:none}
  .close-panel{grid-column:1;grid-row:2;margin:-70px 12px 0;padding:30px 22px}
}
@media (max-width:560px){
  .j-list{--rail:40px}
  .j-step{column-gap:16px}
  .cats{columns:1}
  .pages-list li{grid-template-columns:96px minmax(0,1fr)}
  .pages-list p{font-size:16.5px}
}

/* ---------- batch 19 (28 Oct 2026) ---------- */
/* text-only page head (About us) */
.ph.solo{grid-template-columns:1fr;min-height:0;padding-bottom:0}
.ph.solo .ph-text{margin:0 14px;padding:clamp(56px,9vw,128px) clamp(28px,6vw,96px)}
.ph.solo h1{max-width:none;font-size:var(--fs-display)}
/* a photo caption: small serif tag under or on a photo, naming the vendor */
.close .pic{position:relative;margin:0}
.pcap{margin-top:10px;font:italic 400 16px/1.2 var(--serif);color:var(--ink-2)}
.j-fig{margin:0;max-width:420px}
/* the close without a photo: the panel stands alone, centred, on the white ground */
.close.solo{background:var(--white);border-top:1px solid var(--rule)}
.close.solo .wrap{display:block}
.close.solo .close-panel{margin:0 auto;max-width:760px;text-align:center;background:transparent;box-shadow:none;padding:0}
.close.solo .close-panel h2{font-size:var(--fs-h2)}
.close.solo p{margin-left:auto;margin-right:auto}
/* Why: one column of short headings, the photo held beside it on desktop */
.side{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:start}
.side-pic{position:sticky;top:clamp(96px,14vh,140px);margin:0}
.side-pic .frame{overflow:hidden;background:var(--sand);aspect-ratio:4/5;box-shadow:0 34px 60px -40px rgba(60,45,30,.5)}
.side-pic .frame img{width:100%;height:100%;object-fit:cover}
.side-pic .cap-tag{position:absolute}
.points{border-top:1px solid var(--rule)}
.points > div{padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--rule)}
.points h3{font:italic 400 var(--fs-h3)/1.12 var(--serif);color:var(--brown-d)}
.points p{margin-top:12px;font-size:18px;line-height:1.7;color:var(--ink-2);max-width:54ch}
/* Vendors: the directory with category filters */
.chips{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;gap:10px}
.chip{appearance:none;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);font:400 14.5px/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.chip:hover{box-shadow:inset 0 0 0 1px var(--taupe);color:var(--ink)}}
.chip:active{transform:scale(0.97)}
.chip[aria-pressed="true"]{background:var(--brown);color:#fff;box-shadow:none}
.dir-count{margin-top:18px;min-height:1.6em;font-size:14.5px;color:var(--ink-2)}
.vgrid{margin-top:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.v-card{background:var(--paper);display:flex;flex-direction:column;padding:18px 20px 20px;box-shadow:0 1px 2px rgba(60,45,30,.06)}
.v-card[hidden]{display:none}
.v-logo{height:92px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--rule);margin:0 0 14px;padding:0 4px 14px}
.v-logo img{max-height:72px;max-width:min(100%,200px);width:auto;height:auto;object-fit:contain}
.v-word{font:400 clamp(1.4rem,1.1rem + .6vw,1.8rem)/1.05 var(--serif);color:var(--brown-d);text-align:center}
.v-card h3{font:400 21px/1.15 var(--serif)}
.v-cat{margin-top:6px;font:500 11.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brown)}
.v-link{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;overflow-wrap:anywhere}
.v-link svg{width:14px;height:14px;flex:none}
@media (max-width:1100px){.vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .side{grid-template-columns:1fr}
  .side-pic{position:relative;top:auto;max-width:520px}
  .side-pic .frame{aspect-ratio:4/3}
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ph.solo .ph-text{margin:0;padding:48px var(--gut) 40px}
}
@media (max-width:560px){
  .vgrid{grid-template-columns:1fr}
  .chip{min-height:44px}
}

/* =====================================================================
   REVIEW FIXES, 28 Oct 2026 (RWP site review approval list, items 11-58)
   ===================================================================== */
/* item 13: long addresses wrap instead of pushing the page sideways */
.prose a,.faq a,.close p a,.points a,.j-card a{overflow-wrap:anywhere}

/* item 41: the tagline under the wordmark; "By Purchasing Power Plus" on small phones so "Plus" never sits alone */
.mark .t-short{display:none}
@media (max-width:430px){.mark .t-long{display:none}.mark .t-short{display:inline}}

/* item 11: phone menu. A disclosure button (aria-expanded) opens the page links under the header. */
.nav-links{display:contents}
.menu-btn{display:none;appearance:none;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:999px;min-height:44px;min-width:44px;padding:0 14px;font:500 14px/1 var(--sans);cursor:pointer;align-items:center;gap:8px}
.menu-btn svg{width:16px;height:16px;flex:none}
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
@media (max-width:900px){
  .hdr .wrap{gap:10px}
  .nav{gap:8px}
  .nav a.btn{min-height:44px;padding:0 1em;font-size:14px}
  .menu-btn{display:inline-flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:6px var(--gut) 18px;box-shadow:0 24px 40px -30px rgba(60,45,30,.45)}
  html.menu-open .nav-links{display:flex}
  .nav-links a{display:block;padding:14px 0;font-size:18px;border-bottom:1px solid var(--rule)}
  .nav-links a:last-child{border-bottom:0}
}
/* 29 Oct: between 901 and 1080px the five page links and the wordmark do not fit on one line ("Why Retail with Purpose"
   wrapped onto two), so the header uses the phone Menu button there too. Only the header changes; page layouts keep 900px. */
@media (min-width:901px) and (max-width:1080px){
  .nav{gap:14px}
  .menu-btn{display:inline-flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:6px var(--gut) 18px;box-shadow:0 24px 40px -30px rgba(60,45,30,.45)}
  html.menu-open .nav-links{display:flex}
  .nav-links a{display:block;padding:14px 0;font-size:18px;border-bottom:1px solid var(--rule)}
  .nav-links a:last-child{border-bottom:0}
}
@media (max-width:430px){.mark b{font-size:21px;white-space:nowrap}.mark .tag{white-space:nowrap}.hdr .nav a.btn{padding:0 .85em}.menu-btn .m-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.menu-btn{padding:0;justify-content:center}}

/* item 32: each inner page opens its own way. No sand panel on these, so nothing can sit out of line (item 31). */
.ph-type,.ph-steps,.ph-wide{display:block;min-height:0;padding:calc(var(--hdr) + clamp(48px,7vw,104px)) 0 clamp(40px,5vw,72px)}
.ph-type .ph-text,.ph-steps .ph-text,.ph-wide .ph-text{background:none;margin:0;padding:0}
/* Why: the headline leads; a small photo of the whole ornament is set into the type */
.pt-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:center}
.ph-type h1{max-width:16ch}
.pt-pic{margin:0;position:relative;max-width:520px;justify-self:end;width:100%}
.pt-pic .frame{overflow:hidden;background:var(--sand);aspect-ratio:2/3;box-shadow:0 34px 60px -40px rgba(60,45,30,.5)}
.pt-pic img{width:100%;height:100%;object-fit:cover}
.pt-pic figcaption{margin-top:10px;font:italic 400 16px/1.2 var(--serif);color:var(--ink-2)}
/* How it works: the nine step numbers are the opening */
.ps-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:center}
.step-index ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.step-index li{border-bottom:1px solid var(--rule)}
.step-index li:not(:nth-child(3n+1)){border-left:1px solid var(--rule)}
.step-index a{display:flex;flex-direction:column;gap:10px;height:100%;padding:clamp(16px,1.8vw,26px) clamp(14px,1.6vw,24px) clamp(18px,2vw,28px);text-decoration:none;color:var(--ink);transition:background-color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.step-index a:hover{background:var(--stone)}}
.si-n{font:italic 400 var(--fs-h1)/.9 var(--serif);color:var(--brown-d)}
.si-t{font-size:15px;line-height:1.35;color:var(--ink-2)}
/* Vendors: one wide photo bleeding off the right edge */
.pw-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);align-items:center;padding-left:max(var(--gut), calc((100vw - 1320px) / 2 + var(--gut)))}
.pw-pic{margin:0;position:relative;overflow:hidden;background:var(--sand);aspect-ratio:1444/919;width:100%;max-width:1444px;justify-self:end}
.pw-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pw-pic figcaption{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);background:var(--white);padding:7px 13px;font:italic 400 17px/1.2 var(--serif);color:var(--ink)}
.ph-wide h1{max-width:13ch}
@media (max-width:900px){
  .ph-type,.ph-steps,.ph-wide{padding-top:calc(var(--hdr) + 36px)}
  .pt-grid,.ps-grid{grid-template-columns:1fr;gap:32px}
  .pt-pic{justify-self:start;max-width:420px}
  .pw-grid{grid-template-columns:1fr;padding-left:var(--gut);gap:28px}
  .si-n{font-size:2.2rem}
  .si-t{font-size:13.5px}
}

/* item 42: About without the sand box, the headline on the same edge as the names */
.ph.solo{display:block}
.ph.solo .ph-text{background:none;margin:0 auto;max-width:1320px;padding:clamp(56px,8vw,112px) var(--gut) 0}

/* item 34: How it works, a piece beside each step, held in view while its step is read */
.j-side{position:sticky;top:clamp(110px,18vh,170px)}
.j-card{background:var(--paper);width:min(100%,440px);padding:clamp(24px,2.6vw,36px);box-shadow:0 30px 60px -36px rgba(60,45,30,.4),0 1px 3px rgba(60,45,30,.06)}
.j-card .eyebrow{margin-bottom:14px}
.j-card-big{font:400 var(--fs-h3)/1.15 var(--serif);color:var(--ink)}
.j-card-big em{color:var(--brown-d)}
.j-card p + p,.j-card .btn{margin-top:16px}
.j-card p{color:var(--ink-2)}
.j-stat b{display:block;font:400 clamp(3rem,1.4rem + 3.4vw,5rem)/.95 var(--serif);letter-spacing:-.02em;color:var(--brown-d)}
.j-stat span{display:block;margin-top:14px;color:var(--ink-2);max-width:24ch}
.j-page{max-width:340px}
.j-page img{width:100%;height:auto;aspect-ratio:1105/1430;box-shadow:0 30px 50px -28px rgba(60,45,30,.45),0 2px 6px rgba(60,45,30,.08)}
.j-card .periods{margin-top:0}
.periods li span{display:block;margin-top:4px;font:400 14px/1.3 var(--sans);font-style:normal;color:var(--ink-2)}
.p-note{margin-top:14px;font-size:14.5px;color:var(--ink-2)}
@media (max-width:900px){.j-side{position:relative;top:auto}}

/* items 18, 19, 21: the directory. One logo height, no boxes, brand names, the whole card is the link */
.dir-note{margin-top:18px;max-width:62ch;color:var(--ink-2)}
.v-card{position:relative}
.v-logo{height:76px;border-bottom:0;margin:0 0 12px;padding:0}
.v-logo{justify-content:flex-start}
.v-logo img{max-width:100%;max-height:none;height:auto;object-fit:contain}
.v-word{font:400 24px/1.05 var(--serif);color:var(--ink);text-align:left}
.v-card h3 a{color:inherit;text-decoration:none}
.v-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
@media (hover:hover) and (pointer:fine){.v-card:hover h3 a{text-decoration:underline}}
.v-card:focus-within{outline:2px solid var(--brown);outline-offset:3px}
.v-card h3 a:focus-visible{outline:none}
.v-note{margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.v-note b{font-weight:600;color:var(--brown-d)}
.v-link{color:var(--brown-d)}
@media (max-width:560px){
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .v-card{padding:14px 12px 16px}
  .v-logo{height:56px;margin-bottom:10px}
  .v-logo img{max-width:100%;height:auto}
  .v-word{font-size:19px}
  .v-card h3{font-size:17px}
  .v-cat{font-size:10.5px;letter-spacing:.08em}
  .v-link{display:none}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:4px var(--gut) 8px;scrollbar-width:none;position:sticky;top:calc(var(--hdr) - 6px);z-index:5;background:var(--stone)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
}

/* item 6: closing bands that differ page to page */
.close.strip{background:var(--white);padding:0 0 clamp(72px,8vw,120px)}
.close.strip .wide{position:relative;margin:0;overflow:hidden;background:var(--sand);aspect-ratio:12/5;max-height:620px;width:100%}
.close.strip .wide img{width:100%;height:100%;object-fit:cover}
.close.strip .wrap{display:block;margin-top:clamp(48px,6vw,80px)}
.close.strip .close-panel{margin:0 auto;max-width:760px;text-align:center;background:transparent;box-shadow:none;padding:0}
.close.strip p{margin-left:auto;margin-right:auto}
.close.beside .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,110px);align-items:center}
.close.beside .close-panel{grid-column:1;margin:0;background:transparent;box-shadow:none;padding:0}
.close.beside .pic{grid-column:2;max-width:340px;aspect-ratio:4/5;justify-self:end}
@media (max-width:900px){
  .close.strip .wide{aspect-ratio:3/2}
  .close.beside .wrap{grid-template-columns:1fr}
  .close.beside .pic{grid-column:1;grid-row:2;justify-self:start;max-width:260px;aspect-ratio:4/5}
  .close.beside .close-panel{grid-row:1;margin:0;padding:0}
}

/* item 35: the planner, four pages shown large in a slow row, every entry one line */
.spreads-wrap{overflow-x:clip}
.spreads{margin-top:clamp(40px,5vw,64px);display:flex;gap:clamp(18px,2vw,32px);overflow-x:auto;padding-bottom:14px;scrollbar-width:thin}
.spreads.drift{overflow:visible}
.spreads figure{margin:0;flex:0 0 clamp(250px,30vw,440px)}
.spreads img{width:100%;height:auto;aspect-ratio:960/1242;box-shadow:0 30px 50px -28px rgba(60,45,30,.45),0 2px 6px rgba(60,45,30,.08);background:#F9F6EF}
.spreads figcaption{margin-top:14px;font-size:15.5px;color:var(--ink-2);max-width:40ch}
.spreads figcaption b,.pages-lines b{display:block;font:italic 400 1.35em/1.2 var(--serif);color:var(--brown-d);margin-bottom:4px}
.pages-lines{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);border-top:1px solid var(--rule)}
.pages-lines li{padding:18px 0 20px;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:16.5px}
.pl-n{display:block;font:500 11.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brown);margin-bottom:8px}
@media (max-width:900px){.pages-lines{grid-template-columns:1fr}.spreads figure{flex-basis:72vw}}
.close.beside h2{max-width:14ch}
.ph-wide h1{max-width:16ch}
.intro-prose .intro-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
.intro-prose .intro-split .prose{margin:0;max-width:46ch}
.intro-prose .intro-split .prose p + p{margin-top:16px}
@media (max-width:900px){.intro-prose .intro-split{grid-template-columns:1fr;gap:28px}}

/* =====================================================================
   BLEED FIXES, 28 Oct 2026 (Carrie: "too small", "can we bleed off page", "needs color for numbers")
   Side photos run flush to the browser edge, about 44-50% of the width on desktop. The grid's outer padding
   uses % (the section width), not vw, so nothing can push the page sideways; main clips as a second guard.
   Every photo is capped at 1.2x its own pixel width. Phones: full width, edge to edge, above or below the text.
   ===================================================================== */
main{overflow-x:clip}
.bl{--edge:max(var(--gut), calc((100% - 1320px) / 2 + var(--gut)));--bw:46vw;display:grid;grid-template-columns:minmax(0,1fr) var(--bw);column-gap:clamp(32px,5vw,96px);align-items:center;padding-left:var(--edge);padding-right:0}
.bl.left{grid-template-columns:var(--bw) minmax(0,1fr);padding-left:0;padding-right:var(--edge)}
.bl-pic{margin:0;position:relative;width:100%;max-width:none;justify-self:stretch}
.bl-pic .frame,.bl-pic .j-media{box-shadow:none}
.bl-pic .cap-tag{position:absolute;left:clamp(14px,2vw,24px);right:auto;bottom:clamp(14px,2vw,24px);z-index:1}
.bl.left .bl-pic .cap-tag{left:auto;right:clamp(14px,2vw,24px)}
/* Why: the ornament, whole (2:3), 1400px wide source */
.bl.pt-grid{--bw:min(44vw,1680px)}
.ph-type .pt-pic{max-width:none;justify-self:stretch}
/* Why: Zoey Naturals beside the four points, flush left, held in view; 800px source, so never wider than 960px */
.bl.side{--bw:min(44vw,960px);margin-top:clamp(40px,5vw,64px);align-items:start}
.bl.side .side-pic .frame{aspect-ratio:auto;height:min(calc(100svh - 170px), 58vw)}
/* How it works: the closing photo (Boardwalk, 1400px square) */
.close.beside{overflow-x:clip}
.close.beside .bl{--bw:min(44vw,1680px);display:grid;grid-template-columns:minmax(0,1fr) var(--bw)}
.close.beside .bl-pic{grid-column:2;max-width:none;aspect-ratio:1/1;justify-self:stretch}
/* How it works: a photo beside a step (Le Lolo, 933px) runs to the right edge */
.j-list{--jgap:clamp(20px,3vw,48px);--edge-r:max(var(--gut), calc((100vw - 1320px) / 2 + var(--gut)))}
.j-step{column-gap:var(--jgap)}
.j-body.has-photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.j-side.bleed{margin-right:calc(-1 * var(--edge-r))}
.j-side.bleed .j-fig{max-width:min(100%,1120px);position:relative}
.j-side.bleed .j-media.r45{max-width:none;max-height:calc(100svh - 190px)}
/* Vendors: burton + BURTON, 1444px wide source, never shown wider than that */
.bl.pw-grid{--bw:min(50vw,1444px)}
.bl.pw-grid .pw-pic{aspect-ratio:4/3;max-width:1444px}

@media (max-width:900px){
  .bl,.bl.left{display:block;padding:0}
  .bl > .ph-text,.bl > .points,.bl > .close-panel{padding-left:var(--gut);padding-right:var(--gut)}
  .bl-pic{margin-top:32px}
  .ph-type .pt-pic{max-width:none}
  .bl.side{margin-top:32px}
  .bl.side .side-pic{margin:0 0 8px;max-width:none}
  .bl.side .side-pic .frame{height:auto;aspect-ratio:4/3}
  .close.beside .bl-pic{max-width:none;aspect-ratio:1/1}
  .j-side.bleed{margin-left:calc(-1 * (var(--rail) + var(--jgap) + var(--gut)));margin-right:calc(-1 * var(--gut))}
  .j-side.bleed .j-fig{max-width:none}
  .j-side.bleed .j-media.r45{max-height:none}
  .bl.pw-grid .pw-pic{aspect-ratio:3/2;margin-top:28px}
  .bl.pw-grid .pw-pic figcaption{left:var(--gut)}
}
@media (max-width:560px){.j-list{--jgap:16px}}

/* How it works: the nine steps in warm colour. Each step's tone is shared by its tile and its number circle below.
   Every pair is WCAG AA: number on tile 4.55-5.09, text on tile 5.6+, white on the deep tone 6.0+. */
/* BRAND PASS 28 Oct (Carrie: "it should all blend and work seamlessly as a brand"): the old pastel tones are retired.
   Every tone is now a home-page ground with a home-page brown (brown-d on sand 6.2:1, on stone 7.0:1). */
[data-tone="blush"],[data-tone="butter"],[data-tone="sand"]{--tf:var(--sand);--td:var(--brown-d)}
[data-tone="sage"],[data-tone="terra"]{--tf:var(--stone);--td:var(--brown-d)}
.step-index ol{gap:10px;border-top:0}
.step-index li,.step-index li:not(:nth-child(3n+1)){border:0}
.step-index a{background:var(--tf);color:var(--ink);gap:clamp(10px,1.2vw,18px);padding:clamp(16px,1.6vw,24px) clamp(16px,1.6vw,24px) clamp(18px,1.8vw,26px);transition:transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .step-index a:hover{background:var(--tf);transform:translateY(-4px);box-shadow:0 22px 34px -24px rgba(60,45,30,.55)}
}
.si-n{font-size:clamp(3.2rem,1.4rem + 4vw,5.5rem);line-height:.85;color:var(--td)}
.si-t{color:var(--ink)}
.j-step .j-dot{background:var(--td,var(--brown))}
html.jr .j-step:not(.on) .j-dot{background:var(--tf,var(--white));color:var(--td,var(--taupe));box-shadow:0 0 0 8px var(--white)}
@media (max-width:900px){.step-index ol{gap:6px}.si-n{font-size:2.8rem}}
@media (prefers-reduced-motion: reduce){
  .step-index a{transition:none}
  .step-index a:hover{transform:none}
}
/* Why hero: the ornament is taller than the screen, so the headline sits high, level with the upper photo, not lost mid-way */
.bl.pt-grid{align-items:start}
.bl.pt-grid > .ph-text{padding-top:clamp(40px,16vh,180px)}
@media (max-width:900px){.bl.pt-grid > .ph-text{padding-top:0}}
/* Why intro (rebuilt 28 Oct): the hero already ends with space, so the intro's top matches its bottom; calm, even rhythm */
.intro-prose{padding:clamp(56px,6.5vw,100px) 0 clamp(64px,7vw,100px)}
.intro-prose .intro-split{align-items:center}
/* the Le Lolo photo fills its column to the edge; height is set (not a ratio) so a short screen cannot narrow it */
.j-side.bleed .j-media.r45{width:100%;aspect-ratio:auto;height:min(calc(100svh - 190px),800px);max-height:none}
@media (max-width:900px){.j-side.bleed .j-media.r45{height:auto;aspect-ratio:4/5}}
@media (max-width:900px){.j-body.has-photo{grid-template-columns:1fr}}
@media (max-width:900px){.close.beside .bl{display:block}.close.beside .bl-pic{margin-top:32px}}
@media (max-width:900px){.close.beside .bl > .close-panel{padding:0 var(--gut)}}
/* Why hero, 28 Oct (Carrie: "not that big lol"): the ornament stays flush right but fits the screen, whole, at about a third of the width */
.bl.pt-grid{--bw:min(34vw, calc((100svh - 210px) * 2 / 3))}
@media (max-width:900px){.bl.pt-grid{--bw:auto}}

/* =====================================================================
   BRAND PASS, 28 Oct 2026 (Sophie). Source of truth: home-v3.html.
   The one scale, used on every page:
     display  --fs-display  92px at 1440  type-only page openings (About, How it works, Learn hub)
     H1       --fs-h1       64px          page openings beside a photo, article titles, chapter titles
     H2       --fs-h2       52px          section headings and every closing band
     H3       --fs-h3       32px          step, point, card and question headings
     eyebrow  12.5px / 500 / .16em caps, brown, with the 28px taupe rule
     label    12px / 500 / .14em caps, brown (roles, categories, page numbers)
     tag      vendor name on a photo: serif italic on a white chip, 17px on wide photos, 15px on cards
     caption  vendor name under a photo: serif italic 16px, ink-2
     body     17px / 1.6; long reading 18px / 1.7
     bands    white and stone only, footer brown; section padding clamp(72px,7.5vw,112px)
   Numerals are italic serif in brown (home uses taupe, which is below AA as text; brown is 4.8:1 on stone).
   ===================================================================== */
.team .role,.v-cat,.pl-n,.pages-list .thumb figcaption{font:500 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.ph-media figcaption,.cap-tag,.pw-pic figcaption{padding:7px 13px;font:italic 400 17px/1.2 var(--serif);color:var(--ink);background:var(--white)}
.pcap,.pt-pic figcaption{font:italic 400 16px/1.25 var(--serif);color:var(--ink-2)}
@media (max-width:560px){.v-cat{font-size:11px;letter-spacing:.1em}}