/* Laconova Labs — site styles. Dark, bronze + ember, hexagon-shield motif. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #100c09;
  --bg2: #0d0a07;
  --panel: #14100b;
  --panel2: #17110b;
  --line: #241d17;
  --line2: #2a2219;
  --border: #2e2620;
  --fg: #f4ede4;
  --muted: #b8aa9c;
  --muted2: #9d9082;
  --dim: #7d7062;
  --bronze: #c8913f;
  --bronze-h: #daa74f;
  --bronze-d: #7a5a2f;
  --ember: #d2542e;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --disp: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad: 80px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--bronze); text-decoration: none; }
a:hover { color: var(--bronze-h); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--disp); letter-spacing: -0.015em; }
.wrap { max-width: 1440px; margin: 0 auto; }
.mono { font-family: var(--mono); }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--bronze); font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; }
.eyebrow .rule { width: 26px; height: 1px; background: var(--bronze); }
.dot { width: 6px; height: 6px; background: var(--ember); border-radius: 50%; display: inline-block; }
.indev { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--ember); letter-spacing: 0.05em; }

/* ---- logo / header ---- */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo .logo-mark { height: 30px; width: auto; display: block; }
.logo .word { font-family: var(--disp); font-weight: 600; letter-spacing: 0.12em; font-size: 15px; color: var(--fg); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 34px var(--pad) 0; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted2); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--bronze); color: var(--bg); font-family: var(--disp); }
.btn-primary:hover { background: var(--bronze-h); color: var(--bg); }
.btn-ghost { border-color: #3a2f24; color: var(--fg); font-weight: 500; }
.btn-ghost:hover { color: var(--fg); border-color: var(--bronze-d); }

/* ---- welcome shield overlay ---- */
#welcome { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity 0.55s ease, visibility 0.55s ease; }
#welcome .glow { position: absolute; width: 900px; height: 900px; max-width: 130vw; max-height: 130vw; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(210,84,46,0.10), rgba(16,12,9,0)); pointer-events: none; }
.shield-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; cursor: pointer; background: none; border: none; transition: transform 0.7s cubic-bezier(.6,.05,.2,1), opacity 0.6s ease; }
.shield { position: relative; width: 580px; height: 630px; max-width: 86vw; display: flex; align-items: center; justify-content: center; }
.shield svg { position: absolute; width: 100%; height: 100%; }
.shield .rim { transition: stroke 0.25s ease; }
.shield-btn:hover .rim { stroke: var(--bronze-h); }
.shield-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.shield-inner .name { font-family: var(--disp); font-weight: 700; font-size: 50px; letter-spacing: 0.06em; line-height: 1; }
.shield-inner .labs { font-family: var(--disp); font-weight: 500; font-size: 27px; letter-spacing: 0.42em; color: var(--bronze); margin-top: 10px; padding-left: 0.42em; }
.shield-inner .div { width: 56px; height: 1px; background: var(--bronze-d); }
.shield-inner .tag { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--muted2); }
.enter { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.22em; color: var(--dim); transition: color 0.25s ease; }
.shield-btn:hover .enter { color: var(--fg); }
/* glide-out state: shrink toward top-left logo, fade the overlay */
body.entered #welcome { opacity: 0; visibility: hidden; }
body.entered .shield-btn { transform: translate(calc(-50vw + 150px), calc(-50vh + 60px)) scale(0.09); opacity: 0; }
body.no-anim #welcome { transition: none; }

/* ---- real-time Spartan-shield intro (intro.js) ---- */
#welcome { background: #000; }
#introCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#introBloom { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#introHint { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); color: #e7c27f; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0; pointer-events: none; }
#introHint.show { animation: hintPulse 2.4s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.78; } }
#introSkip { position: absolute; right: 22px; bottom: 20px; background: none; border: 0; color: #8a7a5e; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; opacity: 0.6; z-index: 2; }
#introSkip:hover { opacity: 1; color: #e7c27f; }
/* the live site is scaled by intro.js so the camera flies ONTO it, settling at scale 1 */
#home { transform-origin: center center; will-change: transform, opacity, filter; }

/* ---- mission ---- */
.mission { padding: 92px var(--pad) 60px; position: relative; }
.mission .hexwm { position: absolute; top: 10px; right: 60px; width: 520px; opacity: 0.05; pointer-events: none; }
.mission .mission-crest { position: absolute; top: -10px; right: 40px; width: 470px; max-width: 44vw; opacity: 0.94; pointer-events: none; filter: drop-shadow(0 20px 46px rgba(0,0,0,0.5)); }
.mission h1 { font-weight: 700; font-size: 54px; line-height: 1.08; margin: 26px 0 24px; max-width: 900px; }
.mission h1 .em { color: var(--ember); }
.mission p { font-size: 20px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 720px; }
.mission strong { color: var(--fg); font-weight: 600; }

/* ---- silver hover menu (home) ---- */
.menu-wrap { padding: 8px var(--pad) 300px; }
.menu-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--dim); margin-bottom: 16px; }
.navbar { position: relative; display: inline-flex; max-width: 100%; flex-wrap: wrap;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,0.6)) drop-shadow(0 5px 10px rgba(0,0,0,0.42)); }
.barface { position: absolute; inset: 0; z-index: 0; background: linear-gradient(#d6dadd 0%, #bcc1c6 55%, #a9aeb4 100%); box-shadow: inset 0 1px 0 #eef0f2, inset 0 -2px 4px rgba(0,0,0,0.18); }
.nwrap { position: relative; z-index: 1; }
.nitem { display: flex; align-items: center; gap: 9px; padding: 22px 28px; cursor: pointer; color: #22190f; white-space: nowrap; position: relative;
  background: linear-gradient(#e7eaed 0%, #c7ccd1 52%, #aeb4ba 100%);
  border-right: 1px solid rgba(0,0,0,0.30);
  box-shadow: inset 0 1px 0 #f5f7f8, inset 1px 0 0 rgba(255,255,255,0.55), inset -1px -2px 3px rgba(0,0,0,0.15);
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; }
.nwrap:last-child .nitem { border-right: none; }
.nname { font-family: var(--disp); font-size: 20px; font-weight: 600; color: inherit; }
.nwrap:hover, .nwrap.active { z-index: 20; }
.nwrap:hover .nitem, .nwrap.active .nitem { background: linear-gradient(#171009, #20160c); color: var(--bronze-h);
  box-shadow: inset 0 2px 7px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(200,145,63,0.25); }
.npanel { position: absolute; top: 100%; left: 0; width: 440px; max-width: 86vw; background: #191108; border: 1px solid var(--bronze); padding: 26px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 30; box-shadow: 0 28px 60px -26px rgba(0,0,0,0.85); }
.nwrap:hover .npanel, .nwrap.open .npanel { opacity: 1; visibility: visible; transform: translateY(0); }
.npanel .plabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--bronze); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.npanel .plabel.muted { color: var(--dim); }
.npanel p { font-size: 15px; line-height: 1.6; color: #c7b9aa; margin: 0 0 18px; }
.npanel .actions { display: flex; align-items: center; gap: 16px; }

/* ---- project preview panel (replaces the hover popups) ---- */
.navbar .npanel { display: none; }   /* kept as content source only — rendered in #preview */
#preview { margin-top: 20px; display: flex; gap: 34px; align-items: stretch; background: none; border: 0; padding: 0; min-height: 0; transition: background 0.2s ease, padding 0.2s ease; }
#preview.filled { background: #1c1d1f; padding: 28px 32px; min-height: 176px;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  filter: drop-shadow(0 24px 34px rgba(0,0,0,0.6)); }
#preview:not(.filled) .pv-body, #preview:not(.filled) .pv-logo { display: none; }
#preview .pv-body { flex: 1 1 auto; min-width: 0; }
#preview .pv-body .plabel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--bronze); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
#preview .pv-body .plabel.muted { color: var(--dim); }
#preview .pv-body p { font-size: 16px; line-height: 1.65; color: #c7b9aa; margin: 0 0 18px; max-width: 620px; }
#preview .pv-body .actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#preview .pv-logo { flex: 0 0 210px; display: flex; align-items: center; justify-content: center; }
#preview .pv-logo img { max-width: 100%; max-height: 188px; object-fit: contain; filter: drop-shadow(0 16px 34px rgba(0,0,0,0.55)); }
#preview .pv-logo.empty img { display: none; }
#preview .pv-logo.empty::after { content: ''; width: 120px; height: 120px; border: 1px dashed var(--bronze-d); border-radius: 8px; opacity: 0.35; }

/* ---- subpage hero ---- */
.hero { padding: 70px var(--pad) 84px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
.hero h1 { font-weight: 700; font-size: 66px; line-height: 1.0; margin: 0; }
.hero .lead { font-size: 20px; line-height: 1.55; color: #e6d9c8; margin: 0; font-weight: 500; }
.hero p { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 460px; }
.hero-col { display: flex; flex-direction: column; gap: 24px; }
.frame { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.frame .hexwm { position: absolute; width: 92%; opacity: 0.14; }
.frame .slot { position: relative; width: 100%; height: 100%; border: 1px solid var(--border); background: #17110d; display: flex; align-items: center; justify-content: center; text-align: center; }
.frame .slot .mono { color: #6f6357; font-size: 13px; }

/* ---- generic sections + cards ---- */
.section { padding: 80px var(--pad); border-top: 1px solid var(--line); }
.section.alt { background: var(--bg2); }
.section h2 { font-weight: 600; font-size: 34px; margin: 0 0 40px; }
.cards { display: grid; gap: 20px; }
.cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { border: 1px solid var(--line2); background: var(--panel); padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { font-size: 18px; font-weight: 600; margin: 0; }
.card p { font-size: 14px; line-height: 1.55; color: var(--muted2); margin: 0; }
.card .num { font-family: var(--mono); font-size: 12px; color: var(--bronze); }

/* ---- dev diary timeline ---- */
.diary-head { padding: 64px var(--pad) 44px; border-bottom: 1px solid var(--line); }
.diary-head h1 { font-weight: 700; font-size: 56px; line-height: 1.02; margin: 22px 0 20px; }
.diary-head p { font-size: 19px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 660px; }
.pill-dev { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ember); border: 1px solid #3a2016; padding: 4px 12px; }
.timeline { padding: 56px var(--pad) 40px; }
.entry { display: flex; gap: 24px; padding-bottom: 40px; }
.entry .date { font-family: var(--mono); font-size: 13px; color: var(--dim); width: 108px; flex: none; text-align: right; padding-top: 2px; }
.entry .rail { position: relative; width: 22px; flex: none; }
.entry .rail .line { position: absolute; left: 10px; top: 4px; bottom: -40px; width: 1px; background: var(--line2); }
.entry:last-child .rail .line { display: none; }
.entry .body h3 { font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.entry .body p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 720px; }

/* ---- feedback form ---- */
.fb-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; padding: 70px var(--pad) 90px; }
.fb-intro { display: flex; flex-direction: column; gap: 22px; }
.fb-intro h1 { font-weight: 700; font-size: 50px; line-height: 1.06; margin: 0; }
.fb-intro p { font-size: 18px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 460px; }
.fb-note { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted2); }
.fb-card { border: 1px solid var(--line2); background: var(--panel); padding: 38px; }
.fb-card label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--dim); margin-bottom: 12px; }
.pills { display: flex; gap: 10px; margin-bottom: 26px; }
.pill { padding: 9px 18px; border: 1px solid #3a2f24; color: var(--muted); font-size: 14px; cursor: pointer; background: none; font-family: var(--sans); }
.pill.on { border-color: var(--bronze); background: var(--panel2); color: var(--bronze-h); }
.fb-card input, .fb-card textarea { width: 100%; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); color: var(--fg); font-size: 15px; font-family: var(--sans); }
.fb-card textarea { line-height: 1.5; resize: vertical; margin-bottom: 22px; }
.fb-card input { margin-bottom: 28px; }
.fb-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-status { font-size: 14px; margin-top: 16px; min-height: 20px; }
.fb-status.ok { color: var(--bronze-h); }
.fb-status.err { color: var(--ember); }

/* ---- footer ---- */
.footer { padding: 46px var(--pad); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer .fl { display: flex; align-items: center; gap: 12px; }
.footer .meta { font-size: 12px; color: var(--dim); }
.waben { display: flex; gap: 14px; }
.hexbtn { position: relative; width: 54px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }
.hexbtn .rim { position: absolute; inset: 0; background: var(--bronze); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hexbtn .face { position: absolute; inset: 2px; background: #15100b; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background 0.18s ease; }
.hexbtn .ic { position: relative; z-index: 2; color: var(--bronze); display: flex; transition: color 0.18s ease; }
.hexbtn:hover .face { background: var(--bronze); }
.hexbtn:hover .ic { color: var(--bg); }

/* ---- mobile menu toggle (hidden on desktop) ---- */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 860px) {
  :root { --pad: 22px; }
  .mission { padding: 40px var(--pad) 32px; }
  .mission h1 { font-size: 32px; margin-top: 18px; }
  .mission p { font-size: 16px; }
  .mission .hexwm { display: none; }
  .mission .mission-crest { position: static; width: 180px; max-width: 50vw; opacity: 0.95; margin: 8px 0 4px; filter: none; }

  /* menu: the desktop silver chamfer bar, stood upright — full width, one row per project.
     Tap fills the #preview panel below (same as desktop); the .npanel copies stay hidden. */
  .menu-wrap { padding: 8px var(--pad) 40px; }
  .navbar { display: flex; flex-direction: column; width: 100%;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,0.55)) drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
  .nwrap { width: 100%; }
  .nitem { width: 100%; justify-content: space-between; padding: 19px 24px; font: inherit;
    border-right: none; border-bottom: 1px solid rgba(0,0,0,0.30); }
  .nwrap:last-child .nitem { border-bottom: none; }
  .nname { font-size: 20px; }
  .nitem::after { content: '›'; font-family: var(--disp); font-size: 22px; line-height: 1; color: rgba(34,25,15,0.55); margin-left: auto; padding-left: 14px; }
  .nwrap.active .nitem::after { color: var(--bronze); }
  #preview { flex-direction: column; gap: 16px; min-height: 0; margin-top: 14px; }
  #preview.filled { padding: 22px 22px 24px; }
  #preview .pv-logo { flex-basis: auto; }
  #preview .pv-logo img { max-height: 130px; }

  .hero { padding: 30px var(--pad) 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 44px; }
  .hero p { max-width: none; }
  .section { padding: 44px var(--pad); }
  .section h2 { font-size: 26px; margin-bottom: 24px; }
  .cards.c3, .cards.c4, .cards.c2 { grid-template-columns: 1fr; }
  .cards { gap: 14px; }
  .card { padding: 22px 22px; gap: 10px; }
  /* section intros are centred under a centred block on desktop; on a phone the h2 sits left, so follow it */
  .section p[style*="text-align:center"]:not(.mono) { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }

  .diary-head { padding: 40px var(--pad) 28px; }
  .diary-head h1 { font-size: 36px; }
  .timeline { padding: 36px var(--pad); }
  .entry { gap: 14px; }
  .entry .date { width: 78px; font-size: 12px; }

  .fb-grid { grid-template-columns: 1fr; gap: 32px; padding: 36px var(--pad) 60px; }
  .fb-intro h1 { font-size: 34px; }
  .fb-card { padding: 26px; }
  .fb-submit { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .fb-submit .btn { justify-content: center; }
  .fb-submit .mono { text-align: center; }

  .topbar { padding: 20px var(--pad) 0; }
  .footer { padding: 30px var(--pad); }
  .hamburger { display: inline-flex; }
}