/* durach.ai: header band in the LinkedIn banner look (navy with a soft glow, near-white
   text, mint accent), the rest on white with navy ink. Avenir Next. Oct 2026. */
:root{
  --bg:#FFFFFF; --ink:#0B1626; --muted:#5E6A7A; --line:#E3E7ED; --accent:#0E7C69;
  --navy:#030E1B; --on-navy:#F9FAFA; --on-navy-muted:#97A3B4; --mint:#A3F4E3;
  --panel:#F2F5F8; --max:44rem;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; color:var(--ink); background:transparent;
  font-family:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:1.125rem; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--accent)}
.wrap{max-width:var(--max); margin:0 auto; padding:2.5rem 1.25rem 4rem}
/* navy header band, like the banner */
.hero{background:var(--navy) radial-gradient(ellipse 80% 120% at 88% 0%,#0B2340 0%,#061627 45%,var(--navy) 85%) no-repeat; color:var(--on-navy)}
.hero .wrap{padding-bottom:3.25rem}
.hero a{color:var(--on-navy)}
.hero .kicker{color:var(--on-navy-muted)}
.hero h1{margin:0}
.hero .accent{color:var(--mint)}
.hero header.top .out a{color:var(--on-navy-muted)}
.hero header.top .out a[aria-current="page"]{color:var(--on-navy); border-bottom:2px solid var(--mint)}
.hero header.top .out a:hover, .hero a:hover{color:var(--mint)}
header.top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:3.5rem}
header.top .brand{font-weight:700; letter-spacing:-.01em; text-decoration:none; font-size:1.125rem}
header.top nav a{margin-left:1.25rem; text-decoration:none; color:var(--muted)}
header.top nav a[aria-current="page"]{color:var(--ink); border-bottom:2px solid var(--accent)}
header.top nav a:hover{color:var(--accent)}
header.top .out a{margin-left:1.25rem; text-decoration:none; color:var(--muted)}
header.top .out a:hover{color:var(--accent)}
.kicker{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 1rem}
h1{font-size:clamp(2rem,5vw,2.75rem); line-height:1.1; letter-spacing:-.015em; margin:0 0 2.5rem; font-weight:600}
h2{font-size:1.5rem; line-height:1.2; letter-spacing:-.01em; margin:3rem 0 1rem; font-weight:700}
h3{font-size:1.2rem; margin:0 0 .35rem; font-weight:700}
p{margin:0 0 1.1rem}
.rule{height:6px; width:96px; background:var(--accent); margin:0 0 2rem}
.lead{font-size:1.3rem; line-height:1.4}
.muted{color:var(--muted)}
ul.plain{list-style:none; padding:0; margin:0}
.principles li{padding:.5rem 0; font-weight:500}
.principles .why{display:block; font-weight:400; color:var(--muted)}
.links a{margin-right:1.5rem}
/* writing list */
.entry{padding:1.25rem 0; border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry .meta{font-size:.9rem; color:var(--muted); margin-bottom:.25rem}
.entry h3 a{text-decoration:none}
.entry h3 a:hover{text-decoration:underline}
.entry p{margin:0}
.contact{margin-top:2.5rem; color:var(--muted)}
.contact a{color:var(--ink)}
.contact a:hover{color:var(--accent)}
/* piece pages */
.piece{padding-top:.5rem}
.piece p{font-size:1.15rem; line-height:1.6; margin:0 0 1.15rem}
.piece h2{font-size:1.35rem; margin:2.25rem 0 .75rem}
.piece .discuss{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--line); color:var(--muted); font-size:1rem}
.piece .discuss a{color:var(--accent); font-weight:600}
.piece .back{font-size:1rem}
/* photo next to the name */
.who{display:flex; align-items:center; gap:.85rem; margin:0 0 1rem}
.who img{width:56px; height:56px; border-radius:50%; object-fit:cover; display:block}
.who .kicker{margin:0}
.facts li{padding:.5rem 0}
.piece ul.plain{margin:0 0 1.25rem}
.piece .facts li, .piece .principles li{font-size:1.1rem; line-height:1.55}
/* skills */
.skill{padding:1.5rem 0; border-top:1px solid var(--line)}
.skill:last-of-type{border-bottom:1px solid var(--line)}
.skill .why{color:var(--muted)}
.install{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:1.5rem 0}
code, pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95em}
pre.cmd{margin:0; background:var(--ink); color:var(--bg); padding:.75rem 1rem; border-radius:10px; overflow-x:auto; flex:1 1 auto}
button.copy{font:inherit; font-size:.95rem; font-weight:600; padding:.65rem 1rem; border-radius:10px; border:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer}
button.copy:hover{background:var(--ink); color:var(--bg)}
.note{background:var(--panel); border-radius:12px; padding:1rem 1.25rem; font-size:1rem}
footer{margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--accent)}
/* consent bar (analytics.js) */
.consent{position:fixed; left:1rem; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom, 0px)); max-width:40rem; margin:0 auto; background:var(--navy); color:var(--on-navy); border-radius:12px; padding:.9rem 1.1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.95rem; box-shadow:0 6px 24px rgba(3,14,27,.25); z-index:10}
.consent p{margin:0; flex:1 1 16rem}
.consent a{color:var(--mint)}
.consent-buttons{display:flex; gap:.5rem}
.consent button{font:inherit; font-size:.9rem; font-weight:600; padding:.5rem .9rem; border-radius:8px; border:1px solid var(--on-navy-muted); background:transparent; color:var(--on-navy); cursor:pointer}
.consent button.primary{background:var(--mint); border-color:var(--mint); color:var(--navy)}