:root{
  --canvas:#0F0F0F; --ink:#FFFFFF; --accent:#2DD4FF;
  --muted:rgba(255,255,255,.60); --faint:rgba(255,255,255,.12);
  --panel:#161616; --measure:40rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:Manrope,'Helvetica Neue',Arial,sans-serif;
  font-size:18px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
/* links inside running text get an underline so color is not the only cue (WCAG 1.4.1) */
.body a,.short-answer a,.hero p a,.lede a,.post-cta a,.tile p a,.author-box a,.sources a,.toc a,
.contact-form .fine a,.foot-sub .fine a,.site-foot .disclaimer a{text-decoration:underline; text-underline-offset:.15em}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
img{max-width:100%; height:auto; display:block}
.wrap{width:100%; max-width:64rem; margin:0 auto; padding:0 1.5rem}
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:#000; padding:.5rem 1rem}
.skip:focus{left:1rem; z-index:10}

/* header */
.site-head{border-bottom:1px solid var(--faint)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:1.1rem; padding-bottom:1.1rem; flex-wrap:wrap}
.brand{display:flex; align-items:center; flex:none}
.brand:hover{text-decoration:none}
.brand img{height:34px; width:auto; display:block}
nav.main{display:flex; gap:1.3rem; font-size:.95rem; font-weight:600; flex-wrap:wrap}
nav.main a{color:var(--muted)}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink); text-decoration:none}
.menu-btn{display:none; background:none; border:1px solid var(--faint); border-radius:10px;
  color:var(--ink); padding:.45rem .6rem; cursor:pointer; line-height:0}
.menu-btn svg{width:22px; height:22px; display:block}
.menu-btn .x{display:none}
.site-head.open .menu-btn .bars{display:none}
.site-head.open .menu-btn .x{display:block}
@media (max-width:720px){
  .site-head .wrap{flex-wrap:nowrap}
  .menu-btn{display:block}
  nav.main{display:none; flex-basis:100%; flex-direction:column; gap:0; padding:.4rem 0 .6rem}
  nav.main a{padding:.7rem 0; border-top:1px solid var(--faint); font-size:1.05rem}
  .site-head.open .wrap{flex-wrap:wrap}
  .site-head.open nav.main{display:flex}
  .menu-btn[hidden]{display:none}
  .menu-btn[hidden]~nav.main{display:flex}
}

/* hero */
.hero{padding:4.5rem 0 2.5rem; border-bottom:1px solid var(--faint)}
.hero h1{font-size:clamp(2rem,5vw,3.1rem); line-height:1.08; letter-spacing:-.03em;
  font-weight:800; margin:0 0 1rem; max-width:22ch}
.hero p{font-size:1.2rem; color:var(--muted); margin:0 0 .8rem; max-width:52ch}
.hero p.promise{color:var(--ink); font-size:1.05rem; max-width:60ch}
.hero .accent{color:var(--accent)}
.hero.has-photo .wrap{display:grid; grid-template-columns:minmax(0,1fr) 16rem; gap:3rem; align-items:center}
.hero-photo{margin:0; width:16rem; justify-self:end; isolation:isolate}
.hero-photo img{display:block; width:100%; height:auto; border-radius:14px; background:var(--panel);
  border:1px solid var(--faint);
  box-shadow:12px 12px 0 -1px var(--canvas), 12px 12px 0 0 var(--accent)}
.hero-photo figcaption{margin:1.6rem 0 0; color:var(--muted); font-size:.9rem;
  line-height:1.5; display:flex; gap:.6rem; align-items:baseline}
.hero-photo figcaption::before{content:""; flex:none; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--accent); transform:translateY(-.05rem)}
@media (max-width:820px){
  .hero.has-photo .wrap{grid-template-columns:1fr; gap:1.6rem}
  .hero-photo{width:11rem; justify-self:start; order:-1}
  .hero-photo img{box-shadow:9px 9px 0 -1px var(--canvas), 9px 9px 0 0 var(--accent)}
  .hero-photo figcaption{margin-top:1.2rem}
}

/* section headings + topic tiles */
.section-title{font-size:.82rem; color:var(--muted); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; margin:0 0 1rem}
.featured{padding:2.5rem 0 1rem}
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:0 0 1rem}
.tile{display:block; padding:1.2rem 1.3rem; border:1px solid var(--faint); border-radius:14px;
  background:var(--panel); color:var(--ink)}
.tile:hover{text-decoration:none; border-color:var(--accent)}
.tile h2,.tile h3{margin:0 0 .3rem; font-size:1.15rem; font-weight:800; letter-spacing:-.01em}
.tile p{margin:0; color:var(--muted); font-size:.95rem}
.tile .count{color:var(--accent); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em}
.tile h2 a,.tile h3 a{color:var(--ink)}
.tile h2 a:hover,.tile h3 a:hover{color:var(--accent); text-decoration:none}
.tile .start{margin:.9rem 0 0; padding-top:.8rem; border-top:1px solid var(--faint); font-size:.92rem}
.tile .start span{display:block; color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:.15rem}
.tile .start a{color:var(--ink); font-weight:700}
.tile .start a:hover{color:var(--accent); text-decoration:none}
@media (max-width:720px){.tiles{grid-template-columns:1fr}}

/* post list */
.list{padding:2rem 0 4rem}
.post-card{display:block; padding:1.6rem 0; border-bottom:1px solid var(--faint);
  color:var(--ink)}
.post-card:hover{text-decoration:none}
.post-card:hover h2,.post-card:hover h3{color:var(--accent)}
.post-card .meta{font-size:.82rem; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem;
  display:flex; gap:.7rem; align-items:center; flex-wrap:wrap}
.tag{color:var(--accent); border:1px solid var(--faint); border-radius:999px;
  padding:.05rem .55rem; font-size:.72rem}
a.tag:hover{border-color:var(--accent); text-decoration:none}
.post-card h2,.post-card h3{font-size:1.5rem; line-height:1.2; letter-spacing:-.02em;
  font-weight:800; margin:0 0 .35rem; transition:color .15s}
.post-card p{margin:0; color:var(--muted); font-size:1rem; max-width:60ch}

.more{margin:1.5rem 0 0; font-weight:700}
.page .tiles{margin-top:.2rem}

/* article */
.article{padding:2.5rem 0 4rem}
.crumbs{margin:0 0 1.4rem; font-size:.82rem; color:var(--muted)}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; gap:.5rem; flex-wrap:wrap}
.crumbs li+li::before{content:"\203A"; content:"\203A" / ""; margin-right:.5rem; color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.article-head{max-width:var(--measure); margin:0 auto 2rem}
.article-head .meta{font-size:.82rem; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.9rem;
  display:flex; gap:.7rem; align-items:center; flex-wrap:wrap}
.article-head .meta a{color:var(--muted)}
.article-head .meta a:hover{color:var(--ink)}
.article-head h1{font-size:clamp(1.9rem,4.5vw,2.7rem); line-height:1.12;
  letter-spacing:-.03em; font-weight:800; margin:0 0 .6rem}
.article-head .subtitle{font-size:1.25rem; color:var(--muted); margin:0}
.short-answer{max-width:var(--measure); margin:0 auto 2rem; padding:1.2rem 1.4rem;
  border-left:3px solid var(--accent); background:var(--panel); border-radius:0 14px 14px 0}
.short-answer .label{display:flex; align-items:center; gap:.6rem; font-size:.78rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem}
.short-answer .avatar{width:36px; height:36px; border-radius:50%; border:2px solid var(--accent); flex:none}
.short-answer p{margin:0; font-size:1.05rem}
.hero-img{max-width:var(--measure); margin:0 auto 2.5rem; border-radius:14px;
  overflow:hidden; background:var(--panel); border:1px solid var(--faint)}
.body{max-width:var(--measure); margin:0 auto}
.body h2{font-size:1.45rem; letter-spacing:-.02em; font-weight:800;
  margin:2.4rem 0 .6rem; line-height:1.25}
.body h3{font-size:1.15rem; font-weight:700; margin:1.8rem 0 .4rem}
.body p{margin:0 0 1.15rem}
.body ul,.body ol{margin:0 0 1.15rem; padding-left:1.2rem}
.body li{margin:.3rem 0}
.body strong{font-weight:700}
.body code{background:var(--panel); padding:.1rem .35rem; border-radius:5px;
  font-size:.9em}
.body blockquote{margin:0 0 1.15rem; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid var(--accent);
  color:var(--muted)}
.body blockquote p{margin:0}
.body hr.rule{border:none; height:1px; background:var(--faint); margin:2.2rem 0}
.body h2:target,.body h3:target{color:var(--accent)}

/* table of contents (FAQ page) */
.toc{max-width:var(--measure); margin:0 0 2rem; padding:1rem 1.3rem; border:1px solid var(--faint); border-radius:14px;
  background:var(--panel); font-size:.95rem}
.toc strong{display:block; margin-bottom:.4rem; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.toc ol{margin:0; padding-left:1.2rem}
.toc li{margin:.15rem 0}

/* author box, related, pager, CTA */
.author-box{max-width:var(--measure); margin:2.5rem auto 0; padding:1.4rem 1.6rem;
  border:1px solid var(--faint); border-radius:14px; display:flex; gap:1.2rem; align-items:flex-start}
.author-box img{width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:center 35%;
  flex:none; background:var(--faint); border:1px solid var(--faint)}
.author-box .name{font-weight:800; margin:0 0 .2rem; font-size:1rem}
.author-box p{margin:0; color:var(--muted); font-size:.95rem}
.related{max-width:var(--measure); margin:2.5rem auto 0}
.related h2{font-size:.82rem; color:var(--muted); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; margin:0 0 .6rem}
.related ul{list-style:none; margin:0; padding:0}
.related li{padding:.7rem 0; border-top:1px solid var(--faint)}
.related li:last-child{border-bottom:1px solid var(--faint)}
.related a{font-weight:700; color:var(--ink)}
.related a:hover{color:var(--accent); text-decoration:none}
.related span{display:block; color:var(--muted); font-size:.92rem}
.sources{max-width:var(--measure); margin:2.5rem auto 0}
.sources h2{font-size:.82rem; color:var(--muted); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; margin:0 0 .4rem}
.sources > p{margin:0 0 .6rem; color:var(--muted); font-size:.92rem}
.sources ol{margin:0; padding-left:1.25rem; font-size:.95rem}
.sources li{padding:.3rem 0; color:var(--muted)}
.sources a{font-weight:700; color:var(--ink)}
.sources a:hover{color:var(--accent)}
.pager{max-width:var(--measure); margin:2rem auto 0; display:flex; justify-content:space-between;
  gap:1rem; font-size:.95rem}
.pager a{color:var(--muted); max-width:48%}
.pager a:hover{color:var(--ink)}
.pager small{display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em}
.post-cta{max-width:var(--measure); margin:2.5rem auto 0; padding:1.8rem;
  border:1px solid var(--faint); border-radius:14px; background:var(--panel)}
.post-cta h2{margin:0 0 .4rem; font-size:1.2rem; font-weight:800; letter-spacing:-.01em}
.post-cta p{margin:0; color:var(--muted); font-size:1rem}

/* generic page */
.page{padding:3rem 0 4rem}
.page .body{max-width:var(--measure); margin-left:0; margin-right:0}
.page h1{font-size:clamp(1.9rem,4.5vw,2.6rem); letter-spacing:-.03em; font-weight:800;
  margin:0 0 1.4rem}
.page .lede{font-size:1.2rem; color:var(--muted); max-width:var(--measure); margin:-.6rem 0 1.8rem}

/* contact form */
.contact-form{max-width:var(--measure); margin:2rem 0 0; padding:1.6rem; border:1px solid var(--faint);
  border-radius:14px; background:var(--panel)}
.contact-form h2{margin:0 0 1rem; font-size:1.2rem; font-weight:800; letter-spacing:-.01em}
.contact-form label{display:block; font-size:.85rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin:1rem 0 .35rem}
.contact-form label:first-of-type{margin-top:0}
.contact-form input,.contact-form select,.contact-form textarea{width:100%; font:inherit; color:var(--ink);
  background:var(--canvas); border:1px solid var(--faint); border-radius:10px; padding:.7rem .85rem}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
.contact-form .required-note{margin:0 0 .4rem; font-size:.85rem; color:var(--muted)}
.contact-form textarea{min-height:9rem; resize:vertical}
.contact-form select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:2.4rem}
.contact-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.contact-form button{margin-top:1.3rem; font:inherit; font-weight:800; color:#0F0F0F; background:var(--accent);
  border:none; border-radius:999px; padding:.8rem 1.6rem; cursor:pointer}
.contact-form button:hover{filter:brightness(1.08)}
.contact-form .fine{margin:.9rem 0 0; font-size:.85rem; color:var(--muted)}

/* about page: text + family photo */
.about .wrap{display:grid; grid-template-columns:minmax(0,1fr) 21rem; gap:3.5rem;
  align-items:start}
.about .body{max-width:var(--measure)}
.about-photo{margin:.4rem 0 0; isolation:isolate}
.about-photo img{width:100%; border-radius:14px; background:var(--panel);
  border:1px solid var(--faint);
  box-shadow:16px 16px 0 -1px var(--canvas), 16px 16px 0 0 var(--accent)}
.about-photo figcaption{margin:2rem 0 0; color:var(--muted); font-size:.9rem;
  line-height:1.5; display:flex; gap:.6rem; align-items:baseline}
.about-photo figcaption::before{content:""; flex:none; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--accent); transform:translateY(-.05rem)}
@media (max-width:820px){
  .about .wrap{grid-template-columns:1fr; gap:2.2rem}
  .about-photo{order:-1; max-width:20rem}
  .about-photo figcaption{margin-top:1.6rem}
}

/* footer */
.site-foot{border-top:1px solid var(--faint); padding:2.5rem 0; color:var(--muted);
  font-size:.9rem}
.site-foot .wrap{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--ink)}
.site-foot .disclaimer{width:100%; font-size:.82rem}
.foot-sub{width:100%; margin:0 0 1.4rem; padding:0 0 1.6rem; border-bottom:1px solid var(--faint)}
.foot-sub .label{display:block; font-weight:800; color:var(--ink); font-size:1rem; margin:0 0 .6rem}
.foot-sub .row{display:flex; gap:.5rem; max-width:26rem}
.foot-sub .embed{max-width:26rem; min-height:3rem}
.foot-sub .embed iframe{display:block; width:100%; border:0}
.foot-sub input[type=email]{flex:1; min-width:0; font:inherit; color:var(--ink); background:var(--canvas);
  border:1px solid var(--faint); border-radius:999px; padding:.6rem 1rem}
.foot-sub input[type=email]:focus{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
.foot-sub button{font:inherit; font-weight:800; color:#0F0F0F; background:var(--accent); border:none;
  border-radius:999px; padding:.6rem 1.1rem; cursor:pointer; white-space:nowrap}
.foot-sub button:hover{filter:brightness(1.08)}
.foot-sub .fine{margin:.5rem 0 0; font-size:.8rem}
.foot-sub .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

@media (max-width:640px){
  body{font-size:17px}
  .hero{padding:3rem 0 1.6rem}
  nav.main{gap:.9rem; font-size:.9rem}
  .brand img{height:28px}
  .author-box{flex-direction:column}
}