/* Harvest Boot product page. Catppuccin Mocha, same shape as the other
   project pages: a hero with a spec block, then one section per claim,
   each carrying the evidence for it. */
:root{
  --crust:#11111b;--base:#1e1e2e;--surface:#313244;--surface2:#45475a;
  --text:#cdd6f4;--sub:#bac2de;--muted:#a6adc8;
  --blue:#89b4fa;--lav:#b4befe;--green:#a6e3a1;--yellow:#f9e2af;--red:#f38ba8;--mauve:#cba6f7;
  --radius:1rem;--line:#313244;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--crust);color:var(--text);overflow-wrap:break-word;
  font:16px/1.65 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background-image:radial-gradient(ellipse at 88% -5%,#89b4fa1f,transparent 48%),
                   radial-gradient(ellipse at 5% 40%,#cba6f714,transparent 42%);
  background-attachment:fixed;
}
a{color:var(--blue);text-underline-offset:.25em}
a:hover{color:var(--lav)}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
h1,h2,h3{letter-spacing:-.025em;line-height:1.15}
h2{font-size:clamp(1.55rem,3.4vw,2.2rem);margin:0 0 .6rem}
h3{font-size:1.05rem;margin:0 0 .4rem}
p{color:var(--sub);margin:0 0 1rem}
code{font-family:ui-monospace,"JetBrains Mono",monospace;font-size:.92em;color:var(--lav)}

.wrap{max-width:1140px;margin:auto;padding:0 clamp(1.1rem,4vw,3rem)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:20;padding:.6rem 1rem;background:var(--blue);color:var(--crust);border-radius:.5rem}

.site-header{border-bottom:1px solid var(--line);background:#11111bd9;position:sticky;top:0;z-index:10;backdrop-filter:blur(8px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:.9rem}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:650}
.brand img{border-radius:.6rem}

main{padding:clamp(2.2rem,5vw,4rem) 0 0}
.eyebrow{color:var(--blue);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.7rem}
.lede{font-size:clamp(1.05rem,2.2vw,1.2rem);color:var(--sub);max-width:60ch}

/* Hero ------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;padding-bottom:clamp(2rem,5vw,3.5rem)}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.9rem);margin:.2rem 0 1rem;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--blue)}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0 1rem}
.button{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.6rem 1rem;border:1px solid var(--surface2);border-radius:.6rem;background:var(--surface);color:var(--text);text-decoration:none;cursor:pointer}
.button:hover{border-color:var(--blue);color:var(--text)}
.button.primary{background:var(--blue);border-color:var(--blue);color:var(--crust);font-weight:600}
.button.primary:hover{background:var(--lav);color:var(--crust)}
.stack{color:var(--lav);font-size:.88rem;letter-spacing:.02em}

.specs{border:1px solid var(--line);border-radius:var(--radius);background:#1e1e2eb3;padding:1.1rem 1.2rem;margin:0}
.specs dt{grid-column:1;color:var(--muted);font-size:.82rem;letter-spacing:.02em}
.specs dd{grid-column:2;margin:0;font-variant-numeric:tabular-nums}
.specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem 1.1rem}
.specs .big{font-size:1.02rem;color:var(--text)}
.specs dd b{color:var(--green);font-weight:600}

/* Sections ---------------------------------------------------------- */
section{padding:clamp(2.2rem,5vw,3.4rem) 0;border-top:1px solid var(--line)}
.section-head{max-width:70ch;margin-bottom:1.4rem}
.shot{margin:0;border:1px solid var(--surface2);border-radius:var(--radius);overflow:hidden;background:var(--base)}
.shot img{display:block;width:100%;height:auto}
figure.shot figcaption{padding:.7rem .9rem;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;margin:1.4rem 0}
.cols article{border:1px solid var(--line);border-radius:.8rem;background:#1e1e2e99;padding:1.1rem}
.cols p{margin:0;font-size:.94rem}
.note{border-left:3px solid var(--blue);background:#89b4fa0f;padding:.85rem 1rem;border-radius:0 .5rem .5rem 0}
.note.warn{border-left-color:var(--yellow);background:#f9e2af0f}
.pills{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:1rem 0 0;list-style:none}
.pills li{font-size:.82rem;padding:.3rem .65rem;border:1px solid var(--surface2);border-radius:999px;color:var(--sub);background:#31324459}
.pills li b{color:var(--text);font-weight:600}

table.matrix{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem}
table.matrix caption{text-align:left;color:var(--muted);font-size:.84rem;padding-bottom:.5rem}
table.matrix th,table.matrix td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
table.matrix th{color:var(--muted);font-weight:600}
table.matrix td b{color:var(--text)}

footer{border-top:1px solid var(--line);padding:2rem 0;font-size:.86rem;color:var(--muted)}
footer a{color:var(--blue)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr}
}

/* Catalogue strip (generated): one chip per shipped source, with the
   app's own icon and brand colour. */
.catalog-title{margin:1.6rem 0 .8rem;font-size:1rem;color:var(--sub)}
.catalog-group{margin:0 0 1rem}
.catalog-group h3{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.catalog{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0;list-style:none}
.catalog li{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;padding:.3rem .7rem .3rem .35rem;
  border:1px solid color-mix(in srgb,var(--brand,var(--surface2)) 55%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--brand,var(--surface)) 12%,#1e1e2e);color:var(--text)}
.catalog li img{width:20px;height:20px;object-fit:contain;border-radius:4px}