:root{
  --page:#f6f3ee;
  --paper:#fffdf9;
  --paper2:#fbf6ee;

  --text:#17212b;
  --muted:#4a5b66;

  --teal:#0f766e;
  --teal2:#115e59;
  --amber:#b45309;
  --rose:#9a3412;

  --border:rgba(17,24,39,.10);
  --soft:rgba(17,24,39,.07);
  --shadow:0 18px 44px rgba(16,24,40,.10);
  --shadow2:0 12px 26px rgba(16,24,40,.08);

  --r:16px;
  --r2:22px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--page);
  color: var(--text);
  line-height: 1.75;
  font-size: 16px;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* accessibility */
.skip{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{
  left:16px;top:16px;width:auto;height:auto;
  padding:10px 12px;border-radius:12px;
  background:#111827;color:#fff;z-index:999;
}

/* header */
.mast{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(246,243,238,.88);
  border-bottom: 1px solid var(--soft);
}
.mast__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:12px;
}
.brand__mark{
  width:14px;height:14px;border-radius:6px;
  background: linear-gradient(90deg,var(--teal),var(--teal2));
  box-shadow: 0 0 0 6px rgba(15,118,110,.16);
}
.brand__name{font-weight:950;letter-spacing:-.2px}
.brand__sub{font-size:12px;color:var(--muted);margin-top:2px}

.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border: 1px solid transparent;
}
.nav a:hover{border-color:var(--soft);background: rgba(255,255,255,.75)}
.nav__cta{
  background: rgba(15,118,110,.10) !important;
  border-color: rgba(15,118,110,.18) !important;
  color: var(--teal2);
  font-weight: 900;
}

/* main */
main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 18px 70px;
}

/* hero */
.hero{padding: 18px 0 10px}
.hero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
}

.hero__copy{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 26px;
  box-shadow: var(--shadow);
}
.hero__side{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.sideCard{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 18px;
  box-shadow: var(--shadow2);
}
.sideCard--warn{
  background: rgba(180,83,9,.08);
  border-color: rgba(180,83,9,.18);
}

.kickerRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.kicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(90deg,var(--teal),var(--teal2));
}
.chip{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: var(--teal2);
  background: rgba(15,118,110,.10);
  border: 1px solid rgba(15,118,110,.16);
}

h1{
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.6px;
  margin: 10px 0 10px;
}
h2{
  font-size: 18px;
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}
h3{
  font-size: 16px;
  margin: 0 0 8px;
}
h4{
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--text);
}

.lead{color: var(--muted); max-width: 75ch; margin: 0 0 18px}

/* CTAs */
.ctaRow{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,118,110,.18);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.85);
  color: var(--text);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 950;
  cursor:pointer;
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(16,24,40,.06);
}
.btn--primary{
  background: linear-gradient(90deg,var(--teal),var(--teal2));
  border-color: transparent;
  color:#fff;
  padding: 13px 20px;
}
.btn--primary:hover{
  background: linear-gradient(90deg,var(--teal),var(--teal2));
  filter: brightness(.98);
}
.btn--ghost{
  background: transparent;
  border-color: rgba(15,118,110,.22);
  color: var(--teal2);
}
.btn--soft{
  background: rgba(180,83,9,.10);
  border-color: rgba(180,83,9,.22);
  color: var(--rose);
}
.btn--full{width:100%}

/* quick cards */
.quickGrid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px){
  .quickGrid{grid-template-columns:1fr}
}
.quickCard{
  background: #fff;
  border: 1px solid var(--soft);
  border-radius: 16px;
  padding: 12px 14px;
}
.quickTitle{font-weight:950;margin-bottom:4px}
.quickText{color: var(--muted); font-size: 13px; line-height: 1.5}
.quickCard--good{border-left:5px solid var(--teal)}
.quickCard--watch{border-left:5px solid rgba(15,118,110,.45)}
.quickCard--urgent{border-left:5px solid rgba(180,83,9,.85)}

/* lists */
ul{margin: 0 0 14px; padding-left: 18px; color: var(--muted)}
li{margin: 6px 0}
.check{margin:0;padding-left:18px;color: var(--muted)}
.check li{margin: 8px 0}
.check--tight li{margin: 6px 0}

.section{margin: 34px 0}
.sectionHead{margin-bottom: 16px}
.sectionHead p{margin:0;color: var(--muted);max-width: 82ch}

.section--alt{
  background: var(--paper2);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 26px;
  box-shadow: var(--shadow2);
}

/* author */
.author{margin: 18px 0 8px}
.author__inner{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  padding: 18px;
  display:grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  align-items:center;
}
@media (max-width: 720px){
  .author__inner{grid-template-columns:1fr}
}
.author__avatar{
  width: 80px;
  height: 80px;
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 10px 22px rgba(16,24,40,.10);
  background: #fff;
  display:grid;
  place-items:center;
  font-weight: 950;
  color:#fff;
  background: linear-gradient(90deg,var(--teal),var(--teal2));
}
.author__avatar--fallback{font-size: 22px}
.author__name{font-weight:950;font-size:18px;margin-bottom:2px}
.author__role{color: var(--muted); font-size: 13px; margin-bottom: 8px}
.author__text{margin:0;color: var(--muted)}

/* panels */
.panel{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 18px;
  box-shadow: var(--shadow2);
}
.panel__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px){
  .panel__grid{grid-template-columns:1fr}
}
.note{
  margin-top: 12px;
  background: rgba(15,118,110,.08);
  border: 1px solid rgba(15,118,110,.16);
  border-radius: 14px;
  padding: 12px 12px;
  color: var(--muted);
}

/* cards */
.cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .cards{grid-template-columns:1fr}
}
.cards--four{
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){
  .cards--four{grid-template-columns:1fr 1fr}
}
@media (max-width: 760px){
  .cards--four{grid-template-columns:1fr}
}

.card{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 16px;
  box-shadow: var(--shadow2);
}
.card--wide{grid-column: 1 / -1}

.card__tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.70);
  margin-bottom: 10px;
}
.card__tag--teal{color: var(--teal2); border-color: rgba(15,118,110,.18); background: rgba(15,118,110,.10)}
.card__tag--amber{color:#7c2d12; border-color: rgba(180,83,9,.22); background: rgba(180,83,9,.10)}
.card__tag--rose{color: var(--rose); border-color: rgba(154,52,18,.18); background: rgba(154,52,18,.08)}

.mini{margin:0;padding-left:18px}
.mini li{margin:6px 0;color:#3a4b57}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .split{grid-template-columns:1fr}
}
.split__box{
  background: rgba(255,255,255,.70);
  border: 1px solid var(--soft);
  border-radius: 16px;
  padding: 12px 12px;
}
.split__box--warn{
  border-color: rgba(180,83,9,.18);
  background: rgba(180,83,9,.08);
}

/* columns */
.twoCol{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .twoCol{grid-template-columns:1fr}
}
.box{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 16px;
  box-shadow: var(--shadow2);
}
.box--soft{
  background: rgba(15,118,110,.08);
  border-color: rgba(15,118,110,.16);
}

.risk{
  margin-top: 12px;
  background: rgba(15,118,110,.08);
  border: 1px solid rgba(15,118,110,.16);
  border-radius: var(--r2);
  padding: 16px;
  box-shadow: var(--shadow2);
}
.risk p{margin:0;color: var(--muted)}

.timeline{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 12px 12px;
  box-shadow: var(--shadow2);
}
.tItem{
  display:grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding: 12px 8px;
  border-top: 1px solid rgba(17,24,39,.06);
}
.tItem:first-child{border-top:none}
.tDot{
  width: 10px;height: 10px;border-radius:999px;
  margin-top: 6px;
  background: rgba(15,118,110,.75);
  box-shadow: 0 0 0 6px rgba(15,118,110,.12);
}
.tDot--warn{
  background: rgba(180,83,9,.95);
  box-shadow: 0 0 0 6px rgba(180,83,9,.14);
}
.tBody p{margin:0;color: var(--muted)}

.callout{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  align-items:start;
}
@media (max-width: 980px){
  .callout{grid-template-columns:1fr}
}
.callout__left{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 16px;
  box-shadow: var(--shadow2);
}
.callout__right{position:sticky; top:86px}
@media (max-width: 980px){
  .callout__right{position:static}
}
.calloutCard{
  background: rgba(180,83,9,.08);
  border: 1px solid rgba(180,83,9,.18);
  border-radius: var(--r2);
  padding: 16px;
  box-shadow: var(--shadow2);
}
.calloutCard__title{font-weight:950;margin-bottom:6px}
.calloutCard__text{color: var(--muted); margin-bottom: 12px; line-height:1.6}

.watch{
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 16px;
  box-shadow: var(--shadow2);
}

.takeawayCard{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  padding: 18px;
  box-shadow: var(--shadow2);
  display:flex;
  gap: 16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.takeawayBtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

.refs{
  margin-top: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--soft);
  border-radius: 16px;
  padding: 12px 14px;
}
.refs summary{cursor:pointer;font-weight:950}
.refs ol{margin: 10px 0 0; padding-left: 18px; color: var(--muted)}
.refs li{margin: 6px 0}

.footer{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(17,24,39,.10);
  color:#5f6b73;
  font-size: 13px;
}

/* print */
@media print{
  .mast, .btn { display:none !important; }
  body{background:#fff;color:#000}
  p, li{color:#000}
  main{max-width:none}
}
/* =========================
   AUTHOR BLOCK
   ========================= */

.author{
  margin: 18px 0 8px;
}

.author__inner{
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  padding: 18px;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  align-items: center;
}

@media (max-width: 720px){
  .author__inner{ grid-template-columns: 1fr; }
}

.author__avatar{
  width: 80px;
  height: 80px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 10px 22px rgba(16,24,40,.10);
  background: #fff;
}

.author__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author__name{
  font-weight: 950;
  font-size: 18px;
  margin-bottom: 2px;
}

.author__role{
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.author__text{
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.65;
}

.author__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.author__tag{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(15,118,110,.10);
  border: 1px solid rgba(15,118,110,.16);
  color: var(--teal2);
}