html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:#F4F0E8;color:#161616;font-family:'Geist',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#161616}
a:hover{color:#2C5F2D}
button{font:inherit;color:inherit}
section[id]{scroll-margin-top:64px}
::selection{background:#CFE6C3;color:#161616}
@keyframes hl-in{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
.hl-w{display:inline-block;white-space:nowrap}
.hl-ch{display:inline-block;opacity:0;transform:translateY(.4em)}
h1[data-play] .hl-ch{animation:hl-in .55s cubic-bezier(.22,1,.36,1) both}
h1[data-static] .hl-ch{opacity:1;transform:none;animation:none}
@media (prefers-reduced-motion:reduce){.hl-ch{opacity:1!important;transform:none!important;animation:none!important}}
/* header nav */
.nav-link{text-decoration:none;text-underline-offset:7px;text-decoration-thickness:1px}
.nav-link[aria-current="page"]{text-decoration:underline}
.mnav-link{display:block;padding:14px 0;border-top:1px solid #D6CFC2;text-decoration:none}
.mnav-link[aria-current="page"]{color:#2C5F2D;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
@media (max-width:400px){
  .hdr-row{gap:12px!important}
  .hdr-nav{gap:8px!important}
  .hdr-book{padding:10px 10px!important;letter-spacing:0.1em!important}
}
@media (max-width:768px){
  .hl-br{display:none}
  .shift-head{display:none!important}
  .shift-row{grid-template-columns:minmax(0,1fr)!important;row-gap:10px;padding:28px 0}
  .shift-label{padding:0!important}
  .shift-legacy{padding:0!important;color:#8A857C!important}
  .shift-legacy::before,.shift-upmarq::before{display:block;margin-bottom:4px;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;font-size:11px;line-height:1.4;letter-spacing:0.15em;text-transform:uppercase}
  .shift-legacy::before{content:"Before";color:#8A857C}
  .shift-legacy::after{content:"\2193";display:block;margin-top:8px;font-size:16px;line-height:1;color:#8A857C}
  .shift-upmarq{padding:14px 16px!important}
  .shift-upmarq::before{content:"The Upmarq way";color:#2C5F2D}
}