:root{
  --bg: #F6F6F6;
  --paper: #FFFFFF;
  --ink: #111111;
  --muted: rgba(17,17,17,.72);
  --faint: rgba(17,17,17,.56);
  --stroke: rgba(17,17,17,.22);
  --stroke2: rgba(17,17,17,.36);

  --lime: #C9FF1A;
  --lime2: #A8FF2B;

  --radius: 22px;
  --radius2: 28px;
  --max: 1120px;
  --shadow: 0 18px 40px rgba(0,0,0,.10);
  --ring: 0 0 0 4px rgba(201,255,26,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #F7F7F7, #F2F2F2);
  color: var(--ink);
  line-height:1.45;
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Clean backdrop (similar to reference) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% 0%, rgba(201,255,26,.22), transparent 62%),
    radial-gradient(800px 520px at 10% 10%, rgba(0,0,0,.04), transparent 62%);
  opacity:.9;
}

.skip-link{
  position:absolute; left:-999px; top:12px;
  background: var(--paper);
  border:1.5px solid var(--stroke2);
  padding:10px 12px;
  border-radius:12px;
}
.skip-link:focus{left:12px; outline:none; box-shadow:var(--ring)}

.topbar{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(246,246,246,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(17,17,17,.10);
  isolation: isolate;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand__mark{
  width:22px; height:22px;
  border-radius: 8px;
  display:grid; place-items:center;
  background: var(--ink);
  color: var(--paper);
  font-weight:900;
}
.brand__text{font-weight:700; letter-spacing:-.02em}

.nav-wrap{display:flex; align-items:center; gap:10px}
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-weight: 900;
  cursor:pointer;
}
.nav-toggle:focus{outline:none; box-shadow: var(--ring)}
.nav{
  display:none;
  gap: 28px;
  align-items:center;
}
.nav__link{
  position: relative;
  text-decoration: none;
  color: rgba(17,17,17,.72);
  font-weight: 500;
  font-size: 15px;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.nav__link::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease;
}
.nav__link:hover{
  color: var(--ink);
}
.nav__link:hover::after{
  transform: scaleX(1);
}
.topbar__cta{display:flex; gap:10px; align-items:center}

@media (min-width: 860px){
  /* Keep main nav immediately next to the brand on desktop. */
  .topbar__inner{ justify-content: flex-start; gap: 28px; }
  .topbar__cta{ margin-left: auto; }
}

/* Mega menu (hover dropdown) */
.mega{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  background: rgba(246,246,246,.94);
  border-top: 1px solid rgba(17,17,17,.10);
  border-bottom: 1px solid rgba(17,17,17,.10);
  backdrop-filter: blur(10px);
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .18s ease;
}
.mega__inner{
  padding: 18px 0 22px;
}
.mega__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.mega__section{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 0 rgba(0,0,0,.08);
  transition: background .2s ease, transform .2s ease;
}
.mega__section:hover{
  background: var(--lime);
}
.mega__section.mega__section--active{
  background: var(--paper);
}
.mega__section.mega__section--active:hover{
  background: var(--lime);
}
.mega__heading{
  margin: 0 0 12px;
  padding-bottom: 10px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(17,17,17,.15);
}
.mega__link{
  display: block;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 800;
  transition: all .2s ease;
  color: var(--ink);
}
.mega__link:hover{
  background: var(--paper);
  border-color: rgba(17,17,17,.28);
  box-shadow: 0 6px 0 rgba(0,0,0,.06);
}
.topbar[data-mega-open="true"] .mega{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.topbar[data-nav-open="true"] .mega{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Temporarily disabled: topbar hover mega menu */
.mega{
  display: none !important;
}

/* Mobile: show nav when menu toggled */
.topbar[data-nav-open="true"] .nav{
  display: flex;
}

.button{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  font-weight:800;
  padding:10px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--ink);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space:nowrap;
  text-shadow:none;
}
.button:focus{outline:none; box-shadow: var(--ring)}
.button:hover{transform: translateY(-1px)}
.button--primary{
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 10px 0 rgba(0,0,0,.10);
}
.button--ghost{
  background: var(--paper);
  color: var(--ink);
}
.button[aria-disabled="true"]{opacity:.55; pointer-events:none}

.hero{
  position:relative;
  padding: 4px 0 14px;
  overflow:hidden;
  background: #F7F7F7;
}
.hero__grid--v2{
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:center;
}
.hero__art{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.hero__portrait-wrap{
  position:relative;
  width: 190px;
  max-width: 48%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  margin-top: 0;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.08)) drop-shadow(0 4px 12px rgba(0,0,0,0.05));
  opacity: 1;
  flex-shrink: 0;
}
.hero__portrait{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.34);
  transition: transform 0.35s ease;
}
.hero__portrait-wrap:hover .hero__portrait{
  transform: scale(1.37);
}
@media (prefers-reduced-motion: reduce) {
  .hero__portrait-wrap:hover .hero__portrait{ transform: none; }
}
.hero__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:start;
}
.eyebrow{display:none}
.hero__copy{
  opacity: 0;
  animation: heroCopyFadeIn 0.6s ease-out forwards;
}
.hero__copy--animate .hero__title{ animation: none; }
.hero__copy--animate .hero__about{ animation: none; }
.hero__title{
  margin: 0;
  line-height: 1.15;
  opacity: 1;
}
.hero__title--v2{
  max-width: 44ch;
}
.hero__title-line1{
  display: block;
  font-size: clamp(21px, 1.85vw, 23px);
  line-height: 1.55;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 28px 0;
  white-space: nowrap;
}
.hero__title-accent{
  color: var(--muted);
}
.hero__typewriter-cursor{
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--ink);
  opacity: 0.5;
  animation: typewriterBlink 1s step-end infinite;
}
.hero__typewriter-cursor.is-hidden{
  display: none;
}
@keyframes typewriterBlink{
  50%{ opacity: 0.15; }
}
@keyframes heroLineEnter{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes heroCopyFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@media (max-width: 520px) {
  .hero__title-line1{ white-space: normal; }
}
.hero__about{
  margin: 28px 0 0;
  font-size: clamp(16px, 1.45vw, 18px);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.55;
  opacity: 0;
  white-space: nowrap;
}
.hero__about + .hero__about{
  margin-top: 14px;
  white-space: normal;
}
#heroAbout{ font-weight: 700; }
#heroAbout2{
  white-space: normal;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  max-width: 70ch;
}
#heroAbout2 br{ display: block; margin: 0.75em 0; }
@media (max-width: 620px) {
  .hero__about{ white-space: normal; }
}
@keyframes heroFadeIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero__title-char{
  opacity: 0;
  animation: typewriterReveal 0.03s ease-out forwards;
}
@keyframes typewriterReveal{
  to{ opacity: 1; }
}

.metrics{display:none}

.logo-row{
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 18px;
  color: rgba(17,17,17,.62);
  font-weight: 700;
}
.logo-row__item{
  letter-spacing:.02em;
}

.hero__panel{align-self:stretch}
.card{
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: 0 10px 0 rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
}
.card::before{content:none}
.card--glass{
  background: var(--paper);
}
.card--project{display:flex; flex-direction:column; gap:10px}
.card__label{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(17,17,17,.6));
  margin-bottom: 2px;
}
.card__title{margin:0; font-size:18px; letter-spacing:-.02em; font-weight: 700; color: var(--ink)}
.card__title-link{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--lime);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}
a.card__title-link:hover{ background: var(--ink); color: var(--paper); }
a.card__title-link:focus{ outline: none; box-shadow: var(--ring); }
.card__meta{margin:6px 0 0; color: var(--faint); font-weight:600; font-size:13px}
.card__body{margin:0; color: var(--muted)}
.card__summary{margin:0; color: var(--muted); font-size: 15px; line-height: 1.45; padding-left: 14px}
.card__impact{
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted, rgba(17,17,17,.65));
}
.card__view-link{
  display: inline-block;
  margin-top: auto;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding-top: 4px;
}
.card__view-link:hover{ color: var(--muted); text-decoration: underline }
.card__view-link:focus{ outline: none; box-shadow: var(--ring) }

/* Project card dual CTAs */
.card__ctas{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 4px;
}
.card__cta{
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.card__cta:focus{ outline: none; box-shadow: var(--ring) }
.card__cta--primary{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.card__cta--primary:hover{
  background: var(--paper);
  color: var(--ink);
}
.card__cta--secondary{
  color: var(--ink-muted, rgba(17,17,17,.6));
  font-weight: 600;
}
.card__cta--secondary:hover{
  color: var(--ink);
  text-decoration: underline;
}
.card__top{display:block}
.card__footer{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top: 4px}

.pill-row{display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px}
.pill{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--lime);
  color: var(--ink);
}
.pill--soft{
  background: var(--paper);
}

.divider{height:1px; background: rgba(17,17,17,.22); margin: 14px 0}
.stack{display:grid; gap:10px}
.stack__row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.stack__k{color: var(--faint); font-size:13px; font-weight:650}
.stack__v{color: var(--ink); font-size:13px; font-weight:650; text-align:right}

.section{padding: 21px 0 30px}
#projects{
  background: #F5F5F5;
}
.projects-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.projects-tabs__btn{
  appearance: none;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.projects-tabs__btn:hover{
  background: rgba(0,0,0,.05);
}
.projects-tabs__btn--active,
.projects-tabs__btn[aria-selected="true"]{
  background: var(--lime);
  border-color: var(--ink);
}
.projects-tabs__btn:focus{
  outline: none;
  box-shadow: var(--ring);
}

/* Writing tabs (same style as Projects) */
.writing-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.writing-tabs__btn{
  appearance: none;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.writing-tabs__btn:hover{
  background: rgba(0,0,0,.05);
}
.writing-tabs__btn--active,
.writing-tabs__btn[aria-selected="true"]{
  background: var(--lime);
  border-color: var(--ink);
}
.writing-tabs__btn:focus{
  outline: none;
  box-shadow: var(--ring);
}
.writing-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.writing-item{
  padding: 0;
  border: 1px solid rgba(17,17,17,.14);
  border-left: 4px solid rgba(201,255,26,.75);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.writing-item:first-child{
  padding-top: 0;
}
.writing-item:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(17,17,17,.22);
  box-shadow: 0 10px 25px rgba(0,0,0,.04);
}
.writing-item:focus{
  outline: none;
  box-shadow: var(--ring);
}
.writing-item.is-hidden{
  display: none;
}
.writing-item__card{
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.writing-item__header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.writing-item__title{
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.35;
  min-width: 0;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.writing-item__title-link{
  color: inherit;
  text-decoration: none;
}
.writing-item__title-link:hover{
  text-decoration: none;
}
.writing-item__title-link:focus{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 10px;
}
.writing-item__description{
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(17,17,17,.62);
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.writing-item__meta-row{
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(17,17,17,.55);
  display: grid;
  grid-template-columns: 112px 86px;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.writing-item__meta-date,
.writing-item__meta-read{
  font-weight: 650;
}
.writing-item__meta-sep{
  color: rgba(17,17,17,.35);
}
.writing-item__tag-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.16);
  background: rgba(255,255,255,.94);
  color: rgba(17,17,17,.72);
  font-size: .72rem;
  font-weight: 620;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}
.writing-item__bottom{
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.writing-item__read{
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(17,17,17,.45);
  text-decoration: none;
  opacity: 0.9;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.writing-item:hover .writing-item__read{
  color: var(--ink);
  opacity: 1;
}
.writing-item__read:focus{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 10px;
}
#projectsGrid .card--project{
  transition: opacity 0.25s ease;
}
#projectsGrid .card--project.is-hidden{
  display: none;
}
#projectsGrid .card__summary{
  font-size: .95rem;
  line-height: 1.45;
}

/* Frameworks page */
.section--frameworks{
  background: #FAFAFA;
}
.section--writing{
  background: #FAFAFA;
}
.framework-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

/* Temporarily disabled: listing-page filter tabs */
.projects-tabs,
.framework-tabs,
.writing-tabs{
  display: none !important;
}
.framework-tabs__btn{
  appearance: none;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.framework-tabs__btn:hover{
  background: rgba(0,0,0,.05);
}
.framework-tabs__btn--active,
.framework-tabs__btn[aria-selected="true"]{
  background: var(--lime);
  border-color: var(--ink);
}
.framework-tabs__btn:focus{
  outline: none;
  box-shadow: var(--ring);
}
.grid--frameworks{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .grid--frameworks{ grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 960px){
  .grid--frameworks{ grid-template-columns: repeat(3, 1fr) }
}
.frameworks-row{
  display: flex;
  gap: 20px;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.frameworks-row .card--framework{
  flex: 0 0 calc(35% - 10px);
  min-width: 0;
  min-height: 0;
}
.frameworks-section[data-count="2"] .frameworks-row{
  flex-wrap: nowrap;
}
.frameworks-section[data-count="2"] .frameworks-row .card--framework{
  flex: 0 0 calc(35% - 10px);
}
.frameworks-section[data-count="1"] .frameworks-row .card--framework{
  flex: 0 0 calc(35% - 10px);
}
#frameworksGrid{
  max-width: none;
  margin-inline: 0;
}
@media (max-width: 900px){
  .frameworks-row .card--framework,
  .frameworks-section[data-count="1"] .frameworks-row .card--framework{
    flex: 1 1 100%;
    min-height: auto;
  }
  .frameworks-section[data-count="2"] .frameworks-row{
    flex-wrap: wrap;
  }
}
#frameworksGrid .card--framework{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  box-shadow: none;
  transition: opacity 0.25s ease;
}
#frameworksGrid .card--framework.is-hidden{
  display: none;
}
.framework-card__title{
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.framework-card__title-link{
  color: inherit;
  text-decoration: none;
}
.framework-card__title-link:hover{
  text-decoration: underline;
}
.framework-card__title-link:focus{
  outline: none;
  box-shadow: var(--ring);
}
.framework-card__desc{
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.4;
}
.framework-card__meta{
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.45;
}
.framework-card__meta-label{
  display: inline-block;
  margin-right: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(14,14,13,.55);
}
#frameworksGrid .card--framework .bullets--tight{
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink);
}
.frameworks-section{
  margin-bottom: 26px;
}
.frameworks-section__label{
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(14,14,13,.55);
}

.section--alt{
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}
#contact{
  background: #ECECEC;
}
.section__header{margin-bottom: 18px}
.section__header--row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.projects-footer{
  margin-top: 20px;
  text-align: left;
}
.projects-footer .button{ margin: 0 }
.section__title{
  margin:0 0 8px;
  letter-spacing:-.02em;
  font-size: clamp(22px, 2.4vw, 28px);
}
.section__subtitle{margin:0; color: var(--muted); max-width: 70ch}

.container--narrow{max-width: 780px}
.doc{
  padding: 48px 0;
}
.doc__title{
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 700;
}
.doc__subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.55;
}
.doc__divider{
  border: 0;
  border-top: 1px solid rgba(17,17,17,.14);
  margin: 26px 0;
}
.doc-section{margin-top: 30px}
.doc-section__title{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.doc-section__desc{
  margin: 0 0 12px;
  color: rgba(17,17,17,.62);
  font-size: 14.5px;
}

/* FRAMES — visual framework page */
.framework-visual{
  padding: 28px 0 72px;
  background: #FAFAFA;
}
.framework-visual__strapline{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 24px;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(17,17,17,.58);
}
@media (min-width: 1280px){
  .framework-visual__strapline{
    padding-left: 32px;
    padding-right: 32px;
  }
}
.framework-visual__headrow{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: 1120px;
  padding: 0 20px 20px;
  margin: 0 auto;
}
@media (min-width: 1280px){
  .framework-visual__headrow{ padding-left: 32px; padding-right: 32px; }
}
.framework-visual__title{
  margin: 0;
  flex: 1;
  min-width: min(100%, 280px);
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}
.framework-visual__notion-cta{
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(17,17,17,.4);
  transition: border-color 0.15s ease, color 0.15s ease;
}
@media (max-width: 640px){
  .framework-visual__headrow{
    flex-direction: column;
    align-items: flex-start;
  }
  .framework-visual__notion-cta{
    align-self: flex-end;
  }
}
.framework-visual__notion-cta:hover{
  color: rgba(17,17,17,.75);
  border-bottom-color: rgba(17,17,17,.65);
}
.framework-visual__hero{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.framework-visual__hero img{
  display: block;
  width: 70%;
  max-width: 70%;
  height: auto;
  margin: 0 auto;
  vertical-align: middle;
  border-radius: 12px;
  border: 1px solid rgba(17,17,17,.1);
  background: #fff;
}
@media (max-width: 640px){
  .framework-visual__hero img{
    width: 100%;
    max-width: 100%;
  }
}
.framework-visual__steps-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 20px 0;
}
@media (min-width: 1280px){
  .framework-visual__steps-wrap{ padding-left: 32px; padding-right: 32px; }
}
.framework-visual__steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 22px;
  align-items: stretch;
}
@media (max-width: 960px){
  .framework-visual__steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .framework-visual__steps{
    grid-template-columns: 1fr;
  }
}
.framework-step{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  min-height: 0;
  height: 100%;
  padding: 20px;
  background: var(--paper);
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 10px;
}
.framework-step__badge{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(17,17,17,.04);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.framework-step__body{
  min-width: 0;
  flex: 1;
}
.framework-step__title{
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.framework-step__desc{
  margin: 0 0 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(17,17,17,.5);
}
.framework-step__list{
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(17,17,17,.72);
}
.framework-step__list li{
  margin: 6px 0;
}

/* When to use FRAMES */
.framework-visual__when-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 20px 0;
}
@media (min-width: 1280px){
  .framework-visual__when-wrap{
    padding-left: 32px;
    padding-right: 32px;
  }
}
.framework-visual__when-heading{
  margin: 0 0 1.25rem;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.framework-visual__when-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 640px){
  .framework-visual__when-grid{
    grid-template-columns: 1fr;
  }
}
.framework-when-card{
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 0.5rem;
}
.framework-when-card__title{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.framework-when-card__icon{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.framework-when-card__icon--yes{
  color: rgba(17,17,17,.75);
}
.framework-when-card__icon--no{
  color: rgba(17,17,17,.5);
}
.framework-when-card__icon svg{
  display: block;
}
.framework-when-card__list{
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(17,17,17,.68);
}
.framework-when-card__list li{
  margin: 0.5rem 0;
}
.framework-when-card__list li:first-child{
  margin-top: 0;
}
.framework-when-card__list li:last-child{
  margin-bottom: 0;
}

/* Applied in practice */
.framework-visual__applied{
  max-width: 1120px;
  margin: 0 auto;
  margin-top: 4rem;
  padding: 2.5rem 20px 0;
  border-top: 1px solid rgba(17,17,17,.12);
}
@media (min-width: 1280px){
  .framework-visual__applied{
    padding-left: 32px;
    padding-right: 32px;
  }
}
.framework-visual__applied-heading{
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
}
.framework-applied-card{
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 0.75rem;
  transition: box-shadow 0.2s ease;
}
.framework-applied-card:hover{
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.framework-applied-card__title{
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}
.framework-applied-card__desc{
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(17,17,17,.55);
}
.framework-applied-card__link{
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(17,17,17,.7);
  text-decoration: none;
  transition: color 0.15s ease;
}
.framework-applied-card__link:hover{
  color: var(--ink);
  text-decoration: underline;
}
.framework-applied-card__eyebrow{
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(17,17,17,.48);
}

/* Analytics Framework page */
.analytics-framework{
  background: #FAFAFA;
}
.agentic-analytics-framework{
  background: #FFFFFF;
}
.agentic-analytics-framework .framework-applied-card:hover{
  box-shadow: none;
}
.analytics-helper{
  max-width: 1120px;
  margin: -8px auto 0;
  padding: 0 20px 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(17,17,17,.5);
}
@media (min-width: 1280px){
  .analytics-helper{ padding-left: 32px; padding-right: 32px; }
}
.analytics-grid-wrap{
  padding-top: 24px;
}
.analytics-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
}
@media (max-width: 900px){
  .analytics-grid{
    grid-template-columns: 1fr;
  }
}
.analytics-grid--inner{
  gap: 12px;
}
.analytics-span-2{
  grid-column: span 2;
}
@media (max-width: 900px){
  .analytics-span-2{
    grid-column: auto;
  }
}
.analytics-table-wrap{
  overflow-x: auto;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 10px;
}
.analytics-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  background: #fff;
}
.analytics-table th,
.analytics-table td{
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(17,17,17,.72);
  border-bottom: 1px solid rgba(17,17,17,.08);
}
.analytics-table th{
  font-weight: 600;
  color: var(--ink);
  background: rgba(17,17,17,.03);
}
.analytics-table tbody tr:last-child td{
  border-bottom: none;
}
.analytics-subblock{
  margin-top: 14px;
}
.analytics-subtitle{
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.analytics-subcard{
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}
.analytics-subcard--wide{
  grid-column: span 2;
}
@media (max-width: 900px){
  .analytics-subcard--wide{
    grid-column: auto;
  }
}
.analytics-flow{
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.analytics-flow__node{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 8px 12px;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  color: rgba(17,17,17,.72);
}
.analytics-flow__arrow{
  color: rgba(17,17,17,.45);
  font-size: 1rem;
  line-height: 1;
}

.llm-visual{
  padding: 28px 0 72px;
  background: #fff;
}
.llm-visual__headrow{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
}
@media (min-width: 1280px){
  .llm-visual__headrow{ padding-left: 32px; padding-right: 32px; }
}
.llm-visual__headcopy{ min-width: min(100%, 280px); flex: 1; }
.llm-visual__title{
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}
.llm-visual__subtitle{
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(17,17,17,.55);
}
.llm-visual__strapline{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 24px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(17,17,17,.55);
}
@media (min-width: 1280px){
  .llm-visual__strapline{ padding-left: 32px; padding-right: 32px; }
}
.llm-visual__notion-cta{
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(17,17,17,.4);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.llm-visual__notion-cta:hover{
  color: rgba(17,17,17,.75);
  border-bottom-color: rgba(17,17,17,.65);
}
@media (max-width: 640px){
  .llm-visual__headrow{ flex-direction: column; align-items: flex-start; }
  .llm-visual__notion-cta{ align-self: flex-end; }
}

.llm-visual__hero{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1280px){
  .llm-visual__hero{ padding-left: 32px; padding-right: 32px; }
}
.llm-visual__hero-card{
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}
.llm-visual__diagram{
  display: block;
  width: 100%;
  height: auto;
}
.llm-visual__hero-img{
  display: block;
  width: 100%;
  height: auto;
}
.agentic-hero-card{
  overflow: visible;
  background: linear-gradient(135deg, #f8fafc 0%, rgba(239,246,255,.45) 100%);
}
.agentic-diagram{
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 800px;
  padding: 12px 0;
}
.agentic-diagram > svg{
  position: absolute;
  inset: 0;
}
.agentic-node{
  position: absolute;
  transform: translate(-50%, -50%);
  width: 240px;
  min-height: 110px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 2px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.agentic-node__num{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.agentic-node__content h3{
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.25;
  color: #0f172a;
}
.agentic-node__content p{
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: #475569;
}
@media (max-width: 1100px){
  .agentic-diagram{
    min-height: 900px;
  }
  .agentic-node{
    width: 220px;
  }
}
@media (max-width: 900px){
  .agentic-diagram{
    min-height: auto;
    padding: 14px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agentic-diagram > svg{
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
  }
  .agentic-node{
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none;
    width: 100%;
    min-height: 100px;
  }
}
@media (max-width: 560px){
  .agentic-diagram{
    grid-template-columns: 1fr;
  }
}
.llm-visual__grid-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 20px 0;
}
@media (min-width: 1280px){
  .llm-visual__grid-wrap{ padding-left: 32px; padding-right: 32px; }
}
.llm-visual__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
  align-items: stretch;
}
@media (max-width: 640px){
  .llm-visual__grid{ grid-template-columns: 1fr; }
}
.llm-step{
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 20px;
  background: var(--paper);
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 10px;
}
.llm-step__title{
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.llm-step__desc{
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(17,17,17,.5);
}
.llm-step__list{
  margin: 4px 0 0;
  padding-left: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(17,17,17,.72);
}
.llm-step__list li{ margin: 6px 0; }

.llm-visual__when-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 20px 0;
}
@media (min-width: 1280px){
  .llm-visual__when-wrap{ padding-left: 32px; padding-right: 32px; }
}
.llm-visual__when-heading{
  margin: 0 0 1.25rem;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.llm-visual__when-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 640px){
  .llm-visual__when-grid{ grid-template-columns: 1fr; }
}
.llm-when-card{
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 0.5rem;
}
.llm-when-card__title{
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.llm-when-card__list{
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(17,17,17,.68);
}
.llm-when-card__list li{ margin: 0.5rem 0; }

.llm-visual__applied{
  max-width: 1120px;
  margin: 0 auto;
  margin-top: 4rem;
  padding: 2.5rem 20px 0;
  border-top: 1px solid rgba(17,17,17,.12);
}
@media (min-width: 1280px){
  .llm-visual__applied{ padding-left: 32px; padding-right: 32px; }
}
.llm-visual__applied-heading{
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
}
.llm-applied-card{
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 0.75rem;
  transition: box-shadow 0.2s ease;
}
.llm-applied-card:hover{ box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.llm-applied-card__title{
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}
.llm-applied-card__desc{
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(17,17,17,.55);
}
.llm-applied-card__link{
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(17,17,17,.7);
  text-decoration: none;
  transition: color 0.15s ease;
}
.llm-applied-card__link:hover{
  color: var(--ink);
  text-decoration: underline;
}

.grid{display:grid; gap:14px}
.grid--cards{grid-template-columns: 1fr}
.grid--skills{grid-template-columns: 1fr}

.bullets{margin:0; padding-left: 18px; color: var(--muted)}
.bullets li{margin: 8px 0}
.bullets--tight li{margin: 6px 0}

.link{
  text-decoration:none;
  color: var(--ink);
  font-weight:900;
  letter-spacing:-.01em;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.link:hover{background: var(--lime)}
.link:focus{outline:none; box-shadow: var(--ring)}

.timeline{display:grid; gap:12px}
.timeline__item{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap:12px;
  padding: 14px;
  border-radius: var(--radius2);
  border:2px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 10px 0 rgba(0,0,0,.10);
}
.timeline__badge{
  width:34px; height:34px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: var(--lime);
  border: 2px solid var(--ink);
  font-weight:800;
  color: var(--ink);
}
.timeline__title{margin:0; font-size:16px}
.timeline__body{margin:6px 0 0; color: var(--muted)}

/* Contact / closing: single-column, aligned with section layout */
.contact-close{
  padding-bottom: 4px;
  text-align: left;
}
.contact-close__title{
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 4vw, 1.85rem);
  letter-spacing: -0.03em;
  font-weight: 800;
  line-height: 1.2;
}
.contact-close__desc{
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 70ch;
}
.contact-close__icons{
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-close__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.contact-close__icon:hover{
  opacity: 0.9;
  transform: scale(1.05);
}
.contact-close__icon:focus{
  outline: none;
  box-shadow: var(--ring);
}
.contact-close__icon svg{
  display: block;
  width: 20px;
  height: 20px;
}
.contact-close__icon--email{
  background: #1a73e8;
}
.contact-close__icon--linkedin{
  background: #0A66C2;
}
.contact-close__icon--github{
  background: #181717;
}
.contact-close__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 16px;
}
.contact-close__meta{
  margin: 0;
  font-size: 13px;
  color: var(--faint);
}
.contact-close__meta a{
  color: var(--faint);
  text-decoration: none;
}
.contact-close__meta a:hover{
  color: var(--ink);
  text-decoration: underline;
}
.contact-close__sep{
  margin: 0 8px;
  color: var(--stroke2);
}

.footer{
  padding: 26px 0 38px;
  color: var(--faint);
}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tiny{margin:0; font-size:12.5px; color: var(--faint)}

.hero__bg{display:none}

.modal{
  width: min(760px, calc(100% - 28px));
  border:none;
  padding:0;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  border: 2px solid var(--ink);
}
.modal::backdrop{
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}
.modal__inner{padding: 16px 16px 18px}
.modal__header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px}
.modal__title{margin:0; letter-spacing:-.02em}
.modal__content{color: var(--muted)}
.modal__content h4{margin: 12px 0 6px; color: var(--ink)}
.modal__content ul{margin: 8px 0; padding-left: 18px}
.modal__content li{margin: 6px 0}

.icon-button{
  appearance:none;
  border:2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  width: 38px; height: 38px;
  border-radius: 999px;
  cursor:pointer;
  display:grid; place-items:center;
  font-size: 22px;
  line-height: 1;
}
.icon-button:hover{background: var(--lime)}
.icon-button:focus{outline:none; box-shadow: var(--ring)}

@media (min-width: 640px){
  .grid--cards{grid-template-columns: repeat(2, 1fr)}
}
@media (min-width: 860px){
  .nav-toggle{display:none}
  .nav{display:flex}
  .mega__grid{
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 16px;
  }
  .hero{padding: 6px 0 14px; overflow: hidden}
  .hero__grid{grid-template-columns: 260px 1fr; gap: 22px; align-items: start}
  .hero__art{justify-content: flex-start; align-items: flex-start; min-width: 0; display: flex}
  .hero__portrait-wrap{width: 173px; max-width: 80%; margin-top: 2px}
  .metrics{grid-template-columns: 1fr 1fr 1fr}
  .grid--cards{grid-template-columns: repeat(3, 1fr)}
  .grid--skills{grid-template-columns: 1fr 1fr 1fr}
}

@media (prefers-reduced-motion: reduce){
  .button{transition:none}
  .button:hover{transform:none}
  .hero__typewriter-cursor{ animation: none; opacity: 0.4; }
}

/* 2026 design refresh: editorial minimal luxe, unified system */
:root{
  --bg: #F4F4F1;
  --paper: #FFFFFF;
  --ink: #0E0E0D;
  --muted: rgba(14,14,13,.66);
  --faint: rgba(14,14,13,.48);
  --stroke: rgba(14,14,13,.12);
  --stroke2: rgba(14,14,13,.18);
  --lime: #BFD95A;
  --lime2: #CFE47A;
  --radius: 14px;
  --radius2: 16px;
  --max: 1160px;
  --shadow: 0 10px 24px rgba(0,0,0,.05);
  --ring: 0 0 0 3px rgba(191,217,90,.35);
}

body{
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
body::before{
  background:
    radial-gradient(1000px 560px at 86% -10%, rgba(191,217,90,.12), transparent 62%),
    radial-gradient(860px 540px at -8% 8%, rgba(0,0,0,.03), transparent 60%);
  opacity: .45;
}
.container{ max-width: var(--max); }

.topbar{
  background: rgba(244,244,241,.9);
  border-bottom: 1px solid var(--stroke);
}
.topbar__inner{ padding: 12px 0; gap: 22px; }
.brand__mark{
  width: 24px;
  height: 24px;
  border-radius: 7px;
}
.nav__link{
  color: var(--muted);
  font-weight: 540;
  font-size: 14px;
}
.nav__link:hover{ color: var(--ink); }
.nav__link::after{
  height: 1px;
  bottom: 1px;
  background: rgba(14,14,13,.65);
}
.nav-toggle{
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.9);
  font-weight: 650;
}

.button{
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  font-weight: 620;
  letter-spacing: .01em;
}
.button--primary{
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
.button--primary:hover{
  background: #1A1A18;
  color: var(--paper);
}
.button--ghost{
  background: rgba(255,255,255,.94);
  color: var(--ink);
}

.section{ padding: 38px 0 46px; }
#projects,
.section--frameworks,
.section--writing{
  background: transparent;
}
#projects{
  padding-top: 2px;
  padding-bottom: 23px;
}
#frameworks,
#writing{
  padding-top: 2px;
}
#journal{
  padding-top: 5px;
}
#journal .section__header{
  margin-bottom: 2px;
}
#projects .section__header{
  margin-bottom: 6px;
}
#contact{
  padding-top: 28px;
}
.section__title{
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 560;
  letter-spacing: -0.025em;
}
.section__subtitle{
  color: var(--muted);
  max-width: 64ch;
  line-height: 1.6;
}

.hero{
  background: transparent;
  padding: 10px 0 14px;
}
.button--minimal{
  background: transparent;
  border-color: rgba(14,14,13,.2);
  color: rgba(14,14,13,.68);
  font-size: 0.82rem;
  font-weight: 560;
  letter-spacing: 0;
  padding: 6px 12px;
  box-shadow: none;
}
.button--minimal:hover{
  background: transparent;
  border-color: rgba(14,14,13,.35);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: none;
}
.hero__title-line1{
  font-size: clamp(22px, 1.95vw, 26px);
  font-weight: 620;
  line-height: 1.48;
  margin-bottom: 20px;
}
.hero__title-accent{ color: rgba(14,14,13,.56); }
.hero__about{
  font-size: clamp(16px, 1.28vw, 18px);
  color: var(--muted);
  margin-top: 20px;
}
#heroAbout2{
  color: var(--muted);
  line-height: 1.6;
  max-width: 62ch;
}

.card,
#frameworksGrid .card--framework,
.writing-item,
.framework-step,
.framework-when-card,
.framework-applied-card,
.analytics-subcard,
.analytics-table-wrap{
  background: var(--paper);
  border: 1px solid var(--stroke2);
  border-radius: var(--radius2);
  box-shadow: none;
}

.card{
  padding: 20px;
}
.card::before{ content: none; }

.card--project,
#frameworksGrid .card--framework,
.writing-item{
  transition: transform .16s ease, border-color .18s ease, background .18s ease;
}
.card--project:hover,
#frameworksGrid .card--framework:hover,
.writing-item:hover{
  transform: translateY(-2px);
  border-color: rgba(14,14,13,.32);
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}

.card__title-link{
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 1.08rem;
  font-weight: 620;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}
a.card__title-link:hover{
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
}

.card__summary{
  padding-left: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

.pill-row{ margin-top: 10px; gap: 6px; }
.pill{
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--stroke2);
  border-radius: 999px;
  background: #FBFBF9;
  color: rgba(14,14,13,.72);
}
.pill--soft{
  background: #FBFBF9;
}

.card__ctas{ gap: 12px; }
.card__cta{ font-size: 13px; }
.card__cta--primary{
  border: 1px solid var(--stroke2);
  border-radius: 10px;
  padding: 7px 11px;
  background: var(--ink);
  color: var(--paper);
}
.card__cta--primary:hover{
  border-color: var(--ink);
  background: #1A1A18;
  color: var(--paper);
}
.card__cta--secondary{
  color: rgba(14,14,13,.7);
  font-weight: 560;
}
.card__cta--secondary:hover{ color: var(--ink); }

.writing-item{
  border-left: 1px solid var(--stroke2);
  background: var(--paper);
}
.writing-item__card{
  padding: 18px 20px 16px;
}
.writing-item__header-row{
  gap: 14px;
}
.writing-item__meta-row{
  font-size: .74rem;
  letter-spacing: .06em;
  color: rgba(14,14,13,.56);
}
.writing-item__meta-cat{
  text-transform: uppercase;
  font-weight: 650;
}
.writing-item__meta-read{
  font-weight: 560;
  color: rgba(14,14,13,.62);
}
.writing-item__description{
  color: var(--muted);
  margin-bottom: 6px;
}

#frameworksGrid .card--framework{
  padding: 18px 18px 16px;
  border-radius: var(--radius2);
}
.framework-card__title{
  font-size: 1.03rem;
  font-weight: 610;
  margin-bottom: 6px;
}
.framework-card__desc{
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.58;
}
#frameworksGrid .card--framework .bullets--tight{
  color: rgba(14,14,13,.72);
}

.framework-visual,
.llm-visual,
.analytics-framework,
.agentic-analytics-framework{
  background: transparent;
}
.framework-visual__title,
.llm-visual__title{
  font-weight: 560;
  letter-spacing: -0.028em;
}
.framework-visual__strapline,
.llm-visual__strapline{
  color: var(--muted);
  line-height: 1.6;
}
.framework-step,
.analytics-subcard,
.framework-when-card,
.framework-applied-card{
  border-radius: 14px;
  border: 1px solid var(--stroke2);
}
.framework-step__title,
.framework-visual__when-heading,
.framework-visual__applied-heading{
  font-weight: 560;
}
.analytics-table th,
.analytics-table td{
  border-bottom: 1px solid rgba(14,14,13,.1);
}
.analytics-table th{
  background: #F7F7F4;
}

.framework-applied-card:hover,
.llm-applied-card:hover{
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}

.footer{
  border-top: 1px solid var(--stroke);
  margin-top: 24px;
}

/* 2026 visual uplift: modern color + stronger energy */
:root{
  --bg: #F3F5FB;
  --paper: #FFFFFF;
  --ink: #0B1220;
  --muted: rgba(11,18,32,.70);
  --faint: rgba(11,18,32,.52);
  --stroke: rgba(11,18,32,.14);
  --stroke2: rgba(11,18,32,.22);
  --lime: #B2FF59;
  --lime2: #84E95B;
  --ring: 0 0 0 3px rgba(99,102,241,.28);
}

body{
  background:
    radial-gradient(1200px 680px at 95% -10%, rgba(59,130,246,.20), transparent 60%),
    radial-gradient(1000px 640px at -10% 4%, rgba(132,233,91,.16), transparent 58%),
    linear-gradient(180deg, #F5F7FF 0%, #F3F5FB 100%);
}
body::before{
  background:
    radial-gradient(840px 460px at 82% 6%, rgba(99,102,241,.16), transparent 64%),
    radial-gradient(880px 500px at 10% 0%, rgba(16,185,129,.12), transparent 66%);
  opacity: .6;
}

.topbar{
  background: rgba(244,247,255,.82);
  border-bottom: 1px solid rgba(11,18,32,.10);
}
.brand__mark{
  background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
}
.nav__link{
  color: rgba(11,18,32,.66);
}
.nav__link:hover{ color: #0F172A; }

.button--primary{
  background: linear-gradient(135deg, #111827 0%, #1F2937 100%);
}
.button--primary:hover{
  background: linear-gradient(135deg, #0B1220 0%, #111827 100%);
}

.section__title{
  color: #0B1220;
  font-weight: 610;
}
.section__subtitle{ color: rgba(11,18,32,.68); }

.hero__title-line1{
  color: #0B1220;
}
.hero__title-accent{
  color: #334155;
}

.card,
#frameworksGrid .card--framework,
.writing-item,
.framework-step,
.framework-when-card,
.framework-applied-card,
.analytics-subcard,
.analytics-table-wrap{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(11,18,32,.14);
}

.card--project:hover,
#frameworksGrid .card--framework:hover,
.writing-item:hover{
  transform: translateY(-3px);
  border-color: rgba(59,130,246,.34);
  box-shadow: 0 14px 30px rgba(30,41,59,.10);
}

.card__title-link{
  color: #0F172A;
}
a.card__title-link:hover{
  color: #1D4ED8;
  text-decoration: none;
}

.pill{
  background: linear-gradient(135deg, rgba(186,230,253,.55) 0%, rgba(187,247,208,.5) 100%);
  border-color: rgba(14,116,144,.24);
  color: rgba(14,116,144,.88);
}
.pill--soft{
  background: linear-gradient(135deg, rgba(224,231,255,.60) 0%, rgba(219,234,254,.60) 100%);
  border-color: rgba(79,70,229,.2);
  color: rgba(67,56,202,.85);
}

.card__cta--primary{
  border-color: rgba(30,41,59,.20);
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
}
.card__cta--primary:hover{
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
}
.card__cta--secondary{
  color: rgba(37,99,235,.8);
}

.writing-item{
  border-left: 3px solid rgba(59,130,246,.28);
}
.writing-item__meta-row{
  color: rgba(30,64,175,.58);
}
.writing-item__meta-cat{
  color: rgba(30,64,175,.78);
}

.framework-card__desc,
.card__summary,
.writing-item__description{
  color: rgba(15,23,42,.70);
}

.analytics-table th{
  background: linear-gradient(180deg, rgba(224,231,255,.58) 0%, rgba(219,234,254,.42) 100%);
}
.analytics-flow__node{
  border-color: rgba(30,64,175,.22);
  background: rgba(239,246,255,.78);
  color: rgba(30,64,175,.86);
}
.analytics-flow__arrow{
  color: rgba(30,64,175,.55);
}

.framework-visual__title,
.llm-visual__title,
.framework-step__title,
.framework-visual__when-heading,
.framework-visual__applied-heading{
  color: #0B1220;
}

.footer{
  border-top: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.44);
}

/* Journal list: plain rows with separators */
.writing-list{
  gap: 0;
}
.writing-item{
  border: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(11,18,32,.14);
  box-shadow: none;
}
.writing-item:hover{
  transform: none;
  background: rgba(255,255,255,.35);
  border-color: rgba(11,18,32,.14);
  box-shadow: none;
}
.writing-item__card{
  padding: 14px 0;
}
.writing-item__meta-row{
  grid-template-columns: 112px 86px;
}
.writing-item__tag-pill{
  border: 1px solid rgba(99,102,241,.35);
  background: linear-gradient(135deg, rgba(219,234,254,.58) 0%, rgba(224,231,255,.56) 100%);
  color: rgba(67,56,202,.92);
}

.project-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 3px;
  white-space: nowrap;
}
.project-status--in-progress{
  background: rgba(59,130,246,.14);
  color: rgba(30,64,175,.92);
}

/* Premium motion layer: subtle, calm, and performant */
.motion-hero{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.motion-hero.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.motion-reveal{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s ease-out, transform .32s ease-out, box-shadow .2s ease, background .2s ease;
  will-change: opacity, transform;
}
.motion-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

#projectsGrid .card--project{
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
#projectsGrid .card--project:hover{
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 14px 28px rgba(15,23,42,.11);
}

#homeJournalGrid .writing-item,
#writingGrid .writing-item{
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, opacity .3s ease;
}
#homeJournalGrid .writing-item:hover,
#writingGrid .writing-item:hover{
  transform: translateX(2px);
  background: rgba(255,255,255,.5);
}

.button{
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.button:hover{
  transform: scale(1.02);
  filter: brightness(1.03);
}
.button:active{
  transform: scale(.97);
}

@media (prefers-reduced-motion: reduce){
  .motion-hero,
  .motion-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
  #projectsGrid .card--project:hover,
  #homeJournalGrid .writing-item:hover,
  #writingGrid .writing-item:hover,
  .button:hover,
  .button:active{
    transform: none;
    filter: none;
  }
}