@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink:#1c2533; --muted:#5b6573; --line:#e3e7ee; --accent:#4a6fa8;
  --accent-soft:#eef3fb; --bubble-bd:#d6e2f6; --bg:#ffffff;
  --bubble:#4a6fa8; /* site-wide bubble text: links, TL;DR, menu, outlet names */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.6 "Fira Sans","Helvetica Neue",Arial,sans-serif; overflow-x:hidden;}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px; margin:0 auto; padding:42px 22px 80px}

/* ===== HOME (centered, Michaillat-style) ===== */
.home{max-width:720px; margin:0 auto; text-align:left}
.home .photo{width:150px; height:150px; border-radius:50%; margin:6px auto 16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2b4f8a,#5b86c4); color:#fff;
  font-size:40px; font-weight:700; letter-spacing:1px; box-shadow:0 8px 26px rgba(35,74,134,.25)}
.home h1{font-size:32px; margin:0 0 4px; letter-spacing:-.3px}
.home .role{color:var(--muted); margin:0 0 14px}
.home .bio{font-size:16.5px; margin:0 0 14px; max-width:680px}
.home .bio a{font-weight:500}

.icons{display:flex; justify-content:flex-start; flex-wrap:wrap; gap:10px 18px; margin:12px 0 22px; font-size:20px}
.icons a{display:inline-flex; align-items:center; gap:7px; color:var(--muted); line-height:1}
.icons a span{font-size:14.5px; font-weight:500}
.icons a:hover{color:var(--accent); text-decoration:none}

/* home: section links as bubbles (wrap onto multiple lines) */
.menu{display:flex; justify-content:flex-start; flex-wrap:wrap; gap:9px; padding:6px 0 2px; margin-top:2px}
.menu a{background:var(--accent-soft); border:1px solid var(--bubble-bd); border-radius:8px;
  padding:7px 15px; color:var(--bubble); font-size:15.5px; font-weight:500; line-height:1.3}
.menu a:hover{background:#e2ecfb; text-decoration:none}
.menu .break{flex-basis:100%; height:0}

/* subpage top menu (right side of the bar; dark nav text, current underlined) */
nav.main{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:1px 3px; flex:0 1 auto}
nav.main a{color:var(--ink); font-size:15px; padding:2px 7px 5px; white-space:nowrap;
  background-repeat:repeat-x; background-position:left bottom; background-size:48px 6px;
  background-image:none}
nav.main a:hover{color:var(--accent); text-decoration:none}
nav.main a.cur{color:var(--ink); font-weight:600; text-decoration:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='6' viewBox='0 0 48 6'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.08' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.1'/%3E%3C/filter%3E%3Cpath filter='url(%23v)' d='M0 4 C 8 3.5, 16 3.6, 24 4.1 C 32 4.5, 40 4.4, 48 4.0' fill='none' stroke='%234a6fa8' stroke-width='2.3' stroke-linecap='round' stroke-opacity='0.9'/%3E%3C/svg%3E")}
nav.main .s{display:none}
@media(max-width:820px){nav.main{flex-wrap:wrap; justify-content:flex-start}}

/* ===== full-width top bar: square + name (left), menu (right) ===== */
header.site{position:relative; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap;
  gap:8px 22px; background:var(--accent-soft);
  width:100vw; margin-left:50%; transform:translateX(-50%); margin-top:-34px; margin-bottom:32px;
  padding:15px max(22px, calc(50vw - 538px)); text-align:left}
/* hand-drawn pencil-sketch dividers above and below the header (rough edge + doubled stroke) */
header.site::before,
header.site::after{content:""; position:absolute; left:0; right:0; height:10px;
  background-repeat:repeat-x; background-position:left center; background-size:320px 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='10' viewBox='0 0 320 10'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.06' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.4'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='none' stroke='%234a6fa8' stroke-linecap='round'%3E%3Cpath d='M0 5.1 C 18 4.5, 34 4.6, 52 5.2 C 70 5.6, 92 5.5, 110 5.0 C 126 4.6, 150 4.5, 168 5.1 C 188 5.6, 206 5.7, 226 5.1 C 244 4.7, 268 4.6, 286 5.1 C 302 5.4, 312 5.3, 320 5.1' stroke-width='2.0' stroke-opacity='0.55'/%3E%3Cpath d='M0 5.7 C 18 5.1, 34 5.2, 52 5.8 C 70 6.2, 92 6.1, 110 5.6 C 126 5.2, 150 5.1, 168 5.7 C 188 6.2, 206 6.3, 226 5.7 C 244 5.3, 268 5.2, 286 5.7 C 302 6.0, 312 5.9, 320 5.7' stroke-width='1.1' stroke-opacity='0.3'/%3E%3C/g%3E%3C/svg%3E")}
header.site::before{top:-5px}
header.site::after{bottom:-5px}
.brand{display:inline-flex; align-items:center; gap:10px; font-size:19px; font-weight:700;
  color:var(--ink); letter-spacing:-.2px; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .sq{width:15px; height:15px; border-radius:3px; background:var(--accent); flex:0 0 auto}

/* ===== section headings: bold, large, vertical bar ===== */
h2{font-size:22px; font-weight:700; letter-spacing:-.2px; margin:30px 0 16px;
  display:flex; align-items:center; gap:11px}
h2::before{content:""; width:5px; height:21px; background:var(--accent); border-radius:3px; flex:0 0 auto}

/* ===== paper entries: dotted separators + bubble links ===== */
.paper{padding:15px 0; background-repeat:repeat-x; background-position:left bottom; background-size:320px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='8' viewBox='0 0 320 8'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.06' numOctaves='2' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.2'/%3E%3C/filter%3E%3Cg filter='url(%23q)' fill='none' stroke='%23c4cad6' stroke-linecap='round'%3E%3Cpath d='M0 4.0 C 18 3.5, 34 3.6, 52 4.1 C 70 4.5, 92 4.4, 110 3.9 C 126 3.6, 150 3.5, 168 4.0 C 188 4.5, 206 4.6, 226 4.0 C 244 3.6, 268 3.5, 286 4.0 C 302 4.3, 312 4.2, 320 4.0' stroke-width='2.1' stroke-opacity='0.95'/%3E%3Cpath d='M0 4.5 C 18 4.0, 34 4.1, 52 4.6 C 70 5.0, 92 4.9, 110 4.4 C 126 4.1, 150 4.0, 168 4.5 C 188 5.0, 206 5.1, 226 4.5 C 244 4.1, 268 4.0, 286 4.5 C 302 4.8, 312 4.7, 320 4.5' stroke-width='1.1' stroke-opacity='0.45'/%3E%3C/g%3E%3C/svg%3E")}
.paper:last-of-type{background-image:none}
.paper .t{font-weight:600; font-size:17px; line-height:1.42}
.paper .a{color:var(--muted); font-size:15px; margin:2px 0 8px}
.paper .a em{font-style:italic}
/* section lead-in sentence: larger, dark ink (overrides .a defaults) */
.paper .a.lead{font-size:16px; color:var(--ink)}
.paper .auth{color:var(--muted); font-size:15px; margin:1px 0 8px}
.paper .outlet{font-size:15px; margin:3px 0 1px; color:var(--ink); font-weight:500}
.paper .outlet em{font-style:normal; font-weight:700; color:var(--bubble)}
hr.trule{border:none; height:8px; margin:9px 0 2px; background-repeat:repeat-x; background-position:left center; background-size:320px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='8' viewBox='0 0 320 8'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.06' numOctaves='2' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.2'/%3E%3C/filter%3E%3Cg filter='url(%23r)' fill='none' stroke='%23c4cad6' stroke-linecap='round'%3E%3Cpath d='M0 4.0 C 18 3.5, 34 3.6, 52 4.1 C 70 4.5, 92 4.4, 110 3.9 C 126 3.6, 150 3.5, 168 4.0 C 188 4.5, 206 4.6, 226 4.0 C 244 3.6, 268 3.5, 286 4.0 C 302 4.3, 312 4.2, 320 4.0' stroke-width='2.1' stroke-opacity='0.95'/%3E%3Cpath d='M0 4.5 C 18 4.0, 34 4.1, 52 4.6 C 70 5.0, 92 4.9, 110 4.4 C 126 4.1, 150 4.0, 168 4.5 C 188 5.0, 206 5.1, 226 4.5 C 244 4.1, 268 4.0, 286 4.5 C 302 4.8, 312 4.7, 320 4.5' stroke-width='1.1' stroke-opacity='0.45'/%3E%3C/g%3E%3C/svg%3E")}

.links{font-size:13.7px; line-height:2.1; margin-top:6px}
.links + .links{margin-top:2px}
.links .sep{display:none}
.links .lbl{display:inline-block; margin-right:4px; color:var(--muted); font-weight:600}
.links a, .links button{display:inline-block; margin:0 6px 4px 0;
  background:var(--accent-soft); border:1px solid var(--bubble-bd); border-radius:7px;
  padding:3px 11px; color:var(--bubble); font:inherit; cursor:pointer}
.links a:hover, .links button:hover{background:#e2ecfb; text-decoration:none}
.badge{display:inline-block; font-size:12px; font-weight:600; color:#8a4b00; background:#fff3e2;
  border:1px solid #ffd9a8; border-radius:6px; padding:0 7px; margin-left:6px; vertical-align:1px}
/* TL;DR: blue accent (soft border), shared by chip + bubble */
.tldr{display:none; margin:9px 0 2px; padding:9px 14px; background:var(--accent-soft);
  border:1px solid var(--bubble-bd); border-radius:9px; font-size:14.7px;
  color:var(--accent); line-height:1.5; max-width:760px}
.tldr.open{display:block}
.links button.tl{background:var(--accent-soft); border-color:var(--bubble-bd); color:var(--bubble); font-weight:400}
.links button.tl:hover{background:#e2ecfb}

/* ===== news (home) ===== */
.newsblock{max-width:680px; margin:26px 0 0; text-align:left}
ul.news{list-style:none; padding:0; margin:8px 0 0}
ul.news li{margin:8px 0; font-size:16px; display:flex; gap:12px}
ul.news .date{flex:0 0 84px; color:var(--accent); font-weight:600; font-size:14.5px}

.note{background:var(--accent-soft); border:1px solid var(--bubble-bd); border-radius:9px;
  padding:11px 15px; font-size:14px; color:#2a3e5e; margin:18px 0 0; text-align:left}
.bio-photo{float:right; width:210px; margin:4px 0 14px 24px; border-radius:12px;
  box-shadow:0 8px 26px rgba(35,74,134,.18)}
@media (max-width:560px){
  .bio-photo{float:none; display:block; width:160px; margin:0 auto 18px}
}

footer{margin-top:46px; padding-top:16px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13.5px; text-align:center}