html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: #0b0d10
}

#pf {
  --bg: #0b0d10;
  --bg2: #10141a;
  --fg: #e8eaed;
  --fg72: rgba(232, 234, 237, .72);
  --fg55: rgba(232, 234, 237, .55);
  --fg45: rgba(232, 234, 237, .45);
  --fg35: rgba(232, 234, 237, .35);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .16);
  --acc: oklch(0.86 0.16 155);
  --on-acc: #0b0d10;
  --grid: rgba(255, 255, 255, .03);
  --nav-height: 65px;
  --acc-soft: color-mix(in srgb, var(--acc) 14%, transparent);
  --acc-bord: color-mix(in srgb, var(--acc) 45%, transparent);
  --glow: color-mix(in srgb, var(--acc) 10%, transparent);
  --nav: color-mix(in srgb, var(--bg) 82%, transparent);
  --scan: rgba(0, 0, 0, .16);
  --term: color-mix(in srgb, var(--bg2) 88%, transparent);
  --code-kw: oklch(0.75 0.17 20);
  --code-ty: oklch(0.78 0.13 200);
  --code-num: oklch(0.80 0.15 80);
  --code-mc: oklch(0.78 0.14 300);
}

#pf[data-theme="light"] {
  --bg: #f4f3ef;
  --bg2: #eae8e1;
  --fg: #15181c;
  --fg72: rgba(21, 24, 28, .78);
  --fg55: rgba(21, 24, 28, .6);
  --fg45: rgba(21, 24, 28, .5);
  --fg35: rgba(21, 24, 28, .4);
  --line: rgba(21, 24, 28, .13);
  --line2: rgba(21, 24, 28, .24);
  --acc: oklch(0.52 0.14 155);
  --on-acc: #f4f3ef;
  --grid: rgba(21, 24, 28, .05);
  --scan: rgba(21, 24, 28, .03);
  --code-kw: oklch(0.50 0.17 20);
  --code-ty: oklch(0.46 0.13 200);
  --code-num: oklch(0.50 0.15 80);
  --code-mc: oklch(0.48 0.14 300);
}

#pf[data-theme="light"] [data-ascii] {
  background-image: linear-gradient(100deg, rgba(21, 24, 28, .78) 0%, #15181c 38%, var(--acc) 88%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  opacity: 1 !important;
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .55) 14%, rgba(0, 0, 0, .82) 32%, #000 55%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .55) 14%, rgba(0, 0, 0, .82) 32%, #000 55%) !important;
}

#pf,
#pf * {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(44px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes blink {

  0%,
  49% {
    opacity: 1
  }

  50%,
  100% {
    opacity: 0
  }
}

@keyframes typew {
  from {
    width: 0
  }

  to {
    width: 8ch
  }
}

@keyframes gridpan {
  to {
    background-position: -56px -56px
  }
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

@keyframes bob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(7px)
  }
}

@keyframes twinkle {

  0%,
  100% {
    opacity: .12
  }

  50% {
    opacity: .55
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%)
  }
}

@keyframes drift {

  0%,
  100% {
    transform: translate3d(0, 0, 0)
  }

  50% {
    transform: translate3d(46px, -34px, 0)
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes ringpulse {
  0% {
    transform: translate(-50%, -50%) scale(.5);
    opacity: .7
  }

  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0
  }
}

@keyframes dashflow {
  to {
    stroke-dashoffset: -42
  }
}

/* responsive */
@media (min-width:861px) {
  #pf [data-mobilemenu] {
    display: none !important
  }
}

@media (max-width:860px) {
  #pf [data-navlinks]>a {
    display: none !important
  }

  #pf [data-navlinks] {
    gap: 10px !important
  }

  #pf [data-menubtn] {
    display: inline-flex !important
  }

  #pf [data-hero] [data-decor="brace"] {
    top: 7% !important;
    left: 6% !important;
    font-size: 20px !important
  }

  #pf [data-hero] [data-decor="tag"] {
    top: 7% !important;
    bottom: auto !important;
    left: auto !important;
    right: 8% !important
  }

  #pf [data-hero] [data-decor="plus"] {
    top: auto !important;
    bottom: 12% !important;
    left: auto !important;
    right: 10% !important
  }

  #pf #about {
    grid-template-columns: 1fr !important
  }

  #pf #about>div:first-child {
    border-right: none !important;
    padding: 44px clamp(24px, 5vw, 72px) 0 !important
  }

  #pf #about>div:first-child>div {
    position: static !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 18px !important
  }

  #pf #about>div:first-child>div>div:first-child {
    font-size: 52px !important
  }

  #pf #about>div:first-child>div>div:last-child {
    margin-top: 0 !important
  }

  #pf #about>div:last-child {
    padding-top: 36px !important
  }

  #pf #projects>div>article {
    grid-template-columns: 1fr !important
  }

  #pf #projects>div>article>div:first-child {
    min-height: auto !important
  }

  #pf [data-timeline]>div:first-child,
  #pf [data-timeline] [data-line-fill] {
    left: 12px !important;
    transform: none !important
  }

  #pf [data-timeline]>div[data-reveal] {
    grid-template-columns: 26px 1fr !important;
    align-items: start !important;
    column-gap: 16px !important
  }

  #pf [data-timeline]>div[data-reveal]>div:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 1/span 2 !important;
    padding-top: 5px !important
  }

  #pf [data-timeline]>div[data-reveal]>div:nth-child(2)>span:first-child {
    display: none !important
  }

  #pf [data-timeline]>div[data-reveal]>div:nth-child(odd) {
    grid-column: 2 !important;
    padding: 0 !important;
    text-align: left !important
  }

  #pf [data-timeline]>div[data-reveal]:nth-child(4)>div:nth-child(1),
  #pf [data-timeline]>div[data-reveal]:not(:nth-child(4))>div:nth-child(3) {
    grid-row: 1 !important;
    margin-bottom: 8px !important
  }

  #pf [data-timeline]>div[data-reveal]:nth-child(4)>div:nth-child(3),
  #pf [data-timeline]>div[data-reveal]:not(:nth-child(4))>div:nth-child(1) {
    grid-row: 2 !important
  }
}

@media (max-width:960px) {
  #pf [data-booksplit] {
    grid-template-columns: 1fr !important;
    min-height: auto !important
  }

  #pf [data-booksplit]>div:first-child {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
    flex-direction: column !important;
    gap: 28px !important
  }

  #pf [data-covercaption] {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    white-space: normal !important;
    text-align: center !important;
    width: min(320px, 56vw) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 20px auto 0 !important
  }

  #pf [data-isbn] {
    position: static !important;
    bottom: auto !important;
    transform: none !important;
    order: 2;
    text-align: center
  }

  #pf [data-featurecard] {
    grid-template-columns: 1fr !important
  }

  #pf [data-featurecard]>div:first-child {
    min-height: auto !important
  }
}

@media (min-width:961px) {
  #pf [data-featurecard]>div:first-child {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-width: 0 !important
  }
}

/* archive: always full rows (12 = 4·3 = 3·4 = 2·6 = 1·12) */
#pf [data-archive] {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

@media (max-width:1500px) {
  #pf [data-archive] {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (max-width:1020px) {
  #pf [data-archive] {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:660px) {
  #pf [data-archive] {
    grid-template-columns: 1fr
  }
}

/* skills: stack label above chips on mobile */
@media (max-width:700px) {
  #pf [data-skillrow] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: start !important
  }

  #pf [data-skillrow] [title] {
    white-space: normal !important
  }

  #pf [data-skilldesc] {
    display: inline !important
  }
}

/* contact CTAs: stack on mobile */
@media (max-width:600px) {
  #pf [data-ctas] {
    flex-direction: column !important;
    align-items: stretch !important
  }

  #pf [data-ctas]>a,
  #pf [data-ctas]>button {
    justify-content: center !important;
    text-align: center !important
  }
}