/* ===========================================================
   LatticeFree — shared stylesheet
   Palette, type, and components used across every page.
   =========================================================== */

:root{
  --paper:#0D141C;
  --paper-2:#0A1017;
  --card:#101A24;
  --ink:#DBE4EC;
  --ink-soft:#A7B6C4;
  --ink-faint:#6F8497;
  --line:#1E2A36;
  --line-soft:#182430;
  --teal:#00D2FF;
  --teal-bright:#00D2FF;
  --indigo:#3A7BD5;
  --view:#070C11;
  --view-line:#16222C;
  --maxw:1120px;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);font-weight:500;
}
h1,h2,h3{font-family:"Space Grotesk","Inter",system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;margin:0}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--indigo);outline-offset:3px;border-radius:4px}
img{max-width:100%;display:block}

/* ---------- header / nav ---------- */
header.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(13,20,28,.82);backdrop-filter:blur(10px);z-index:20}
.top-in{display:flex;align-items:center;justify-content:space-between;height:60px;flex-wrap:wrap;gap:10px 20px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .glyph{width:22px;height:22px;display:block;flex:none}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{color:var(--ink-soft);font-size:15px;font-weight:500}
.navlinks a:hover{color:var(--teal)}
.navlinks a.active{color:var(--teal)}
.tags{display:flex;gap:8px}
.tag{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--paper-2)}

/* ---------- generic section rhythm ---------- */
main.wrap{padding-bottom:10px}
section{padding:52px 0;border-top:1px solid var(--line)}
section.no-rule{border-top:none}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.sec-num{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-faint)}
section h2{font-size:clamp(24px,3vw,32px)}
.sec-intro{color:var(--ink-soft);max-width:62ch;margin-top:14px;font-size:18px}
.prose p{max-width:64ch;color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:15px;padding:11px 20px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.btn:hover{text-decoration:none;border-color:var(--teal)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:#085A52}

/* ---------- viewport (TPMS canvas signature) ---------- */
.viewport{background:var(--view);border-radius:var(--r);padding:16px;border:1px solid var(--view-line);
  box-shadow:0 22px 50px -28px rgba(9,20,25,.55)}
.vp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.vp-title{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.vp-read{font-family:"JetBrains Mono",monospace;font-size:12px;color:#AEBCC0}
.vp-read b{color:#fff;font-weight:500}
.canvas-frame{position:relative;border-radius:9px;overflow:hidden;background:#070C0F;aspect-ratio:1/1}
.canvas-frame canvas{display:block;width:100%;height:100%}
.vp-ctrl{margin-top:14px}
.vp-ctrl label{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;color:#8EA0A5;margin-bottom:8px;letter-spacing:.06em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--teal-bright) 0%,var(--teal-bright) var(--fill,40%),var(--line) var(--fill,40%),var(--line) 100%);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#08131C;border:3px solid var(--teal-bright);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#08131C;border:3px solid var(--teal-bright);cursor:pointer}
.vp-foot{margin-top:9px;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#5F7076;line-height:1.5}

/* ---------- project card (home) ---------- */
.card-project{display:grid;grid-template-columns:260px 1fr;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit}
.card-project:hover{border-color:var(--teal)}
.card-project:hover{text-decoration:none}
.card-project .thumb{background:var(--view);aspect-ratio:1/1;width:100%;display:block}
.card-project .body{padding:26px 28px}
.card-project h3{font-size:22px;display:flex;align-items:center;gap:10px}
.card-project .status{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);border:1px solid var(--line);border-radius:999px;padding:3px 9px;background:var(--paper-2)}
.card-project p{margin:12px 0 0;color:var(--ink-soft);max-width:56ch}
.card-project .chips{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:5px 10px;background:var(--paper-2)}
.card-project .go{margin-top:18px;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--teal);font-weight:500}

/* ---------- surfaces (3 TPMS cards) ---------- */
.surf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.surf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.surf-card .thumb{background:var(--view);aspect-ratio:1/1;display:block;width:100%}
.surf-card .body{padding:16px 18px 20px}
.surf-card h3{font-size:18px;display:flex;align-items:center;gap:9px}
.surf-card h3 .dot{width:9px;height:9px;border-radius:2px;background:var(--teal-bright)}
.surf-card p{margin:9px 0 0;font-size:14.5px;color:var(--ink-soft)}

/* ---------- parameters ---------- */
.pgroup{margin-top:36px}
.pgroup:first-of-type{margin-top:30px}
.pgroup > .glabel{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:4px}
.param{display:grid;grid-template-columns:230px 1fr;gap:26px;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.param:last-child{border-bottom:none}
.param .pname{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:17px}
.param .pval{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--teal);margin-top:7px;line-height:1.7}
.param .pval .u{color:var(--ink-faint)}
.param .pwhy{color:var(--ink-soft);font-size:16px}
.param .pwhy b{color:var(--ink);font-weight:600}

/* ---------- get it / cards ---------- */
.get-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.get-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.get-card h3{font-size:17px;margin-bottom:12px}
.get-card ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:15.5px}
.get-card li{margin:7px 0}
.path{font-family:"JetBrains Mono",monospace;font-size:12.5px;background:var(--paper);border:1px solid var(--line);
  border-radius:7px;padding:9px 11px;color:var(--ink);display:block;margin-top:10px;overflow-x:auto;white-space:nowrap}

/* ---------- blog ---------- */
.post-row{display:flex;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit}
.post-row:hover{text-decoration:none}
.post-row:hover .post-title{color:var(--teal)}
.post-title{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:19px;color:var(--ink)}
.post-excerpt{color:var(--ink-soft);font-size:15px;margin-top:6px;max-width:58ch}
.post-date{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--ink-faint);white-space:nowrap;padding-top:3px}

.empty-state{background:var(--card);border:1px dashed var(--line);border-radius:var(--r);
  padding:52px 34px;text-align:center;margin-top:30px}
.empty-state .mark{width:44px;height:44px;margin:0 auto 18px;opacity:.8}
.empty-state h3{font-size:20px}
.empty-state p{color:var(--ink-soft);max-width:44ch;margin:10px auto 0;font-size:15.5px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 0 60px;color:var(--ink-soft);font-size:14.5px}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-in .mono{font-size:12.5px;color:var(--ink-faint)}

@media (max-width:900px){
  .card-project{grid-template-columns:1fr}
  .surf-grid{grid-template-columns:1fr}
  .get-grid{grid-template-columns:1fr}
  .param{grid-template-columns:1fr;gap:10px}
  .param .pval{margin-top:4px}
}