/* lamp-dev.com: terminal style, plain CSS. Code-highlight rules are appended by build.py. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0a0e0b;
  --bg-raised: #0f1511;
  --code-bg: #0d1310;
  --line: #1f2b23;
  --line-strong: #2d3e32;
  --text: #d4ddd5;
  --text-dim: #8b9b90;
  --green: #7ee0a1;
  --green-strong: #5fd88a;
  --amber: #f0b44c;
  --red: #ff8a80;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  /* faint scanlines */
  background-image: repeating-linear-gradient(to bottom, rgba(126, 224, 161, 0.025) 0 1px, transparent 1px 4px);
  color: var(--text);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.7;
  font-variant-ligatures: none;
}

a { color: var(--green); text-decoration: none; border-bottom: 1px dotted rgba(126, 224, 161, 0.45); }
a:hover { color: var(--amber); border-bottom-color: var(--amber); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

h1, h2, h3, h4 { line-height: 1.3; color: #eef4ee; font-weight: 700; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); margin: 0.4em 0 0.5em; letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; margin: 0 0 0.6em; }
p, ul, ol { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: 0.92em; color: #e6d58c; background: var(--code-bg); padding: 0.1em 0.35em; border: 1px solid var(--line); }
strong { color: #eef4ee; }
.dim { color: var(--text-dim); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gutter); top: 0.5rem; z-index: 10; background: var(--amber); color: #000; padding: 0.3rem 0.6rem; }

/* header ------------------------------------------------------------------------ */

.site-head { border-bottom: 1px solid var(--line); background: rgba(10, 14, 11, 0.92); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; backdrop-filter: blur(6px); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 0.6rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; border: 0; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
.brand-tag { color: #07130b; background: var(--green); font-weight: 700; padding: 0.05rem 0.3rem; line-height: 1.3; }
.cursor { color: var(--green); animation: blink 1.1s steps(1) infinite; margin-left: 0.1em; }
@keyframes blink { 50% { opacity: 0; } }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-size: 0.88rem; }
.site-nav a { border: 0; color: var(--text-dim); white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--green); }
.site-nav .nav-cta { color: var(--amber); }

/* logo ---------------------------------------------------------------------------- */

.logo { font-family: var(--mono); line-height: 1; letter-spacing: 0; color: #e9f0ea; margin: 0; white-space: pre; overflow: hidden; }
.logo-tag { color: var(--green); text-shadow: 0 0 12px rgba(126, 224, 161, 0.35); }
.hero .logo { font-size: clamp(5px, 1.45vw, 15px); margin-bottom: 1.6rem; }

/* sections ------------------------------------------------------------------------ */

main { padding-block: 2rem 3rem; }
section { margin-block: 3.5rem; }
.hero { margin-top: 1.5rem; }

.section-head { display: flex; flex-direction: column; gap: 0.15rem; margin: 0 0 1.4rem; font-size: 1.5rem; scroll-margin-top: 5rem; }
.section-head .prompt { font-size: 0.85rem; font-weight: 400; color: var(--green); }
.section-head .section-title::before { content: "## "; color: var(--line-strong); }

.term-line { color: var(--text-dim); margin: 0; }
.prompt { color: var(--green); }
.lead { font-size: 1.06rem; color: #c3cec5; max-width: 62ch; }
.term-out { font-family: var(--mono); font-size: 0.85rem; color: var(--text); background: var(--code-bg); border: 1px solid var(--line); padding: 0.7rem 0.9rem; overflow-x: auto; margin: 1.2rem 0 0; white-space: pre-wrap; }

.stats { font-size: 0.95rem; line-height: 1.9; padding: 1rem 1.2rem; margin: 0; white-space: pre; }
.stat-key { color: var(--green); }
.stat-val { color: var(--amber); font-weight: 700; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin-top: 1.4rem; }
.btn { display: inline-block; border: 1px solid var(--green); color: #07130b; background: var(--green); padding: 0.55rem 1rem; font-weight: 700; letter-spacing: 0.02em; }
.btn:hover { background: var(--amber); border-color: var(--amber); color: #120c02; }
.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: transparent; color: var(--amber); }
.cta-mail { color: var(--text-dim); font-size: 0.92rem; }
.more { margin-top: 1.2rem; font-size: 0.92rem; }

/* cards & grids ------------------------------------------------------------------- */

.grid { display: grid; gap: 1rem; }
.services-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.why-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.how-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.work-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.team-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

.card { position: relative; background: var(--bg-raised); border: 1px solid var(--line); padding: 1.15rem 1.2rem 1rem; font-size: 0.93rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
/* box-drawing corners */
.card::before, .card::after { position: absolute; color: var(--line-strong); font-size: 0.8rem; line-height: 1; }
.card::before { content: "┌"; top: -0.42rem; left: -0.3rem; }
.card::after { content: "┘"; bottom: -0.38rem; right: -0.3rem; }
.card-plain { background: transparent; }
.ico { color: var(--green); display: inline-block; min-width: 2.2ch; }
.num { color: var(--amber); margin-right: 0.4ch; }

.card-kind { color: var(--text-dim); font-size: 0.82rem; margin: -0.3em 0 0.7em; text-transform: uppercase; letter-spacing: 0.06em; }
.stack { list-style: none; padding: 0; margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.stack li { font-size: 0.75rem; color: var(--green); border: 1px solid var(--line-strong); padding: 0.05rem 0.45rem; }

.checklist, .crosslist { list-style: none; padding: 0; }
.checklist li, .crosslist li { position: relative; padding-left: 2.2ch; margin-bottom: 0.45em; }
.checklist li::before { content: "+"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.crosslist li::before { content: "-"; position: absolute; left: 0; color: var(--red); font-weight: 700; }
h3.ok { color: var(--green); }
h3.no { color: var(--red); }

/* blog ------------------------------------------------------------------------------ */

.post-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.post-item { display: grid; grid-template-columns: 9rem 1fr; gap: 0.2rem 1.2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.post-item time { color: var(--text-dim); font-size: 0.85rem; padding-top: 0.1rem; }
.post-item a { font-weight: 700; }
.post-item p { grid-column: 2; margin: 0; color: var(--text-dim); font-size: 0.9rem; }

.post { max-width: 50rem; }
.post-head { margin-bottom: 2rem; }
.crumbs { font-size: 0.85rem; color: var(--text-dim); margin: 0; }
.post-meta { color: var(--text-dim); font-size: 0.85rem; }
.tag { color: var(--green); }

.prose { font-size: 1rem; }
.prose h2 { font-size: 1.3rem; margin: 2.2em 0 0.7em; }
.prose h2::before { content: "## "; color: var(--line-strong); }
.prose h3 { font-size: 1.1rem; margin: 1.8em 0 0.6em; }
.prose h3::before { content: "### "; color: var(--line-strong); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.35em; }
.prose blockquote { margin: 1.5em 0; padding: 0.8rem 1rem; border-left: 3px solid var(--amber); background: var(--bg-raised); color: #c3cec5; }
.prose blockquote p:last-child { margin: 0; }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--line); }
.table-wrap { overflow-x: auto; margin: 0 0 1em; }
table { border-collapse: collapse; font-size: 0.9rem; }
th, td { border: 1px solid var(--line); padding: 0.4rem 0.7rem; text-align: left; }

/* code blocks: a small terminal window */
.hl { position: relative; margin: 1.3em 0 1.6em; border: 1px solid var(--line-strong); background: var(--code-bg); }
.hl[data-lang]::before { content: attr(data-lang); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 0.3rem 0.9rem; border-bottom: 1px solid var(--line); background: #0b100d; }
.hl pre { margin: 0; padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.6; tab-size: 4; }
.hl pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* call to action ---------------------------------------------------------------- */

.cta { margin-top: 3.5rem; padding: 1.4rem 1.4rem 1.2rem; border: 1px dashed var(--line-strong); background: var(--bg-raised); max-width: 50rem; }
.cta .prompt { margin: 0 0 0.4rem; font-size: 0.85rem; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin: 1rem 0 0; }
.contact-block { padding: 1.6rem; border: 1px dashed var(--line-strong); background: var(--bg-raised); }
.contact-card { max-width: 34rem; margin: 1.5rem 0 2rem; }
.contact-card .term-out { margin-top: 0; }
.contact-mail { font-size: 1.35rem; font-weight: 700; margin: 1rem 0 0.3rem; }

/* footer ---------------------------------------------------------------------------- */

.site-foot { border-top: 1px solid var(--line); color: var(--text-dim); font-size: 0.82rem; padding-block: 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
.foot-row { display: grid; gap: 0.4rem; }
.foot-row p { margin: 0; }
.foot-note { margin-top: 0.6rem !important; color: var(--text-dim); }

/* small screens ------------------------------------------------------------------- */

@media (max-width: 40rem) {
  body { font-size: 0.95rem; }
  .head-row { gap: 0.4rem; }
  .site-nav { gap: 0.1rem 0.7rem; font-size: 0.8rem; }
  .post-item { grid-template-columns: 1fr; }
  .post-item p { grid-column: 1; }
  .contact-block { padding: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* code highlighting (generated) */
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.hl .hll { background-color: #ffffcc }
.hl { background: #0d1310; color: #D4DDD5 }
.hl .c { color: #6F8577; font-style: italic } /* Comment */
.hl .err { color: #FF8A80 } /* Error */
.hl .esc { color: #D4DDD5 } /* Escape */
.hl .g { color: #D4DDD5 } /* Generic */
.hl .k { color: #7EE0A1 } /* Keyword */
.hl .l { color: #D4DDD5 } /* Literal */
.hl .n { color: #D4DDD5 } /* Name */
.hl .o { color: #9FB3A6 } /* Operator */
.hl .x { color: #D4DDD5 } /* Other */
.hl .p { color: #9FB3A6 } /* Punctuation */
.hl .ch { color: #6F8577; font-style: italic } /* Comment.Hashbang */
.hl .cm { color: #6F8577; font-style: italic } /* Comment.Multiline */
.hl .cp { color: #7EE0A1; font-style: italic } /* Comment.Preproc */
.hl .cpf { color: #6F8577; font-style: italic } /* Comment.PreprocFile */
.hl .c1 { color: #6F8577; font-style: italic } /* Comment.Single */
.hl .cs { color: #6F8577; font-style: italic } /* Comment.Special */
.hl .gd { color: #FF8A80 } /* Generic.Deleted */
.hl .ge { color: #D4DDD5 } /* Generic.Emph */
.hl .ges { color: #D4DDD5 } /* Generic.EmphStrong */
.hl .gr { color: #D4DDD5 } /* Generic.Error */
.hl .gh { color: #D4DDD5; font-weight: bold } /* Generic.Heading */
.hl .gi { color: #7EE0A1 } /* Generic.Inserted */
.hl .go { color: #D4DDD5 } /* Generic.Output */
.hl .gp { color: #6F8577 } /* Generic.Prompt */
.hl .gs { color: #D4DDD5 } /* Generic.Strong */
.hl .gu { color: #D4DDD5 } /* Generic.Subheading */
.hl .gt { color: #D4DDD5 } /* Generic.Traceback */
.hl .kc { color: #F0B44C } /* Keyword.Constant */
.hl .kd { color: #7EE0A1 } /* Keyword.Declaration */
.hl .kn { color: #7EE0A1 } /* Keyword.Namespace */
.hl .kp { color: #7EE0A1 } /* Keyword.Pseudo */
.hl .kr { color: #7EE0A1 } /* Keyword.Reserved */
.hl .kt { color: #8FC7FF } /* Keyword.Type */
.hl .ld { color: #D4DDD5 } /* Literal.Date */
.hl .m { color: #F0B44C } /* Literal.Number */
.hl .s { color: #E6D58C } /* Literal.String */
.hl .na { color: #F0B44C } /* Name.Attribute */
.hl .nb { color: #8FC7FF } /* Name.Builtin */
.hl .nc { color: #8FC7FF; font-weight: bold } /* Name.Class */
.hl .no { color: #F0B44C } /* Name.Constant */
.hl .nd { color: #F0B44C } /* Name.Decorator */
.hl .ni { color: #D4DDD5 } /* Name.Entity */
.hl .ne { color: #D4DDD5 } /* Name.Exception */
.hl .nf { color: #8FC7FF } /* Name.Function */
.hl .nl { color: #D4DDD5 } /* Name.Label */
.hl .nn { color: #B6C8BB } /* Name.Namespace */
.hl .nx { color: #D4DDD5 } /* Name.Other */
.hl .py { color: #D4DDD5 } /* Name.Property */
.hl .nt { color: #7EE0A1 } /* Name.Tag */
.hl .nv { color: #F2A07B } /* Name.Variable */
.hl .ow { color: #7EE0A1 } /* Operator.Word */
.hl .pm { color: #9FB3A6 } /* Punctuation.Marker */
.hl .w { color: #D4DDD5 } /* Text.Whitespace */
.hl .mb { color: #F0B44C } /* Literal.Number.Bin */
.hl .mf { color: #F0B44C } /* Literal.Number.Float */
.hl .mh { color: #F0B44C } /* Literal.Number.Hex */
.hl .mi { color: #F0B44C } /* Literal.Number.Integer */
.hl .mo { color: #F0B44C } /* Literal.Number.Oct */
.hl .sa { color: #E6D58C } /* Literal.String.Affix */
.hl .sb { color: #E6D58C } /* Literal.String.Backtick */
.hl .sc { color: #E6D58C } /* Literal.String.Char */
.hl .dl { color: #E6D58C } /* Literal.String.Delimiter */
.hl .sd { color: #E6D58C } /* Literal.String.Doc */
.hl .s2 { color: #E6D58C } /* Literal.String.Double */
.hl .se { color: #F0B44C } /* Literal.String.Escape */
.hl .sh { color: #E6D58C } /* Literal.String.Heredoc */
.hl .si { color: #F2A07B } /* Literal.String.Interpol */
.hl .sx { color: #E6D58C } /* Literal.String.Other */
.hl .sr { color: #E6D58C } /* Literal.String.Regex */
.hl .s1 { color: #E6D58C } /* Literal.String.Single */
.hl .ss { color: #E6D58C } /* Literal.String.Symbol */
.hl .bp { color: #F0B44C } /* Name.Builtin.Pseudo */
.hl .fm { color: #8FC7FF } /* Name.Function.Magic */
.hl .vc { color: #F2A07B } /* Name.Variable.Class */
.hl .vg { color: #F2A07B } /* Name.Variable.Global */
.hl .vi { color: #F2A07B } /* Name.Variable.Instance */
.hl .vm { color: #F2A07B } /* Name.Variable.Magic */
.hl .il { color: #F0B44C } /* Literal.Number.Integer.Long */