/* Bean On Bar — design system v2
   ---------------------------------------------------------------------------
   A clean sheet, not a sixth override layer on styles.css. The old sheet
   carries five stacked :root blocks, several commented for colours that are no
   longer in it; anything built on top of that inherits the confusion.

   The idiom is editorial print, not SaaS marketing: small type, square
   corners, hairline rules, no shadows, no cards, one accent used sparingly.
   Air does the work that borders and containers used to do.

   Ground is #FBFAF8 — a shade warmer than a gallery white, so the site still
   reads as Bean On Bar rather than as a borrowed template.
   ------------------------------------------------------------------------- */

@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin-opsz-normal.woff2')format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fonts/fraunces-latin-opsz-normal.woff2')format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fonts/fraunces-latin-opsz-italic.woff2')format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

:root{
  /* The only :root block. Keep it that way. */
  --paper:#FBFAF8;      /* page ground */
  --ground:#F4F2ED;     /* image wells, alternate bands */
  --ink:#1F1B16;        /* body and headings */
  --ink-2:#6E665C;      /* secondary prose */
  --ink-3:#7C7469;      /* labels, captions, axis text */
  --line:rgba(31,27,22,.13);
  --accent:#8A4620;     /* one accent. CTAs and single marks only. */
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --gutter:3rem;
  --measure:34em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
     font:400 15px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- layout ---------------------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
section{padding:7.5rem 0;border-bottom:1px solid var(--line)}
section.tight{padding:5rem 0}
section.band{background:var(--ground)}
.rule{height:1px;background:var(--line);margin:3.5rem 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.split.end{align-items:end}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem}
.cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:3.5rem}
.head{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-bottom:3.5rem}

/* ---- type ------------------------------------------------------------ */
h1,h2,h3{font-weight:400;margin:0;letter-spacing:-.012em}
h1{font:400 clamp(2rem,3.4vw,2.9rem)/1.18 var(--serif)}
h2{font:400 clamp(1.35rem,2vw,1.7rem)/1.25 var(--serif);letter-spacing:-.008em}
h3{font:400 1.0625rem/1.35 var(--serif)}
h1 em,h2 em{font-style:italic;color:var(--ink-2)}
p{margin:0;color:var(--ink-2);max-width:var(--measure)}
p+p{margin-top:1rem}
.lede{font-size:16.5px}
.label{font:400 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
       color:var(--ink-3);margin:0}
.note{font-size:12.5px;color:var(--ink-3)}
.pull{font:400 clamp(1.5rem,2.6vw,2.15rem)/1.4 var(--serif);color:var(--ink);
      max-width:22em;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}

/* ---- readout: evidence as typography, not as a widget ----------------- */
.readout{display:grid;grid-template-columns:auto 1fr;gap:1.75rem;align-items:start}
.score{color:var(--ink);font:400 clamp(3.2rem,5vw,4.4rem)/.9 var(--serif);letter-spacing:-.03em;
       font-variant-numeric:tabular-nums}
.score span{display:block;font:400 9.5px/1 var(--sans);letter-spacing:.18em;
            text-transform:uppercase;color:var(--ink-3);margin-top:.6rem}
dl.spec{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.5rem;font-size:13.5px}
dl.spec dt{color:var(--ink-3)}
dl.spec dd{margin:0;color:var(--ink)}

/* ---- plots: fine line art on paper ----------------------------------- */
.plotwrap{max-width:40rem}
.plot{width:100%;aspect-ratio:3/2;display:block}
.plot line{stroke:var(--line);stroke-width:1}
.plot path{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke}
.plot .c1{stroke:var(--ink)}
.plot .c2{stroke:var(--ink-3)}
.plot circle{fill:var(--accent)}
.plot text{font:400 8px var(--sans);fill:var(--ink-3);letter-spacing:.06em}
.plot .band{fill:var(--accent);opacity:.07}

/* ---- image wells ------------------------------------------------------ */
.frame{background:var(--ground);aspect-ratio:3/2;display:grid;place-items:center;
       color:var(--ink-3);font:400 10px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.frame.sq{aspect-ratio:1/1}
.frame.tall{aspect-ratio:4/5}
figure{margin:0}
figcaption{margin-top:.85rem;font-size:12.5px;color:var(--ink-3)}
.illus{display:inline-block;margin-right:.55em;padding:.26em .45em;
       font:400 8.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
       color:var(--ink-3);border:1px solid currentColor;border-radius:2px;
       vertical-align:.14em;opacity:.7}

/* ---- list of capabilities: rows, not cards --------------------------- */
.rows{border-top:1px solid var(--line)}
.rows > div{display:grid;grid-template-columns:1fr 2fr;gap:3rem;
            padding:1.75rem 0;border-bottom:1px solid var(--line)}
.rows h3{padding-top:.1rem}
.rows p{max-width:44em;font-size:14px}

.sharecard{max-width:340px;margin:0}
.sharecard img{width:100%;display:block;border-radius:6px}
.sharecard figcaption{margin-top:.9rem;font-size:12px;line-height:1.55;color:var(--ink-3)}
.appstore{display:flex;align-items:center;gap:1.1rem;margin-top:1.75rem}
.appstore img{width:62px;height:62px;border-radius:13.5px;display:block;flex:none}
.appstore p{margin:0}

/* ---- app screens ------------------------------------------------------ */
.screens{display:grid;grid-template-columns:repeat(3,minmax(0,286px));gap:2.25rem;align-items:start}
.screens.two{grid-template-columns:repeat(2,minmax(0,330px))}
.screens.one{grid-template-columns:minmax(0,360px)}
.screens.wide{grid-template-columns:minmax(0,380px)}
.screens.pair{grid-template-columns:repeat(2,minmax(0,330px));gap:2rem}
.screens figure{margin:0}
.screens img{width:100%;display:block;border-radius:10px;border:1px solid var(--line);background:#000}
.screens figcaption{margin-top:.85rem;font-size:12.5px;line-height:1.6;color:var(--ink-2)}

/* ---- header / footer -------------------------------------------------- */
.site-head{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9;
           background:rgba(251,250,248,.92);backdrop-filter:blur(8px)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.mark{font:400 clamp(19px,1.55vw,23px)/1 var(--serif);letter-spacing:.005em;
      text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:.55em}
.mark img{width:1.22em;height:1.22em;display:block}
.tagline{font:400 clamp(1.7rem,2.9vw,2.5rem)/1.2 var(--serif);letter-spacing:-.012em;
         color:var(--ink);max-width:17em;margin:0}
.tagline em{font-style:italic;color:var(--ink-2)}
.masthead{font:400 clamp(3.4rem,9.5vw,8.5rem)/.92 var(--serif);letter-spacing:-.035em;
          color:var(--ink);margin:0 0 2.25rem}
.site-nav{display:flex;gap:2.25rem}
.site-nav a{color:var(--ink-2);text-decoration:none;font-size:13px}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-foot{padding:4.5rem 0 6rem;font-size:12.5px;color:var(--ink-3)}
.site-foot a{color:var(--ink-3);text-decoration:none}
.site-foot a:hover{color:var(--ink)}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
.foot-cols b{display:block;font:400 9.5px/1 var(--sans);letter-spacing:.18em;
             text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.foot-cols a{display:block;margin-bottom:.5rem}

/* ---- the single accent: one CTA --------------------------------------- */
.meta{display:flex;gap:2.5rem;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.meta b{font-weight:500;color:var(--ink)}
.more{display:inline-block;margin-top:1.5rem;font-size:13px;color:var(--ink);
      text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.more:hover{border-color:var(--ink)}

/* ---- responsive ------------------------------------------------------- */
@media(max-width:860px){
  :root{--gutter:1.5rem}
  section{padding:4.5rem 0}
  .split,.head,.cols-3,.cols-2{grid-template-columns:1fr;gap:2.5rem}
  .rows > div{grid-template-columns:1fr;gap:.5rem}
  .foot-cols{grid-template-columns:1fr 1fr;gap:2rem}
  .screens,.screens.two,.screens.pair{grid-template-columns:1fr 1fr;gap:1.25rem}
  .screens.one,.screens.wide{grid-template-columns:minmax(0,1fr)}
  .site-head .wrap{flex-wrap:wrap;height:auto;min-height:0;
                   padding-top:.85rem;padding-bottom:0;row-gap:0}
  .site-head .label{margin-left:auto}
  .site-nav{order:3;flex-basis:calc(100% + var(--gutter)*2);display:flex;gap:0;
            overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
            margin:.5rem calc(var(--gutter)*-1) 0;padding:0 var(--gutter) .6rem}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{flex:none;font-size:13.5px;padding:.3rem .8rem;white-space:nowrap}
  .site-nav a:first-child{padding-left:0}
  .site-nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--ink)}
  .readout{grid-template-columns:1fr;gap:1.25rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}