:root {
    color-scheme: dark;
    --ink: #0b0c0a;
    --ink-2: #131511;
    --acid: #def63a;
    --acid-rgb: 222,246,58;
    --acid-deep: #b8cc2c;
    --chalk: #f2f2ec;
    --smoke: #b9bcb2;
    --rule: rgba(242, 242, 236, .38);
    --display: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
    --hand: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
    --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
    --tech: "Share Tech Mono", "Courier Prime", ui-monospace, monospace;
    --sans: "Courier Prime", "Courier New", ui-monospace, monospace;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--ink);
    color: var(--chalk);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
  }
  /* grunge ground: cracks canvas + noise */
  #cracks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .noise {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .62 0 0 0 0 .58 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(0,0,0,.65) 100%); }
  .page { position: relative; z-index: 2; padding-inline: 20px; }
  .wrap { max-width: 1080px; margin: 0 auto; }

  /* nav */
  header.nav {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
    margin-inline: -20px; padding: 14px 20px;
    background: linear-gradient(var(--ink) 55%, rgba(11,12,10,0));
  }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .brand { display: flex; align-items: center; gap: 10px; color: var(--acid); text-decoration: none;
    font-family: var(--sans); font-weight: 600; font-size: 1.35rem; letter-spacing: .01em; }
  .brand img { width: 46px; height: auto; display: block; }
  .nav ul { list-style: none; display: flex; gap: clamp(14px, 3vw, 34px); margin: 0; padding: 0; flex-wrap: wrap; }
  .nav a.link { color: var(--chalk); text-decoration: none; font-weight: 500; font-size: 1.05rem;
    padding: 4px 6px 8px; position: relative; }
  .nav a.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--acid); border-radius: 2px; transform: scaleX(0); transition: transform .25s; }
  .nav a.link:hover::after, .nav a.link.active::after { transform: scaleX(1); }
  a:focus-visible, button:focus-visible { outline: 2px dashed var(--acid); outline-offset: 4px; }

  /* hero */
  .hero { text-align: center; padding-block: clamp(20px, 5vw, 50px) 30px; }
  .title-wrap { margin: 0; line-height: 0; }
  .wordmark { width: min(860px, 100%); height: auto; transform: rotate(-2deg); filter: drop-shadow(0 0 18px rgba(var(--acid-rgb),.18)); }
  .term { font-family: var(--mono); font-weight: 700; color: var(--chalk); margin: clamp(14px, 3vw, 28px) 0 0;
    font-size: clamp(1.25rem, 4.2vw, 2.4rem); line-height: 1.2; min-height: 1.2em; white-space: pre-wrap; }
  .term .p, .term .op { color: var(--acid); }
  .cursor { display: inline-block; width: .6em; height: .12em; background: var(--acid); margin-left: .08em;
    vertical-align: -.05em; box-shadow: 0 0 10px var(--acid); animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .sudo { font-family: var(--mono); font-weight: 700; text-align: center; margin: 34px auto 0;
    font-size: clamp(1.2rem, 3.6vw, 1.9rem); color: var(--chalk); }
  .sudo .p { color: var(--acid); }
  .sudo .cmd { color: var(--acid); text-shadow: 0 0 12px rgba(var(--acid-rgb),.45); }
  /* glitch on the wordmark */
  .title-wrap { position: relative; }
  .title-wrap.glitch .wordmark { animation: glitch .45s steps(2) 1; }
  @keyframes glitch {
    0% { transform: rotate(-2deg) translate(0,0); filter: drop-shadow(-4px 0 0 rgba(255,0,90,.7)) drop-shadow(4px 0 0 rgba(0,240,255,.7)); clip-path: inset(0 0 55% 0); }
    25% { transform: rotate(-2deg) translate(-6px,2px); clip-path: inset(40% 0 20% 0); }
    50% { transform: rotate(-2deg) translate(5px,-2px); filter: drop-shadow(3px 0 0 rgba(255,0,90,.7)) drop-shadow(-3px 0 0 rgba(0,240,255,.7)); clip-path: inset(10% 0 60% 0); }
    75% { transform: rotate(-2deg) translate(-2px,1px); clip-path: inset(65% 0 0 0); }
    100% { transform: rotate(-2deg); clip-path: none; }
  }
  /* animation layers */
  #rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
  #spray { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
  .lede { max-width: 44ch; margin: 22px auto 0; color: var(--smoke); font-size: 1.05rem; }
  .cta { display: inline-block; margin-top: 22px; font-family: var(--hand); font-size: 1.3rem; color: var(--ink);
    background: var(--acid); padding: 6px 26px 8px; text-decoration: none; transform: rotate(-1.5deg);
    clip-path: polygon(2% 8%, 98% 0, 100% 88%, 3% 100%); transition: transform .2s; }
  .cta:hover { transform: rotate(0deg) scale(1.04); }

  /* rough dividers */
  .rule { height: 2px; margin: 34px 0 26px; opacity: .8;
    background: repeating-linear-gradient(90deg, var(--rule) 0 26px, transparent 26px 30px, var(--rule) 30px 44px, transparent 44px 47px); }

  /* section headings */
  section { scroll-margin-top: 90px; }
  .h2 { text-align: center; margin: 0 0 30px; }
  .h2 span { display: inline-block; font-family: var(--hand); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3rem);
    line-height: 1; color: var(--chalk); position: relative; padding-bottom: 10px; filter: url(#brush); }
  .h2 span::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: 0; height: 5px;
    background: var(--chalk); border-radius: 3px; transform: rotate(-1.5deg); clip-path: polygon(0 40%, 100% 0, 97% 100%, 2% 90%); }

  /* services */
  .services { display: grid; grid-template-columns: repeat(3, 1fr); }
  .svc { text-align: center; padding: 6px clamp(14px, 3vw, 34px) 10px; position: relative; }
  .svc + .svc::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 3px;
    background: var(--acid); opacity: .75; border-radius: 2px; filter: url(#brush); }
  .svc img.icon { width: 80px; height: 76px; object-fit: contain; display: block; margin: 0 auto 12px; }
  .svc svg.icon { width: 76px; height: 76px; color: var(--acid); display: block; margin: 0 auto 12px; }
  .svc h3 { font-family: var(--hand); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.1; margin: 0 0 10px; color: var(--chalk); }
  .svc p { margin: 0 auto; max-width: 30ch; color: var(--chalk); opacity: .9; }
  .svc ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
  .svc li { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--acid); border: 1px solid rgba(var(--acid-rgb),.45); padding: 2px 8px; }

  /* about */
  .about p { font-family: var(--mono); font-size: 1.05rem; line-height: 1.6; text-align: center; max-width: 66ch; margin: 0 auto; }
  .about p + p { margin-top: 14px; }
  .about .stroke { display: block; width: min(560px, 100%); height: 40px; margin: 22px auto 0; }

  /* contact */
  .contact-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px 48px; }
  .contact-item { display: flex; align-items: center; gap: 14px; font-size: 1.15rem; }
  .contact-item svg { width: 42px; height: 42px; color: var(--acid); flex: none; }
  .contact-item a { color: var(--chalk); text-decoration: none; }
  .contact-item a:hover { color: var(--acid); }
  .copy { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
    background: none; color: var(--smoke); border: 1px dashed rgba(242,242,236,.35); padding: 3px 8px; cursor: pointer; }
  .copy:hover { color: var(--acid); border-color: var(--acid); }
  .vbar { width: 3px; height: 44px; background: var(--acid); border-radius: 2px; filter: url(#brush); }
  .social { display: flex; justify-content: center; gap: 36px; margin-top: 24px; }
  .social a { color: var(--acid); display: block; transition: transform .2s; }
  .social a:hover { transform: translateY(-3px) rotate(-4deg); }
  .social svg { width: 42px; height: 42px; display: block; }
  /* footer bar */
  .site-footer { margin: 40px -20px 0; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: rgba(5,6,4,.85); border-top: 1px solid rgba(var(--acid-rgb),.25); font-family: var(--tech); }
  .foot { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; }
  .powered { display: flex; align-items: center; gap: 14px; }
  .powered img { width: 120px; height: auto; display: block; }
  .pb-text { display: flex; flex-direction: column; line-height: 1.25; }
  .pb { text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--smoke); }
  .stack { color: var(--acid); font-size: 1.05rem; letter-spacing: .02em; }
  .stack i { font-style: normal; color: var(--smoke); padding-inline: .5em; }
  .copyright { margin: 0; color: var(--smoke); font-size: .95rem; }
  .status { display: flex; align-items: center; gap: 12px; color: var(--acid); text-transform: uppercase;
    letter-spacing: .08em; font-size: 1.1rem; }
  .led { width: 12px; height: 12px; border-radius: 50%; background: #7bd23a; box-shadow: 0 0 6px #7bd23a, 0 0 14px rgba(123,210,58,.7);
    animation: led 1.6s ease-in-out infinite; }
  @keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: .25; box-shadow: 0 0 2px #7bd23a; } }
  @media (max-width: 760px) { .foot { justify-content: center; text-align: center; } .copyright { order: 3; width: 100%; } }

  @media (max-width: 760px) {
    .services { grid-template-columns: 1fr; gap: 30px; }
    .svc + .svc::before { left: 20%; right: 20%; top: -16px; bottom: auto; width: auto; height: 3px; }
    .vbar { display: none; }
    .nav .wrap { justify-content: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cursor, .led { animation: none; }
    #rain, #spray { display: none; }
    html { scroll-behavior: auto; }
    .drip { animation: none; }
    * { transition: none !important; }
  }

  /* WordPress additions */
  .admin-bar header.nav { top: calc(32px + env(safe-area-inset-top, 0px)); }
  @media (max-width: 782px) { .admin-bar header.nav { top: 0; position: relative; } }
  .about .stroke { color: var(--acid); }
  .about-text p, .about-extra p { font-family: var(--mono); font-size: 1.05rem; line-height: 1.6; text-align: center; max-width: 66ch; margin: 0 auto; }
  .about-text p + p { margin-top: 14px; }
  .about-extra { margin-top: 14px; }
  .title-text { font-family: var(--display); color: var(--acid); font-size: clamp(3.5rem, 14vw, 9rem); line-height: 1; transform: rotate(-2deg); }
  .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

  /* Blog posts and regular pages */
  .content-area { padding-block: 30px 20px; max-width: 820px; }
  .entry { padding-block: 10px 30px; border-bottom: 2px dashed rgba(242,242,236,.18); margin-bottom: 30px; }
  .entry:last-of-type { border-bottom: 0; }
  .entry-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 6px; }
  .entry-title a { color: var(--chalk); text-decoration: none; }
  .entry-title a:hover { color: var(--acid); }
  .entry-meta { font-family: var(--tech); color: var(--smoke); margin: 0 0 16px; }
  .entry-meta .op, .term .op, .sudo .op { color: var(--acid); }
  .entry-thumb img { display: block; width: 100%; height: auto; margin-bottom: 18px; }
  .entry-content { line-height: 1.7; }
  .entry-content a { color: var(--acid); }
  .entry-content h2, .entry-content h3 { font-family: var(--display); font-weight: 400; color: var(--chalk); }
  .entry-content img { height: auto; }
  .entry-content pre, .entry-content code { font-family: var(--tech); background: rgba(0,0,0,.5); border: 1px solid rgba(var(--acid-rgb),.25); }
  .entry-content pre { padding: 14px; overflow-x: auto; }
  .entry-content blockquote { border-left: 3px solid var(--acid); margin-left: 0; padding-left: 18px; color: var(--smoke); }
  .pager .nav-links { display: flex; gap: 10px; justify-content: center; font-family: var(--tech); }
  .pager a, .pager span { color: var(--chalk); padding: 4px 10px; border: 1px solid rgba(var(--acid-rgb),.35); text-decoration: none; }
  .pager .current { background: var(--acid); color: var(--ink); }
  .sudo .cmd { color: var(--acid); }
  .comments { margin-top: 30px; }
  .comment-list { list-style: none; padding: 0; }
  .comment-list li { border-left: 2px solid rgba(var(--acid-rgb),.4); padding-left: 14px; margin-bottom: 18px; }
  .comment-list .avatar { border-radius: 50%; vertical-align: middle; margin-right: 8px; }
  .comment-list a, .comment-form a { color: var(--acid); }
  .comment-form label { display: block; font-family: var(--tech); color: var(--smoke); margin-bottom: 4px; }
  .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
    width: 100%; background: rgba(0,0,0,.5); color: var(--chalk); border: 1px solid rgba(var(--acid-rgb),.35); padding: 10px; font-family: var(--mono); }
  .comment-form .submit { font-family: var(--display); font-size: 1.1rem; background: var(--acid); color: var(--ink); border: 0; padding: 8px 22px; cursor: pointer; }
  .comment-reply-title { font-family: var(--display); font-weight: 400; }

  .about .sudo { margin-top: 30px; }
  .stack { white-space: nowrap; }