/* ==========================================================================
   NatureJAB · /links — Mark V wrap QR destination
   Production stylesheet for Webflow (Supabase-hosted embed).
   Scoped entirely under #lk-root — NO global reset, so Webflow's native
   nav/footer are never touched (site landmine: a `*` reset nukes chrome).
   Palette + type pulled from the live site (hero.css / meet-page.css):
   ground #0D0E0A · surface #14150F · border #2A2B24 · orange #FF5B1F ·
   lime #D4F25A / green #5DBA63 · bone #F3EFE3 · grays #A8A393 / #54524A ·
   Archivo Black / Bitter / JetBrains Mono.
   Print identity: squared corners throughout (the site has zero radius),
   layered card shadows, mono eyebrows — per the 2026-07-21 visual review.
   ========================================================================== */

/* ---- fixed site-style background: near-black ground + soft orange/lime glow
   (mirrors hero.css radial glows) ---- */
body { background: #0D0E0A !important; }
#lk-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,91,31,0.16) 0%, transparent 55%),
    radial-gradient(90% 60% at 80% 20%, rgba(212,242,90,0.05) 0%, transparent 60%),
    radial-gradient(90% 70% at 15% 85%, rgba(93,186,99,0.045) 0%, transparent 60%),
    #0D0E0A;
}
#lk-sky::after { /* faint drifting ember wash, GPU-cheap, respects reduced-motion */
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(40% 40% at 50% 60%, rgba(255,91,31,0.06), transparent 70%);
  animation: lk-drift 14s ease-in-out infinite alternate;
}
@keyframes lk-drift { from { transform: translate3d(-4%,2%,0); } to { transform: translate3d(4%,-3%,0); } }

/* ---- scope + reset (contained) ---- */
#lk-root, #lk-root *, #lk-root *::before, #lk-root *::after { box-sizing: border-box; }
#lk-root {
  position: relative; z-index: 2;
  margin: 0 auto; max-width: 480px; padding: 0 16px 40px;
  color: #F3EFE3;
  font-family: "Bitter", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
#lk-root a { text-decoration: none; color: inherit; }

/* ---- hero header: Julian (halftone founder art) over the ground color ---- */
.lk-hero {
  position: relative; height: 285px; margin: 0 -16px;   /* full-bleed inside #lk-root */
  overflow: hidden;
  /* torn-paper bottom edge — the collage language, not a smooth dissolve */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 96% calc(100% - 2px),
    90% 100%, 82% calc(100% - 5px), 74% calc(100% - 1px), 65% calc(100% - 7px),
    57% calc(100% - 3px), 48% 100%, 39% calc(100% - 6px), 30% calc(100% - 2px),
    22% calc(100% - 8px), 14% calc(100% - 3px), 7% calc(100% - 6px), 0 calc(100% - 2px));
}
@media (max-height: 700px) { .lk-hero { height: 240px; } } /* countdown clears the fold on small phones */
.lk-hero-media {
  position: absolute; inset: 0;
  background-image: url("https://oiwpftjkdwsnleadriyp.supabase.co/storage/v1/render/image/public/assets/landing-page/about-founder-image.png?width=880&quality=85");
  background-size: cover; background-position: top center;
}
.lk-hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,14,10,.18) 0%, rgba(13,14,10,0) 30%, rgba(13,14,10,.65) 72%, #0D0E0A 100%);
}
.lk-hero-text { position: absolute; left: 20px; right: 20px; bottom: 16px; }
.lk-name {
  font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: 30px; letter-spacing: -0.02em; text-transform: uppercase;
  margin: 0; line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0,0,0,.75);
}
.lk-tag {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 2.6px;
  text-transform: uppercase; color: #FF5B1F; margin: 8px 0 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.lk-bio {
  font-size: 13.5px; line-height: 1.62; color: #A8A393; margin: 16px auto 0;
  max-width: 36ch; text-align: center;
}
.lk-bio b { color: #F3EFE3; font-weight: 600; }

/* ---- pinned event card ---- */
.lk-event {
  display: block; position: relative; overflow: hidden;
  background: #1F2018; border: 1px solid #FF5B1F;
  margin-top: 16px; padding: 17px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(243,239,227,.05);
  transition: transform .16s, box-shadow .16s;
}
.lk-event:hover, .lk-event:focus-visible {
  transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(255,91,31,.6); outline: none;
}
.lk-event:active { transform: scale(.985); }
.lk-event:focus-visible { outline: 2px solid #FF5B1F; outline-offset: 3px; }
.lk-pin {
  position: absolute; top: 0; right: 0; background: #FF5B1F; color: #12100C;
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; padding: 4px 9px; text-transform: uppercase;
}
.lk-ev-when {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase; color: #FF5B1F;
}
.lk-ev-name {
  font-family: "Archivo Black", sans-serif; font-size: 19px; margin: 6px 0 3px;
  line-height: 1.1; text-transform: uppercase; letter-spacing: -0.02em;
}
.lk-ev-where { font-size: 12.5px; color: #A8A393; }
.lk-count { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #2A2B24; align-items: center; }
.lk-unit { text-align: center; }
.lk-num {
  font-family: "JetBrains Mono", monospace; font-size: 21px; font-weight: 700; color: #F3EFE3;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.lk-lab { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1.5px; color: #A8A393; text-transform: uppercase; margin-top: 5px; }
.lk-rsvp { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 700; color: #FF5B1F; letter-spacing: .5px; }
.lk-live-now { font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 700; color: #5DBA63; letter-spacing: 1px; }

/* ---- primary rows ---- */
.lk-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lk-row {
  display: flex; align-items: center; gap: 13px;
  background: #14150F; border: 1px solid #2A2B24;
  padding: 14px 15px; transition: border-color .16s, background .16s, transform .16s;
}
.lk-row:hover, .lk-row:focus-visible { background: #1F2018; border-color: #54524A; transform: translateX(3px); outline: none; }
.lk-row:active { background: #1F2018; transform: scale(.985); }
.lk-row:focus-visible { outline: 2px solid #FF5B1F; outline-offset: 3px; }
.lk-ico { width: 20px; height: 20px; flex: none; color: #A8A393; }
.lk-rtxt { min-width: 0; flex: 1; }
.lk-rlabel { font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 600; }
.lk-rsub { font-size: 12.5px; color: #A8A393; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-arw { color: #54524A; flex: none; transition: color .16s; }
.lk-row:hover .lk-arw, .lk-row:active .lk-arw { color: #FF5B1F; }

/* ---- section label ---- */
.lk-sec { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; }
.lk-sec span { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #A8A393; white-space: nowrap; }
.lk-sec::after { content: ""; flex: 1; height: 1px; background: #2A2B24; }

/* ---- tile grid (social / ventures / more) ---- */
.lk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lk-tile {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: #14150F; border: 1px solid #2A2B24;
  padding: 15px 14px; transition: border-color .16s, background .16s;
}
.lk-tile:hover, .lk-tile:focus-visible { background: #1F2018; border-color: #FF5B1F; outline: none; }
.lk-tile:active { background: #1F2018; transform: scale(.985); }
.lk-tile:focus-visible { outline: 2px solid #FF5B1F; outline-offset: 3px; }
.lk-tile span { font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 600; line-height: 1.35; min-width: 0; overflow-wrap: break-word; }

/* ---- Plastolene journey band --------------------------------------------
   Default "hyperreal": halftone transformation schematic on the page ground,
   hairline rules top/bottom, edge fade left/right, small editorial captions
   top-left (the designer's original framing — do not center them; they
   collide with the canvas ruler). ".lkpj-animated" restores the framed dark
   box + bottom-center scene titles the cinematic variant was built around. */
.lkpj-wrap {
  position: relative; height: 250px; overflow: hidden;
  background: #0D0E0A;
  border-top: 1px solid #1D1E17; border-bottom: 1px solid #1D1E17;
  margin: 0 -16px 4px;   /* full-bleed inside #lk-root */
}
.lkpj-canvas { position: absolute; inset: 0; z-index: 0; }
.lkpj-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #0D0E0A 0%, rgba(13,14,10,0) 10%, rgba(13,14,10,0) 90%, #0D0E0A 100%);
}
.lkpj-label {
  position: absolute; top: 15px; left: 18px; z-index: 2;
  font-family: "Archivo Black", sans-serif; font-size: 13px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 1.6px; color: #F3EFE3;
  opacity: 0; transition: opacity .7s; white-space: nowrap;
}
.lkpj-label.show { opacity: 1; }
.lkpj-sub {
  position: absolute; top: 36px; left: 18px; z-index: 2;
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase; color: #5DBA63;
  opacity: 0; transition: opacity .7s; white-space: nowrap;
}
.lkpj-sub.show { opacity: .85; }
/* animated variant: framed cinema box, bottom-center titles */
.lkpj-wrap.lkpj-animated { background: #060d13; border-color: transparent; }
.lkpj-wrap.lkpj-animated::after { background: none; }
.lkpj-wrap.lkpj-animated .lkpj-label {
  top: auto; left: 50%; bottom: 32px; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 2.5px; text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.lkpj-wrap.lkpj-animated .lkpj-sub {
  top: auto; left: 50%; bottom: 15px; transform: translateX(-50%);
}
/* press variant (design-team band): transparent canvas halftone press sheet —
   the page ground IS the band background, so there is no box seam at either
   edge (visual contract §1). ≤180px (§7). Bone Archivo headline + mono green
   sub bottom-center (§6); hard edges, no shadows, no frame. */
.lkpj-wrap.lkpj-press {
  height: 150px; background: transparent;
  border-top: 0; border-bottom: 0;
}
.lkpj-wrap.lkpj-press::after { background: none; }
.lkpj-wrap.lkpj-press .lkpj-label {
  top: auto; left: 50%; bottom: 28px; transform: translateX(-50%);
  letter-spacing: .5px; transition: opacity .5s;
}
.lkpj-wrap.lkpj-press .lkpj-sub {
  top: auto; left: 50%; bottom: 12px; transform: translateX(-50%);
  letter-spacing: 1.6px; transition: opacity .5s;
}
.lkpj-wrap.lkpj-press .lkpj-sub.show { opacity: .9; }

/* ---- giving card ---- */
.lk-give-card {
  background: #1F2018; border: 1px solid rgba(93,186,99,.35); padding: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(243,239,227,.05);
}
.lk-give-head { display: flex; align-items: baseline; gap: 8px; }
.lk-raised { font-family: "JetBrains Mono", monospace; font-size: 25px; font-weight: 700; color: #5DBA63; font-variant-numeric: tabular-nums; line-height: 1; }
.lk-goal { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #A8A393; }
.lk-bar { height: 6px; background: #0D0E09; margin: 12px 0 9px; overflow: hidden; border: 1px solid #2A2B24; }
.lk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5DBA63, #D4F25A); }
.lk-give-meta { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 11px; color: #A8A393; }
.lk-give-meta b { color: #F3EFE3; font-weight: 700; }
.lk-give-pitch { font-size: 13.5px; line-height: 1.6; color: #A8A393; margin: 14px 0 15px; }
.lk-give-pitch b { color: #F3EFE3; font-weight: 600; }
.lk-give-btn {
  display: block; text-align: center; padding: 13px 14px;
  font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700;
  border: 1px solid #2A2B24; color: #F3EFE3; background: #14150F;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.lk-give-btn.lk-primary { background: #5DBA63; color: #0B1508; border-color: #5DBA63; }
.lk-give-btn.lk-primary:hover, .lk-give-btn.lk-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(93,186,99,.7); outline: none; }
.lk-give-btn:active { transform: scale(.985); }
.lk-give-btn:not(.lk-primary):hover { border-color: #54524A; }
.lk-give-btn:focus-visible { outline: 2px solid #5DBA63; outline-offset: 3px; }
.lk-tiers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.lk-tiers span { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .3px; color: #A8A393; border: 1px solid #2A2B24; padding: 4px 9px; }
.lk-legal { font-family: "JetBrains Mono", monospace; font-size: 10px; line-height: 1.7; color: #A8A393; opacity: .85; margin: 13px 0 0; text-align: center; }

/* ---- footer ---- */
.lk-foot { margin-top: 32px; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1.2px; color: #A8A393; line-height: 2; text-transform: uppercase; }
.lk-contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: #F3EFE3;
  background: #14150F; border: 1px solid #54524A;
  transition: border-color .16s, background .16s, transform .16s;
}
.lk-contact-btn .lk-ico { width: 17px; height: 17px; color: #FF5B1F; }
.lk-contact-btn:hover, .lk-contact-btn:focus-visible { background: #1F2018; border-color: #FF5B1F; outline: none; }
.lk-contact-btn:active { background: #1F2018; transform: scale(.985); }
.lk-contact-btn:focus-visible { outline: 2px solid #FF5B1F; outline-offset: 3px; }
.lk-foot-site { color: #F3EFE3; display: inline-block; padding: 6px 4px; }

/* ---- states ---- */
.lk-loading, .lk-error { text-align: center; padding: 60px 20px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: #A8A393; letter-spacing: 1px; }
.lk-error a { color: #FF5B1F; }

@media (prefers-reduced-motion: reduce) { #lk-root *, #lk-sky::after { animation: none !important; transition: none !important; } }