/* Direction B: The Noticeboard. The same Folklore tokens, but the vocabulary
   is folklore-venues-app's platform.css (searchbar, .btn, .vcard, .doors,
   .band, chips, badges) and folklore-mission-control's small-caps module
   headings and figure tiles. Sage is promoted from a status tint to the
   Folk.Share accent: it marks anything that is an ask. */
:root{
  --ink:#2e2218; --paper:#f6f3ec; --paper-2:#efeade; --bg-soft:#fbf9f3;
  --sage:#7a8a72; --sage-deep:#5c6b4e; --stone:#9e9080; --stone-fine:#786e62; --gold:#a07840; --gold-fine:#8d6938; --gold-lit:#e8c987;
  --accent:#8c6e4a; --bark:#6e5e48; --border:#d8d2c6; --border-light:#e8e2d4; --clay:#c07a72;
  --rule:rgba(46,34,24,0.62); --hairline:rgba(46,34,24,0.12); --cream:#f3efe6;
  /* ⚠️ Lato replaced Jost on 2026-09-21, when the mark moved off the serif.
     Lato is the closest web-servable face to Gill Sans Light, which is what
     the mark was drawn in, so the header and the share cards are one face.
     It carries a larger x-height than Jost, so the small tracked-caps labels
     are set a shade tighter than they were: measured, not guessed. */
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Lato',system-ui,sans-serif;
  --edge:clamp(1.2rem,4vw,3rem); --shell:1240px;
}
*{box-sizing:border-box}
html{overflow-x:clip;background:var(--paper-2)}
body{margin:0 auto;max-width:var(--shell);background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.0625rem;line-height:1.55;min-height:100dvh;display:flex;flex-direction:column;border-inline:1px solid var(--rule);position:relative}
.wrap{padding-inline:var(--edge);width:100%}
section{padding-block:clamp(2.6rem,6vh,4.2rem);border-top:1px solid var(--border)}
h1,h2,h3{font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
.eyebrow{font-family:var(--sans);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--stone-fine)}
.mh{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;margin-bottom:1.2rem}
.mh h2{font-family:var(--sans);font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.mh .n{font-weight:300;font-style:italic;font-size:1.6rem;color:var(--stone-fine);margin-left:.6rem}
.mh a{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-fine);border-bottom:1px solid rgba(140,110,74,.4)}
.proto{display:block;width:100%;text-align:center;font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;padding:.32rem;background:var(--ink);color:var(--cream);border:0;cursor:pointer}
.proto u{text-decoration:none;border-bottom:1px solid var(--gold-lit);color:var(--gold-lit);padding-bottom:1px}
.proto:hover u{color:var(--cream);border-bottom-color:var(--cream)}

/* bar + tab rail: folklore-mission-control */
.bar{display:flex;align-items:center;gap:1.4rem;padding:1.1rem var(--edge);border-bottom:1px solid var(--border);width:100%}
.mark{font-family:var(--sans);font-weight:300;font-size:1.02rem;letter-spacing:.24em;text-transform:uppercase}
.mark span{font-size:.62rem;letter-spacing:.22em;color:var(--stone);margin-left:.7rem}
.tag{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage-deep);border:1px solid rgba(122,138,114,.5);padding:.25rem .65rem}
.bar .how{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bark);margin-right:.4rem;border-bottom:1px solid transparent}
.bar .how:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:640px){.bar .how{display:none}}
.bar .right{margin-left:auto;display:flex;gap:.6rem;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:.85em 1.5em .8em;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn.primary{background:var(--ink);color:var(--cream)}
.btn.ask{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff}
.btn.quiet{border-color:var(--border);color:var(--bark);font-size:.6rem;padding:.7em 1.2em}
.rail{display:flex;gap:2.4rem;padding:0 var(--edge);width:100%;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border)}
.rail a{font-family:var(--sans);font-weight:400;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;padding:1rem 0;border-bottom:2px solid transparent;color:var(--bark);white-space:nowrap}
.rail a.on{color:var(--ink);border-bottom-color:var(--accent)}

/* plain hero + searchbar: folklore-venues-app .hero--plain, .searchbar */
.hero{background:var(--bg-soft);padding-block:clamp(2.8rem,7vh,5rem)}
.hero h1{font-size:clamp(2.4rem,5vw,4.2rem);max-width:18ch;line-height:1.04}
.hero h1 em{color:var(--sage-deep)}
.hero .lede{max-width:56ch;color:var(--bark);margin:1rem 0 1.8rem;font-size:1.15rem}
.searchbar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;border:1px solid var(--rule);background:var(--paper-2);max-width:980px}
.sb-field{display:grid;gap:.15rem;padding:.8rem 1.1rem;border-right:1px solid var(--hairline)}
.sb-field label{font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine)}
.sb-field input,.sb-field select{appearance:none;border:0;background:transparent;font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink);padding:0;width:100%;min-width:0}
.sb-field input::placeholder{color:var(--stone);font-style:italic}
.sb-go{border:0;background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;padding:0 1.8rem;cursor:pointer}
.tries{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;align-items:center}
.tries span{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine)}
.chip{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:.42rem .8rem;border:1px solid var(--border);color:var(--bark);background:transparent;white-space:nowrap}
.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip.sage{border-color:rgba(122,138,114,.5);color:var(--sage-deep)}
.metrics{display:flex;gap:14px;margin-top:2.2rem;flex-wrap:wrap}
.metric{flex:1;min-width:150px;background:var(--paper);border:1px solid var(--border);padding:1.2rem 1.4rem 1rem;text-align:center}
.metric b{display:block;font-weight:300;font-style:italic;font-size:2.7rem;line-height:1}
.metric span{font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone-fine)}

/* band filmstrip: venues .band */
.band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--paper-2)}
.band figure{margin:0;flex:none;width:clamp(170px,19vw,250px);aspect-ratio:4/5;position:relative;scroll-snap-align:start;background:#221a14;overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:saturate(.9) contrast(1.02)}
.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);background:linear-gradient(180deg,transparent,rgba(20,15,10,.7))}
.band figcaption b{display:block;font-family:var(--serif);font-size:1.1rem;letter-spacing:0;text-transform:none;font-weight:400}
.band.wide figure{width:clamp(260px,30vw,400px);aspect-ratio:3/4}

/* doors: venues two-door landing */
.doors{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border)}
.door{padding:clamp(1.6rem,4vw,2.6rem);border-right:1px solid var(--border);display:grid;gap:.8rem;align-content:start}
.door:last-child{border-right:0}
.door:hover{background:var(--bg-soft)}
.door h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.door p{color:var(--bark);max-width:38ch}
.door .btn{justify-self:start;margin-top:.4rem}

/* request table: mission-control .mc-table with pills */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}
.filters .sep{width:1px;height:20px;background:var(--border);margin-inline:.4rem}
table{width:100%;border-collapse:collapse}
th{font-family:var(--sans);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone-fine);text-align:left;padding:.5rem 1rem .5rem 0;border-bottom:1px solid var(--border);font-weight:500}
td{padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--border-light);vertical-align:top;font-size:1rem}
td.t{font-size:1.25rem;line-height:1.25;max-width:40ch}
td.t small{display:block;font-size:.95rem;color:var(--bark);margin-top:.2rem}
td .who{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
td .who img{width:28px;height:28px;object-fit:cover;object-position:50% 25%;filter:saturate(.9)}
.pill{display:inline-block;font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;padding:.28rem .6rem;white-space:nowrap;margin:0 .2rem .2rem 0}
.pill.open{background:rgba(122,138,114,.13);color:var(--sage-deep)}
.pill.conn{background:rgba(160,120,64,.12);color:var(--gold-fine)}
.pill.done{background:rgba(200,192,176,.3);color:var(--bark)}
.pill.mode{border:1px solid var(--border);color:var(--bark)}
.pill.paid{border:1px solid rgba(160,120,64,.4);color:var(--gold-fine)}

/* vcard grid: venues .vgrid/.vcard */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.8rem)}
.vgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.vcard{display:block}
.vcard .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#221a14}
.vcard .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.9) contrast(1.02);transition:transform 1s}
.vcard:hover .frame img{transform:scale(1.035)}
.badge{position:absolute;bottom:.7rem;left:.7rem;font-family:var(--sans);font-size:.575rem;letter-spacing:.22em;text-transform:uppercase;padding:.3rem .6rem;border:1px solid var(--hairline);background:rgba(246,243,236,.93);backdrop-filter:blur(2px);color:var(--ink)}
.badge.founding{background:rgba(232,201,135,.9);border-color:rgba(160,120,64,.5);color:#4a3a22}
.badge.ask{background:rgba(122,138,114,.9);color:#fff;border-color:transparent}
/* Badges sit at the FOOT of a photograph, never the top: on a portrait
   crop the top of the frame is somebody's face. Same for the credit and for
   the mode chips in the app screens. */
.badges{position:absolute;bottom:.7rem;left:.7rem;display:flex;gap:.3rem;flex-wrap:wrap}
.badges .badge{position:static}
.vcard .loc{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine);margin:.9rem 0 .2rem}
.vcard h3{font-size:clamp(1.15rem,2vw,1.42rem)}
.vcard .sum{color:var(--bark);font-size:.98rem;margin-top:.3rem}
.vcard .line{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--hairline);margin-top:.7rem;padding-top:.5rem;font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-fine)}
.vcard .line b{font-family:var(--serif);font-weight:400;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink)}

/* skills tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}
.tile{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:1rem 1.1rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.tile:hover{background:var(--bg-soft)}
.tile b{font-weight:400;font-size:1.2rem}
.tile span{font-weight:300;font-style:italic;font-size:1.3rem;color:var(--stone-fine)}

/* project module */
.mod{background:var(--bg-soft);border:1px solid var(--border);padding:clamp(1.4rem,3vw,2rem);display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem}
.mod h3{font-size:2rem;margin:.3rem 0 .6rem}
.needs{width:100%;border-collapse:collapse}
.needs td{padding:.55rem 0;font-size:1.05rem}
.needs td:last-child{text-align:right;font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine)}
.meter{height:3px;background:var(--border-light);margin-top:.35rem;position:relative}
.meter b{position:absolute;inset:0;right:auto;background:var(--sage)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--border)}
.step{padding:1.4rem 1.2rem 1.6rem;border-right:1px solid var(--border)}
.step:last-child{border-right:0}
.step i{display:block;font-style:italic;font-weight:300;font-size:2.4rem;line-height:1;color:var(--stone-fine);margin-bottom:.6rem}
.step h3{font-size:1.4rem;margin-bottom:.4rem}
.step p{color:var(--bark);font-size:.95rem}

/* form */
.choices{display:flex;flex-wrap:wrap;gap:.4rem}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;max-width:760px}
.form label{display:grid;gap:.35rem;font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine)}
.form input,.form textarea,.form select{font-family:var(--serif);font-size:1.05rem;padding:.7rem .9rem;border:1px solid var(--border);background:var(--bg-soft);color:var(--ink);border-radius:0;width:100%}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--accent)}
.form .full{grid-column:1/-1}
.two{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,5vw,4rem)}
.two h2.big{font-size:clamp(1.9rem,3.2vw,2.8rem)}
.empty{border:1px dashed var(--hairline);padding:1rem 1.2rem;font-style:italic;color:var(--stone-fine);margin-top:1rem}

footer{margin-top:auto;border-top:1px solid var(--border);padding:2rem var(--edge);width:100%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-fine);line-height:2}
footer a{color:var(--gold-fine);border-bottom:1px solid rgba(140,110,74,.4)}

@media (max-width:1000px){.vgrid,.vgrid.four{grid-template-columns:repeat(2,1fr)}.tiles{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.step{border-bottom:1px solid var(--border)}.mod,.two{grid-template-columns:1fr}}
@media (max-width:760px){
  body{font-size:1rem}
  .bar{gap:.8rem;padding-block:.8rem}/* On a phone the one button in the bar is the one that matters now. */.bar .right .btn.quiet{display:none}.bar .right .btn.ask{font-size:.54rem;padding:.6em .9em}.mark span{display:none}
  .searchbar{grid-template-columns:1fr}.sb-field{border-right:0;border-bottom:1px solid var(--hairline)}.sb-go{padding:1rem}
  .doors{grid-template-columns:1fr}.door{border-right:0;border-bottom:1px solid var(--border)}
  .metric b{font-size:2rem}
  thead{display:none}tr{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;padding:.9rem 0;border-bottom:1px solid var(--border-light)}td{display:block;border:0;padding:0}td.t{grid-column:1/-1;font-size:1.15rem;max-width:none}td:nth-child(3),td:nth-child(4){display:none}
  .vgrid,.vgrid.four{grid-template-columns:1fr 1fr;gap:2px 2px}.vcard{padding:0 0 1rem}
  .form,.steps{grid-template-columns:1fr}
  .band figure{width:62vw}
}

/* ================================================================
   Added when the Noticeboard became the chosen direction: the split hero
   from the Island Paper, the six-wide people band, and the components the
   interior pages need. Same tokens, same two typefaces.
   ================================================================ */

/* split hero: folklore-weddings-app .split-hero, in Noticeboard clothes */
.split{display:grid;grid-template-columns:1fr 1.05fr;min-height:clamp(460px,70svh,720px);width:100%;border-bottom:1px solid var(--border)}
.split-copy{padding:clamp(2.4rem,5vw,4.5rem) var(--edge);display:flex;flex-direction:column;justify-content:center;gap:1.5rem}
.split h1{font-size:clamp(2.5rem,5.2vw,4.6rem);line-height:1.02;max-width:14ch}
.split h1 em{color:var(--sage-deep)}
.split .lede{max-width:52ch;font-size:1.15rem;color:var(--bark)}
.split-frame{position:relative;overflow:hidden;background:#221a14;border-left:1px solid var(--border)}
.split-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.9) contrast(1.02)}
.split-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(20,15,10,.28);pointer-events:none}
/* The hero slider: four photographs of people at work, crossfading every
   few seconds, each drifting very slowly while it is up so the frame is
   never quite still. The drift is a scale on the image only; the credit and
   the dots sit outside it. Reduced motion: the first photograph, still. */
.slider img{opacity:0;transition:opacity 1.4s ease;will-change:opacity,transform;transform:scale(1.04)}
.slider img.on{opacity:1;animation:drift 9s ease-in-out forwards}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(0,-1.2%,0)}}
.slider .dots{position:absolute;left:.9rem;bottom:.8rem;display:flex;gap:.45rem;z-index:2}
.slider .dots button{width:1.5rem;height:3px;padding:0;border:0;border-radius:2px;background:rgba(246,243,236,.38);cursor:pointer;transition:background .4s}
.slider .dots button[aria-selected="true"]{background:var(--cream)}
.slider .dots button:hover{background:rgba(246,243,236,.7)}
.slider .credit{z-index:2}
/* Scroll reveals: a section head or a card starts a little low and faint,
   and settles as it enters the window. Staggered by --i within a grid so a
   row of cards arrives one after another rather than all at once. The class
   is added by chrome.js only when motion is welcome, so a browser asking for
   less of it never sees the hidden state. */
.rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .75s cubic-bezier(.2,.65,.2,1),transform .75s cubic-bezier(.2,.65,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.rv.in{opacity:1;transform:none}
/* Parallax frames: the photograph inside is a touch larger than its frame
   and slides against the scroll, so the band and the big figures have depth. */
.px img{will-change:transform;transform:scale(1.14)}
.px .px-img{transition:none}
.credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(246,243,236,.5)}
.credit a:hover{text-decoration-color:currentColor}
.credit{position:absolute;right:.7rem;bottom:.7rem;font-family:var(--sans);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);background:rgba(20,15,10,.72);padding:.32rem .55rem;backdrop-filter:blur(3px)}
.searchrow{display:flex;border:1px solid var(--rule);background:var(--paper-2);max-width:520px}
.searchrow input{flex:1;border:0;background:transparent;font:inherit;font-size:1.1rem;padding:.9rem 1rem;color:var(--ink);min-width:0}
.searchrow input::placeholder{color:var(--stone);font-style:italic}
.searchrow input:focus{outline:0}
.searchrow button{border:0;background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;padding:0 1.4rem;cursor:pointer}
.cta-col{display:grid;max-width:520px;border-top:1px solid var(--border)}
.cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border:1px solid var(--border);border-top:0;transition:background .3s,color .3s,transform .3s;background:var(--paper)}
.cta b{font-weight:400;font-size:1.25rem}
.cta small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);margin-top:.15rem}
.cta .go{color:var(--gold);font-size:1.3rem;transition:transform .3s}
.cta:hover{background:var(--ink);color:var(--cream);transform:translateX(4px)}
.cta:hover small{color:var(--gold-lit)}
.cta:hover .go{transform:translateX(4px);color:var(--gold-lit)}
.cta.ask{border-left:3px solid var(--sage-deep)}
.cta.ask:hover{background:var(--sage-deep)}
.cta.ask:hover small{color:#e6ebe2}
.cta.ask:hover .go{color:#fff}
.suggest{position:relative}
.suggest ul{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:100%;background:var(--bg-soft);border:1px solid var(--rule);border-top:0;z-index:5;display:none}
.suggest.open ul{display:block}
.suggest li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 1rem;border-top:1px solid var(--hairline);font-size:1rem;cursor:pointer}
.suggest li:hover{background:var(--paper-2)}
.suggest li span{font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);white-space:nowrap;align-self:center}
.suggest li.none{font-style:italic;color:var(--stone-fine)}

/* the strip straight under the hero: figures, then the board begins */
.after-hero{padding-block:clamp(1.6rem,3.5vh,2.4rem);border-top:0}
.after-hero .metrics{margin-top:0}

/* page header for interior pages */
.ph{padding:clamp(2rem,5vh,3.4rem) 0 clamp(1.4rem,3vh,2rem)}
.ph h1{font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.05;max-width:20ch}
.ph h1 em{color:var(--sage-deep)}
.ph .lede{color:var(--bark);max-width:56ch;margin-top:.8rem;font-size:1.12rem}
.ph .acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.crumbs{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine);display:flex;gap:.6rem;flex-wrap:wrap;padding-top:1.2rem}
.crumbs a{color:var(--gold-fine)}
.crumbs i{font-style:normal;color:var(--border)}

/* listing layout: content plus a filter rail */
.layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.layout.right{grid-template-columns:minmax(0,1fr) 300px}
.side{position:sticky;top:1rem;display:grid;gap:1.4rem}
.side h4{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone-fine);font-weight:500;margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.side ul{list-style:none;margin:0;padding:0}
.side li{display:flex;justify-content:space-between;gap:.6rem;padding:.38rem 0;border-bottom:1px solid var(--border-light);font-size:1rem}
.side li.on{color:var(--sage-deep);font-weight:500}
.side li span{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;color:var(--stone-fine)}
.side .box{border:1px solid var(--border);background:var(--bg-soft);padding:1rem 1.1rem}
.side .box p{color:var(--bark);font-size:.98rem}
.side .box .btn{margin-top:.8rem}
.count{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);margin-bottom:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.count select{appearance:none;border:0;border-bottom:1px solid var(--border);background:transparent;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding:0 1.2rem .2rem 0}
.pager{display:flex;gap:.4rem;margin-top:2rem;font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}
.pager a{padding:.55rem .8rem;border:1px solid var(--border);color:var(--bark)}
.pager a.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* the island map: real coastline from OpenStreetMap, pins on real positions */
.map{position:relative;background:#dde6e4;border:1px solid var(--border);aspect-ratio:480/660;overflow:hidden}
.map svg{width:100%;height:100%;display:block}
.map .wl{opacity:.85}
.map .pin{position:absolute;width:0;height:0;text-decoration:none}
.map .pin i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--sage-deep);border:1.5px solid var(--paper);box-shadow:0 0 0 1px var(--sage-deep);transition:transform .2s}
.map .pin b{position:absolute;left:11px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--sans);font-size:.56rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 7px var(--paper)}
.map .pin.w b{left:auto;right:11px;text-align:right}
.map .pin.n b{left:0;right:auto;top:auto;bottom:10px;transform:translateX(-50%);text-align:center}
.map .pin.u b{top:auto;bottom:9px;transform:none}
.map .pin b small{display:block;font-size:.55rem;letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--stone-fine);margin-top:1px}
.map .pin:hover i{transform:scale(1.4)}
.map .pin:hover b{color:var(--sage-deep)}
.map .pin.here i{background:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 0 7px rgba(160,120,64,.18);width:10px;height:10px;left:-5px;top:-5px}
.map .pin.here b{color:var(--gold-fine)}
.map .pin.dim{opacity:.5}
.map .ferry{position:absolute;width:0;height:0}
.map .ferry i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border:1.5px solid var(--bark);background:var(--paper);transform:rotate(45deg)}

/* A landmark, not a place you can filter by, so it gets a small peak mark and
   a lighter label than the area pins. The label sits to the RIGHT of the mark:
   above it runs into Cusheon and below it runs into Burgoyne. */
.map .peak{position:absolute;width:0;height:0}
.map .peak i{position:absolute;left:-5px;top:-5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--bark);filter:drop-shadow(0 0 1px var(--paper))}
.map .peak b{position:absolute;left:11px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--sans);font-size:.53rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--bark);text-align:left;text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 7px var(--paper)}
.map .peak b small{display:block;font-size:.46rem;letter-spacing:.1em;color:var(--stone-fine)}
/* the caption sits bottom left and the credit top right, which are the two
   corners the island does not reach into */
.map .lbl{position:absolute;left:.7rem;bottom:.7rem;font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);background:rgba(246,243,236,.88);padding:.3rem .55rem;max-width:62%}
.map .attrib{position:absolute;right:.7rem;top:.7rem;font-family:var(--sans);font-size:.45rem;letter-spacing:.08em;color:var(--stone);background:rgba(246,243,236,.75);padding:.2rem .4rem;max-width:52%;text-align:right}
.map .scale{position:absolute;right:.7rem;bottom:.7rem;font-family:var(--sans);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-fine);display:flex;align-items:center;gap:.4rem;background:rgba(246,243,236,.75);padding:.2rem .4rem}
.map .scale i{width:38px;height:1px;background:var(--stone-fine);display:block;position:relative}
.map .scale i::before,.map .scale i::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--stone-fine)}
.map .scale i::after{right:0}
.map.wide{aspect-ratio:16/10}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);margin-top:.7rem}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sage-deep);margin-right:.4rem;vertical-align:middle}
.legend i.gold{background:var(--gold)}
.legend i.ferry{border-radius:0;border:1.5px solid var(--bark);background:var(--paper);transform:rotate(45deg)}

/* detail pages (a thing, a skill, a request, a ride) */
.detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.detail .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#221a14}
.detail .frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.detail .frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(20,15,10,.28);pointer-events:none}
.detail h1{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.05;margin:.5rem 0 .8rem}
.detail .desc{color:var(--bark);font-size:1.12rem;max-width:52ch}
.kv{border-top:1px solid var(--border);margin-top:1.4rem}
.kv div{display:grid;grid-template-columns:150px 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--border-light);font-size:1.02rem}
.kv b{font-family:var(--sans);font-weight:500;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine);padding-top:.35rem}
.keeper{display:flex;gap:1rem;align-items:center;border:1px solid var(--border);background:var(--bg-soft);padding:1rem 1.1rem;margin-top:1.4rem}
.keeper img{width:56px;height:56px;object-fit:cover;object-position:50% 25%;filter:saturate(.9);flex:none}
.keeper b{display:block;font-weight:400;font-size:1.25rem;line-height:1.1}
.keeper small{font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine)}
.keeper .btn{margin-left:auto}
.acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.fine{font-size:.95rem;color:var(--stone-fine);font-style:italic;margin-top:1rem;max-width:52ch}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:.4rem}
.thumbs div{aspect-ratio:1;overflow:hidden;background:#221a14;border:1px solid var(--border)}
.thumbs div.on{outline:2px solid var(--gold)}
.thumbs img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.replies{margin-top:2rem;border-top:1px solid var(--border)}
.reply{display:grid;grid-template-columns:44px 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--border-light)}
.reply img{width:44px;height:44px;object-fit:cover;object-position:50% 25%;filter:saturate(.9)}
.reply .rm{font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);margin-bottom:.3rem}
.reply p{font-size:1.05rem}
.reply.locked{opacity:.55;filter:blur(1.2px);pointer-events:none;user-select:none}
.gate{border:1px solid var(--border);background:var(--bg-soft);padding:1.2rem 1.4rem;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.gate b{font-weight:400;font-size:1.2rem;display:block}
.gate p{color:var(--bark);font-size:.98rem}
.gate .btn{margin-left:auto}
.status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
.status i{width:8px;height:8px;border-radius:50%;background:var(--sage)}
.status.conn i{background:var(--gold)}
.status.done i{background:var(--stone)}

/* rides and errands */
.cross{display:grid;grid-template-columns:130px minmax(0,1fr) 180px auto;gap:1.2rem;align-items:start;padding:1.1rem 0;border-bottom:1px solid var(--border-light)}
.cross .k{font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;padding:.3rem .6rem;border:1px solid var(--border);color:var(--bark);display:inline-block}
.cross .k.offer{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.cross .k.need{background:rgba(122,138,114,.13);color:var(--sage-deep);border-color:rgba(122,138,114,.4)}
.cross .k.errand{background:rgba(160,120,64,.12);color:var(--gold-fine);border-color:rgba(160,120,64,.4)}
.cross .route{font-size:1.35rem;line-height:1.2;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cross .route i{flex:0 0 28px;height:1px;background:var(--rule);position:relative}
.cross .route i::after{content:"";position:absolute;right:-1px;top:-3.5px;border:4px solid transparent;border-left-color:var(--ink)}
.cross p{color:var(--bark);font-size:.98rem;margin-top:.3rem}
.cross .who{display:flex;align-items:center;gap:.5rem;font-size:1rem}
.cross .who img{width:28px;height:28px;object-fit:cover;object-position:50% 25%;filter:saturate(.9)}
.cross .m{font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);line-height:1.8}
.cross .btn{justify-self:end}
.route-board{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--border)}
.route-board a{padding:1rem 1.1rem;border-right:1px solid var(--border);display:grid;gap:.15rem}
.route-board a:last-child{border-right:0}
.route-board a:hover{background:var(--bg-soft)}
.route-board b{font-weight:400;font-size:1.25rem}
.route-board span{font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine)}
.route-board .n{font-weight:300;font-style:italic;font-size:1.3rem;color:var(--sage-deep)}

/* events */
.ecard{display:grid;grid-template-columns:96px 1fr;gap:1.2rem;padding:1.2rem 0;border-bottom:1px solid var(--border-light);align-items:start}
.ecard .date{border:1px solid var(--border);text-align:center;padding:.6rem .4rem;background:var(--bg-soft)}
.ecard .date b{display:block;font-weight:300;font-style:italic;font-size:2.2rem;line-height:1}
.ecard .date span{font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);display:block}
.ecard .date small{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);margin-top:.3rem}
.ecard h3{font-size:1.55rem;line-height:1.15}
.ecard .em{font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);display:flex;gap:.8rem;flex-wrap:wrap;margin:.3rem 0 .4rem}
.ecard p{color:var(--bark);font-size:1rem;max-width:60ch}
.ecard .foot{display:flex;gap:.6rem;align-items:center;margin-top:.7rem;flex-wrap:wrap}
.faces{display:flex}
.faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:2px solid var(--paper);margin-left:-8px;filter:saturate(.9)}
.faces img:first-child{margin-left:0}
.faces span{font-family:var(--sans);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-fine);margin-left:.6rem;align-self:center}
.cal{border:1px solid var(--border)}
.cal .cm{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem .8rem;border-bottom:1px solid var(--border);font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase}
.cal .cg{display:grid;grid-template-columns:repeat(7,1fr)}
.cal .cg span{aspect-ratio:1;display:grid;place-items:center;font-family:var(--sans);font-size:.7rem;color:var(--bark);border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light);position:relative}
.cal .cg span.h{font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-fine);aspect-ratio:auto;padding:.4rem 0}
.cal .cg span.o{color:var(--border)}
.cal .cg span.e::after{content:"";position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--sage-deep)}
.cal .cg span.on{background:var(--ink);color:var(--cream)}
.ev-hero{position:relative;overflow:hidden;background:#221a14;aspect-ratio:21/9;margin:1.2rem var(--edge) 0}
.ev-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.9) contrast(1.02)}
.ev-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,15,10,.65));pointer-events:none}
.ev-hero .over{position:absolute;left:var(--edge);right:var(--edge);bottom:clamp(1.4rem,3vw,2.4rem);color:var(--cream);z-index:2}
.ev-hero .over .eyebrow{color:#e6ebe2}
.ev-hero h1{font-size:clamp(2.2rem,4.6vw,4rem);max-width:18ch;line-height:1.02;margin-top:.5rem}
.ev-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(2rem,5vw,4rem);align-items:start}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);margin-bottom:2rem}
.facts div{padding:1rem 1.1rem;border-right:1px solid var(--border)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--sans);font-weight:500;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine);margin-bottom:.3rem}
.facts span{font-size:1.15rem;line-height:1.25;display:block}
.facts small{display:block;color:var(--stone-fine);font-size:.92rem;font-style:italic;margin-top:.15rem}
.ev-body{font-size:1.15rem;max-width:62ch;color:#3f3226}
.ev-body p+p{margin-top:1rem}
.h4{font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;margin:2rem 0 .8rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.bring{list-style:none;margin:0;padding:0;columns:2;gap:2rem}
.bring li{display:flex;gap:.7rem;align-items:baseline;padding:.4rem 0;border-bottom:1px solid var(--border-light);break-inside:avoid;font-size:1.02rem}
.bring li::before{content:"";width:12px;height:12px;border:1px solid var(--rule);flex:none;transform:translateY(1px)}
.info{display:grid;gap:0;border-top:1px solid var(--border)}
.info div{display:grid;grid-template-columns:120px 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--border-light);font-size:1.02rem}
.info b{font-family:var(--sans);font-weight:500;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine);padding-top:.35rem}
.rsvp{border:1px solid var(--border);background:var(--bg-soft);padding:1.3rem 1.4rem;display:grid;gap:.9rem}
.rsvp .big{font-size:1.5rem;line-height:1.15}
.rsvp .row{display:flex;gap:.5rem;flex-wrap:wrap}
.rsvp .fine{margin-top:0}
.spaces{height:4px;background:var(--border-light);position:relative;margin-top:.3rem}
.spaces b{position:absolute;inset:0;right:auto;background:var(--sage)}
.going-list{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem}
.going-list a{display:flex;align-items:center;gap:.6rem;font-size:1rem}
.going-list img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 25%;filter:saturate(.9)}
.going-list small{font-family:var(--sans);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-fine);display:block}
.host{display:flex;gap:1rem;align-items:center;margin-top:1rem}
.host img{width:64px;height:64px;object-fit:cover;object-position:50% 25%;filter:saturate(.9);flex:none}
.host b{display:block;font-weight:400;font-size:1.3rem;line-height:1.1}
.host p{color:var(--bark);font-size:.98rem}
.ferry{border:1px solid var(--border);margin-top:1rem}
.ferry div{display:grid;grid-template-columns:1fr auto auto;gap:1rem;padding:.55rem .9rem;border-bottom:1px solid var(--border-light);font-size:.98rem;align-items:baseline}
.ferry div:last-child{border-bottom:0}
.ferry div:first-child{font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);background:var(--bg-soft)}
.ferry span{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;color:var(--stone-fine)}
.mini{position:relative;border:1px solid var(--border);background:#e9ebe4;aspect-ratio:4/3;overflow:hidden}
.mini svg{width:100%;height:100%;display:block}
.mini .lbl{position:absolute;left:.7rem;top:.7rem;font-family:var(--sans);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);background:rgba(246,243,236,.85);padding:.28rem .5rem}
.weather{display:flex;gap:.5rem;align-items:center;border:1px solid var(--border);padding:.8rem 1rem;font-size:.98rem;background:var(--bg-soft);margin-top:1rem}
.weather b{font-weight:300;font-style:italic;font-size:1.8rem;line-height:1;margin-right:.4rem}
.weather small{color:var(--stone-fine);font-style:italic}

/* public profile */
.prof{display:grid;grid-template-columns:380px minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.prof .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#221a14}
.prof .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:saturate(.9) contrast(1.02)}
.prof .frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(20,15,10,.28);pointer-events:none}
.prof h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.02;margin:.4rem 0 .4rem}
.prof .roles{font-style:italic;color:var(--bark);font-size:1.25rem}
.prof .intro{font-size:1.15rem;max-width:56ch;margin-top:1.2rem;color:#3f3226}
.prof .stat{display:flex;gap:0;border:1px solid var(--border);margin-top:1.4rem;max-width:520px}
.prof .stat div{flex:1;padding:.9rem 1rem;border-right:1px solid var(--border);text-align:center}
.prof .stat div:last-child{border-right:0}
.prof .stat b{display:block;font-weight:300;font-style:italic;font-size:1.9rem;line-height:1}
.prof .stat span{font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine)}
.vouch{display:grid;grid-template-columns:44px 1fr;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--border-light);align-items:start}
.vouch img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 25%;filter:saturate(.9)}
.vouch p{font-size:1.05rem;font-style:italic}
.vouch small{font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);display:block;margin-top:.3rem;font-style:normal}
.list{border-top:1px solid var(--border)}
.list a{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--border-light)}
.list a b{font-weight:400;font-size:1.25rem}
.list a b small{font-size:.98rem;color:var(--bark);font-style:italic;margin-left:.5rem}
.list a span{white-space:nowrap}
.privacy{border:1px dashed var(--border);padding:1rem 1.2rem;font-size:.95rem;color:var(--stone-fine);font-style:italic;margin-top:1.4rem}

/* stories */
.story-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:end}
.story-grid .frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:#221a14}
.story-grid .frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.story-grid h2{font-size:clamp(2rem,3.6vw,3rem);margin:.5rem 0 .8rem}
.article{max-width:64ch;margin-inline:auto;font-size:1.2rem;line-height:1.7;color:#3f3226}
.article p+p{margin-top:1.2rem}
.article .dc::first-letter{float:left;font-size:4.6rem;line-height:.8;padding:.25rem .5rem 0 0;color:var(--gold-fine)}
.article figure{margin:2rem 0}
.article figure img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.article figcaption{font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);margin-top:.5rem}
.article blockquote{margin:2rem 0;padding-left:1.4rem;border-left:2px solid var(--gold);font-style:italic;font-size:1.5rem;line-height:1.35}
.art-head{max-width:64ch;margin-inline:auto;text-align:center;padding:clamp(2rem,5vh,3.4rem) 0 1.6rem}
.art-head h1{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.02;margin:.6rem 0 1rem}
.art-head .by{font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone-fine)}
.art-hero{margin-inline:var(--edge);aspect-ratio:21/9;overflow:hidden;background:#221a14}
.art-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.9) contrast(1.02)}
.aside-card{border:1px solid var(--border);background:var(--bg-soft);padding:1.2rem 1.3rem;display:flex;gap:1rem;align-items:center;margin:2.4rem auto 0;max-width:64ch}
.aside-card img{width:64px;height:64px;object-fit:cover;object-position:50% 25%;filter:saturate(.9)}
.aside-card b{display:block;font-weight:400;font-size:1.25rem}
.aside-card .btn{margin-left:auto}

/* how it works page: the pinned phone and the pinned laptop */
.how-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:end}
.how-lead h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.02}
.how-lead h1 em{color:var(--sage-deep)}
.how-lead p{color:var(--bark);font-size:1.15rem;max-width:48ch}
.pinband{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4.5rem);padding-block:clamp(3rem,7vw,5rem);align-items:start}
.pin-text .eyebrow{margin-bottom:.6rem}
.pin-text h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:1rem}
.pin-text .lede{color:var(--bark);font-size:1.12rem;max-width:48ch}
.pin-feature{display:grid;grid-template-columns:36px 1fr;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--border-light);align-items:start}
.pin-feature i{font-style:italic;font-weight:300;font-size:1.9rem;line-height:1;color:var(--stone-fine)}
.pin-feature b{display:block;font-weight:400;font-size:1.3rem;line-height:1.15}
.pin-feature p{color:var(--bark);font-size:1rem;margin-top:.2rem;max-width:44ch}
.pin-features{margin-top:1.4rem;border-bottom:1px solid var(--border-light)}
.pin-feature{align-items:center}
.pin-note{font-size:.95rem;color:var(--stone-fine);font-style:italic;margin-top:1.2rem}
.pin-col{display:flex;justify-content:center}
.phone-d{position:relative;width:min(300px,78vw);aspect-ratio:356/730;background:#1f1812;border-radius:46px;padding:9px;box-shadow:0 30px 60px -20px rgba(46,34,24,.45);flex:none}
.phone-d::after{content:"";position:absolute;inset:3px;border-radius:44px;border:1px solid rgba(243,239,230,.11);pointer-events:none}
.phone-d .notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:78px;height:9px;border-radius:6px;background:#1f1812;z-index:5}
.screen{position:relative;width:100%;height:100%;border-radius:38px;background:var(--paper);overflow:hidden;isolation:isolate;pointer-events:none;transform:translateZ(0)}
.screen-inner{position:absolute;top:0;left:0;width:100%;will-change:transform}
.screen-scale{width:390px;transform-origin:top left}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:52px;z-index:4;display:flex;align-items:center;justify-content:space-around;padding:0 .6rem .4rem;background:rgba(251,249,243,.92);backdrop-filter:blur(10px);border-top:1px solid var(--border)}
.tabbar span{font-family:var(--sans);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--bark)}
.tabbar span.on{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px}
.tabbar span.ask{color:var(--sage-deep);font-weight:500}
.deskband{padding:clamp(4rem,8vw,6rem) 0;background:var(--paper-2);border-block:1px solid var(--border);position:relative;overflow:clip}
.desk-head{max-width:60ch}
.desk-head h2{font-size:clamp(2rem,3.6vw,3rem);margin:.6rem 0 .8rem}
.desk-head p{color:var(--bark);font-size:1.12rem}
.deskpin{display:grid;gap:clamp(1.6rem,3.5vw,2.8rem);margin-top:clamp(1.8rem,4vw,2.8rem)}
.laptop-d{position:relative;margin-inline:auto;width:min(1000px,100%)}
.laptop-lid{border:10px solid #1f1812;border-radius:10px;background:#1f1812;box-shadow:0 30px 60px -20px rgba(46,34,24,.45);overflow:hidden}
.laptop-bar{display:flex;align-items:center;gap:.42rem;padding:.5rem .85rem;background:#2a2119;border-bottom:1px solid rgba(243,239,230,.08)}
.laptop-bar i{width:9px;height:9px;border-radius:50%;background:rgba(243,239,230,.17);display:block}
.laptop-bar span{margin-left:.8rem;font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;color:rgba(243,239,230,.42);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.laptop-screen{position:relative;background:var(--paper);overflow:hidden;height:clamp(340px,46vw,560px)}
.laptop-base{height:12px;margin-inline:auto;width:62%;border-radius:0 0 10px 10px;background:linear-gradient(#1f1812,#120d08)}
.laptop-foot{height:4px;margin:0 auto;width:22%;border-radius:0 0 6px 6px;background:rgba(0,0,0,.4)}
.st{display:grid;grid-template-columns:150px 1fr;height:100%}
.st-nav{background:var(--bg-soft);border-right:1px solid var(--border);padding:14px 0;display:grid;align-content:start;gap:2px}
.st-nav .wm{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:4px 16px 12px}
.st-nav span{font-family:var(--sans);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bark);padding:7px 16px;border-left:2px solid transparent}
.st-nav span.on{color:var(--ink);border-left-color:var(--accent);background:var(--paper-2)}
.st-nav .sp{height:10px}
.st-stage{position:relative;overflow:hidden}
.dscreen{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .45s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.dscreen.on{opacity:1;transform:none}
.dscroll{position:absolute;inset:0 0 auto 0;will-change:transform;padding:18px 22px 30px}
.st-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.st-h b{font-family:var(--serif);font-weight:400;font-size:22px}
.st-h span{font-family:var(--sans);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine)}
.st-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.st-kpi{border:1px solid var(--border);background:var(--bg-soft);padding:10px 12px}
.st-kpi b{display:block;font-family:var(--serif);font-weight:300;font-style:italic;font-size:24px;line-height:1}
.st-kpi span{font-family:var(--sans);font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine)}
.st-panel{border:1px solid var(--border);background:var(--bg-soft);padding:12px 14px;margin-bottom:10px}
.st-panel h4{font-family:var(--sans);font-size:8px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;margin:0 0 8px;display:flex;justify-content:space-between}
.st-panel h4 span{color:var(--gold-fine);font-weight:400}
.st-tr{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--border-light);font-size:13px}
.st-tr:first-of-type{border-top:0}
.st-tr small{display:block;font-family:var(--sans);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-fine);margin-top:2px}
.st-tr .pill{font-size:.5rem;margin:0}
.st-tr img{width:22px;height:22px;object-fit:cover;object-position:50% 25%}
.st-gal{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.st-gal div{aspect-ratio:1;overflow:hidden;background:#221a14}
.st-gal img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.st-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-bub{max-width:80%;padding:7px 10px;border-radius:6px;font-size:12px;background:#e8e2d6;border:1px solid var(--border);margin-bottom:6px}
.st-bub.me{margin-left:auto;background:var(--accent);color:#fff;border-color:transparent}
.st-form{display:grid;gap:8px}
.st-form label{display:grid;gap:3px;font-family:var(--sans);font-size:7px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine)}
.st-form div.in{border:1px solid var(--border);background:#fff;padding:7px 9px;font-size:12px;font-family:var(--serif);text-transform:none;letter-spacing:0;color:var(--ink)}
.st-form .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-form .ch{display:flex;gap:4px;flex-wrap:wrap}
.st-form .ch span{font-size:6.5px;letter-spacing:.16em;text-transform:uppercase;padding:4px 7px;border:1px solid var(--border);color:var(--bark)}
.st-form .ch span.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.desk-steps{display:grid}
.desk-step{padding:1.2rem 0}
.desk-step b{font-style:italic;font-weight:300;font-size:2rem;line-height:1;color:var(--stone-fine);display:block;margin-bottom:.5rem}
.desk-step h3{font-size:1.6rem;margin-bottom:.5rem}
.desk-step p{color:var(--bark);font-size:1.02rem;max-width:40ch}
html.js [data-desk] .desk-step{opacity:.34;transition:opacity .45s ease}
html.js [data-desk] .desk-step.on{opacity:1}
@media (min-width:940px){
  /* The words set the length of the scroll and the device stays centred beside
     them, so neither one is left hanging in empty space. */
  .pinband{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);align-items:start}
  .pin-features{display:flex;flex-direction:column;justify-content:space-between;min-height:132vh}
  .pin-feature{border-top:1px solid var(--border-light)}
  .pin-col{position:sticky;align-self:start;top:max(24px,calc(50vh - 318px))}
  .deskpin{grid-template-columns:minmax(0,1fr) minmax(0,.46fr);align-items:start}
  .desk-col{position:sticky;top:max(84px,calc(50vh - 262px));align-self:start}
  .desk-step{min-height:40vh;display:flex;flex-direction:column;justify-content:center}
  .desk-steps{padding-bottom:6vh}
  .deskpin .laptop-screen{height:min(clamp(320px,34vw,460px),52vh)}
}
@media (max-width:939px){
  .desk-col{position:sticky;top:0;z-index:2;background:var(--paper-2);padding-block:.9rem 1.1rem}
  .desk-steps{padding-top:.6rem}
  .st{grid-template-columns:1fr}.st-nav{display:none}
}
.feature-rows{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border)}
.feature{padding:1.4rem 1.3rem 1.6rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.feature:nth-child(3n){border-right:0}
.feature:nth-last-child(-n+3){border-bottom:0}
.feature .k{font-family:var(--sans);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:.5rem;display:block}
.feature h3{font-size:1.45rem;margin-bottom:.4rem}
.feature p{color:var(--bark);font-size:.98rem}
.feature a{font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-fine);border-bottom:1px solid rgba(140,110,74,.4);display:inline-block;margin-top:.8rem}
.faq{border-top:1px solid var(--border);max-width:760px}
.faq details{border-bottom:1px solid var(--border-light)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 0;font-size:1.3rem;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--gold-fine);font-weight:300}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--bark);padding-bottom:1.1rem;max-width:60ch;font-size:1.02rem}

/* sign-up flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);margin-bottom:2rem}
.flow div{padding:.9rem 1rem;border-right:1px solid var(--border);font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);display:flex;gap:.6rem;align-items:center}
.flow div:last-child{border-right:0}
.flow div.on{color:var(--ink);background:var(--bg-soft)}
.flow i{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.4rem;color:var(--gold-fine)}
.done-list{list-style:none;margin:0;padding:0}
.done-list li{display:flex;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--border-light);font-size:1.02rem;align-items:baseline}
.done-list li::before{content:"✓";color:var(--sage-deep);font-family:var(--sans);font-size:.8rem}

/* search results */
.results{display:grid;gap:0;border-top:1px solid var(--border)}
.result{display:grid;grid-template-columns:110px 1fr auto;gap:1.2rem;padding:1.1rem 0;border-bottom:1px solid var(--border-light);align-items:start}
.result .fr{aspect-ratio:1;overflow:hidden;background:#221a14}
.result .fr img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.9)}
.result .fr.face{border-radius:50%}
.result .kind{font-family:var(--sans);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:.2rem;display:block}
.result h3{font-size:1.45rem;line-height:1.15}
.result p{color:var(--bark);font-size:1rem;margin-top:.3rem}
.result .m{font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);margin-top:.5rem;display:flex;gap:.8rem;flex-wrap:wrap}
.result .km{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);white-space:nowrap;padding-top:.4rem}

@media (max-width:1000px){
  .split{grid-template-columns:1fr;min-height:0;border-inline:0}
  .split-frame{order:-1;aspect-ratio:4/5;border-left:0;border-bottom:1px solid var(--border)}
  .split-copy{padding-block:2.2rem}
  .layout,.layout.right,.detail,.ev-grid,.prof,.story-grid,.how-lead{grid-template-columns:1fr}
  .side{position:static}
  .facts,.route-board{grid-template-columns:1fr 1fr}
  .facts div:nth-child(2n),.route-board a:nth-child(2n){border-right:0}
  .facts div,.route-board a{border-bottom:1px solid var(--border)}
  .feature-rows{grid-template-columns:1fr 1fr}
  .feature:nth-child(3n){border-right:1px solid var(--border)}
  .feature:nth-child(2n){border-right:0}
  .feature:nth-last-child(-n+3){border-bottom:1px solid var(--border)}
  .flow{grid-template-columns:1fr 1fr}
  .cross{grid-template-columns:1fr;gap:.5rem}.cross .btn{justify-self:start}
}
@media (max-width:760px){
  .ecard{grid-template-columns:72px 1fr}.ecard .date b{font-size:1.7rem}
  .bring{columns:1}
  .kv div,.info div{grid-template-columns:1fr;gap:.2rem}
  .result{grid-template-columns:72px 1fr}.result .km{display:none}
  .going-list{grid-template-columns:1fr}
  .ev-hero{aspect-ratio:4/5}
  .thumbs{grid-template-columns:repeat(4,1fr)}
  .facts,.route-board,.flow{grid-template-columns:1fr}
  .facts div,.route-board a,.flow div{border-right:0}
  .prof .stat{flex-wrap:wrap}
  .keeper .btn,.gate .btn{margin-left:0}
  .st-kpis{grid-template-columns:1fr 1fr}
}

/* column presets, so the phone media query can undo them */
.detail.r380{grid-template-columns:minmax(0,1.3fr) 380px}
.detail.l380{grid-template-columns:380px minmax(0,1fr)}
.two.r16{grid-template-columns:1fr 1.6fr}
.two.half{grid-template-columns:1fr 1fr;gap:1.5rem}
.layout.r340{grid-template-columns:minmax(0,1fr) 340px;gap:2rem}
@media (max-width:1000px){.detail.r380,.detail.l380,.two.r16,.two.half,.layout.r340{grid-template-columns:1fr}}

/* the first-visit note: this is a mock-up, and here is what is not real */
.hello{position:fixed;inset:0;z-index:100;display:flex;padding:clamp(1rem,4vw,2.5rem);overflow-y:auto;overscroll-behavior:contain}
.hello[hidden]{display:none}
.hello .back{position:fixed;inset:0;background:rgba(28,20,14,.62);backdrop-filter:blur(3px);animation:hfade .4s ease}
.hello .card{position:relative;z-index:2;margin:auto;background:var(--paper);border:1px solid var(--rule);max-width:640px;width:100%;padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 40px 90px -30px rgba(28,20,14,.6);animation:hrise .5s cubic-bezier(.22,.61,.36,1)}
@keyframes hfade{from{opacity:0}}
@keyframes hrise{from{opacity:0;transform:translateY(18px)}}
.hello h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:.5rem 0 .9rem;max-width:22ch}
.hello h2 em{color:var(--sage-deep)}
.hello .lede{color:var(--bark);font-size:1.1rem;max-width:52ch}
.hello ul{list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--hairline)}
.hello li{padding:.85rem 0;border-bottom:1px solid var(--hairline);display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;font-size:1.02rem}
.hello li b{font-weight:400;display:block}
.hello li span{color:var(--bark);font-size:.98rem;display:block;margin-top:.1rem}
.hello li i{font-family:var(--sans);font-style:normal;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);padding-top:.3rem;white-space:nowrap}
.hello .ask-note{margin-top:1.4rem;padding:.9rem 1.1rem;background:var(--bg-soft);border-left:2px solid var(--sage-deep);font-size:1rem;color:var(--bark)}
.hello .acts{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:1.6rem}
.hello .fine{margin:0;font-size:.92rem}
@media (max-width:600px){.hello li{grid-template-columns:1fr;gap:.15rem}.hello li i{padding-top:0}}

/* a map in a narrow column drops the counts and tightens the labels, so the
   thirteen areas stay readable in a 240px sidebar */
.map{container-type:inline-size}
@container (max-width: 300px){
  .map .pin b{font-size:.5rem;letter-spacing:.08em}
  .map .pin b small{display:none}
  .map .peak b{font-size:.48rem;letter-spacing:.08em}
  .map .peak b small{display:none}
  .map .pin i{width:6px;height:6px;left:-3px;top:-3px}
  .map .pin.here i{width:8px;height:8px;left:-4px;top:-4px}
  .map .wl{display:none}
  .map .attrib{display:none}
}

/* organisations: the same card, marked so it is obvious it is not a person */
.badge.org{background:var(--sage-deep);color:#fff;border-color:transparent}
.vcard.is-org .frame img{object-position:50% 40%}
.orgline{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);margin-bottom:.3rem}
.orgline b{font-family:var(--serif);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}

/* ---- section help and section actions ------------------------------------
   A question mark beside the heading opens a short note about how that part of
   the board works. The note is anchored to the heading rather than the page so
   it opens where the reader is looking, and on a phone it falls back to a plain
   block under the heading because there is no room beside it. */
.mh{flex-wrap:wrap}
.mh{position:relative}
.mh-acts{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
/* one visual weight per section head: the action and the see-all are both
   text, the action in sage so it still reads as the thing to do */
.mh-acts .btn,.mh-acts a.btn,.mh-acts a.btn.ask{background:none;border:0;border-bottom:1px solid rgba(92,107,78,.45);padding:0 0 .1em;color:var(--sage-deep);font-size:.64rem;letter-spacing:.2em;border-radius:0}
.mh-acts .btn:hover,.mh-acts a.btn.ask:hover{background:none;color:var(--ink);border-bottom-color:var(--ink)}

.help{margin-left:.55rem;width:1.15rem;height:1.15rem;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--stone);font-family:var(--sans);font-size:.62rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transform:translateY(-.05rem)}
.help:hover,.help[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}

.helpbox{position:absolute;left:0;top:calc(100% + .2rem);z-index:40;width:min(27rem,100%);background:var(--cream);border:1px solid var(--ink);padding:1.35rem 1.5rem 1.4rem;box-shadow:0 18px 40px rgba(28,26,23,.13);text-align:left}
.helpbox b{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--bark);margin-bottom:.65rem}
.helpbox p{font-family:var(--serif);font-size:.86rem;line-height:1.6;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink);margin:0 0 .7rem}
.helpbox p:last-of-type{margin-bottom:0}
.helpbox .btn{margin-top:1rem}
.helpshut{position:absolute;right:.5rem;top:.35rem;border:0;background:transparent;color:var(--stone-fine);font-size:1.1rem;line-height:1;cursor:pointer;padding:.2rem .35rem}
.helpshut:hover{color:var(--ink)}

@media (max-width:640px){
  .mh{gap:.75rem}
  .mh-acts{margin-left:0;width:100%;gap:.9rem}
  .helpbox{width:100%}
}

/* ---- a member's own links ------------------------------------------------
   The one part of a profile that points away from Folk.Share. Kept quiet and in
   a column so a member with one website does not look emptier than a member
   with five accounts. */
.links{list-style:none;margin:.2rem 0 0;padding:0;border-top:1px solid var(--border)}
.links li{border-bottom:1px solid var(--border)}
.links a{display:flex;align-items:baseline;gap:.7rem;padding:.62rem 0;text-decoration:none;color:var(--ink)}
.links a:hover span{color:var(--ink);border-bottom-color:var(--ink)}
.links i{flex:0 0 1.35rem;height:1.35rem;border:1px solid var(--border);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-style:normal;font-size:.58rem;letter-spacing:0;color:var(--bark);align-self:center}
.links a:hover i{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.links b{flex:0 0 5.2rem;font-family:var(--sans);font-weight:400;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bark)}
.links span{font-family:var(--serif);font-size:.92rem;color:var(--bark);border-bottom:1px solid transparent;word-break:break-word}
@media (max-width:520px){.links b{flex-basis:4.4rem}}

/* A hidden form field must actually go, and .form label sets display:grid,
   which wins over the browser default for [hidden] on its own. */
[hidden]{display:none!important}

/* The photograph credit already owns the bottom right corner. On a narrow
   screen the badge and the credit are together wider than the frame, so the
   badge steps up a line rather than the pair overlapping. */
@media (max-width:760px){
  .prof .frame .badge,.prof .frame .badges,.detail .frame .badge,.detail .frame .badges{bottom:2.5rem}
}

/* On a narrow map the caption was wrapping to three lines and climbing into
   Isabella Point. More width and a smaller face keep it on one line. */
@container (max-width: 360px){
  .map .lbl{max-width:88%;font-size:.5rem;letter-spacing:.13em}
}

/* ---- Indigenous place names ---------------------------------------------
   .lang is the one class that carries text in Hul'q'umi'num' or SENĆOŦEN.
   Noto Sans is asked for first because it covers Latin Extended-B and the
   combining macron below, which Jost does not: without it Ƚ, Ⱦ, Ḵ and W̱ fall
   back glyph by glyph and the word comes apart. */
.lang{font-family:'Noto Sans',ui-sans-serif,'Segoe UI',system-ui,sans-serif}

.map-wrap{display:flex;flex-direction:column;gap:.55rem}
.map-langs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-family:var(--sans);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase}
.map-langs button{border:1px solid var(--border);background:transparent;color:var(--stone-fine);font:inherit;letter-spacing:inherit;text-transform:inherit;padding:.42em .8em;cursor:pointer}
.map-langs button.lang{text-transform:none;letter-spacing:.05em;font-size:.62rem;padding:.3em .8em}
.map-langs button.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.map-langs a{color:var(--gold-fine);border-bottom:1px solid rgba(140,110,74,.4)}

/* One set of names at a time. A place with no documented name keeps its
   English one, greyed, rather than vanishing off the map. */
.map .pin b .hq,.map .peak b .hq{display:none}
.map.hq .pin b .en,.map.hq .peak b .en{display:none}
.map.hq .pin b .hq,.map.hq .peak b .hq{display:inline}
/* A place with no recorded name keeps its English one, greyed. It stays in the
   uppercase treatment because that is what it still is: an English name. Only
   the Hul'q'umi'num' names take the lowercase setting. */
.map.hq .pin b .hq.none{color:var(--stone-fine);opacity:.55}
.map .pin b .hq.lang,.map .peak b .hq.lang{text-transform:none;letter-spacing:.03em;font-weight:400}

/* The acknowledgement sits above the footer's two columns, full width, and in
   the serif rather than the footer's uppercase sans, because it is a sentence
   to be read and not a row of links. */
footer .ack{flex:1 0 100%;order:-1;margin:0 0 1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border);font-family:var(--serif);font-size:.95rem;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--bark);max-width:74ch}
footer .ack .lang{color:var(--ink)}

/* the names table on the land page */
.names{width:100%;border-collapse:collapse;margin-top:.6rem}
.names th{text-align:left;font-family:var(--sans);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--stone-fine);border-bottom:1px solid var(--ink);padding:0 .8rem .5rem 0}
.names td{border-bottom:1px solid var(--border);padding:.7rem .8rem .7rem 0;vertical-align:top;color:var(--bark)}
.names td.n{color:var(--ink);font-size:1.05rem;white-space:nowrap}
.names td small{display:block;font-family:var(--sans);font-size:.53rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);margin-top:.25rem}

/* the acknowledgement block on the home page */
.land{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(1.4rem,4vw,3rem);align-items:start}
.land h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:300;line-height:1.22;margin:0 0 .9rem}
.land p{color:var(--bark);margin:0 0 .8rem;max-width:60ch}
.land .aside{border-left:1px solid var(--border);padding-left:clamp(1rem,2.4vw,1.8rem)}
.land .aside .h4{margin-top:0}
@media (max-width:900px){.land{grid-template-columns:1fr}.land .aside{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:1.2rem}}

/* ---- zoom and pan --------------------------------------------------------
   The stage carries the drawing and the markers and is the only thing scaled.
   Every label is counter-scaled through --z so the type stays the size it was
   drawn at: a map whose place names grow with the coastline is a photograph,
   not a map. */
.map .stage{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
/* the dot's own hover transition fights the counter-scale while zooming */
.map.zoomed .pin i{transition:none}
.map.zoomable{cursor:default;touch-action:none}
.map.zoomable.zoomed{cursor:grab}
.map.zoomable.dragging{cursor:grabbing}
.map.dragging .stage{transition:none}
.map .stage svg{width:100%;height:100%;display:block}

/* Labels keep their size AND their distance from the dot, so a name never
   drifts away from the place it names. Both have to be divided by the zoom:
   the offset is in stage units, which the stage has just multiplied. */
.map.zoomed .pin b,.map.zoomed .peak b{left:calc(11px / var(--z,1));transform:translateY(-50%) scale(calc(1 / var(--z,1)));transform-origin:0 50%}
.map.zoomed .pin.w b{left:auto;right:calc(11px / var(--z,1));transform-origin:100% 50%}
.map.zoomed .pin.n b{left:0;right:auto;bottom:calc(10px / var(--z,1));transform:translateX(-50%) scale(calc(1 / var(--z,1)));transform-origin:50% 100%}
.map.zoomed .pin.u b{bottom:calc(9px / var(--z,1));transform:scale(calc(1 / var(--z,1)));transform-origin:0 100%}
.map.zoomed .pin.w.u b{transform-origin:100% 100%}
.map.zoomed .pin i,.map.zoomed .peak i{transform:scale(calc(1 / var(--z,1)))}
.map.zoomed .pin:hover i{transform:scale(calc(1.4 / var(--z,1)))}
/* the ferry lozenge is a rotated square, so the rotation has to be restated */
.map.zoomed .ferry i{transform:rotate(45deg) scale(calc(1 / var(--z,1)))}
.map.zoomed .wl text{font-size:calc(8px / var(--z,1));letter-spacing:calc(1.6px / var(--z,1))}

/* The note under an area's name is the reason to zoom in at all, so it is the
   one thing that appears rather than merely getting bigger. */
.map .pin b em{display:none}
.map.near .pin b em{display:block;max-width:15rem;white-space:normal;font-family:var(--serif);font-style:normal;font-size:.72rem;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--bark);margin-top:.15rem}
.map.near .pin.w b em{margin-left:auto}

.map-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.map-zoom{display:flex;align-items:stretch;margin-left:auto}
.map-zoom button{min-width:1.7rem;height:1.7rem;border:1px solid var(--border);background:transparent;color:var(--ink);font-family:var(--sans);font-size:.78rem;line-height:1;cursor:pointer;padding:0;margin-left:-1px}
.map-zoom button.whole{font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;padding:0 .7em;color:var(--stone-fine)}
.map-zoom button:hover:not(:disabled){background:var(--ink);color:var(--cream);border-color:var(--ink);position:relative;z-index:1}
.map-zoom button:disabled{color:var(--stone-fine);opacity:.45;cursor:default}
.map-hint{margin:.1rem 0 0;font-family:var(--sans);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.7;color:var(--stone-fine);max-width:58ch}
/* the scale bar measures the drawing, so it grows with it */
.map .scale i{width:calc(38px * var(--z,1));max-width:40%}
@container (max-width: 300px){
  .map-hint{display:none}
}

/* ---- the mailing list ----------------------------------------------------
   The one form in this prototype that really does something. It appears twice,
   in the welcome note and above the footer on every page, from one helper. */
.keepup{border-top:1px solid var(--border);padding:clamp(2rem,4vw,3rem) 0}
.signup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem clamp(1.2rem,3vw,2.4rem);align-items:center}
.signup .sig-say b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.25;color:var(--ink)}
.signup .sig-say span{display:block;margin-top:.35rem;font-size:.92rem;line-height:1.55;color:var(--bark);max-width:52ch}
.signup .sig-do{display:flex;align-items:stretch;gap:.5rem;flex-wrap:wrap}
.signup input[type=email]{font-family:var(--serif);font-size:1rem;padding:.75em .9em;border:1px solid var(--ink);background:var(--paper);color:var(--ink);min-width:16rem;width:100%}
.signup input[type=email]:focus{outline:2px solid var(--sage-deep);outline-offset:1px}
.signup .sr{flex:1 1 16rem;display:block;font-size:0;line-height:0}
.signup button{white-space:nowrap}
/* the honeypot: off screen rather than display:none, which some bots skip */
.signup .pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup .sig-said{grid-column:1/-1;margin:0;font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.7;color:var(--bark)}
.signup .sig-said:empty{display:none}
.signup.good .sig-said{color:var(--sage-deep)}
.signup.bad .sig-said{color:#8a4b3a}
@media (max-width:760px){
  .signup{grid-template-columns:1fr}
  .signup .sig-do{flex-direction:column;align-items:stretch}
  .signup .sr{flex:none}
}

/* the copy in the welcome note is tighter than the one above the footer */
.hello .signup{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--border);grid-template-columns:1fr}
.hello .signup .sig-say b{font-size:1.15rem}
.hello .signup .sig-say span{font-size:.85rem}

/* ---- the walkthrough -----------------------------------------------------
   The scrim IS the spotlight's own box-shadow, so the cut-out moves and
   resizes as one object rather than four masking panels chasing it. The layer
   catches no clicks: the page underneath stays live, because half these steps
   point at something the reader will want to use straight away. */
.tour{position:fixed;inset:0;z-index:9000;pointer-events:none}
.tour[hidden]{display:none}
.tour-scrim{position:fixed;inset:0;background:rgba(26,20,16,.58)}
.tour-spot{position:fixed;border-radius:3px;box-shadow:0 0 0 9999px rgba(26,20,16,.58);outline:1.5px solid rgba(246,243,236,.55);outline-offset:2px;
  transition:top .42s cubic-bezier(.22,.68,.28,1),left .42s cubic-bezier(.22,.68,.28,1),width .42s cubic-bezier(.22,.68,.28,1),height .42s cubic-bezier(.22,.68,.28,1)}
.tour-card{position:fixed;pointer-events:auto;background:var(--cream);border:1px solid var(--ink);padding:1.35rem 1.5rem 1.3rem;box-shadow:0 22px 50px rgba(20,15,10,.24);max-width:calc(100vw - 24px)}
.tour-card:focus{outline:none}
.tour.settling .tour-card{opacity:0}
.tour-card{transition:opacity .2s}
.tour-n{margin:0 0 .5rem;font-family:var(--sans);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone-fine)}
.tour-t{margin:0 0 .5rem;font-size:1.3rem;font-weight:400;line-height:1.22}
.tour-b{margin:0;font-size:.94rem;line-height:1.55;color:var(--bark)}
.tour-miss{margin:.7rem 0 0;font-size:.82rem;line-height:1.5;color:#8a4b3a;border-left:2px solid #8a4b3a;padding-left:.7rem}
.tour-dots{display:flex;gap:4px;margin:1.1rem 0 .9rem}
.tour-dots i{width:5px;height:5px;border-radius:50%;background:var(--border)}
.tour-dots i.was{background:var(--stone-fine)}
.tour-dots i.on{background:var(--ink);transform:scale(1.5)}
.tour-do{display:flex;align-items:center;gap:.5rem}
.tour-do .btn{font-size:.6rem;padding:.7em 1.2em}
.tour-do .btn:disabled{opacity:.4;cursor:default}
.tour-do .btn[data-t="next"]{margin-left:0}
.tour-x{margin-right:auto;border:0;background:transparent;padding:0;cursor:pointer;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine)}
.tour-x:hover{color:var(--ink)}

/* The way back in. It stays put during a run, because a step points at it. */
.tour-open{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:120;
  display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .8rem .45rem .7rem;border-radius:999px;
  border:1px solid var(--border);background:rgba(246,243,236,.94);color:var(--bark);cursor:pointer;
  font-family:var(--sans);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  backdrop-filter:blur(6px)}
.tour-open i{font-style:normal;font-size:.7rem;line-height:1;color:var(--ink)}
.tour-open:hover{background:var(--ink);color:var(--cream)}
.tour-open:hover i{color:var(--cream)}
@media (max-width:600px){
  .tour-open{padding:.55rem;gap:0}
  .tour-open span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tour-spot,.tour-card{transition:none}
  .slider img{transition:none;animation:none!important;transform:none}
  .rv{opacity:1;transform:none;transition:none}
  .px img{transform:none}
}

/* the walkthrough jumps rather than glides: two animations at once read as
   jitter, and measuring mid-scroll puts the cut-out outside the viewport */
html.tour-jump{scroll-behavior:auto!important}

/* the feedback box in the foot of every page, beside the signup */
.feedback{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.feedback .lead{margin:0;font-size:1rem;color:var(--bark)}
.feedback .fb-open{font:inherit;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.feedback .fb-body{display:grid;gap:.8rem;margin-top:.9rem;max-width:44rem}
.feedback label{display:grid;gap:.3rem}
.feedback label span{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine)}
.feedback textarea,.feedback input{font-family:var(--serif);font-size:1rem;padding:.6rem .75rem;border:1px solid var(--border);background:var(--bg-soft);color:var(--ink);border-radius:0;width:100%;box-sizing:border-box}
.feedback textarea::placeholder,.feedback input::placeholder{font-style:italic;color:var(--mist)}
.feedback .fb-acts{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.feedback .fb-said{font-style:italic;color:var(--bark)}

/* ── The peek: a card opens a small window first ───────────────────────────
   One dialog per page, filled on open. The photograph is the listing's own
   or nothing. Learn more is a real link to the item's page. */
.peek{border:1px solid var(--border);background:var(--paper);color:var(--ink);padding:0;width:min(600px,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;box-shadow:0 30px 80px rgba(20,15,10,.35)}
.peek::backdrop{background:rgba(20,15,10,.55);backdrop-filter:blur(2px)}
.peek-x{position:absolute;top:.6rem;right:.6rem;z-index:2;width:2.2rem;height:2.2rem;border:0;border-radius:50%;background:rgba(20,15,10,.6);color:var(--cream);font-size:1.4rem;line-height:1;cursor:pointer}
.peek-x:hover{background:var(--ink)}
.peek:not(:has(.peek-photo)) .peek-x{background:transparent;color:var(--bark)}
.peek-photo{aspect-ratio:16/10;overflow:hidden;background:#221a14}
.peek-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.9) contrast(1.02)}
.peek-body{padding:1.5rem clamp(1.2rem,4vw,2rem) 1.8rem}
.peek-body h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.08;margin:.4rem 0 .6rem;font-weight:400;padding-right:1.5rem}
.peek-chips{display:flex;gap:.3rem;flex-wrap:wrap;margin:.2rem 0 .8rem}
.peek-lead{font-size:1.08rem;color:var(--ink)}
.peek-line{color:var(--bark);font-size:1rem;margin-top:.5rem}
.peek-acts{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1.4rem}
.share{display:flex;gap:.5rem;flex-wrap:wrap}
.share .btn.quiet{padding:.7em 1em}
.share.page{margin-top:.9rem}

/* ── Profiles: the same information, fewer things asking to be noticed ─────
   A block that has a border and a background and a heading says "I am a
   block" three times. Space says it once. One type scale stepping down from
   the name, roles as a sentence, reference material small and collapsible. */
.prof .h4{border-bottom:0;padding-bottom:0;margin:2.4rem 0 .6rem;color:var(--stone-fine)}
.prof .h4:first-child{margin-top:0}
.prof .roles{font-style:normal;color:var(--bark);font-size:1.18rem}
.prof .privacy{border:0;padding:0;margin-top:2.4rem;font-size:.92rem}
.prof .list a b{font-size:1.15rem}
.prof details{border-top:1px solid var(--border-light);padding:.9rem 0}
.prof details summary{cursor:pointer;list-style:none;font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--stone-fine);display:flex;justify-content:space-between;align-items:center}
.prof details summary::-webkit-details-marker{display:none}
.prof details summary::after{content:"+";font-family:var(--serif);font-size:1.2rem;color:var(--stone)}
.prof details[open] summary::after{content:"−"}
.prof details > *:not(summary){margin-top:.8rem}
.prof .elsewhere{margin-top:2rem;font-size:.95rem;color:var(--stone-fine)}
.prof .elsewhere a{color:var(--gold-fine)}
.prof .fine{margin-top:.6rem}

/* An organisation reads as a place you go, not a person you know: a wide
   banner with the name at its foot (never over the top of a photograph),
   then four regions in order of weight. */
.org-banner{position:relative;aspect-ratio:21/9;overflow:hidden;background:#221a14;margin-top:1.2rem}
.org-banner img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.9) contrast(1.02)}
.org-banner .on{position:absolute;left:0;right:0;bottom:0;padding:3rem clamp(1.2rem,4vw,2.4rem) 1.4rem;background:linear-gradient(180deg,transparent,rgba(20,15,10,.78));color:var(--cream)}
.org-banner .on .eyebrow{color:var(--gold-lit)}
.org-banner h1{font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.02;margin:.3rem 0 0;font-weight:400;color:var(--cream);max-width:20ch}
.org-banner .credit{bottom:auto;top:.7rem}
.org{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2.4rem}
.org .about{font-size:1.22rem;line-height:1.55;max-width:58ch;color:#3f3226}
.org .about + .acts{margin-top:1.4rem}
.org .board{margin-top:3rem}
.org .board .h4{border-bottom:0;padding-bottom:0;margin:0 0 1rem;color:var(--stone-fine)}
.org .board .more{display:inline-block;margin-top:1rem;font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-fine)}
.org .reach{font-size:.98rem;color:var(--stone-fine)}
.org .reach .h4{border-bottom:0;padding-bottom:0;margin:0 0 .6rem;color:var(--stone-fine)}
.org .reach dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem}
.org .reach dt{font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;padding-top:.3rem}
.org .reach dd{margin:0;color:var(--bark)}
.org .reach dd a{color:var(--gold-fine)}
.org details{border-top:1px solid var(--border-light);padding:.9rem 0;margin-top:2rem}
.org details summary{cursor:pointer;list-style:none;font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--stone-fine);display:flex;justify-content:space-between;align-items:center}
.org details summary::-webkit-details-marker{display:none}
.org details summary::after{content:"+";font-family:var(--serif);font-size:1.2rem;color:var(--stone)}
.org details[open] summary::after{content:"−"}
.org .people{display:grid;gap:.6rem;margin-top:.9rem}
.org .people a{display:grid;grid-template-columns:40px 1fr;gap:.8rem;align-items:center;color:inherit}
.org .people img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 25%;filter:saturate(.9)}
.org .people b{font-weight:400;font-size:1.1rem;display:block;line-height:1.1}
.org .people small{font-size:.9rem;color:var(--stone-fine)}
.org .map{margin-top:1.4rem}
@media (max-width:820px){
  .org{grid-template-columns:1fr}
  .org-banner{aspect-ratio:4/3;margin-inline:calc(var(--edge) * -1)}
  .org-banner .on{padding-inline:var(--edge)}
  .peek{width:calc(100vw - 1.2rem)}
}

/* ── The founding intake (b/welcome.html) ────────────────────────────────────
   The one page in this folder that is not a mock-up: an invited islander
   fills it in and it saves. So it carries none of the site's usual chrome,
   no nav rail and no mailing-list footer, and its strip says the opposite of
   the strip on every other page. Same tokens, same two faces, quieter.       */
.wel-strip{width:100%;background:var(--sage-deep);color:#f3efe6;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:.62rem var(--edge);display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.wel-strip b{font-weight:400;letter-spacing:.2em}
.wel-strip .saved{opacity:.75;font-size:.58rem;letter-spacing:.18em}
.wel-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;padding:1.4rem var(--edge) 0}
.wel-head .mark{font-family:var(--sans);font-size:1.02rem;letter-spacing:.06em;color:var(--ink)}
.wel-head .mark span{display:block;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--stone-fine);margin-top:.15rem}
.wel-head .who{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine)}

/* The step rail. Numbers, not a percentage: a bar that says 38% tells you
   nothing you can act on, and a list of names tells you what is still coming. */
/* ⚠️ The rules are drawn by the GAP, not by a border on each button, because
   seven steps wrap to two rows somewhere around a tablet and a border-right
   draws nothing between the rows. A 1px gap over a border-coloured background
   rules both directions, and leaves no line hanging off the last item in a
   row or under the last row. Sydney's call, 2026-09-22. */
.wel-rail{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--border);background:var(--border);margin:1.6rem 0 2rem}
.wel-rail button{flex:1 1 9rem;text-align:left;background:var(--paper);border:0;padding:.75rem .9rem;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);cursor:pointer;display:flex;gap:.55rem;align-items:center;min-width:0}
.wel-rail button i{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--gold-fine);flex:none}
.wel-rail button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wel-rail button.on{color:var(--ink);background:var(--bg-soft)}
.wel-rail button.done i{color:var(--sage-deep)}
.wel-rail button.done i::before{content:"✓"}
.wel-rail button.done i em{display:none}

.wel-step{display:none}
.wel-step.on{display:block}
.wel-step > .lede{color:var(--bark);max-width:60ch;margin-top:.7rem;font-size:1.1rem}
.wel-step h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.05;max-width:22ch}
.wel-step h2 em{color:var(--sage-deep);font-style:italic}
.wel-body{margin-top:2rem}

/* Groups inside a step. A legend is a small-caps rule, matching .h4. */
.wel-set{border:0;padding:0;margin:0 0 2.4rem;min-width:0}
.wel-set > legend{font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--stone-fine);padding:0;margin-bottom:.9rem;width:100%;border-bottom:1px solid var(--border);padding-bottom:.4rem}
.wel-set > .note{color:var(--stone-fine);font-size:.98rem;max-width:58ch;margin:-.3rem 0 1rem}

/* Categories: a disclosure per category, tags as chips inside it. Everything
   is a real button with aria-pressed, so a screen reader is told the state
   rather than the word. */
.wel-cats{display:grid;gap:.5rem}
.wel-cat{border:1px solid var(--border);background:var(--bg-soft)}
.wel-cat > summary{cursor:pointer;list-style:none;padding:.8rem 1rem;display:flex;gap:.8rem;align-items:baseline;justify-content:space-between}
.wel-cat > summary::-webkit-details-marker{display:none}
.wel-cat > summary b{font-weight:400;font-size:1.18rem}
.wel-cat > summary .n{font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-deep)}
.wel-cat > summary .n:empty::before{content:"+";color:var(--stone);font-family:var(--serif);font-size:1.1rem}
.wel-cat[open] > summary{border-bottom:1px solid var(--border-light)}
.wel-cat .in{padding:.9rem 1rem 1.1rem}
.wel-cat .blurb{color:var(--stone-fine);font-size:.96rem;margin-bottom:.7rem;max-width:56ch}
.wel-cat.has > summary b{color:var(--sage-deep)}

.wel-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.wel-chips button{font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:.46rem .8rem;border:1px solid var(--border);background:var(--paper);color:var(--bark);cursor:pointer;white-space:nowrap}
.wel-chips button:hover{border-color:var(--sage)}
.wel-chips button[aria-pressed="true"]{background:var(--sage-deep);border-color:var(--sage-deep);color:#f3efe6}
.wel-chips button.mine{border-style:dashed;border-color:var(--gold);color:var(--gold-fine)}
.wel-chips button.mine[aria-pressed="true"]{background:var(--gold-fine);border-color:var(--gold-fine);border-style:solid;color:#f7f2e6}

/* Adding one that is not there. The near matches come first on purpose. */
.wel-add{margin-top:.8rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-start}
.wel-add input{font-family:var(--serif);font-size:1rem;padding:.55rem .75rem;border:1px solid var(--border);background:var(--paper);min-width:14rem;flex:1 1 14rem}
.wel-near{font-size:.94rem;color:var(--stone-fine);margin-top:.5rem;width:100%}
.wel-near b{font-weight:400;color:var(--sage-deep);cursor:pointer;border-bottom:1px solid rgba(92,107,78,.45)}

/* A thing they would lend, and the request they would post. */
.wel-card{border:1px solid var(--border);padding:1.1rem 1.2rem 1.3rem;margin-bottom:1rem;background:var(--bg-soft)}
.wel-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.8rem}
.wel-card .top .k{font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine)}
.wel-card .drop{background:none;border:0;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);cursor:pointer;padding:0}
.wel-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.1rem}
.wel-grid .full{grid-column:1/-1}
.wel-grid label,.wel-field{display:grid;gap:.35rem;font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine);min-width:0}
.wel-grid input,.wel-grid textarea,.wel-grid select,.wel-field input,.wel-field textarea,.wel-field select{font-family:var(--serif);font-size:1.05rem;padding:.65rem .85rem;border:1px solid var(--border);background:var(--paper);color:var(--ink);border-radius:0;width:100%}
.wel-grid textarea,.wel-field textarea{min-height:5.5rem;resize:vertical;line-height:1.5}
.wel-grid input:focus,.wel-grid textarea:focus,.wel-grid select:focus,.wel-field input:focus,.wel-field textarea:focus{outline:0;border-color:var(--sage)}
.wel-hint{font-family:var(--serif);font-size:.94rem;letter-spacing:0;text-transform:none;color:var(--stone-fine);font-style:italic}

/* A link is a kind and an address, so it is a row rather than a card: a full
   card each would make six links look like six pieces of work. */
.wel-links{display:grid;gap:.5rem}
.wel-link{display:grid;grid-template-columns:11rem minmax(0,1fr) auto;gap:.7rem;align-items:end}
.wel-link .drop{background:none;border:0;font-family:var(--sans);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);cursor:pointer;padding:0 0 .85rem}
@media (max-width:620px){
  .wel-link{grid-template-columns:1fr auto;align-items:end}
  .wel-link label:first-child{grid-column:1/-1}
}

/* Photographs. A tile is the picture, its caption and a way to take it off. */
.wel-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.6rem;margin-top:.7rem}
.wel-photo{position:relative;border:1px solid var(--border);background:var(--paper-2);aspect-ratio:4/3;overflow:hidden}
.wel-photo img{width:100%;height:100%;object-fit:cover;display:block}
.wel-photo .none{display:flex;height:100%;align-items:center;justify-content:center;text-align:center;padding:.6rem;font-family:var(--sans);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-fine)}
.wel-photo .x{position:absolute;bottom:0;right:0;background:rgba(46,34,24,.82);color:#f3efe6;border:0;font-family:var(--sans);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .55rem;cursor:pointer}
.wel-photo.busy{opacity:.55}
.wel-photo .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--sage-deep);transition:width .2s}
.wel-drop{border:1px dashed var(--border);background:var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:4/3;cursor:pointer;font-family:var(--sans);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-fine);padding:.6rem}
.wel-drop:hover{border-color:var(--sage);color:var(--sage-deep)}
.wel-drop.over{border-color:var(--sage-deep);background:var(--bg-soft)}

/* Consents. Each one carries the words it stores, so the sentence beside the
   box is the sentence in the record. */
.wel-consents{display:grid;gap:.1rem;border:1px solid var(--border)}
.wel-consent{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--border-light);align-items:start}
.wel-consent:last-child{border-bottom:0}
.wel-consent input{width:1.05rem;height:1.05rem;margin-top:.28rem;accent-color:var(--sage-deep)}
.wel-consent p{font-size:1.02rem;line-height:1.5}
.wel-consent small{display:block;color:var(--stone-fine);font-size:.92rem;margin-top:.25rem;font-style:italic}
.wel-consent.need{background:rgba(192,122,114,.07)}

/* Moving between steps, and the summary at the end. */
.wel-acts{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:1.4rem;margin-top:2.4rem}
.wel-acts .spacer{flex:1}
.wel-acts .said{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine)}
.wel-acts .said.bad{color:var(--clay);text-transform:none;letter-spacing:.02em;font-family:var(--serif);font-size:1rem;font-style:italic}
.wel-review{border:1px solid var(--border);padding:1.2rem 1.3rem;background:var(--bg-soft);margin-bottom:1.6rem}
.wel-review dl{margin:0;display:grid;grid-template-columns:11rem 1fr;gap:.5rem 1.2rem}
.wel-review dt{font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);padding-top:.3rem}
.wel-review dd{margin:0;color:var(--ink)}
.wel-review dd .q{color:var(--stone-fine);font-style:italic}
.wel-review .edit{background:none;border:0;padding:0;margin-left:.5rem;font-family:var(--sans);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-fine);cursor:pointer;border-bottom:1px solid rgba(140,110,74,.4)}

.wel-gate{max-width:46rem;padding-block:clamp(3rem,10vh,6rem)}
.wel-done{max-width:52rem}
.wel-done .big{font-size:clamp(2rem,4vw,3rem);line-height:1.05}
.wel-print{margin-top:2rem;border-top:1px solid var(--border);padding-top:1.2rem}

@media (max-width:760px){
  .wel-grid{grid-template-columns:1fr}
  .wel-review dl{grid-template-columns:1fr}
  .wel-review dt{padding-top:.6rem}
  /* ⚠️ Stacked, seven steps fill a phone screen before a word of the form
     appears, and the rail is orientation rather than content. One scrolling
     line keeps it to about a centimetre and still lets any step be tapped.
     The current step is scrolled into view by the script. */
  /* Nothing wraps here, so the gap trick is not needed and would leave a
     strip of border colour after the last step on a wide-ish phone. */
  .wel-rail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:0;background:var(--paper)}
  .wel-rail::-webkit-scrollbar{display:none}
  .wel-rail button{flex:0 0 auto;padding:.6rem .8rem;scroll-margin-inline:2rem;border-right:1px solid var(--border)}
  .wel-rail button:last-child{border-right:0}
  .wel-rail button span{max-width:0;opacity:0;transition:max-width .2s,opacity .2s}
  .wel-rail button.on span{max-width:12rem;opacity:1}
}
@media print{
  .wel-strip,.wel-rail,.wel-acts,.wel-head .who,.wel-drop,.wel-photo .x{display:none}
  body{border:0}
}

/* ── Password fields, and the two profile tiers on the join form ──────────────
   A password anywhere in the ecosystem can be read back: a Show/Hide button
   inside the field's right-hand edge. The wrapper is display:block and the
   INPUT's own right padding is what stops the text running under the button.
   See ~/.claude/rules/password-fields-are-readable.md. */
.pw-field{display:block;position:relative}
.pw-field input{width:100%;padding-right:4.6rem}
.pw-eye{position:absolute;top:50%;transform:translateY(-50%);right:.5rem;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bark);padding:.4rem .5rem}
.pw-eye:hover{color:var(--ink)}
.pw-eye[aria-pressed="true"]{color:var(--sage-deep,var(--ink))}

.tiers{display:grid;gap:.7rem;margin-top:.4rem}
@media (min-width:760px){.tiers{grid-template-columns:1fr 1fr}}
.tier{display:block;text-align:left;cursor:pointer;background:none;padding:1rem 1.1rem;
  border:1px solid var(--border);border-radius:2px}
.tier b{display:block;font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--ink);margin-bottom:.35rem}
.tier span{display:block;font-family:var(--serif);font-size:.95rem;line-height:1.5;color:var(--bark);
  text-transform:none;letter-spacing:0}
.tier.on{border-color:var(--sage);box-shadow:inset 0 0 0 1px var(--sage)}
.tier:hover{border-color:var(--bark)}

/* ── Updates on the home page ─────────────────────────────────────────────── */
.upd-grid{display:grid;gap:1.2rem}
@media (min-width:760px){.upd-grid{grid-template-columns:repeat(3,1fr)}}
.upd{border:1px solid var(--border);background:var(--bg-soft);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.upd-h{display:flex;gap:.7rem;align-items:center}
.upd-h img{width:36px;height:36px;object-fit:cover;object-position:50% 25%}
.upd-h b{display:block;font-weight:400;font-size:1.1rem;line-height:1.1}
.upd-h small{font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine)}
.upd-p{aspect-ratio:4/3;overflow:hidden;background:#221a14}
.upd-p img{width:100%;height:100%;object-fit:cover}
.upd p{margin:0;font-size:1rem;line-height:1.5;flex:1}
.upd-f{display:flex;gap:1rem;font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);border-top:1px solid var(--border-light);padding-top:.6rem}
.upd-f a{margin-left:auto;color:var(--gold-fine)}

/* ── The founding intake's private profile preview ───────────────────────── */
.wel-preview{border:1px solid var(--border);background:var(--bg);color:var(--ink);padding:1.6rem 1.8rem 1.8rem;max-width:min(92vw,58rem);width:100%;box-shadow:0 30px 80px rgba(26,20,16,.28)}
.wel-preview::backdrop{background:rgba(26,20,16,.45)}
.wel-preview .x{position:absolute;top:.6rem;right:.8rem;border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--bark)}
.wel-preview .pv{display:grid;gap:1.6rem;margin-top:.8rem}
@media (min-width:760px){.wel-preview .pv{grid-template-columns:18rem 1fr}}
.wel-preview .pv-frame{position:relative;aspect-ratio:4/5;background:var(--sand);overflow:hidden;border:1px solid var(--border)}
.wel-preview .pv-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.wel-preview .pv-frame .none{display:flex;height:100%;align-items:center;justify-content:center;text-align:center;padding:1rem;font-style:italic;color:var(--stone-fine)}
.wel-preview .pv-frame .badge{position:absolute;left:.7rem;bottom:.7rem}
.wel-preview h1{font-size:2.4rem;font-weight:400;margin:.2rem 0 .3rem;line-height:1.05}
.wel-preview .roles{font-style:italic;color:var(--bark);margin:0 0 .6rem}
.wel-preview .intro{margin:0 0 .6rem;line-height:1.55}
.wel-preview .h4{font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone-fine);margin:1.4rem 0 .4rem}
.wel-preview .pv-list{list-style:none;margin:0;padding:0}
.wel-preview .pv-list li{padding:.45rem 0;border-top:1px solid var(--border-light)}
.wel-preview .pv-list small{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);margin-left:.5rem}
.wel-preview .empty{font-style:italic;color:var(--stone-fine);margin:0}

/* join: the ticks that are separate from each other on purpose */
.tick{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:1rem;color:var(--ink)}
.tick input{width:auto;justify-self:start;margin:.3rem 0 0}
.tick .fine{display:block;margin-top:.2rem}

/* updates: comments, the attached thing, and a card you can open */
.upd[data-link]{cursor:pointer}
.upd[data-link]:hover{border-color:var(--bark)}
.attach{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;border:1px solid var(--border);background:var(--bg-soft);padding:.7rem .9rem;margin:1rem 0;color:inherit}
.attach img{width:64px;height:64px;object-fit:cover}
.attach small{font-family:var(--sans);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-fine);display:block}
.attach b{font-weight:400;font-size:1.1rem}
.cmt{display:grid;grid-template-columns:40px 1fr;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--border-light);align-items:start}
.cmt img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 25%;filter:saturate(.9)}
.cmt b{font-weight:400;font-size:1.02rem;display:block}
.cmt b a{color:inherit}
.cmt b small{font-family:var(--sans);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);margin-left:.5rem}
.cmt p{margin:.2rem 0 0;color:var(--bark);font-size:1rem;line-height:1.5}
.upd-full{max-width:64ch}
.upd-full .upd-p{aspect-ratio:3/2;margin:1.2rem 0}
.upd-full .text{font-size:1.25rem;line-height:1.55}
.likes{font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);margin:1rem 0 .4rem}
.vouch small a{color:inherit}
aside ul li{cursor:pointer}
aside ul li.on{color:var(--ink);font-weight:500}
.tile.on{background:var(--ink);color:var(--cream)}
.tile.on span{color:var(--cream)}

/* ── Talk: writing to somebody happens on the page you are on ─────────────
   Shares the peek's frame. The recipient is a row you can click through to,
   the box is the biggest thing, and what happens next is said before Send. */
.talk{width:min(560px,calc(100vw - 2rem))}
.talk-body{padding:1.5rem clamp(1.2rem,4vw,2rem) 1.8rem;display:grid;gap:.9rem}
.talk-body h2{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.08;margin:0;font-weight:400;padding-right:1.5rem}
.talk-to{display:flex;gap:.8rem;align-items:center;padding:.7rem .9rem;border:1px solid var(--border);background:var(--bg-soft);text-decoration:none;color:inherit}
.talk-to img{width:46px;height:46px;object-fit:cover;object-position:50% 25%;filter:saturate(.9);flex:none;border-radius:50%}
.talk-to b{display:block;font-weight:400;font-size:1.15rem;line-height:1.1}
.talk-to small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-fine);margin-top:.2rem}
.talk-to:hover{border-color:var(--ink)}
.talk-body textarea{font-family:var(--serif);font-size:1.08rem;line-height:1.5;padding:.8rem .9rem;border:1px solid var(--border);background:var(--paper);color:var(--ink);border-radius:0;width:100%;resize:vertical;min-height:7rem}
.talk-body textarea:focus{outline:0;border-color:var(--accent)}
.talk-body textarea.miss{border-color:#a23b2c}
.talk-next{font-size:.95rem;color:var(--stone-fine);font-style:italic;margin:0;max-width:none}
.talk-mock{font-size:.9rem;color:var(--bark);margin:0;padding:.7rem .9rem;background:var(--bg-soft);border-left:2px solid var(--sage-deep)}
.talk-sent blockquote{margin:0;padding:.2rem 0 .2rem 1rem;border-left:2px solid var(--border);font-style:italic;color:var(--bark);white-space:pre-wrap}
.talk .peek-acts{margin-top:.3rem}

/* ── Who is behind a thing: a face and a name that go to the profile ─────── */
.byline{display:inline-flex;align-items:center;gap:.6rem;margin-top:.9rem;text-decoration:none;color:var(--bark);font-size:1rem}
.byline img{width:34px;height:34px;object-fit:cover;object-position:50% 25%;border-radius:50%;filter:saturate(.9)}
.byline b{font-weight:400;color:var(--ink);border-bottom:1px solid var(--border)}
.byline:hover b{border-color:var(--ink)}
.keeper a.face{flex:none;line-height:0}
.keeper .see{font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-fine);text-decoration:none;display:inline-block;margin-top:.3rem}
.keeper .see:hover{color:var(--ink)}
.org-by{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border)}
.org-by img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.org-by:hover{border-color:var(--ink)}

/* ── Projects page: a hero, then how it works in three steps ─────────────── */
.pj-hero .split-copy{gap:1.2rem}
.pj-hero h1{font-size:clamp(2.2rem,4vw,3.6rem);max-width:17ch}
.pj-hero .lede{font-size:1.1rem}
.pj-hero .acts{display:flex;gap:.6rem;flex-wrap:wrap}
.pj-hero .pj-count{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:.4rem}
.pj-hero .pj-count b{display:block;font-weight:300;font-style:italic;font-size:2.2rem;line-height:1}
.pj-hero .pj-count span{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-fine)}
.pj-hero .split-frame .credit{position:absolute;left:1rem;bottom:.9rem;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);z-index:2}
.pj-hero .split-frame .credit a{color:inherit}
.steps.three{grid-template-columns:repeat(3,1fr)}
.pj-start{border:1px solid var(--border);background:var(--bg-soft);padding:1.4rem 1.6rem;display:grid;gap:.6rem;max-width:760px}
.pj-start h3{font-size:1.5rem;margin:0}
@media (max-width:760px){.steps.three{grid-template-columns:1fr}.steps.three .step{border-right:0;border-bottom:1px solid var(--border)}.steps.three .step:last-child{border-bottom:0}}

/* The founding call to action on the home page and on Join: the real thing
   among the examples, so it is set apart as a card rather than drawn like the
   forms around it (2026-09-29, folkshare.org going live). */
.start-card{border:1px solid var(--border);background:var(--bg-soft);padding:1.6rem 1.6rem 1.8rem;align-self:start}
.start-card h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.15;margin:.5rem 0 1rem}
.start-card .fine{margin-top:.9rem}

/* Starting a profile on /welcome (2026-09-29). The honeypot is off screen, the
   newsletter tick reads as a sentence rather than a small-caps label, and the
   confirm note on the send step sits apart from the read-back below it. */
.wel-start{margin-top:2rem;max-width:40rem}
.wel-start .pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wel-grid label.wel-tick{display:flex;gap:.7rem;align-items:baseline;font-family:var(--serif);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.wel-grid label.wel-tick input{width:auto;flex:none}
.wel-confirm{display:grid;gap:.5rem;justify-items:start;border:1px solid var(--gold-fine,var(--border));background:var(--bg-soft);padding:1rem 1.2rem;margin:1.2rem 0;font-family:var(--serif);font-size:1rem;color:var(--ink)}
.wel-confirm span{color:var(--bark)}
@media (max-width:640px){.wel-start .wel-grid{grid-template-columns:1fr}}