/* Styling for the written pages (/banana-water/ and friends).
   These pages are plain static HTML — no template engine, no React, nothing
   fetched from a CDN — so that everything on them is present in the raw
   response. Search crawlers and AI crawlers that never run JavaScript still
   get the whole page. This file sits on top of the Organic design system in
   _ds/ and only adds what long-form prose needs. */

:root{
  --banana-100:#fff9dd; --banana-200:#fff0ad; --banana-300:#ffe371;
  --banana-400:#fdd23c; --banana-500:#f2bd16; --banana-600:#cf9d06;
  --banana-700:#9d7803; --banana-800:#6f5504;
  --brand-red:#d33a2c; --brand-yellow:#b88a05;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--banana-100);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  text-wrap:pretty;
  overflow-x:clip;
}

.brand-ba{color:var(--brand-red)}
.brand-nana{color:var(--brand-yellow)}

a{color:var(--color-accent-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--color-accent-600)}

/* — page frame — */
.wrap{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,40px);box-sizing:border-box}
.wrap-wide{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,72px);box-sizing:border-box}

.site-nav{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px clamp(20px,5vw,72px);max-width:1240px;margin:0 auto;box-sizing:border-box;
}
.site-nav .mark{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(19px,2.4vw,23px);letter-spacing:-0.02em;
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-text);
}
.site-nav .dot{
  width:26px;height:26px;border-radius:50%;
  background:var(--banana-400);display:inline-block;flex:none;
}
.site-nav .spacer{flex:1 1 auto}
.site-nav a.navlink{font-size:15px;font-weight:600;color:var(--color-text);text-decoration:none;white-space:nowrap}
.site-nav a.navcta{
  text-decoration:none;background:var(--banana-500);color:var(--color-accent-900);
  border-color:var(--banana-500);white-space:nowrap;
}

/* — breadcrumb — */
.crumbs{
  font-size:14px;padding:8px 0 0;
  color:color-mix(in srgb, var(--color-text) 60%, transparent);
}
.crumbs a{color:inherit}
.crumbs span[aria-current]{color:color-mix(in srgb, var(--color-text) 80%, transparent)}

/* — article — */
article{padding:clamp(20px,4vw,36px) 0 clamp(40px,6vw,72px)}

article h1{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(33px,5.2vw,52px);line-height:1.08;letter-spacing:-0.02em;
  margin:14px 0 0;
}
article h2{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(25px,3.4vw,34px);line-height:1.15;letter-spacing:-0.02em;
  margin:clamp(38px,5vw,56px) 0 0;
}
article h3{
  font-family:var(--font-heading);font-weight:400;
  font-size:clamp(20px,2.4vw,25px);line-height:1.2;
  margin:clamp(26px,3vw,34px) 0 0;
}
article p{margin:14px 0 0}
article ul,article ol{margin:16px 0 0;padding-left:24px}
article li{margin:8px 0 0}
article li::marker{color:var(--banana-700)}

.standfirst{
  font-size:clamp(18px,2vw,21px);line-height:1.55;margin:18px 0 0;
  color:color-mix(in srgb, var(--color-text) 78%, transparent);
}
.byline{
  font-size:14px;margin:20px 0 0;
  color:color-mix(in srgb, var(--color-text) 58%, transparent);
}
.eyebrow{
  display:block;font-size:13px;font-weight:700;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--color-accent-700);
}

/* The short answer box at the top of each page. This is the paragraph an AI
   engine or a featured snippet is most likely to lift, so it is first, it is
   self-contained, and it answers the question in the heading directly. */
.answer{
  background:var(--color-bg);border-left:5px solid var(--banana-500);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:clamp(20px,3vw,28px);margin:clamp(26px,3vw,34px) 0 0;
}
.answer p{margin:0}
.answer p + p{margin-top:12px}
.answer .eyebrow{margin-bottom:10px}

/* — tables — */
.table-scroll{overflow-x:auto;margin:20px 0 0}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:16px}
caption{
  text-align:left;font-size:14px;padding-bottom:10px;
  color:color-mix(in srgb, var(--color-text) 60%, transparent);
}
th,td{
  text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--color-divider);vertical-align:top;
}
thead th{
  font-weight:700;font-size:13px;letter-spacing:0.05em;text-transform:uppercase;
  background:var(--banana-200);border-bottom:2px solid var(--banana-400);
}
thead th:first-child{border-top-left-radius:12px}
thead th:last-child{border-top-right-radius:12px}
tbody tr:nth-child(even){background:color-mix(in srgb, var(--color-bg) 55%, transparent)}

/* — callouts — */
.note{
  background:var(--color-accent-2-100);
  border-radius:var(--radius-lg);
  padding:clamp(18px,2.6vw,24px);margin:24px 0 0;
  font-size:16px;
}
.note p{margin:0}
.note p + p{margin-top:10px}
.note strong{color:var(--color-accent-2-800)}

/* — FAQ — */
.faq{margin:16px 0 0}
.faq details{
  background:var(--color-bg);border-radius:var(--radius-md);
  padding:16px clamp(16px,2.4vw,22px);margin:10px 0 0;
}
.faq summary{
  cursor:pointer;font-weight:700;font-size:17px;
  list-style:none;display:flex;gap:12px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;flex:none;
  font-family:var(--font-heading);color:var(--banana-700);font-size:22px;line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:12px 0 0;font-size:16px}

/* — signup — */
.signup{
  background:var(--banana-400);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,44px);margin:clamp(40px,6vw,64px) 0 0;
  text-align:center;color:var(--color-accent-900);
}
.signup h2{margin:0;color:var(--color-accent-900);font-size:clamp(24px,3.2vw,34px)}
.signup p{margin:14px auto 0;max-width:48ch;color:var(--color-accent-900)}
.signup form{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  align-items:stretch;max-width:520px;margin:22px auto 0;
}
.signup .input{
  flex:1 1 220px;min-height:52px;font-size:16px;
  background:var(--banana-100);border-color:var(--banana-600);
}
.signup .btn{
  min-height:52px;padding:0 30px;font-size:16px;flex:0 1 auto;
  background:var(--color-accent-900);border-color:var(--color-accent-900);color:var(--banana-200);
}
.signup .fineprint{font-size:14px;margin-top:12px}

/* — related — */
.related{margin:clamp(40px,6vw,64px) 0 0}
.related ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:700px){.related ul{grid-template-columns:1fr 1fr}}
.related li{margin:0}
.related a{
  display:block;background:var(--color-bg);border-radius:var(--radius-md);
  padding:18px 20px;text-decoration:none;color:var(--color-text);height:100%;
  box-sizing:border-box;
}
.related a:hover{background:var(--banana-200)}
.related a strong{display:block;font-family:var(--font-heading);font-weight:400;font-size:19px}
.related a span{
  display:block;font-size:15px;margin-top:5px;
  color:color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* — sources — */
.sources{margin:clamp(36px,5vw,52px) 0 0;font-size:15px}
.sources h2{font-size:clamp(20px,2.4vw,24px)}
.sources ol{margin:14px 0 0;padding-left:22px}
.sources li{margin:8px 0 0;color:color-mix(in srgb, var(--color-text) 72%, transparent)}

/* — footer — */
.site-footer{
  max-width:1240px;margin:0 auto;
  padding:clamp(32px,4vw,48px) clamp(20px,5vw,72px) 48px;box-sizing:border-box;
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
  font-size:14px;color:color-mix(in srgb, var(--color-text) 66%, transparent);
  border-top:1px solid var(--color-divider);
}
.site-footer .mark{font-family:var(--font-heading);font-size:16px;text-decoration:none}
.site-footer a{color:inherit}
.site-footer .spacer{flex:1 1 auto}