/* ==========================================================================
   The Kit look (matches kit.kreations.world): soft corners, slim nav,
   § numbering, putty info blocks, marker-pen notes, framed app windows.
   Loaded after main.css, so these override its defaults.
   ========================================================================== */

:root {
  --page: var(--black);
  --radius: 12px;
  --radius-btn: 6px;
  --bw: 1px;
  --display-weight: 760;
  --display-track: -0.05em;
  --mark: "§";
}
body { counter-reset: lbl; }

/* header: blurred bar, plain links with an underline instead of folder tabs */
.site-header {
  background-color: rgba(10, 9, 12, .86);
  background-image: none;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-header::after { height: 1px; background: var(--line); }
.topbar { align-items: center; }
.tab-scroll { align-items: center; gap: 2px; }
.tab {
  margin: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--putty);
}
.tab:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.tab.active {
  padding: 10px 12px;
  border: 0;
  background: none;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--red);
  border-radius: 0;
}
.logo-divider { background: var(--line-2); width: 1px; }
.about-btn {
  background: var(--red); border-color: var(--red); color: var(--ink);
  font-family: var(--f-body); font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
.about-btn:hover { background: var(--red-deep); border-color: var(--red-deep); }
.about-btn.active { background: transparent; color: var(--red-text); }

/* § 01, § 02 … numbering on section labels */
.label::before {
  counter-increment: lbl;
  content: "§ " counter(lbl, decimal-leading-zero) "  ";
}
.label-mark::before { content: "§ 00"; }

.btn {
  font-family: var(--f-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
.chip,
.tags li { border-radius: 999px; }

/* colour blocks: project info sits on putty, like the kit's block-putty */
.info-block { background: var(--putty); color: var(--black); }
.info-block .label { color: var(--red-deep); }
.info-block .info-row { border-color: rgba(7, 6, 10, .16); }
.info-block .info-body p,
.info-block .feature-list li { color: #2a2730; }
.info-block .feature-list li::before { color: var(--red); }
.info-block .tags li { color: var(--black); border-color: rgba(7, 6, 10, .3); }
.info-block .tags-strong li { border-color: var(--red); }
.info-block .tag-wip,
.info-block .info-note { color: #4e434b; }
.info-block .btn-ghost { color: var(--black); border-color: rgba(7, 6, 10, .35); }
.info-block .btn-ghost:hover { border-color: var(--black); }
.info-block .btn-disabled { color: #4e434b; border-color: rgba(7, 6, 10, .35); }
.info-block mark.placeholder { color: var(--black); background: rgba(179, 33, 45, .14); outline-color: var(--red); }

.index-block { background: var(--card); }
.project-index a { border-radius: 10px; }
.project-index li + li a { border-top-color: var(--line); }

/* marker-pen notes */
.pen-note {
  display: block;
  font-family: var(--f-pen);
  color: var(--red-text);
  font-size: 22px;
  line-height: 1.1;
  transform: rotate(-4deg);
  pointer-events: none;
}
.pen-note-hero {
  position: absolute;
  right: var(--gutter);
  top: clamp(40px, 12vh, 140px);
  max-width: 14ch;
  text-align: right;
}
.pen-note-app {
  position: absolute;
  right: calc(var(--gutter) + 12px);
  top: -34px;
  transform: rotate(3deg);
  font-size: 20px;
}
@media (max-width: 700px) {
  .pen-note-hero { position: static; margin-top: 24px; text-align: left; }
  .pen-note-app { display: none; }
}


/* --------------------------------------------------------------------------
   Framed windows (borrowed from Evolve): a solid 2px frame and a hard offset
   shadow on every app window, so each project reads as an object on the page.
   --p-shadow / --p-frame come from _data/projects.json.
   -------------------------------------------------------------------------- */
.f-window {
  border: 2px solid var(--p-fg);
  box-shadow: 10px 10px 0 var(--p-shadow, var(--black)), 0 30px 70px -24px rgba(0, 0, 0, .5);
}
.app-window {
  border: 2px solid var(--p-frame, var(--line-2));
  box-shadow: 10px 10px 0 var(--p-frame, var(--red));
  margin-right: 10px;   /* room for the shadow on narrow screens */
}
.btn-red { box-shadow: 4px 4px 0 var(--black); }
.btn-red:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.closing .btn-light { box-shadow: 4px 4px 0 var(--black); }
.closing .btn-light:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.project-index a { border-top-width: 2px; }
.project-index { border-bottom-width: 2px; }
@media (max-width: 700px) {
  .f-window { box-shadow: 6px 6px 0 var(--p-shadow, var(--black)); }
  .app-window { box-shadow: 6px 6px 0 var(--p-frame, var(--red)); margin-right: 6px; }
}


/* --------------------------------------------------------------------------
   Hero → featured work: one continuous surface.
   The dot grid fades out, the hero lifts away as you scroll, and the first
   project window rises into place. (JS sets --leave and --enter, 0 → 1.)
   -------------------------------------------------------------------------- */
.home-hero { background: none; }
.home-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(201, 188, 170, .14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  pointer-events: none;
}
.home-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--topbar));
  pointer-events: none;
}
.hero-inner {
  z-index: 1;
  min-height: calc(84vh - var(--nav-h));
  opacity: calc(1 - var(--leave, 0) * .75);
  transform: translateY(calc(var(--leave, 0) * -48px));
}
.hero-ls { border-top: 0; }

/* the first project rises into place as the section arrives */
@media (min-width: 900px) {
  .js .featured-sticky { background: var(--cur-bg, var(--topbar)); }
  .js .featured .f-item.is-active .f-window {
    transform: translateY(calc((1 - var(--enter, 1)) * 90px)) rotate(calc(-1.5deg * var(--enter, 1)));
  }
  .js .featured .f-item.is-active .f-text {
    transform: translateY(calc((1 - var(--enter, 1)) * 40px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-inner { opacity: 1; transform: none; }
  .js .featured .f-item.is-active .f-window { transform: none !important; }
  .js .featured .f-item.is-active .f-text { transform: none !important; }
}