/* Tambour shared styles: one file for every page.
   Theme each page with a body class:
     theme-tambour   brand pages (hub, about, privacy), green accent
     theme-balanced  Balanced pages, green accent
     theme-waves     Waves pages, purple accent on a cooler neutral */

:root{
  --green:#179e4a; --green-deep:#0e7d39;
  --purple:#6d5cff; --purple-deep:#5742d6;
  --bg:#fbfbf9; --panel:#ffffff; --ink:#15181c; --muted:#5d6670; --line:#e7e8e4;
  --serif:"EB Garamond", Georgia, "Times New Roman", serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --green:#2bc067; --green-deep:#1f9e50;
    --purple:#8f82ff; --purple-deep:#6d5cff;
    --bg:#0f1114; --panel:#171a1e; --ink:#eef0ee; --muted:#9aa2ab; --line:#262a2f;
  }
}

/* Themes. --link is set here, on body, so it follows the theme's accent. */
body{ --accent:var(--green); --accent-deep:var(--green-deep); --link:var(--accent-deep); }
body.theme-waves{
  --accent:var(--purple); --accent-deep:var(--purple-deep);
  --bg:#fbfbfd; --line:#e6e7ee;
}
@media (prefers-color-scheme: dark){
  body{ --link:var(--accent); }
  body.theme-waves{ --bg:#0f1016; --panel:#171922; --ink:#eef0f4; --muted:#9aa2b1; --line:#262a35; }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
     line-height:1.6; -webkit-font-smoothing:antialiased;}

/* Links. Chrome (menu, brand, cards, footer) is never underlined.
   Links inside running text are underlined so they read as links. */
a{color:var(--link); text-decoration:none;}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
article p a, article li a{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb, var(--link) 45%, transparent);
}
article p a:hover, article li a:hover{text-decoration-color:currentColor;}

.wrap{max-width:960px; margin:0 auto; padding:0 24px;}
.wrap.mid{max-width:780px;}
.wrap.narrow{max-width:720px;}

/* Header: where you are (Tambour, Balanced or Waves) on the left; the same menu on every page.
   Bump ?v= on the stylesheet link in every page when this file changes. */
header.site{display:flex; align-items:center; justify-content:space-between; gap:12px 24px;
    flex-wrap:wrap; padding:22px 0;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif);
    font-size:24px; font-weight:600; letter-spacing:-.01em; color:var(--ink);}
.brand svg{width:30px; height:30px; flex:none; color:var(--accent);}
.brand svg.drum{color:var(--ink);}
.brand svg.wave{width:32px; height:32px;}
nav.menu{display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px;}
nav.menu a{color:var(--muted); font-size:15px;}
nav.menu a:hover{color:var(--ink);}
nav.menu a[aria-current="page"]{color:var(--ink); font-weight:600;}
/* Narrow screens: the menu always gets its own row, so it sits in the same place on every page. */
@media (max-width:720px){ header.site{flex-direction:column; align-items:flex-start;} }
@media (max-width:420px){ nav.menu{gap:4px 16px;} nav.menu a{font-size:14.5px;} }

/* Hero (hub + app pages) */
.hero{text-align:center; padding:64px 0 40px;}
.hero .mark{display:block; width:78px; height:78px; margin:0 auto 18px; color:var(--accent);}
.hero .mark.drum{color:var(--ink);}
.hero h1{font-family:var(--serif); font-weight:600; font-size:clamp(40px,7vw,68px);
    line-height:1.04; letter-spacing:-.02em; margin:0 0 16px;}
.hero p.lead{font-size:clamp(18px,2.4vw,22px); color:var(--muted); max-width:620px; margin:0 auto 10px;}
.hero .plat{font-size:15px; color:var(--muted); margin-top:18px;}

/* Screenshots (app pages): three phones in a row; a swipeable strip on narrow screens */
.shots{display:flex; justify-content:center; gap:28px; margin:16px 0 0; padding:20px 0 4px;}
.shots figure{margin:0; flex:0 1 260px; text-align:center;}
.shots img{display:block; width:100%; height:auto; border-radius:14% / 6.4%; background:var(--panel);
    border:1px solid var(--line); box-shadow:0 24px 48px -24px rgba(15,20,30,.35);}
.shots figure:nth-child(2){transform:translateY(-20px);}
.shots figcaption{font-size:14px; color:var(--muted); margin-top:14px;}
.shots-note{text-align:center; font-size:13px; color:var(--muted); opacity:.8; margin:6px 0 0;}
@media (max-width:700px){
  .shots{justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; gap:18px;
         margin:8px -24px 0; padding:20px 24px 8px; scrollbar-width:none;}
  .shots::-webkit-scrollbar{display:none;}
  .shots figure{flex:0 0 70%; scroll-snap-align:center;}
  .shots figure:nth-child(2){transform:none;}
}

/* Feature cards (app pages) */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:48px 0;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px;}
.card h3{font-family:var(--serif); font-weight:600; font-size:21px; margin:0 0 6px;}
.card p{margin:0; color:var(--muted); font-size:15.5px;}
.card .ico{width:30px; height:30px; color:var(--accent); margin-bottom:12px;}

/* Band: what the app won't do */
.band{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:56px 0;}
.band .wrap{padding:44px 24px;}
.band h2{font-family:var(--serif); font-weight:600; font-size:clamp(26px,4vw,34px); margin:0 0 20px; letter-spacing:-.01em;}
ul.points{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px 28px;}
ul.points li{position:relative; padding-left:28px; color:var(--ink); font-size:16px;}
ul.points li::before{content:""; position:absolute; left:0; top:9px; width:14px; height:14px; border-radius:50%; background:var(--accent);}
ul.points li span{color:var(--muted); display:block; font-size:14.5px;}

/* Product cards (home page) */
.apps{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin:36px 0 20px;}
.balanced{--accent:var(--green);}
.waves{--accent:var(--purple);}
.app{display:block; background:var(--panel); border:1px solid var(--line); color:var(--ink);
    border-radius:18px; padding:26px; transition:.15s;}
.app:hover{border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); transform:translateY(-2px);}
.app .ic{width:46px; height:46px; border-radius:12px; margin-bottom:16px; display:flex; align-items:center;
    justify-content:center; background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);}
.app .ic svg{width:28px; height:28px;}
.app h2{font-family:var(--serif); font-weight:600; font-size:26px; margin:0 0 4px;}
.app .tag{color:var(--muted); font-size:15.5px; margin:0 0 14px;}
.app .status{font-size:13px; font-weight:600; color:var(--accent);}

/* Article (About Tambour on the home page + privacy policies) */
.home-about{border-top:1px solid var(--line); margin-top:36px; padding-top:28px;}
.home-about h2:first-child{font-size:clamp(28px,4.5vw,36px); margin-top:8px;}
article{padding:16px 0 48px; line-height:1.65;}
article h1{font-family:var(--serif); font-weight:600; font-size:clamp(34px,6vw,50px); letter-spacing:-.02em; line-height:1.08; margin:16px 0 10px;}
article .updated{color:var(--muted); font-size:14px; margin-bottom:28px;}
article h2{font-family:var(--serif); font-weight:600; font-size:25px; margin:34px 0 8px;}
article p{margin:0 0 16px; font-size:17.5px;}
article p.lead{color:var(--muted); font-size:20px; margin-bottom:26px;}
article ul{margin:0 0 16px; padding-left:22px;}
article li{margin:6px 0;}
article strong{font-weight:600;}
/* Policies: denser text than the About story */
article.policy{padding-bottom:56px;}
article.policy h1{font-size:clamp(34px,6vw,48px); margin-bottom:6px;}
article.policy p{font-size:16px; margin-bottom:14px;}
article.policy p.lead{font-size:18px; margin-bottom:14px;}

/* Footer */
footer.site{text-align:center; color:var(--muted); font-size:14px; padding:40px 0 60px;
    border-top:1px solid var(--line); margin-top:40px;}
footer.site a{color:var(--muted);}
footer.site a:hover{color:var(--ink);}
footer.site .fine{opacity:.7;}