/* Wapishi content pages. Same tokens, type and components as info.wapishi.online
   (see suppliers.html): hairlines, two-tone display headings, numbered rows, photography.
   No cards, no pills, no shadows. Change the look here, never in built pages. */
@font-face{font-family:'Bricolage Grotesque';font-weight:600;font-style:normal;font-display:swap;src:url('/assets/284891c74c258cff7233962e048d9470bfb9fc326b53dd0bca408789297c3409.ttf') format('truetype')}
@font-face{font-family:'Source Sans 3';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/b6f2cc8d9905e97b5cd7a294367bb529814385f299fb23057060394cbd6bbffb.ttf') format('truetype')}
@font-face{font-family:'Source Sans 3';font-weight:600;font-style:normal;font-display:swap;src:url('/assets/26efb7fbad9540df2595fe867a37e454d22973b9e37816d263fdc5295cb084bb.ttf') format('truetype')}
@font-face{font-family:'Nothing You Could Do';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/NothingYouCouldDo.ttf') format('truetype')}
:root{--paper:#f5f0e6;--ink:#173e32;--muted:#526458;--orange:#c53c22;--lime:#cfdb83;--line:#ccd0be;--field:#fffaf1;--display:'Bricolage Grotesque',sans-serif;--body:'Source Sans 3',sans-serif;--hand:'Nothing You Could Do',cursive;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible,input:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.055em;line-height:1.02;text-wrap:balance}
h1 span,h2 span{color:var(--orange)}
img{max-width:100%;display:block}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:clamp(22px,5vw,80px)}
.skip{position:fixed;top:10px;left:10px;background:var(--ink);color:#fff;padding:15px;transform:translateY(-200%);z-index:100}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header, as on the info site */
.header{max-width:1440px;margin:auto;height:105px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(22px,5vw,80px);border-bottom:1px solid var(--line)}
.brand img{width:145px;height:auto;object-fit:contain}
.desktop-nav{display:flex;gap:34px;font-size:16px;font-weight:600}
.desktop-nav a{padding:12px 0}
.desktop-nav a:hover,.desktop-nav a[aria-current]{color:var(--orange)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:30px;background:var(--orange);color:#fff;padding:17px 24px;border-radius:6px;font-weight:600;min-height:54px;transition:background .2s,transform .2s}
.button:hover{background:#a82e19;transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.button.small{font-size:16px;padding:12px 19px;min-height:48px}
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;line-height:1.4}
.text-link{display:inline-flex;align-items:center;gap:14px;border-bottom:1px solid currentColor;padding:10px 0;min-height:44px;font-weight:600;font-size:16px}
.text-link:hover{color:var(--orange)}

/* section bar under the header: back link left, siblings right */
.subnav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px;font-size:14px;border-bottom:1px solid var(--line);background:var(--paper)}
.subnav.sticky{position:sticky;top:0;z-index:20}
.subnav>div{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav>div::-webkit-scrollbar{display:none}
.subnav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.subnav a:hover{color:var(--orange)}
.subnav [aria-current]{color:var(--orange);border-bottom:1px solid currentColor}

/* hero: copy left, picture right */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding-top:48px;padding-bottom:68px;align-items:center}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(55px,5.3vw,82px);margin:26px 0}
.hero .intro{font-size:21px;line-height:1.5;max-width:36ch;color:var(--muted)}
.hero-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:32px}
.hero-foot{font-size:13px;color:var(--muted);margin-top:29px;max-width:44ch}
.hero-photo{min-width:0;margin:0}
.hero-photo img{width:100%;height:clamp(470px,44vw,650px);object-fit:cover;background:#e1dfd2}
.hero-photo figcaption,.shelf-caption{display:flex;justify-content:space-between;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}

/* the price shelf: six items on a ruled grid, like tags on a market stall */
.shelf{min-width:0;margin:0}
.shelf ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.shelf li{position:relative;padding:22px 18px 20px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.shelf li:nth-child(3n+1){border-left:0;padding-left:0}
.shelf img{width:100%;height:clamp(110px,11.5vw,170px);object-fit:contain;filter:drop-shadow(0 17px 10px #173e321c);transition:transform .6s var(--ease)}
.shelf li:hover img{transform:translateY(-6px) rotate(-3deg)}
.shelf b{display:block;font:600 22px/1.1 var(--display);letter-spacing:-.035em;margin-top:16px}
.shelf small{display:block;font-size:14px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.shelf small strong{color:var(--ink);font-weight:600}
.hand{font:400 19px/1.2 var(--hand);color:var(--orange);transform:rotate(-4deg);display:inline-block}

/* find box */
.find{margin-top:34px;max-width:420px}
.find label{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.find input{width:100%;min-height:54px;background:var(--field);border:1px solid #a7b19f;border-radius:4px;padding:12px 14px;color:var(--ink);font:400 17px/1.5 var(--body)}
.find input::placeholder{color:#67765e}
.find-status{font-size:15px;margin-top:10px;color:var(--muted)}
.find-status a{color:var(--ink);font-weight:600;border-bottom:1px solid currentColor;margin-left:8px}

/* two-column section: statement left, ruled rows right */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:10%;padding-top:72px;padding-bottom:80px;border-top:1px solid var(--line)}
.split h2{font-size:clamp(39px,4vw,58px);margin:20px 0 24px}
.split>div>p:not(.eyebrow){max-width:34ch;font-size:19px;color:var(--muted)}
.split>div>.text-link,.split>div>.button{margin-top:26px}
.split .aside{position:sticky;top:96px;align-self:start}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:30px 1fr;gap:25px;border-top:1px solid var(--line);padding:26px 0 30px}
.rows li:first-child{border-top:0;padding-top:0}
.rows li>span{color:var(--orange);font-size:12px;padding-top:6px;font-variant-numeric:tabular-nums}
.rows h3{font-size:28px;letter-spacing:-.035em;line-height:1.15;margin-bottom:12px}
.rows p{font-size:17px;line-height:1.55;color:var(--muted);max-width:46ch}
.rows a{border-bottom:1px solid var(--line)}
.rows a:hover{color:var(--orange)}

/* price rows */
.prices{width:100%;border-collapse:collapse}
.prices tr{border-top:1px solid var(--line)}
.prices tbody tr:first-child{border-top:0}
.prices th{text-align:left;font:600 25px/1.15 var(--display);letter-spacing:-.035em;padding:19px 16px 19px 0;vertical-align:baseline}
.prices tbody tr:first-child th,.prices tbody tr:first-child td{padding-top:0}
.prices th small{display:block;font:400 15px/1.4 var(--body);letter-spacing:0;color:var(--muted);margin-top:5px}
.prices td{padding:19px 0;vertical-align:baseline;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.prices .p{font:600 27px/1 var(--display);letter-spacing:-.04em;padding-left:18px}
.prices .p i{font:400 13px var(--body);letter-spacing:.04em;color:var(--muted);font-style:normal;margin-right:7px}
.prices .chg{font-size:14px;color:var(--muted);width:1%;padding-right:6px}
.prices .chg.up{color:var(--orange);font-weight:600}
.prices .chg.down{color:#1f6a45;font-weight:600}
.prices tr:hover th{color:var(--orange)}
.prices tr[hidden]{display:none}
.count{font-size:14px;color:var(--muted);margin-top:-8px}
.nomatch{padding:60px 0 80px;border-top:1px solid var(--line);font-size:19px;color:var(--muted)}
.brief{padding-top:54px;padding-bottom:60px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.1fr;gap:10%}
.brief div{font-size:21px;line-height:1.5;max-width:46ch}
.brief div p+p{margin-top:14px}

/* product page */
.product{align-items:start}
.product h1 span{white-space:nowrap}
.spec-col{min-width:0}
.stage{position:relative;isolation:isolate;height:clamp(230px,24vw,330px);margin-bottom:26px}
.stage::before{content:'';position:absolute;inset:6% 8% 2% 10%;background:#dce3bb;border-radius:48% 48% 46% 46%;transform:rotate(-12deg);z-index:-1}
.stage img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 14px #173e3222)}
.spec{margin:0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.spec dt{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);padding-top:3px}
.spec dd{margin:0;font-weight:600}
.prices th a:hover{color:var(--orange)}
.lost{font-size:clamp(46px,4.8vw,74px);margin:24px 0}
.hero-copy .find{margin-top:30px}

/* questions */
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:24px 0;font:600 25px/1.2 var(--display);letter-spacing:-.035em}
.faq details:first-child summary{padding-top:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:400 26px/1 var(--body);color:var(--orange);flex:none;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--orange)}
.faq details p{font-size:17px;line-height:1.6;color:var(--muted);max-width:52ch;padding-bottom:26px}
.faq details a{border-bottom:1px solid currentColor}

/* contact block, as "Good connections start here" */
.talk{display:grid;grid-template-columns:.85fr 1.15fr;gap:10%;padding-top:80px;padding-bottom:90px;border-top:1px solid var(--line)}
.talk h2{font-size:clamp(40px,4vw,58px);margin:21px 0 25px}
.talk>div>p:not(.eyebrow){font-size:18px;line-height:1.6;color:var(--muted);max-width:32ch}
.talk .help{font-size:15px;margin-top:35px;color:var(--ink)}
.talk .help a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--line)}
.talk .help a:hover{color:var(--orange)}
.talk .button{margin-top:30px}
.links a{border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:25px 0;font:600 25px/1.2 var(--display);letter-spacing:-.035em}
.links a:first-child{padding-top:0}
.links a:hover{color:var(--orange)}
.links small{display:block;font:400 15px/1.4 var(--body);letter-spacing:0;color:var(--muted);margin-top:6px}
.links span{color:var(--orange);font:400 22px var(--body)}
.next{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:26px;padding-bottom:30px;border-top:1px solid var(--line);font-size:17px;color:var(--muted)}

/* guide article */
.article-head{padding-top:54px;padding-bottom:56px;display:grid;grid-template-columns:1.25fr .75fr;gap:8%;align-items:end}
.article-head h1{font-size:clamp(44px,4.6vw,72px);margin:24px 0 0}
.article-head .answer{font-size:21px;line-height:1.5;color:var(--muted);max-width:40ch}
.article-meta{font-size:13px;color:var(--muted);margin-top:22px}
.article{display:grid;grid-template-columns:.75fr 1.25fr;gap:10%;padding-top:64px;padding-bottom:84px;border-top:1px solid var(--line)}
.toc{position:sticky;top:96px;align-self:start}
.toc summary{list-style:none;cursor:default}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:18px 0 0;padding:0;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:13px 0;font-size:16px;font-weight:600}
.toc a::before{content:counter(t,decimal-leading-zero);color:var(--orange);font-size:12px;font-weight:400;padding-top:3px}
.toc a:hover{color:var(--orange)}
.prose{min-width:0;max-width:66ch;font-size:19px;line-height:1.65}
.prose h2{font-size:clamp(30px,2.9vw,42px);letter-spacing:-.045em;line-height:1.08;margin:58px 0 20px;scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:25px;letter-spacing:-.035em;line-height:1.15;margin:34px 0 10px}
.prose p{margin:0 0 20px}
.prose a{border-bottom:1px solid currentColor}
.prose a:hover{color:var(--orange)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose .scroll{overflow-x:auto;margin:6px 0 30px;border-top:1px solid var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.4}
.prose thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.prose tbody th{font:600 20px/1.2 var(--display);letter-spacing:-.03em;text-align:left;padding:14px 16px 14px 0;vertical-align:baseline;white-space:nowrap}
.prose tbody td{padding:14px 16px 14px 0;vertical-align:baseline;color:var(--muted)}
.prose tbody tr{border-bottom:1px solid var(--line)}
.prose .note{border-left:2px solid var(--orange);padding:2px 0 2px 20px;color:var(--muted);font-size:17px;margin:0 0 26px}

/* guides index */
.index-head h1{font-size:clamp(46px,4.8vw,74px);margin:24px 0}
.index-list{list-style:none;margin:0;padding:0}
.index-list li{border-top:1px solid var(--line)}
.index-list li:first-child{border-top:0}
.index-list a{display:grid;grid-template-columns:30px 1fr auto;gap:25px;align-items:baseline;padding:28px 0 30px}
.index-list li:first-child a{padding-top:0}
.index-list a>span{color:var(--orange);font-size:12px}
.index-list h3{font-size:30px;letter-spacing:-.04em;line-height:1.12;transition:color .2s}
.index-list p{font-size:17px;color:var(--muted);margin-top:10px;max-width:50ch}
.index-list em{font-style:normal;font-size:13px;color:var(--muted);white-space:nowrap}
.index-list a:hover h3{color:var(--orange)}
.archive{list-style:none;margin:0;padding:0;columns:2 200px;font-size:16px}
.archive li{padding:9px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.archive a:hover{color:var(--orange)}

/* footer, as on the info site */
.footer{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-top:28px;padding-bottom:32px;border-top:1px solid var(--line);font-size:14px}
.footer .brand img{width:125px}
.footer-sign{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted)}
.footer-sign img{width:150px;height:auto}
.footer-links{display:flex;gap:25px;flex-wrap:wrap}
.footer .text-link{font-size:13px}
.who{display:flex;gap:0 26px;flex-wrap:wrap;align-items:center;padding-top:12px;padding-bottom:12px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.who a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.who a:hover{color:var(--orange)}

@media(max-width:1050px){.desktop-nav{gap:20px;font-size:14px}.hero h1{font-size:60px}}
@media(max-width:860px){
  .hero,.split,.talk,.article,.article-head,.brief{grid-template-columns:1fr;gap:38px}
  .split .aside,.toc{position:static}
  .hero{padding-top:34px;padding-bottom:48px}
  .hero-photo img{height:clamp(300px,78vw,470px)}
  .split,.talk,.article{padding-top:52px;padding-bottom:58px}
  .article-head{padding-top:36px;padding-bottom:40px;align-items:start}
}
@media(max-width:760px){
  body{font-size:17px}
  .header{height:82px;padding-inline:22px;gap:12px}
  .header .brand img{width:116px}
  .header .button{font-size:14px;padding:11px 14px;gap:14px}
  .header{height:auto;flex-wrap:wrap;padding-top:14px;row-gap:10px}
  .desktop-nav{order:3;width:100%;gap:24px;font-size:14px;overflow-x:auto;border-top:1px solid var(--line);scrollbar-width:none}
  .desktop-nav::-webkit-scrollbar{display:none}
  .desktop-nav a{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;padding:0}
  .wrap{padding-inline:22px}
  .subnav{gap:14px}.subnav>div{gap:22px}
  .hero h1{font-size:clamp(42px,11.4vw,62px);margin:19px 0 18px}
  .hero .intro,.article-head .answer,.brief div{font-size:19px}
  .article-head h1{font-size:clamp(38px,10vw,52px)}
  .split h2,.talk h2{font-size:clamp(36px,9.5vw,48px)}
  .rows h3{font-size:24px}.rows li{gap:16px;grid-template-columns:24px 1fr}
  .prices th{font-size:19px;padding:13px 10px 13px 0}.prices td{padding:13px 0}.prices th small{font-size:14px;margin-top:2px}.prices .p{font-size:21px;padding-left:10px}
  .prices .chg{font-size:13px}
  .faq summary{font-size:21px}
  .index-list a{grid-template-columns:24px 1fr;gap:16px}.index-list em{grid-column:2}
  .index-list h3{font-size:25px}.index-head h1{font-size:clamp(36px,9.5vw,48px)}
  .links a{font-size:21px;padding:20px 0}.spec div{grid-template-columns:118px 1fr;gap:14px}.lost{font-size:clamp(36px,9.5vw,48px)}
  .shelf li{padding:16px 10px 16px}.shelf b{font-size:18px}.shelf small{font-size:13px}
  .footer{gap:20px;padding-top:22px;padding-bottom:24px}.footer-links{gap:16px}
  .prose{font-size:18px}
}
@media(max-width:860px){.toc summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:44px}.toc summary::after{content:'+';font:400 22px/1 var(--body);color:var(--orange)}.toc[open] summary::after{content:'–'}}
@media(max-width:560px){.shelf ul{grid-template-columns:repeat(2,1fr)}.shelf li:nth-child(3n+1){border-left:1px solid var(--line);padding-left:10px}.shelf li:nth-child(2n+1){border-left:0;padding-left:0}.shelf img{height:118px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}