*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:300;line-height:1.1;margin:0;letter-spacing:-.3px}
h1{font-size:clamp(36px,5.2vw,62px)} h2{font-size:clamp(26px,3vw,36px)} h3{font-size:20px;font-weight:400}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.caps{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:500}
.muted{color:var(--muted)}
.aside{font-family:var(--font-serif);font-style:italic;color:var(--muted);font-size:17px;line-height:1.45}
.dna-code{font-family:var(--font-sans);font-size:12px;letter-spacing:1.5px;color:var(--muted);white-space:nowrap}
.section{padding:76px 0 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}
.section-head .caps{display:block;margin-bottom:10px;color:var(--teal)}
.link-arrow{font-size:14px;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:inline-flex;align-items:baseline;text-decoration:none;font-weight:300;font-size:28px;letter-spacing:-.2px;line-height:1}
.logo img{height:.74em;width:auto;margin-left:.06em}
.nav{display:flex;gap:30px}
.nav a{text-decoration:none;font-size:15px;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{border-bottom-color:var(--teal)}
.nav-toggle{display:none;background:none;border:1px solid var(--hairline);border-radius:var(--r-control);padding:8px 12px;font:inherit;font-size:14px}

/* buttons */
.btn{display:inline-block;font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;border-radius:var(--r-control);padding:12px 22px;line-height:1.2}
.btn-primary{background-image:var(--gradient);color:#fff}
.btn-black{background:var(--ink);color:#fff}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ontl{background:#fff;color:var(--teal)}
.btn-ghost-ontl{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-sm{padding:9px 16px;font-size:14px}

/* tags */
.pill{display:inline-block;font-size:13px;padding:4px 12px;border-radius:999px;border:1px solid var(--hairline);background:#fff;color:var(--ink);margin:0 6px 6px 0;line-height:1.4}
.on-dark .pill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}

/* cards */
.card{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;text-decoration:none;display:block}
.grid{display:grid;gap:22px}
.grid-4{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}
.coffee-card .plate{background:var(--mat);padding:22px 0 16px;display:flex;justify-content:center}
.coffee-card .body{padding:16px 18px 18px}
.coffee-card h3{font-size:18px;margin-bottom:2px}
.coffee-card .meta{font-size:13px;color:var(--muted);margin-bottom:10px}
.coffee-card:hover{border-color:var(--teal)}

/* template bag (--w sets the size) */
.bag{--w:150px;--c:var(--teal);width:var(--w);height:calc(var(--w)*1.45);font-size:calc(var(--w)/15);position:relative;background:var(--c);background-image:linear-gradient(100deg,rgba(255,255,255,.1),rgba(255,255,255,0) 35%,rgba(0,0,0,.18));border-radius:.6em .6em .9em .9em;box-shadow:0 .8em 1.4em -.6em rgba(4,32,29,.4);flex:none}
.bag:before{content:"";position:absolute;left:0;right:0;top:0;height:1.3em;border-radius:.6em .6em 0 0;border-bottom:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.12)}
.bag-label{position:absolute;left:12%;right:12%;top:30%;bottom:12%;background:var(--paper);color:var(--ink);border-radius:.25em;padding:.9em .8em .7em;display:flex;flex-direction:column;align-items:center;text-align:center}
.bag-mono{font-weight:300;font-size:2em;line-height:1;letter-spacing:.06em;margin-bottom:.35em}
.bag-roaster{font-size:.62em;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.9em;line-height:1.2}
.bag-name{font-size:.95em;line-height:1.15;font-weight:400}
.bag-sub{font-size:.7em;color:var(--muted);margin-top:.3em;line-height:1.2}
.bag-stripe{margin-top:auto;height:.45em;width:100%;border-radius:1px;background:var(--p-washed);border:1px solid rgba(4,32,29,.08)}
.bag-roast{display:flex;gap:.3em;margin-top:.55em}.bag-roast b{width:.8em;height:.8em;border-radius:50%;border:1px solid var(--ink);display:block}.bag-roast b.on{background:var(--ink)}
.bag-img{width:var(--w);height:auto;filter:drop-shadow(0 .8em 1em rgba(4,32,29,.25))}
.st-washed{background:var(--p-washed)}.st-natural{background:var(--p-natural)}.st-honey{background:var(--p-honey)}.st-experimental{background:var(--p-experimental)}

/* hero (home) */
.hero{border-radius:var(--r-card);color:#fff;position:relative;overflow:hidden;margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:520px}
.hero-copy{padding:64px 0 56px 56px;display:flex;flex-direction:column;justify-content:center;gap:22px;position:relative;z-index:2}
.hero-copy .aside{color:rgba(255,255,255,.78)}
.hero-copy p.lead{font-size:18px;color:rgba(255,255,255,.88);max-width:430px;font-weight:300}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero-map{position:relative;min-height:380px}

/* map */
.map-svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.map-svg.drag{cursor:grabbing}
.dot{cursor:pointer;transition:opacity .15s}
.dot.dim{opacity:.12}
.map-tip{position:absolute;pointer-events:none;background:#fff;color:var(--ink);font-size:13px;padding:6px 10px;border-radius:var(--r-control);transform:translate(-50%,-130%);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:5}
.map-tip small{color:var(--muted);display:block;font-size:12px}

/* constellation page */
.page-head{padding:44px 0 22px}
.page-head p{max-width:560px;margin-top:12px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;position:relative}
.input{font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--hairline);border-radius:var(--r-control);background:#fff;color:var(--ink);min-width:0}
.input:focus{outline:2px solid var(--teal);outline-offset:-1px}
.toolbar .input{flex:1 1 260px;max-width:420px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;min-height:0}
.chip{font:inherit;font-size:13px;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-control);padding:5px 6px 5px 10px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.chip:after{content:"\00d7";font-size:16px;line-height:1;color:var(--muted)}
.filters-panel{position:absolute;top:100%;left:0;z-index:30;margin-top:8px;background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:22px;width:min(760px,100%);box-shadow:0 18px 40px -18px rgba(4,32,29,.3);display:none;grid-template-columns:repeat(4,1fr);gap:22px}
.filters-panel.open{display:grid}
.filters-panel h4{margin:0 0 10px;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--teal)}
.opt-list{max-height:210px;overflow:auto}
.opt{display:flex;gap:8px;align-items:center;font-size:14px;padding:3px 0;cursor:pointer}
.opt input{accent-color:var(--teal)}
.opt-group{font-size:12px;color:var(--muted);margin:8px 0 2px}
.filters-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hairline);padding-top:14px}
.map-panel{position:relative;border-radius:var(--r-card);overflow:hidden;height:clamp(440px,70vh,740px);color:#fff}
.map-panel .map-svg{position:absolute;left:0;top:0}
.zoom{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px;z-index:4}
.zoom button{width:34px;height:34px;border-radius:var(--r-control);border:1px solid rgba(255,255,255,.35);background:rgba(4,32,29,.35);color:#fff;font:inherit;font-size:18px;cursor:pointer}
.legend{position:absolute;left:18px;top:16px;z-index:4;font-size:12px;display:flex;gap:14px;flex-wrap:wrap;max-width:60%;color:rgba(255,255,255,.85)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.map-count{position:absolute;right:62px;top:20px;z-index:4;font-size:12px;color:rgba(255,255,255,.7)}
.float-card{position:absolute;left:18px;bottom:18px;z-index:6;width:min(340px,calc(100% - 36px));background:#fff;color:var(--ink);border-radius:var(--r-card);padding:18px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);display:none}
.float-card.open{display:block}
.float-card h3{font-size:22px;font-weight:300;margin:2px 0 2px}
.float-card .meta{font-size:13px;color:var(--muted);margin-bottom:10px}
.float-card .near{font-size:13px;margin:12px 0 14px;color:var(--muted)}
.float-card .near b{font-weight:500;color:var(--ink)}
.float-card .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted)}
.awaiting{margin-top:22px;font-size:14px;color:var(--muted)}
.awaiting summary{cursor:pointer}
.awaiting ul{columns:2;margin:10px 0 0;padding-left:18px}

/* coffee page */
.crumb{font-size:14px;padding:26px 0 8px;color:var(--muted)}.crumb a{text-decoration:none;border-bottom:1px solid var(--hairline)}
.coffee-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;margin-top:10px;align-items:start}
.coffee-plate{background:var(--mat);border-radius:var(--r-card);display:flex;justify-content:center;align-items:center;padding:56px 0;position:relative}
.coffee-plate .tagline{position:absolute;left:22px;top:18px}
.specimen{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-plate);padding:26px 26px 22px 62px;position:relative;margin-bottom:26px}
.specimen:before{content:"";position:absolute;left:24px;top:24px;width:16px;height:16px;border-radius:50%;border:1px solid var(--ink);background:var(--paper);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px var(--hairline)}
.specimen:after{content:"";position:absolute;left:31px;top:40px;bottom:22px;border-left:1px dashed var(--hairline)}
.specimen .acc{font-size:12px;letter-spacing:3px;font-weight:500;color:var(--teal)}
.specimen h1{font-size:clamp(30px,3.6vw,44px);margin:8px 0 4px}
.specimen .by{font-size:17px;color:var(--muted);margin-bottom:18px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;font-size:15px;margin:0;border-top:1px solid var(--hairline);padding-top:16px}
.facts dt{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);padding-top:3px;font-weight:500}
.facts dd{margin:0}
.specimen .dna-code{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline)}
.sample-flag{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--terracotta);color:var(--terracotta);padding:2px 8px;border-radius:var(--r-control);margin-left:10px;vertical-align:middle}
.block{margin-top:30px}.block .caps{display:block;color:var(--teal);margin-bottom:12px}
.seller{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);padding:20px 22px}
.seller p.aside{margin-top:12px}
.buy-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}

/* footer */
.site-footer{margin-top:110px;border-top:1px solid var(--hairline);padding:40px 0 48px;font-size:14px;color:var(--muted)}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.site-footer .cols{display:flex;gap:44px;flex-wrap:wrap}
.site-footer a{color:var(--ink);text-decoration:none}.site-footer a:hover{text-decoration:underline}
.coffee-link{background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;padding:0;border-bottom:1px solid var(--teal)}
.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(4,32,29,.5);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:var(--r-card);padding:30px;max-width:380px;text-align:center}
.modal-box p{margin:10px 0 20px}

/* home sections */
.dna-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:44px;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);padding:44px;align-items:center}
.dna-box img{width:200px;mix-blend-mode:multiply;margin-bottom:18px}
.beta{display:inline-block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;border:1px solid var(--teal);color:var(--teal);padding:2px 8px;border-radius:var(--r-control);margin-left:8px;vertical-align:middle}
.dna-steps{display:grid;gap:0}
.dna-steps div{padding:16px 0;border-bottom:1px solid var(--hairline)}.dna-steps div:last-child{border:0}
.dna-steps b{font-weight:500;display:block;margin-bottom:2px}
.dna-sample{margin-top:22px;background:var(--mat);border-radius:var(--r-control);padding:14px 16px}
.feed-tile{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;position:relative;color:#fff;display:flex;align-items:flex-end;padding:18px;text-decoration:none}
.feed-tile p{font-size:15px;line-height:1.35;font-weight:300;position:relative}
.feed-tile small{display:block;font-size:12px;opacity:.8;margin-top:6px}
.tone-0{background:linear-gradient(160deg,#0E6E71,#022527)}
.tone-1{background:linear-gradient(200deg,#2E8C8B,#06434A 60%,#04201D)}
.tone-2{background:linear-gradient(130deg,#064144,#0A5B5E 55%,#45a59f)}
.tone-3{background:linear-gradient(185deg,#04201D,#0A5B5E)}
.tone-4{background:linear-gradient(150deg,#1b7a7a,#042E30 70%)}
.tone-5{background:linear-gradient(215deg,#53b6ae -10%,#0A5B5E 40%,#022527)}
.lb{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:center}
.lb-ring{position:relative}.lb-ring img{mix-blend-mode:multiply;width:100%;max-width:380px;margin:0 auto}
.lb-ring .center{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:300;font-size:clamp(22px,2.4vw,30px);line-height:1.1}
.lb-list a{display:block;text-decoration:none;padding:18px 0;border-bottom:1px solid var(--hairline)}
.lb-list a:first-child{border-top:1px solid var(--hairline)}
.lb-list .caps{color:var(--teal);font-size:11px}
.lb-list h3{margin:6px 0 2px;font-size:21px;font-weight:300}
.stub{padding:90px 0 20px;max-width:560px}
.stub p{margin-top:14px}

@media (max-width:900px){
  .nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--paper);flex-direction:column;gap:0;padding:8px 28px 16px;border-bottom:1px solid var(--hairline)}
  .nav.open{display:flex}.nav a{padding:12px 0;border-bottom:1px solid var(--hairline)}
  .nav-toggle{display:block}
  .hero,.coffee-hero,.dna-box,.lb{grid-template-columns:1fr}
  .hero-copy{padding:40px 28px 8px}.hero-map{min-height:320px}
  .grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}
  .filters-panel{grid-template-columns:1fr 1fr}
  .dna-box{padding:28px}.section{padding-top:56px}
  .legend{max-width:70%}.awaiting ul{columns:1}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .grid-3{grid-template-columns:1fr}.filters-panel{grid-template-columns:1fr}
  .float-card{left:10px;right:10px;bottom:10px;width:auto}
  .specimen{padding-left:54px}
}

/* drop 2 additions */
.hdr-right{display:flex;align-items:center;gap:12px}
.seal{width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;position:relative;text-decoration:none}
.seal:after{content:"";position:absolute;left:3px;top:3px;right:3px;bottom:3px;border-radius:50%;border:1px dashed var(--teal);opacity:.55}
.seal img{height:15px;width:auto}
.seal:hover,.seal.on{border-color:var(--teal);background:#fff}
.legend i{width:11px;height:8px;border-radius:50%;transform:rotate(-28deg)}
.catalog-note{display:block;margin-top:10px;font-size:15px}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--hairline);margin-bottom:22px;overflow-x:auto}
.tab{font:inherit;font-size:15px;background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;margin-bottom:-1px;cursor:pointer;color:var(--muted);white-space:nowrap}
.tab small{font-size:12px;margin-left:5px}
.tab.on{color:var(--ink);border-bottom-color:var(--teal)}
.results-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:6px 0 20px;font-size:14px;color:var(--muted)}
.results-head select{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--hairline);border-radius:var(--r-control);background:#fff;color:var(--ink)}
.plate{display:block;text-decoration:none}
.plate .frame{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-plate);padding:12px;transition:border-color .15s}
.plate:hover .frame{border-color:var(--teal)}
.plate .mat{background:var(--mat);border:1px solid var(--hairline);display:flex;justify-content:center;align-items:center;padding:30px 0 24px;min-height:250px}
.plate .cap{padding:12px 2px 0;font-size:13px;line-height:1.45;color:var(--muted)}
.plate .acc{font-size:11px;letter-spacing:2.5px;font-weight:500;color:var(--teal)}
.plate .nm{font-size:17px;color:var(--ink);margin:3px 0 1px;line-height:1.2}
.plate .cap i{font-family:var(--font-serif);font-size:15px}
.more{text-align:center;margin-top:34px}
.empty{padding:60px 0;text-align:center}
.lb-head{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:40px;align-items:center;padding:36px 0 10px}
.lb-head .ring{position:relative;max-width:260px}.lb-head .ring img{mix-blend-mode:multiply;width:100%}
.lb-head .ring .center{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:300;font-size:22px;line-height:1.1}
.article-card{display:block;text-decoration:none;padding:24px 0;border-bottom:1px solid var(--hairline)}
.article-card:first-child{border-top:1px solid var(--hairline)}
.article-card h2{font-size:clamp(22px,2.4vw,28px);margin:8px 0}
.article-card .caps{color:var(--teal);font-size:11px}
.article{max-width:660px;margin:0 auto;padding:40px 0 0}
.article h1{font-size:clamp(32px,4.4vw,50px);margin:12px 0 14px}
.article .stand{font-family:var(--font-serif);font-style:italic;font-size:21px;line-height:1.4;color:var(--muted);margin-bottom:30px}
.article p.b{font-size:18px;line-height:1.75;margin-bottom:20px}
.article .foot{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--hairline);margin-top:36px;padding-top:20px;font-size:14px}
@media (max-width:900px){.lb-head{grid-template-columns:1fr}.lb-head .ring{max-width:170px}}

/* drop 3: Drip Feed + Passport */
.feed{max-width:560px;margin:0 auto;display:grid;gap:26px;padding-bottom:10px}
.post{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden}
.post-head{display:flex;align-items:center;gap:12px;padding:14px 16px}
.avatar{width:38px;height:38px;border-radius:50%;background-image:var(--gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:15px;flex:none}
.post-head b{font-weight:500;display:block;line-height:1.2}.post-head small{color:var(--muted);font-size:13px}
.post-photo{aspect-ratio:4/5;position:relative}
.post-photo .pl{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.85)}
.post-body{padding:14px 16px 16px}
.post-body p{font-size:16px;margin-bottom:12px}
.post-actions{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.beans{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.share{font:inherit;font-size:14px;background:none;border:1px solid var(--hairline);border-radius:var(--r-control);padding:6px 14px;cursor:pointer;color:var(--ink)}
.share:hover{border-color:var(--teal)}
.feed-note{max-width:560px;margin:34px auto 0;text-align:center}
.pp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:44px 0 22px}
.pp-stats{display:flex;gap:34px}.pp-stats div{font-size:13px;color:var(--muted)}.pp-stats b{display:block;font-size:30px;font-weight:300;color:var(--ink);line-height:1.1}
.pp-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.pp-map{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);overflow-x:auto}
.pp-map>svg{display:block;width:100%;min-width:760px;height:auto}
.stamp{cursor:pointer}.stamp:hover .seal-svg,.stamp.on .seal-svg{filter:drop-shadow(0 3px 6px rgba(4,32,29,.25))}
.stamp.on circle.ring{stroke-width:2}
.pp-panel{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);padding:24px;text-align:center;position:sticky;top:90px}
.pp-panel h3{font-size:24px;font-weight:300;margin:10px 0 2px}
.pp-panel .list{text-align:left;margin-top:16px;border-top:1px solid var(--hairline);padding-top:12px;font-size:14px}
.pp-panel .list a{display:block;padding:4px 0;text-decoration:none;color:var(--ink)}.pp-panel .list a:hover{text-decoration:underline}
.pp-key{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--muted);align-items:center}
.pp-key span{display:inline-flex;align-items:center;gap:8px}
@media (max-width:900px){.pp-grid{grid-template-columns:minmax(0,1fr)}.pp-panel{position:static}}

/* drop 4: ratings */
.rating{display:inline-flex;align-items:center;gap:2px;line-height:1}
.rating .bean{display:block}
.rating-n{font-size:13px;color:var(--muted);margin-left:8px}
.rating.none{font-size:13px;color:var(--muted);font-family:var(--font-serif);font-style:italic}
.rate-row{margin:6px 0 10px;min-height:18px}
.plate .rate-row{margin:4px 0 6px}
.info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:10px;border:1px solid var(--muted);border-radius:50%;font-size:10px;font-style:italic;font-family:var(--font-serif);color:var(--muted);cursor:help}
.info-tip{display:none;position:absolute;left:50%;top:150%;transform:translateX(-30%);width:230px;background:var(--ink);color:#fff;font:400 13px/1.4 var(--font-sans);font-style:normal;padding:10px 12px;border-radius:var(--r-control);z-index:20;text-align:left}
.info:hover .info-tip,.info:focus .info-tip{display:block}
.dna-sample .dna-code{white-space:normal;word-break:break-all}

/* drop 5: account menu + footer blurb */
.acct{position:relative}
button.seal{background:none;padding:0;cursor:pointer;font:inherit}
.acct-menu{display:none;position:absolute;right:0;top:calc(100% + 12px);min-width:230px;background:#fff;border:1px solid var(--hairline);border-radius:12px;box-shadow:0 18px 40px -18px rgba(4,32,29,.3);padding:8px;z-index:60}
.acct-menu.open{display:block}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-size:15px;padding:10px 12px;border-radius:var(--r-control);color:var(--ink);text-decoration:none;cursor:pointer}
.acct-menu a:hover,.acct-menu button:hover{background:var(--mat)}
.acct-name b{display:block;font-weight:500}.acct-name small{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal)}
.site-footer .wrap>div:first-child{flex:1 1 320px;max-width:460px}
.foot-blurb{margin-top:12px;font-size:14px;line-height:1.6;color:var(--muted);max-width:420px}

/* drop 6 */
.axis{position:absolute;z-index:3;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.55);pointer-events:none;white-space:nowrap}
.axl{left:14px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.axr{right:14px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%)}
.axt{top:12px;left:50%;transform:translateX(-50%)}
.axb{bottom:12px;left:50%;transform:translateX(-50%)}
.why{margin:8px 4px 0;font-size:15px}
.legend{max-width:70%}
@media (max-width:560px){.axl,.axr{display:none}.legend{max-width:80%}}

/* auth pages */
.auth-card{max-width:420px;margin:70px auto 0;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);padding:34px}
.auth-card h1{font-size:32px;margin:8px 0 6px}
.auth-card label{display:block;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--muted);margin:18px 0 6px}
.auth-card .input{width:100%}
.auth-card .btn{width:100%;margin-top:24px}
.auth-msg{margin-top:16px;font-size:14px;min-height:20px}
.auth-msg.err{color:var(--terracotta)}.auth-msg.ok{color:var(--teal)}
.auth-card .alt{display:block;text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}

/* drop 7: forms and owner Passport */
.form-wrap{max-width:760px;margin:0 auto;padding:10px 0 0}
.fsec{margin-top:34px;padding-top:6px}.fsec>.caps{display:block;color:var(--teal);margin-bottom:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:16px;min-width:0}
.fld label{display:block;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:6px}
.fld label.chk{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);display:flex;gap:8px;align-items:center;font-weight:400;margin-top:26px}
.req:after{content:" *";color:var(--terracotta)}
.fld .input{width:100%}
.rchips{display:flex;gap:8px;flex-wrap:wrap}
.rchip input{position:absolute;opacity:0;pointer-events:none}
.rchip span{display:inline-block;padding:9px 14px;border:1px solid var(--hairline);border-radius:var(--r-control);background:#fff;cursor:pointer;font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink)}
.rchip input:checked+span{border-color:var(--teal);background:var(--teal);color:#fff}
.rchip input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}
.tagbox{border:1px solid var(--hairline);border-radius:var(--r-control);background:#fff;padding:7px 9px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;cursor:text}
.tagbox input{border:0;outline:0;font:inherit;font-size:15px;flex:1;min-width:140px;padding:5px}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--mat);border:1px solid var(--hairline);border-radius:999px;padding:3px 6px 3px 12px;font-size:14px}
.tag.unk{border-style:dashed;background:#fff}
.tag button{border:0;background:none;cursor:pointer;font-size:16px;color:var(--muted);line-height:1;padding:0 4px}
.dup{margin:0 0 16px;padding:12px 14px;border:1px solid var(--hairline);border-radius:var(--r-control);background:#fff;font-size:14px}
.dup.hard{border-color:var(--terracotta);color:var(--terracotta)}.dup.info{color:var(--muted)}.dup a{color:inherit}
.photo-prev{max-width:160px;margin-top:10px;border-radius:var(--r-control);border:1px solid var(--hairline)}
.dtable{width:100%;border-collapse:collapse;font-size:14px}
.dtable th{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:10px 12px;border-bottom:1px solid var(--hairline)}
.dtable td{padding:12px;border-bottom:1px solid var(--hairline);vertical-align:top}
.dtable a{color:var(--ink)}.dtable .nm a{font-size:15px}
.dtable .act{white-space:nowrap}.dtable .act a,.dtable .act button{font:inherit;font-size:13px;background:none;border:0;border-bottom:1px solid var(--ink);cursor:pointer;padding:0;margin-right:14px;color:var(--ink);text-decoration:none}
.badge{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-control);border:1px solid var(--teal);color:var(--teal)}
.badge.ret{border-color:var(--terracotta);color:var(--terracotta)}
.tbl-wrap{overflow-x:auto;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card)}
.recent{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-card);padding:20px}
.recent h3{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--teal);margin-bottom:12px}
.recent li{list-style:none;padding:9px 0;border-bottom:1px solid var(--hairline);font-size:14px}.recent ul{margin:0;padding:0}.recent li small{display:block;color:var(--muted);font-size:12px}
.recent button{font:inherit;font-size:13px;background:none;border:0;border-bottom:1px solid var(--ink);cursor:pointer;margin-top:12px}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.pp-banner{margin-top:22px;padding:12px 16px;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-control);font-size:14px;color:var(--muted)}
@media (max-width:700px){.frow{grid-template-columns:1fr}}

/* C2: logs */
.rb{position:relative;display:inline-block;width:34px;height:26px;vertical-align:middle}
.rb .bean{display:block;margin:2px auto}
.rb button{position:absolute;top:0;height:100%;width:50%;border:0;background:none;cursor:pointer;padding:0}
.rb .hw{left:0;width:100%}
.log-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 14px;font-size:14px}
textarea.input{min-height:76px;resize:vertical;font-family:inherit}
.preview-row{display:flex;gap:14px;align-items:center;margin-top:12px;padding:12px;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-control);font-size:14px}
.preview-row .bag-img,.preview-row .bag{flex:none}
.empty-start{padding:34px 22px;text-align:center}
.empty-start ol{text-align:left;max-width:360px;margin:16px auto 22px;padding-left:20px;color:var(--muted)}

/* C3: layers, avatars, profile */
.seg{display:inline-flex;border:1px solid var(--hairline);border-radius:var(--r-control);overflow:hidden;background:#fff}
.seg button{font:inherit;font-size:14px;padding:9px 14px;border:0;background:none;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--teal);color:#fff}
.seal.has-av:after{display:none}
.seal img.avatar-img{height:100%;width:100%;border-radius:50%;object-fit:cover}
.pp-avatar{height:.85em;width:.85em;border-radius:50%;object-fit:cover;vertical-align:-.1em;margin-right:.3em;border:1px solid var(--hairline)}
.av-edit{display:flex;gap:18px;align-items:center;margin-bottom:6px}
.av-big{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1px solid var(--hairline);background:var(--mat);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:300;color:var(--muted);flex:none}

/* loading bar shown while the site starts (visible only if Supabase is slow) */
.boot-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;background:linear-gradient(90deg,transparent,var(--teal),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:bootbar 1.1s linear infinite}
@keyframes bootbar{from{background-position:-40% 0}to{background-position:140% 0}}