:root{--red:#dc0000;--red-dark:#dc0000;--black:#121111;--white:#f1f1f1;--ink:#1a1a1a;--muted:#444;--bg:#fff;--line:#e5e5e5}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:18px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:var(--red-dark)}
.site-header{background:var(--black);border-bottom:4px solid var(--red)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;min-height:44px}
/* cesar-logo.png is 500px square. The lockup occupies x=108..391, y=76..399; scale that crop to 48px tall. */
.logo-mark{position:relative;display:block;width:calc(283px * 48 / 323);height:48px;overflow:hidden;flex:none}
.logo-mark img{position:absolute;display:block;width:calc(500px * 48 / 323);height:calc(500px * 48 / 323);max-width:none;left:calc(-108px * 48 / 323);top:calc(-76px * 48 / 323)}
.section-logo{display:block;width:max-content;max-width:100%;background:#121111;padding:12px 16px;border-radius:4px;margin:0 0 14px;line-height:0}
.section-logo img{display:block;width:150px;max-width:100%;height:auto}
nav{display:flex;flex-wrap:wrap}
nav a{color:#fff;text-decoration:none;padding:10px 12px;min-height:44px;display:flex;align-items:center;font-size:1rem}
nav a:hover,nav a:focus{color:#ff5a5a;text-decoration:underline}
.hero{padding-top:56px;padding-bottom:32px}
h1{font-size:clamp(2.2rem,6vw,3.5rem);margin:0 0 16px;color:var(--black);line-height:1.1}
h1::after{content:"";display:block;width:72px;height:6px;background:var(--red);margin-top:16px}
.intro{max-width:680px;font-size:1.15rem;color:var(--muted);margin:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:64px}
.tile{display:block;position:relative;border:2px solid var(--black);border-top:8px solid var(--red);border-radius:6px;padding:24px;text-decoration:none;color:var(--ink);background:#fff;transition:transform .15s}
a.tile:hover,a.tile:focus{transform:translateY(-3px);border-color:var(--red)}
.tile h2{margin:0 0 8px;color:var(--black);font-size:1.4rem}
.tile p{margin:0 0 12px;color:var(--muted)}
.tile-link{color:var(--red-dark);font-weight:700}
.badge{display:inline-block;background:var(--black);color:#fff;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:3px;margin-bottom:10px}
.site-footer{background:var(--black);color:#ddd;padding:28px 0;border-top:4px solid var(--red)}
.social{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.social a{color:#fff;min-height:44px;display:flex;align-items:center}
.social a:hover{color:#ff5a5a}
.copy{margin:0;font-size:.9rem;color:#bbb}
@media (max-width:800px){.tiles{grid-template-columns:1fr}.hero{padding-top:36px}}
div.tile{border-color:#bbb;border-top-color:var(--red);cursor:default}
.about{max-width:760px;padding-top:48px;padding-bottom:64px}
.about h2{margin-top:36px;color:var(--black)}
.about li{margin-bottom:12px}
.signoff{font-weight:700}
.tile-art{display:block;width:100%;max-width:300px;height:auto;border-radius:4px;margin-bottom:14px}