/* UMA KIWE — editorial/spartan, warm cream + black, orange as sparing accent only. Reference: artshatta.com (cream/black editorial palette, serif headings, small-caps sans nav, outlined buttons, flat documentary imagery, no color banners). Fonts (Fraunces, Inter) are loaded via in each page's instead of @import here — avoids blocking CSS parsing on the font fetch. */ :root { --primary: #D9622B; /* warm burnt orange — accent only, never a background block */ --primary-dark: #B84A1D; --cream: #F5EFE2; /* single warm background, used everywhere */ --ink: #1C1712; /* near-black warm text */ --black-band: #2E1D14; /* deep warm cocoa-brown band for pull-quote — clearly distinct from artshatta's neutral black, still soft/dark */ --muted: #7A6F5E; /* muted label/caption tone */ --max-width: 720px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--cream); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Wiphala-inspired accent stripe — 7 Andean rainbow bands, softened but still clearly distinct, used ONLY as a thin line, never as a background */ .wiphala-stripe { height: 8px; width: 100%; border-top: 1px solid rgba(28, 23, 18, 0.15); border-bottom: 1px solid rgba(28, 23, 18, 0.15); background: linear-gradient( 90deg, #C1424B 0%, #C1424B 13%, /* red */ #D9895B 15.3%, #D9895B 28%, /* orange */ #E3B94F 30.3%, #E3B94F 43%, /* yellow */ #6E9B6E 45.3%, #6E9B6E 58%, /* green */ #5D84A8 60.3%, #5D84A8 73%, /* blue */ #6B5C96 75.3%, #6B5C96 88%, /* indigo */ #8E6FA0 90.3%, #8E6FA0 100% /* violet */ ); } /* Top nav bar — plain background, thin bottom border, no color block */ .topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1000px; margin: 0 auto; padding: 1.3rem 1.5rem; border-bottom: 1px solid rgba(28, 23, 18, 0.12); } .wordmark { font-family: 'Fraunces', serif; font-weight: 500; font-variation-settings: 'opsz' 40; font-size: 1.3rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; } .topbar nav a { color: var(--ink); text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 1.6rem; padding-bottom: 0.2rem; border-bottom: 1px solid transparent; } .topbar nav a:hover, .topbar nav a.active { border-bottom-color: var(--primary); color: var(--primary-dark); } .lang-switch { margin-left: 1.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; } .lang-switch:hover { color: var(--primary-dark); border-bottom-color: var(--primary); } main { max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem 0; } .image-slot { background: #ECE3D2; color: var(--muted); text-align: center; padding: 5rem 1rem; margin: 0 0 2.2rem; font-size: 0.85rem; } .image-slot img { max-width: 100%; display: block; margin: 0 auto; } .eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; } h1 { font-family: 'Fraunces', serif; font-weight: 500; font-variation-settings: 'opsz' 72; font-size: 2.6rem; line-height: 1.15; margin: 0 0 1.2rem; color: var(--ink); } h2 { font-family: 'Fraunces', serif; font-weight: 500; font-variation-settings: 'opsz' 40; color: var(--ink); font-size: 1.5rem; margin-top: 2.5rem; } p { color: var(--ink); } details { margin: 0.2rem 0; } details summary { cursor: pointer; color: var(--ink); } details summary::marker { color: var(--muted); } details summary:hover { color: var(--primary-dark); } details p { margin: 0.8rem 0 0.4rem; font-size: 0.95rem; color: var(--muted); } .btn { display: inline-block; background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 0.65rem 1.4rem; text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0.3rem 0.6rem 0.3rem 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn:hover { background: var(--primary); border-color: var(--primary); color: var(--cream); } /* Editorial full-bleed pull-quote band */ .quote-band { background: var(--black-band); color: var(--cream); padding: 4rem 1.5rem; margin-top: 3rem; text-align: center; } .quote-band blockquote { max-width: 640px; margin: 0 auto; font-family: Georgia, 'Iowan Old Style', serif; font-style: normal; font-weight: 400; font-size: 1.5rem; line-height: 1.5; } .quote-band cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } footer { text-align: center; padding: 2.2rem 1rem; font-size: 0.82rem; color: var(--muted); } footer p { margin: 0.3rem 0; color: var(--muted); } footer a { color: var(--primary-dark); font-weight: 500; } .fineprint { font-size: 0.78rem; color: var(--muted); opacity: 0.85; }