/* ArboNation site styles. Colour sets: the preview strip at the top switches data-palette on <html>. */
:root,[data-palette="leaf"]{--page:#fff;--ink:#12201a;--muted:#55634f;--line:#dbe5d6;--field:#768672;--tint:#edf5e8;--hero-bg:#edf5e8;--hero-ink:#16300f;--hero-sub:#3d5236;--primary:#2f7a22;--primary-dark:#245c17;--cta-bg:#2f7a22;--cta-hover:#245c17;--cta-ink:#fff;--hero-cta-bg:#2f7a22;--hero-cta-hover:#245c17;--hero-cta-ink:#fff;--deep:#24501c;--deep-rgb:36,80,28;--on-deep-sub:#d3e4cc;--foot:#172414;--slot:#9fb39a;--focus:#12201a}
[data-palette="sage"]{--ink:#1b261f;--muted:#566259;--line:#dde4dd;--field:#75857a;--tint:#eef2ec;--hero-bg:#dfe8dc;--hero-ink:#1f3327;--hero-sub:#435a4a;--primary:#3e6e4c;--primary-dark:#2d543a;--cta-bg:#3e6e4c;--cta-hover:#2d543a;--hero-cta-bg:#3e6e4c;--hero-cta-hover:#2d543a;--deep:#2d543a;--deep-rgb:45,84,58;--on-deep-sub:#d6e2d8;--foot:#1b261f;--slot:#a3b3a6}
[data-palette="pine"]{--muted:#536357;--line:#d9e4db;--field:#73867a;--tint:#eaf2ec;--hero-bg:#245c2a;--hero-ink:#fff;--hero-sub:#d9e8db;--primary:#245c2a;--primary-dark:#1b4720;--cta-bg:#245c2a;--cta-hover:#1b4720;--hero-cta-bg:#fff;--hero-cta-hover:#e3efe4;--hero-cta-ink:#1b4720;--deep:#245c2a;--deep-rgb:36,92,42;--on-deep-sub:#d9e8db;--foot:#15251a;--slot:#9fb5a4}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;font-size:16px;line-height:1.5;font-stretch:100%}
a{color:inherit}
small{font-size:14px}
h1,h2,h3{font-stretch:80%;font-weight:800;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.dark{--focus:#fff}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:8px;top:-60px;z-index:10;background:#fff;color:#12201a;padding:12px 16px;font-weight:700;border:2px solid #12201a}
.skip:focus{top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:6px;min-height:48px;padding:11px 22px;font:inherit;font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-cta{background:var(--cta-bg);color:var(--cta-ink)}
.btn-cta:hover{background:var(--cta-hover)}
.btn-line{background:transparent;color:inherit;border-color:currentColor}
.btn-line:hover{text-decoration:underline;text-underline-offset:4px}
.btn-white{background:#fff;color:#12201a}
.btn-white:hover{background:#e6efe2}
.sent{font-weight:600;font-size:14px}
.sent:not(:empty){margin-top:12px}
input,select{font:inherit;font-size:16px;min-height:48px;padding:11px 12px;border-radius:6px;border:1px solid var(--field);background:#fff;color:#12201a;min-width:0}
.spons-l{font-size:14px;font-weight:700;color:var(--muted)}

/* review strip */
.rv{background:#2a2e2b;color:#e6eae7;font-size:13px}
.rv .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:7px;padding-bottom:7px}
.rv b{color:#fff}
.rv label{display:inline-flex;align-items:center;gap:6px}
.rv select{font-size:13px;min-height:0;padding:3px 6px;border-radius:4px;border:1px solid #8b938d;background:#3a3f3b;color:#fff}
.rv-note{color:#c3cac5}
html:not(.js) .rv label{display:none}

/* header */
.hd{background:#fff;border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:8px 28px;min-height:70px}
.wm{font-size:29px;font-weight:800;font-stretch:78%;text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.wm .a{color:var(--primary)}
.hd-nav{display:flex;gap:24px;margin-left:10px;white-space:nowrap}
.hd-nav a{text-decoration:none;font-weight:600;font-size:15px;padding:12px 0}
.hd-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.hd .btn{margin-left:auto;min-height:44px;padding:9px 18px;font-size:15px}

/* hero */
.hero{background:var(--hero-bg);color:var(--hero-ink);display:grid;grid-template-columns:minmax(0,590px) minmax(0,1fr);column-gap:48px;padding-left:max(24px,calc((100% - 1192px) / 2));min-height:600px}
.hero-text{padding:78px 0 146px}
.hero h1{font-size:62px;text-wrap:wrap}
.hero h1 span{display:block}
.hero-sub{font-size:19px;color:var(--hero-sub);margin:22px 0 30px;max-width:29em}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero .btn-cta{background:var(--hero-cta-bg);color:var(--hero-cta-ink)}
.hero .btn-cta:hover{background:var(--hero-cta-hover)}
.hero-small{margin-top:16px;font-size:14px;color:var(--hero-sub)}
.hero-photo{background:#1f3a1a url('../photos/climber-in-cypress.jpg') 50% 32%/cover no-repeat}
[data-palette="pine"] .hero{--focus:#fff}

/* big area tabs */
.areas{position:relative;z-index:2;margin-top:-86px;scroll-margin-top:12px}
.tiles{display:grid;grid-template-columns:2fr repeat(4,minmax(0,1fr));gap:12px;padding-bottom:14px;border-bottom:5px solid var(--primary)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:196px;padding:18px 18px 20px;border-radius:8px;text-align:left;text-decoration:none;color:#fff;cursor:pointer;overflow:hidden;background-color:#1a2a16;background-size:cover;background-position:50% 40%;background-repeat:no-repeat}
.tile::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,13,.12) 0,rgba(8,20,13,.2) 30%,rgba(8,20,13,.9) 62%)}
.tile.on{box-shadow:0 14px 0 var(--primary);border-radius:8px 8px 0 0}
.tile.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--primary)}
.tile > span{position:relative}
.t-title{font-size:23px;font-weight:800;font-stretch:80%;line-height:1.1}
.tile.big .t-title{font-size:34px}
.t-line{font-size:14px;color:#fff;margin-top:5px}
.tile.big .t-line{font-size:16px}
.tile:focus-visible{outline:3px solid #fff;outline-offset:-7px;box-shadow:inset 0 0 0 4px #12201a}
.tile.on:focus-visible{box-shadow:inset 0 0 0 4px #12201a,0 14px 0 var(--primary)}

/* panels */
.panels{padding-top:38px;padding-bottom:76px}
.panel{scroll-margin-top:12px}
.panel:focus{outline:0}
.panel:focus-visible{outline:3px solid var(--focus);outline-offset:8px}
html:not(.js) .panel{padding:40px 0;border-bottom:1px solid var(--line)}
.pn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px}
.pn-head h2{font-size:46px}
.pn-head p{margin-top:10px;color:var(--muted);font-size:17px;max-width:44em}
.pn-sponsor{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 20px;border:2px dashed var(--slot);border-radius:6px;text-decoration:none;color:var(--muted);text-align:center;white-space:nowrap}
.pn-sponsor small{font-size:14px;font-weight:600}
.pn-sponsor span{font-size:15px;font-weight:700;color:var(--ink)}
.pn-sponsor:hover{border-color:var(--primary)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.chips button{font:inherit;font-size:15px;font-weight:600;min-height:44px;padding:8px 14px;border-radius:4px;border:1px solid var(--field);background:#fff;color:var(--ink);cursor:pointer}
.chips button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.chips button span{font-weight:400}
.count{font-size:14px;color:var(--muted);margin-bottom:12px}
html:not(.js) .chips,html:not(.js) .count,html:not(.js) .filters{display:none}

/* climbers & jobs */
.jb-doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:38px}
.jb-door{padding:28px;border-radius:8px;scroll-margin-top:16px}
.jb-door.hire{background:var(--deep);color:#fff}
.jb-door.work{background:var(--tint)}
.jb-door h3{font-size:31px}
.jb-door p{margin:8px 0 18px;max-width:34em}
.jb-door.hire p{color:var(--on-deep-sub)}
.jb-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jb-form .btn{grid-column:1 / -1}
.jb-door.work .jb-form{grid-template-columns:minmax(0,1fr) auto}
.jb-door.work .jb-form .btn{grid-column:auto}
.jb-door.hire input,.jb-door.hire select{border-color:#fff}
.jb-main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.jb-list{border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;padding:16px 18px;border-bottom:1px solid var(--line)}
.job > .jt{grid-column:1;grid-row:1}
.job > .meta{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px;margin-top:6px}
.job > .apply{grid-column:2;grid-row:1 / span 2;align-self:center;min-height:44px;padding:9px 18px;font-size:15px}
.job h3{font-size:22px}
.job .jco{color:var(--muted);font-size:15px;margin-top:2px}
.job .pay{font-weight:700;font-variant-numeric:tabular-nums}
.job .tag{color:var(--primary-dark);font-weight:600}
.job.feat{background:var(--tint)}
.job.feat .spons-l{margin-bottom:3px}
.jb-foot{font-size:14px;color:var(--muted);margin-top:12px}
.cl{background:var(--tint);border-radius:8px;padding:24px;position:sticky;top:16px}
.cl h3{font-size:26px}
.cl-lead{font-size:14px;color:var(--muted);margin:6px 0 6px}
.cl-row{padding:13px 0;border-bottom:1px solid var(--slot)}
.cl-name{font-weight:700;font-size:17px}
.cl-name span{font-weight:400;color:var(--muted);margin-left:6px;font-size:14px}
.cl-sub{font-size:14px;color:var(--muted)}
.cl-avail{font-size:14px;font-weight:600;color:var(--primary-dark)}
.cl .btn{margin-top:18px;width:100%}

/* sponsorship */
.sp-switch{display:flex;flex-wrap:wrap;gap:10px;margin:-8px 0 30px}
.sp-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:start}
.sp-co{scroll-margin-top:16px}
.sp-co h3,.sp-get h3{font-size:31px}
.sp-lead{color:var(--muted);margin-top:8px}
.sp-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px}
.sp-table th{text-align:left;font-size:14px;color:var(--muted);font-weight:700;padding:0 14px 8px 0;border-bottom:2px solid var(--ink)}
.sp-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.sp-table td:first-child{font-weight:800;font-stretch:90%;font-size:17px;white-space:nowrap}
.sp-table td:last-child,.sp-table th:last-child{padding-right:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.sp-terms{margin-top:14px;font-size:15px;color:var(--muted)}
.sp-get{border-radius:8px;overflow:hidden;background:var(--deep);color:#fff;scroll-margin-top:16px}
.sp-get-ph{height:230px;background:#1a2a16 url('https://images.unsplash.com/photo-1657730391002-bf55ff069a80?auto=format&fit=crop&w=900&q=70') 60% 35%/cover no-repeat}
.sp-get-in{padding:26px 28px 28px}
.sp-get p{margin-top:10px;color:var(--on-deep-sub)}
.sp-sample{margin:16px 0 18px;padding:12px 0 12px 14px;border-left:4px solid #fff}
.sp-sample b{display:block;font-size:17px}
.sp-sample span{display:block;font-size:14px;color:var(--on-deep-sub)}
.sp-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-form input,.sp-form select{border-color:#fff}
.sp-form .btn{grid-column:1 / -1}
.sp-wall{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);scroll-margin-top:16px}
.sp-wall h3,.sp-ask h3{font-size:28px}
.sp-wall-sub{color:var(--muted);margin-top:6px}
.sp-ads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
.sp-ad{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;padding:16px 18px 18px;text-decoration:none}
.sp-ad:hover{border-color:var(--primary)}
.sp-ad .ad-name{font-size:24px;font-weight:800;font-stretch:80%;line-height:1.1;margin-top:10px}
.sp-ad .ad-cat{font-size:14px;font-weight:700;color:var(--primary-dark);margin-top:3px}
.sp-ad .ad-line{font-size:15px;color:var(--muted);margin-top:8px}
.sp-ad .ad-go{font-size:14px;font-weight:700;margin-top:auto;padding-top:12px;text-decoration:underline;text-underline-offset:3px}
.sp-mark{margin-top:14px;font-size:14px;color:var(--muted)}
.sp-ask{margin-top:40px;padding:26px 28px 28px;background:var(--tint);border-radius:8px;scroll-margin-top:16px}
.sp-ask p{margin:6px 0 16px;color:var(--muted)}
.sp-askform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px}

/* community */
.cm-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:40px;align-items:start}
.cm-post{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;align-items:center;margin-bottom:26px;background:var(--tint);border-radius:8px;overflow:hidden}
.cm-post-ph{align-self:stretch;min-height:200px;background:#dfe6e1 url('https://images.unsplash.com/photo-1709560723503-538158e48db8?auto=format&fit=crop&w=800&q=70') 62% 40%/cover no-repeat}
.cm-post-tx{padding:18px 20px 18px 0}
.cm-post h3{font-size:24px;margin:4px 0 6px}
.cm-post p{font-size:15px}
.cm-by{font-size:14px;color:var(--muted)}
.cm-list{border-top:1px solid var(--line);margin-bottom:22px}
.cm-thread{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;padding:15px 0;border-bottom:1px solid var(--line)}
.cm-thread h3{font-size:20px;font-stretch:88%;margin:3px 0}
.cm-grp{font-size:14px;color:var(--primary-dark);font-weight:600}
.cm-n{font-size:14px;color:var(--muted);text-align:right;white-space:nowrap}
.cm-side > div{padding:18px 0;border-bottom:1px solid var(--line)}
.cm-side > div:first-child{padding-top:0}
.cm-side h3{font-size:22px;margin-bottom:8px}
.cm-groups{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600}
.cm-alert{border-left:4px solid var(--ink);background:var(--tint);padding:14px 16px!important;border-bottom:0!important;margin:18px 0 0}
.cm-alert b{display:block;margin-bottom:4px}
.cm-ev{padding:4px 0}
.cm-ev b{display:inline-block;min-width:58px;font-variant-numeric:tabular-nums}

/* buy & sell */
.bs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}
.item h3{font-size:19px;font-stretch:88%;margin-top:12px}
.item .ph{aspect-ratio:4/3;border-radius:6px;background-color:#dfe6e1;background-size:cover;background-position:50% 50%}
.item .price{font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px}
.item .where{font-size:14px;color:var(--muted)}
.item .kind{font-size:14px;font-weight:700;color:var(--primary-dark);margin-top:2px}
.item.yours{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:22px;border:2px dashed var(--slot);border-radius:6px}
.item.yours h3{margin:0;font-size:24px;font-stretch:80%}
.item.yours p{font-size:15px;color:var(--muted)}
.bs-note{margin-top:30px;padding:14px 16px;border-left:4px solid var(--ink);background:var(--tint)}

/* learn */
.ln-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
.ln-feat-ph{aspect-ratio:16/10;border-radius:8px;background:#dfe6e1 url('https://images.unsplash.com/photo-1644308852777-c129f2182388?auto=format&fit=crop&w=2400&q=70') 70% 62%/230% no-repeat}
.ln-feat h3{font-size:30px;margin:6px 0 8px}
.ln-feat p{color:var(--muted)}
.ln-topic{font-size:14px;font-weight:700;color:var(--primary-dark);margin-top:16px}
.ln-list{border-top:4px solid var(--primary)}
.ln-item{padding:16px 0 18px;border-bottom:1px solid var(--line)}
.ln-item .ln-topic{margin-top:0;margin-bottom:4px}
.ln-item h3{font-size:22px;font-stretch:86%}
.ln-foot{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.ln-foot p{color:var(--muted)}

/* why it's free */
.why{border-top:1px solid var(--line);padding:64px 0}
.why h2{font-size:46px;max-width:16em}
.why-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:28px}
.why-cols b{display:block;font-size:19px;margin-bottom:6px}
.why-cols p{color:var(--muted)}

/* companies band */
.coband{background:var(--tint);padding:64px 0}
.coband .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.coband h2{font-size:40px;max-width:15em}
.coband p{max-width:36em;font-size:18px;color:var(--muted);margin-top:12px}

/* join */
.jn{position:relative;color:#fff;background:#1b2a21 url('https://images.unsplash.com/photo-1658615324653-00fbdaee8a3f?auto=format&fit=crop&w=1200&q=55') 50% 50%/cover no-repeat;padding:100px 0;text-align:center}
.jn::before{content:'';position:absolute;inset:0;background:rgba(14,30,12,.78)}
.jn .wrap{position:relative;max-width:780px}
.jn h2{font-size:54px}
.jn p{font-size:18px;margin-top:12px}
.jn form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.jn input,.jn select{flex:1 1 220px;max-width:300px;border-color:#fff}

/* footer */
.ft{background:var(--foot);color:#e4ece1;padding:42px 0 46px}
.ft-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px}
.ft .wm,.ft .wm .a{color:#fff}
.ft-nav{display:flex;flex-wrap:wrap;gap:0 24px}
.ft-nav a{text-decoration:none;font-weight:600;font-size:15px;padding:12px 0}
.ft-nav a:hover{text-decoration:underline}
.ft-note{margin-top:18px;font-size:14px;color:#b9c7b5;max-width:60em}

@media (max-width:1100px){
  .hd .wrap{flex-wrap:wrap}
  .hd-nav{order:3;flex:0 0 calc(100% + 48px);margin:0 -24px;padding:0 24px;gap:22px;overflow-x:auto;border-top:1px solid var(--line);scrollbar-width:none}
  .hd-nav::-webkit-scrollbar{display:none}
  .hd .wrap{min-height:64px;padding-top:10px}
  .hero h1{font-size:54px}
  .sp-askform{grid-template-columns:1fr 1fr}
  .sp-askform .btn{grid-column:1 / -1}
}
@media (max-width:980px){
  .hero{display:flex;flex-direction:column;padding-left:0;min-height:0}
  .hero-photo{order:-1;height:360px;background-position:50% 30%}
  .hero-text{padding:30px 24px 40px}
  .hero h1{font-size:46px}
  .areas{margin-top:0;padding-top:20px}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:0;border-bottom:0}
  .tile.big{grid-column:1 / -1;min-height:200px}
  .tile{min-height:160px}
  .tile.on{box-shadow:none;border-radius:8px;outline:5px solid var(--primary);outline-offset:-5px}
  .tile.on::after{height:0}
  .tile.on:focus-visible{outline:3px solid #fff;outline-offset:-7px;box-shadow:inset 0 0 0 4px #12201a}
  .panels{padding-top:30px;border-top:5px solid var(--primary);margin-top:20px}
  .pn-head{flex-direction:column;align-items:flex-start;gap:16px}
  .pn-head h2{font-size:38px}
  .jb-doors,.jb-main,.sp-grid,.cm-grid,.ln-grid{grid-template-columns:minmax(0,1fr)}
  .cl{position:static}
  .sp-ads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .why-cols{grid-template-columns:minmax(0,1fr);gap:20px}
  .why h2{font-size:38px}
  .coband h2{font-size:34px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .rv .wrap{gap:4px 14px}
  .rv-note{display:none}
  .hd-nav{flex-basis:calc(100% + 32px);margin:0 -16px;padding:0 16px}
  .wm{font-size:26px}
  .hero-photo{height:300px}
  .hero-text{padding:26px 16px 34px}
  .hero h1{font-size:38px}
  .hero-sub{font-size:17px;margin:16px 0 24px}
  .hero-btns .btn{flex:1 1 100%}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{min-height:132px;padding:14px}
  .tile.big{min-height:170px}
  .tile.big .t-title{font-size:28px}
  .t-title{font-size:20px}
  .panels{padding-top:26px;padding-bottom:56px;border-top:0;margin-top:0}
  .panels.wrap{padding-left:16px;padding-right:16px}
  .panel{border-top:5px solid var(--primary);padding-top:24px;margin-top:20px}
  .pn-head h2{font-size:34px}
  .pn-head p{font-size:16px}
  .jb-door{padding:22px 18px}
  .jb-door h3,.sp-co h3,.sp-get h3{font-size:27px}
  .jb-form,.jb-door.work .jb-form,.sp-form,.sp-askform{grid-template-columns:minmax(0,1fr)}
  .jb-door.work .jb-form .btn{grid-column:1 / -1}
  .job{grid-template-columns:minmax(0,1fr);padding:16px 14px}
  .job > .apply{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}
  .cl{padding:20px 16px}
  .sp-switch .btn{flex:1 1 100%;white-space:normal;text-align:center}
  .sp-table thead{display:none}
  .sp-table,.sp-table tbody,.sp-table tr,.sp-table td{display:block}
  .sp-table tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .sp-table td{padding:0;border:0}
  .sp-table td:first-child{white-space:normal}
  .sp-table td[data-l]::before{content:attr(data-l) ': ';font-weight:700;color:var(--muted);font-size:14px}
  .sp-get-in{padding:22px 18px 24px}
  .sp-ads{grid-template-columns:minmax(0,1fr)}
  .sp-ask{padding:22px 18px 24px}
  .cm-post{grid-template-columns:minmax(0,1fr);gap:0}
  .cm-post-tx{padding:16px 18px 18px}
  .cm-thread{grid-template-columns:minmax(0,1fr)}
  .cm-n{text-align:left}
  .bs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .item h3{font-size:17px}
  .item.yours{padding:16px}
  .ln-feat h3{font-size:26px}
  .why{padding:48px 0}
  .why h2{font-size:34px}
  .coband{padding:48px 0}
  .coband h2{font-size:30px}
  .coband .btn{width:100%}
  .jn{padding:76px 0}
  .jn h2{font-size:40px}
  .jn input,.jn select{max-width:none;flex-basis:100%}
  .jn .btn{flex:1 1 100%}
}
/* Later fixes to the home page */
.sp-how{margin:18px 0 0;padding:0;list-style:none;counter-reset:how;display:grid;gap:8px;font-size:15px}
.sp-how li{counter-increment:how;display:grid;grid-template-columns:26px minmax(0,1fr)}
.sp-how li::before{content:counter(how);font-weight:800;color:var(--primary-dark)}
.pn-sponsor,.item.yours{border-color:var(--field)}
.item.yours .btn{white-space:normal;max-width:100%}
.sp-form .wide{grid-column:1/-1}
@media (max-width:980px){
  .tile::before{background:linear-gradient(180deg,rgba(8,20,13,.3) 0,rgba(8,20,13,.72) 30%,rgba(8,20,13,.93) 55%)}
  .tile.on::after{height:10px}
}
@media (max-width:640px){
  /* phones: the photo shows in the top half, the scrim builds under the text only (photos-10) */
  .tile::before{background:linear-gradient(180deg,rgba(8,20,13,0) 0,rgba(8,20,13,.04) 22%,rgba(8,20,13,.76) 40%,rgba(8,20,13,.82) 100%)}
  .tile{min-height:150px}
  .tile.big{min-height:190px}
  .hero-photo{height:230px}
  .wm{display:inline-flex;align-items:center;min-height:44px}
  .hd-nav a{padding:14px 0}
  .item.yours{padding:18px;grid-column:1/-1}
}
@media print{
  .rv,.skip,.hd-nav,.tiles,.hd .btn{display:none!important}
  /* every photo box goes, not just its picture: an empty box is a blank band */
  .pg-top-ph,.ph-band,.ph-sq,.sp-get-ph,.cm-post-ph,.ln-feat-ph{display:none!important}
  .hero{min-height:0!important;display:block!important;padding-left:0!important}
  .hero-text{padding-left:24px!important;padding-right:24px!important}
  .pg-top .wrap{grid-template-columns:minmax(0,1fr)!important}
  .cm-post,.ln-feat2{grid-template-columns:minmax(0,1fr)!important}
  .panel,.panel[hidden]{display:block!important;border-top:2px solid #111;padding-top:14px;margin-top:22px;break-inside:auto}
  .hero-photo{display:none!important}
  *,*::before,*::after{color:#111!important;background:none!important;box-shadow:none!important;text-shadow:none!important}
  .btn,input,select,textarea{border:1px solid #111!important}
  .ph{display:none!important}
  a{text-decoration:underline}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- inner pages (everything except the home page) ---------- */
.hd-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px;text-decoration-color:var(--primary)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pn-more{margin-top:12px;font-weight:700;font-size:16px}
.pn-more a{text-underline-offset:4px}
/* groups list with a line of description (community.html) */
.cmx-groups{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.cmx-groups li{border-bottom:1px solid var(--line);padding-bottom:12px}
.cmx-groups p{font-size:16px;color:var(--muted);margin-top:2px}
.cmx-groups h3{margin:0}
/* sample sponsorship asks on a light page (get-sponsored.html) */
.gs-ex{margin:0;padding:4px 0 4px 16px;border-left:4px solid var(--primary)}
.gs-ex b{display:block;font-size:17px}
.gs-ex span{display:block;font-size:15px;color:var(--muted)}
.gs-list{display:grid;gap:22px}
.stack > .bs-note{margin-top:0}
@media (max-width:640px){.stack > .sec:first-child{margin-top:0}}
.pg > .stack > .sec:first-child,.pg > .cols > .stack > .sec:first-child{margin-top:0}
.item h3 a{text-decoration:none}
.item h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
/* area sub-navigation, stamped under the header by kit/chrome.py */
.subnav{background:var(--deep);color:#fff}
.subnav .wrap{display:flex;gap:28px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{text-decoration:none;font-weight:600;font-size:15px;padding:13px 0 10px;border-bottom:3px solid transparent}
.subnav a:hover{text-decoration:underline;text-underline-offset:5px}
.subnav a[aria-current="page"]{border-bottom-color:#fff;font-weight:700}
/* page head: a tinted band with the page title and, on list pages, a tree-work photo at the right */
.pg-top{background:var(--tint)}
.pg-top .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:44px;align-items:center;padding-top:40px;padding-bottom:40px}
.pg-top.plain .wrap{grid-template-columns:minmax(0,1fr)}
.pg-top h1{font-size:50px}
.pg-top .lead{margin-top:12px;font-size:18px;color:var(--muted);max-width:38em}
.pg-top .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.pg-top .spons-l{margin-bottom:6px}
.pg-top-ph{height:250px;border-radius:8px;background-color:#1a2a16;background-size:cover;background-position:50% 40%}
.facts-row{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:14px;font-size:17px}
.facts-row .pay{font-weight:700;font-variant-numeric:tabular-nums}
.facts-row .tag{color:var(--primary-dark);font-weight:600}
.job h3 a{text-decoration:none}
.job h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.cl-name a{text-underline-offset:3px}
.pg{padding-top:34px;padding-bottom:76px}
.crumb{font-size:14px;color:var(--muted);margin-bottom:16px}
.crumb a{text-underline-offset:3px}
.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:30px}
.pg-head h1{font-size:46px}
.pg-head p{margin-top:10px;color:var(--muted);font-size:17px;max-width:44em}
.pg h2{font-size:31px}
.pg h3{font-size:22px}
.sec{margin-top:48px}
.sec > h2{margin-bottom:8px}
.sec > .lead{color:var(--muted);font-size:17px;max-width:44em;margin-bottom:20px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.cols.even{grid-template-columns:1fr 1fr}
.card{border:1px solid var(--line);border-radius:8px;padding:24px}
.card.tint{background:var(--tint);border-color:transparent}
.card.deep{background:var(--deep);color:#fff;border-color:transparent;--focus:#fff}
.card.deep p{color:var(--on-deep-sub)}
.card > h2,.card > h3{margin-bottom:8px}
.card > p + p{margin-top:10px}
.stack{display:grid;gap:16px}
.prose{max-width:44em;font-size:17px}
.prose p + p,.prose p + ul,.prose ul + p,.prose h3 + p,.prose h2 + p,.prose h3 + ul,.prose h2 + ul{margin-top:12px}
.prose h2:not(:first-child){margin-top:36px}
.prose h3{margin-top:28px}
.prose ul{margin:0;padding-left:20px}
.prose li + li{margin-top:6px}
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0;font-size:15px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:15px}
.tags .tag{color:var(--primary-dark);font-weight:700}
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:grid;gap:6px;font-weight:600;font-size:15px}
.fld small{font-weight:400;color:var(--muted);font-size:14px}
.fld input,.fld select,.fld textarea{width:100%}
textarea{font:inherit;font-size:16px;min-height:120px;padding:11px 12px;border-radius:6px;border:1px solid var(--field);background:#fff;color:#12201a;min-width:0;resize:vertical}
.checks{display:grid;gap:8px;border:0;padding:0;margin:0}
.checks legend{font-weight:600;font-size:15px;padding:0;margin-bottom:8px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-weight:400;min-height:32px}
.checks input{min-height:0;width:20px;height:20px;margin:2px 0 0;padding:0;flex:0 0 auto;accent-color:var(--primary)}
.form-note{font-size:14px;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin-bottom:8px}
.filters .chips{margin-bottom:0}
.filters .fld{min-width:190px}
.empty{padding:28px;border:1px dashed var(--slot);border-radius:8px;color:var(--muted);text-align:center}
.steps{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:12px}
.steps li{counter-increment:st;display:grid;grid-template-columns:34px minmax(0,1fr);font-size:16px}
.steps li::before{content:counter(st);font-weight:800;font-size:20px;font-stretch:80%;color:var(--primary-dark)}
.steps b{display:block}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-size:14px;color:var(--muted);font-weight:700;padding:8px 10px 8px 0;border-bottom:2px solid var(--ink)}
.tbl td{padding:13px 10px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td:first-child{font-weight:700}
.tbl-wrap{overflow-x:auto}
.ph-band{min-height:300px;border-radius:8px;background-color:#1a2a16;background-size:cover;background-position:50% 40%}
.ph-sq{aspect-ratio:4/3;border-radius:6px;background-color:#1a2a16;background-size:cover;background-position:50% 50%}
@media (max-width:980px){
  .pg-top .wrap{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:28px;padding-bottom:30px}
  .pg-top-ph{height:210px;order:-1}
  .cols,.cols.even{grid-template-columns:1fr}
  .pg-head{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:640px){
  .pg-top h1{font-size:36px}
  .pg-top-ph{height:170px}
  .subnav .wrap{gap:22px}
  .subnav a{padding:14px 0 11px}
  .pg{padding-top:22px;padding-bottom:52px}
  .pg-head h1{font-size:34px}
  .pg h2{font-size:26px}
  .form .row{grid-template-columns:1fr}
  .filters .fld{min-width:0;flex:1 1 100%}
  .card{padding:18px}
  .facts{grid-template-columns:1fr;gap:2px 0}
  .facts dd{margin-bottom:10px}
  .ph-band{min-height:200px}
}
@media print{
  .subnav{display:none}
  .pg .btn{border:1px solid #111!important}
}

/* Home page forms: a visible label above every field */
.hf{display:grid;gap:5px;font-size:14px;font-weight:600;text-align:left;min-width:0}
.hf input,.hf select{width:100%}
.hf.wide{grid-column:1 / -1}
.jb-door.work .jb-form,.sp-askform{align-items:end}
.jn form{align-items:flex-end}
.jn .hf{flex:1 1 220px;max-width:300px}
.jn .hf input,.jn .hf select{max-width:none}

/* Adverts: one ruled row per advertiser, drawn like the job list, not a row of boxes */
.sp-ads{display:block;margin-top:18px;border-top:2px solid var(--ink)}
.sp-ad{display:grid;grid-template-columns:96px minmax(0,1.1fr) minmax(0,2fr) auto;column-gap:24px;align-items:baseline;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 4px}
.sp-ad:hover{background:var(--tint)}
.sp-ad .spons-l{grid-column:1;grid-row:1}
.sp-ad .ad-name{grid-column:2;grid-row:1;margin-top:0;font-size:22px}
.sp-ad .ad-cat{grid-column:2;grid-row:2;margin-top:2px}
.sp-ad .ad-line{grid-column:3;grid-row:1 / span 2;margin-top:0;align-self:center}
.sp-ad .ad-go{grid-column:4;grid-row:1 / span 2;margin-top:0;padding-top:0;align-self:center}

/* Tap targets: links in lists and navigation are at least 44px in the direction that matters */
.hd-nav a,.ft-nav a{min-width:44px}
/* Standalone links (alone on their line: breadcrumb, "See all" links, titles in rows, side-box links) are 44px or more tall.
   Padding gives the height, the equal negative margin gives it back, so nothing moves. In-sentence links are left alone. */
.crumb a,.pn-more a,.job h3 a,.cl-name a,.cm-thread h3 a,.ln-item h3 a,.item h3 a,aside p > a:only-child:not(.btn),.plainlist li > a:first-child{display:inline-block;padding:14px 0;margin:-14px 0}
.checks label{min-height:44px;align-items:center}
.checks input{margin:0}

@media (max-width:640px){
  /* five areas do not fit on one line of a phone: wrap them, never hide one off-screen */
  .hd-nav{flex-wrap:wrap;overflow:visible;white-space:normal;gap:0 20px}
  .subnav .wrap{flex-wrap:wrap;overflow:visible;white-space:normal;gap:0 22px}
  .jn .hf{max-width:none;flex-basis:100%}
  .sp-ad{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:14px 2px}
  .sp-ad .spons-l,.sp-ad .ad-name,.sp-ad .ad-cat,.sp-ad .ad-line,.sp-ad .ad-go{grid-column:1;grid-row:auto}
  .sp-ad .ad-line{margin-top:6px}
  .sp-ad .ad-go{margin-top:8px;min-height:24px}
  /* the link rows under a home panel and in side boxes: one 44px row per link, the dot between them is not drawn */
  .pn-head .pn-more,.pn-more{display:flex;flex-direction:column;align-items:flex-start;font-size:0;color:transparent;max-width:none;margin-top:4px}
  .pn-head .pn-more a,.pn-more a{font-size:16px;color:var(--ink);padding:0;margin:0;min-height:44px;display:inline-flex;align-items:center}
  /* header: links are exactly 44px, no extra air */
  .hd-nav a{padding:11px 0}
  .subnav a{padding:11px 0 8px}
}

/* Buy and sell: the whole tile is clickable; the title link stretches over the tile */
article.item{position:relative}
article.item h3 a::after{content:"";position:absolute;inset:0}
/* buy-sell.html: the "Got gear sitting in the shop?" tile as one full-width strip under the grid */
.item.yours.wide{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:26px}
.item.yours.wide h3{font-size:24px}
/* community.html and learn.html: all titles look the same at rest; the one linked title underlines on hover and focus */
.cm-thread h3 a,.ln-item h3 a{color:inherit;text-decoration:none}
.cm-thread h3 a:hover,.cm-thread h3 a:focus-visible,.ln-item h3 a:hover,.ln-item h3 a:focus-visible{text-decoration:underline;text-underline-offset:3px}
/* plain "Open" marker at the right of the one row that opens */
.row-open{display:block;font-size:14px;font-weight:700;color:var(--primary-dark)}
.ln-item-open{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center}
/* learn.html: featured guide in two columns, photo left, text right */
.ln-feat2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.ln-feat2 .ln-feat-ph{aspect-ratio:4/3}
.ln-feat2 .ln-topic{margin-top:0}
.ln-feat2 h3{font-size:30px;margin:6px 0 8px}
.ln-feat2 p{color:var(--muted)}
/* learn.html: full-width email sign-up strip under the guide list */
.ln-signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 40px;align-items:center;margin-top:40px;padding:24px;background:var(--tint);border-radius:8px}
.ln-signup h2{font-size:26px;margin-bottom:6px}
.ln-signup .form{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.ln-signup .fld{flex:1 1 220px}
@media (max-width:760px){
  .ln-feat2,.ln-signup{grid-template-columns:minmax(0,1fr)}
  .ln-feat2 h3{font-size:26px}
  .ln-item-open{grid-template-columns:minmax(0,1fr)}
}

/* Photos the page gives as --bg, with --bg-s as a smaller copy for phones. A photo marked .lz stays blank until site.js sees it come near the screen. */
.ph,.ph-band,.pg-top-ph,.tile{background-image:var(--bg)}
@media (max-width:480px){
  .ph,.ph-band,.pg-top-ph,.tile{background-image:var(--bg-s,var(--bg))}
  .hero-photo{background-image:url('../photos/climber-in-cypress-800.jpg')}
}
.js .lz{background-image:none}