/* haniasaad.com bio site. Look and colours modelled on troyhunt.com (owner, 2026-11-07), own code.
   Fixed translucent top bar, full-width photo hero, centred serif sections, a side column.
   No fonts or files from other servers. Approved mockups: stage2_bio_site/mockups/bio_*.html (checkpoint 95). */
:root{--page:#FCFBF7;--ink:#403D34;--soft:#5E5A4F;--mute:#857F70;--link:#CCB285;--accent:#AE915D;--bar:#2C2A24;--btn:#565246;--panel:#EEEDEA;--line:#E2DFD6}
*{box-sizing:border-box}
html{scroll-padding-top:70px}
body{margin:0;background:var(--page);color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:400;padding:8px 14px;background:var(--bar);color:var(--page);font:700 13px Tahoma,Verdana,sans-serif}
.skip:focus{left:8px}

/* top bar: stays at the top while scrolling */
.tb-bar{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tb-bar .in{max-width:1095px;margin:0 auto;padding:0 24px;height:58px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.tb-nav{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}
.tb-nav a{color:#FCFBF7;font:700 12px/1 Tahoma,Verdana,sans-serif;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.tb-nav a:hover,.tb-nav a[aria-current]{border-bottom-color:var(--link)}
.tb-social{display:flex;gap:8px;flex:none}
.tb-social a{width:32px;height:32px;border-radius:50%;background:rgba(252,251,247,.13);display:grid;place-items:center;color:#FCFBF7;font:700 12px Tahoma,sans-serif}
.tb-social a:hover{background:rgba(252,251,247,.25)}

/* tan strip under the bar */
.tb-strip{position:relative;z-index:1;margin-top:58px;background:rgba(174,145,93,.92);color:#1f1d18;font:13px Tahoma,Verdana,sans-serif}
.tb-strip .in{max-width:1095px;margin:0 auto;padding:9px 24px}
.tb-strip b{font-weight:700}
.tb-strip a{text-decoration:underline}

/* photo hero */
.tb-hero{position:relative;min-height:470px;display:flex;align-items:center;justify-content:center;text-align:center;background:#000 center 30%/cover no-repeat;color:#FCFBF7;overflow:hidden}
.tb-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55))}
.tb-hero .in{position:relative;max-width:760px;padding:60px 24px}
.tb-hero h1{margin:0 0 14px;font-weight:400;font-size:46px;line-height:1.1}
.tb-hero p{margin:0;font-size:21px;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.tb-hero p a{color:var(--link);white-space:nowrap}
.tb-hero.first{margin-top:58px}
.tb-hero.home{background-image:url("/photos/event_01.jpg");background-size:140% auto;background-position:92% 36%}
/* wide screens (A29 addendum 1): taller banners that keep Hani and the slide in the picture */
@media (min-width:1300px){.tb-hero.home{min-height:clamp(470px,33vw,640px);background-size:118% auto;background-position:88% 30%}}
.tb-hero.services{min-height:340px;background-image:url("/photos/event_06.jpg");background-position:60% 40%}
@media (min-width:1100px){.tb-hero.services{min-height:clamp(340px,30vw,580px);background-position:60% 24%}}
.tb-hero.about{min-height:360px;background-image:url("/hani-instructor.webp");background-position:62% 22%}
.tb-hero.about h1,.tb-hero.plain h1{font-size:52px;margin:0}
.tb-hero.plain{min-height:220px;background:var(--bar)}
.tb-hero.plain::before{display:none}

/* body: main column + side column */
.tb-wrap{max-width:1095px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:48px}
.tb-main{padding:10px 0 40px}
.tb-post{text-align:center;padding:42px 0 38px;border-bottom:1px solid var(--line)}
.tb-post:last-child{border-bottom:0}
.tb-post h2{margin:0 0 6px;font-weight:400;font-size:32px;line-height:1.25}
.tb-post h2 a:hover{color:var(--accent)}
.tb-post .meta{font-size:13px;color:var(--mute);margin-bottom:22px}
.tb-post p{text-align:left;font-size:16.5px;color:var(--soft);margin:0 0 18px}
.tb-post p.cap::first-letter{float:left;font-size:58px;line-height:.9;padding:6px 8px 0 0;color:var(--ink)}
.tb-post .more{color:var(--accent)}
.tb-pill{display:inline-block;padding:4px 14px;border-radius:20px;background:var(--panel);color:var(--btn);font:700 11px Tahoma,Verdana,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.tb-pill:hover{background:var(--btn);color:var(--page)}

.tb-side{padding:42px 0 40px}
.tb-box{margin-bottom:34px}
.tb-box h2{margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:400;font-size:20px}
.tb-box p{margin:0 0 10px;font-size:14.5px;color:var(--soft)}
.tb-box a.lnk{color:var(--accent);border-bottom:1px solid var(--link)}
.tb-talk{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;margin-bottom:14px}
.tb-talk img{width:84px;height:60px;object-fit:cover;border-radius:3px}
.tb-talk b{display:block;font-weight:400;font-size:15px;line-height:1.3}
.tb-talk small{color:var(--mute);font-size:12.5px}
a.tb-talk:hover b{color:var(--accent)}
.tb-me{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.tb-me img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:62% 22%}
.tb-btn{display:inline-block;padding:9px 18px;border-radius:4px;background:var(--btn);color:var(--page);font:700 12px Tahoma,Verdana,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.tb-btn:hover{background:var(--bar)}
.tb-steps{margin:0;padding:0;list-style:none;font-size:14.5px;color:var(--soft)}
.tb-steps li{margin-bottom:4px}

/* Consulting page */
.tb-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 0;padding:0;list-style:none}
.tb-chips li{padding:5px 11px;border-radius:4px;background:rgba(174,145,93,.12);border:1px solid rgba(174,145,93,.45);color:#6D5A33;font:12.5px Tahoma,Verdana,sans-serif}
.tb-list{list-style:none;margin:0;padding:0;text-align:left;display:grid;gap:14px}
.tb-list li{padding:14px 16px;background:var(--panel);border-radius:4px}
.tb-list b{display:block;font-weight:700;font-size:16px;color:var(--ink);margin-bottom:2px}
.tb-list span{color:var(--soft);font-size:15px}
.tb-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.tb-jump a{padding:5px 12px;border:1px solid rgba(252,251,247,.5);border-radius:20px;font:12.5px Tahoma,Verdana,sans-serif}
.tb-jump a:hover{border-color:var(--link);color:var(--link)}

/* About and Privacy pages: one wide reading column */
.tb-article{max-width:820px;margin:0 auto;padding:44px 24px 60px}
.tb-article h2{font-weight:400;font-size:30px;margin:42px 0 14px}
.tb-article p{font-size:17px;color:var(--soft);margin:0 0 18px}
.tb-article p.cap::first-letter{float:left;font-size:64px;line-height:.9;padding:6px 10px 0 0;color:var(--ink)}
.tb-article a{color:var(--accent);border-bottom:1px solid var(--link)}
.tb-article a:hover{color:var(--ink)}
.tb-article ul{margin:0 0 18px;padding-left:22px;color:var(--soft);font-size:17px}
.tb-article ul b{color:var(--ink)}
.tb-article figure{margin:26px 0}
.tb-article figure img{width:100%;height:auto;border-radius:3px}
.tb-article figcaption{font-size:13px;color:var(--mute);margin-top:6px;text-align:center}
.tb-article .small{font-size:14px;color:var(--mute)}

/* Talks page */
.tb-talkpost{padding-top:6px}
.tb-talkmeta{margin:-8px 0 14px !important;font:13px Tahoma,Verdana,sans-serif !important;color:var(--mute) !important;letter-spacing:.03em}
.tb-figs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.tb-figs figure{margin:0}
.tb-talkpost figure img{aspect-ratio:3/2;object-fit:cover}
.tb-talkpost img[src$="event_04.jpg"]{object-position:50% 62%}
@media (max-width:600px){.tb-figs{grid-template-columns:1fr}}

/* footer */
.tb-foot{background:var(--bar);color:#B9B3A3;font:13px Tahoma,Verdana,sans-serif}
.tb-foot .in{max-width:1095px;margin:0 auto;padding:26px 24px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.tb-foot a:hover{color:var(--link)}
.tb-foot .legal{flex-basis:100%;margin:0;color:#857F70;font-size:12px}

@media (max-width:900px){
  .tb-wrap{grid-template-columns:1fr;gap:0}
  .tb-side{padding-top:10px;border-top:1px solid var(--line)}
  .tb-hero.home{background-size:cover;background-position:47% 35%}
}
@media (max-width:600px){
  .tb-bar .in{padding:0 16px}
  .tb-nav{gap:16px}
  .tb-social{display:none}
  .tb-strip .in,.tb-wrap,.tb-foot .in{padding-left:16px;padding-right:16px}
  .tb-hero{min-height:380px}
  .tb-hero h1{font-size:36px}
  .tb-hero p{font-size:18px}
  .tb-hero.about h1,.tb-hero.plain h1{font-size:40px}
  .tb-post h2{font-size:26px}
  .tb-article{padding:32px 16px 48px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}