/* blurryberry site — brand v2.1
   Cream #F2EEEB · Berry Plum #692F48 · Sage Grey #D0D7D0 · Soft Lavender #B8A0B8 */
:root {
  --cream: #F2EEEB;
  --berry: #692F48;
  --sage: #D0D7D0;
  --lavender: #B8A0B8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--cream);
  color: var(--berry);
  line-height: 1.55;
  font-size: 17px;
}
.wrap { max-width: 680px; margin: 0 auto; padding: 48px 24px 96px; }
header { padding: 32px 24px 0; max-width: 680px; margin: 0 auto; }
.brand {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--berry);
  text-decoration: none;
}
nav { margin-top: 8px; font-size: 15px; }
nav a { color: var(--berry); text-decoration: none; opacity: 0.65; margin-right: 16px; }
nav a:hover, nav a.active { opacity: 1; text-decoration: underline; }
h1 { font-size: 30px; font-weight: 700; line-height: 1.15; margin: 16px 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 600; margin: 36px 0 8px; }
.eff { color: var(--berry); opacity: 0.6; font-size: 14px; margin: 0 0 8px; }
p, li { font-size: 17px; }
a { color: var(--berry); }
.lang {
  display: inline-flex; gap: 4px; margin: 8px 0 24px;
  border: 1px solid var(--lavender); border-radius: 999px; padding: 3px; font-size: 14px;
}
.lang a { text-decoration: none; padding: 4px 14px; border-radius: 999px; opacity: 0.7; color: var(--berry); }
/* Highlight follows the selected language. Default (no hash / #en) = EN active. */
.lang a[href="#en"] { background: var(--berry); color: var(--cream); opacity: 1; }
.lang a[href="#es"] { background: transparent; color: var(--berry); opacity: 0.7; }
body:has(#es:target) .lang a[href="#en"] { background: transparent; color: var(--berry); opacity: 0.7; }
body:has(#es:target) .lang a[href="#es"] { background: var(--berry); color: var(--cream); opacity: 1; }
.divider { border: none; border-top: 1px solid var(--sage); margin: 64px 0; }
.callout {
  background: var(--sage); border-radius: 14px; padding: 16px 20px; margin: 24px 0; font-size: 16px;
}
footer { max-width: 680px; margin: 0 auto; padding: 0 24px 64px; font-size: 14px; opacity: 0.6; }
.lang-section { display: none; }
.lang-section:target { display: block; }
/* default-visible English when no hash */
#en { display: block; }
body:has(#es:target) #en { display: none; }