/* ============================================================
   Deta Hermana — portfolio
   Dark, engineering-focused. No framework, no build step.
   ============================================================ */

:root {
  --bg:        #0b0f14;
  --bg-alt:    #0f151c;
  --surface:   #131b24;
  --surface-2: #18222e;
  --border:    #22303d;
  --border-2:  #2c3e4f;
  --text:      #e6edf3;
  --text-dim:  #8b9bab;
  --text-mute: #5d6e7e;
  --accent:    #38bdf8;
  --accent-2:  #22d3ee;
  --accent-dim:#0ea5e9;
  --danger:    #f87171;
  --success:   #4ade80;
  --radius:    12px;
  --radius-sm: 8px;
  --wrap:      1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 15, 20, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--text); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent-dim), var(--accent-2));
  color: #04121b;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
}
.nav a:hover { color: var(--text); }
.nav-cta {
  padding: 7px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text) !important;
}
.nav-cta:hover { border-color: var(--accent); background: var(--surface); }

/* ---------- hero ---------- */
.hero {
  padding: 96px 0 72px;
  background:
    radial-gradient(700px 340px at 18% -8%, rgba(56,189,248,0.10), transparent 70%),
    radial-gradient(600px 300px at 88% 4%, rgba(34,211,238,0.06), transparent 70%);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 20ch;
  margin-bottom: 22px;
}
/* Line break on wide screens only; below 720px the text wraps naturally
   so no orphan word is left alone. */
@media (min-width: 721px) {
  .h1-break { display: block; }
}
.lede {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 62ch;
  margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.hero-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 13.5px;
  color: var(--text-mute);
}
.hero-meta li { display: flex; align-items: center; gap: 8px; }
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(74,222,128,0.6);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #04121b; }
.btn-primary:hover { background: var(--accent-2); color: #04121b; }
.btn-ghost {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); background: var(--surface-2); }

/* ---------- sections ---------- */
.section { padding: 72px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-title {
  font-size: clamp(23px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 10px;
}
.section-sub {
  color: var(--text-dim);
  max-width: 62ch;
  margin-bottom: 38px;
  font-size: 15.5px;
}

/* ---------- cards ----------
   Two-up grid on wide screens. With an odd number of cards the last one would
   sit alone on its own row with half the row empty, so the final card spans
   both columns instead — it reads as the closing entry rather than an orphan.
   Collapses to one column on narrow. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.cards > .card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 780px) {
  .cards { grid-template-columns: 1fr; }
  .cards > .card:last-child:nth-child(odd) { grid-column: auto; }
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.card-featured { border-color: var(--border-2); }
.card-featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent-2));
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-featured { position: relative; overflow: hidden; }
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(56,189,248,0.09);
  border: 1px solid rgba(56,189,248,0.22);
  padding: 3px 9px;
  border-radius: 999px;
}
.tag-red {
  color: var(--danger);
  background: rgba(248,113,113,0.09);
  border-color: rgba(248,113,113,0.24);
}
.card-status { font-size: 12px; color: var(--text-mute); }
.card h3 {
  font-size: 19px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.35;
}
.card p {
  color: var(--text-dim);
  font-size: 14.5px;
  flex-grow: 1;
}
.card-metrics {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-mute);
}
.card-metrics strong { color: var(--text); font-family: var(--mono); font-size: 14px; }
.card-links { margin-top: 20px; }
.link-arrow { font-size: 14px; font-weight: 600; }
.link-muted { font-size: 13px; color: var(--text-mute); font-style: italic; }

/* ---------- write-ups ---------- */
.writeups { display: grid; gap: 16px; }
.writeup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 24px 26px;
}
.writeup h3 { font-size: 17.5px; margin-bottom: 10px; letter-spacing: -0.01em; }
.writeup h3 a { color: var(--text); }
.writeup h3 a:hover { color: var(--accent); }
.writeup p { color: var(--text-dim); font-size: 14.5px; max-width: 82ch; }
.writeup-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.writeup-tags span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-mute);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---------- skills ---------- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.skill-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}
.skill-group h4 {
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.skill-group p { color: var(--text-dim); font-size: 14px; }

.certs { margin-top: 44px; }
.certs h3 { font-size: 17px; margin-bottom: 14px; }
.certs ul { list-style: none; display: grid; gap: 9px; }
.certs li {
  color: var(--text-dim);
  font-size: 14.5px;
  padding-left: 22px;
  position: relative;
}
.certs li::before {
  content: "▹";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ---------- contact ---------- */
.section-cta {
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(56,189,248,0.09), transparent 70%);
  text-align: center;
  padding: 88px 0;
}
.section-cta .section-sub { margin-left: auto; margin-right: auto; }
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
}
.site-footer p { color: var(--text-mute); font-size: 13px; text-align: center; }

/* ---------- reveal on scroll ----------
   Content is visible by default. The reveal effect is opt-in: it only
   applies when <html> has .js-reveal (added by main.js once JS is running)
   AND the element itself has .reveal (also added by JS). This guarantees
   content is never hidden for no-JS users, crawlers, print, or screenshots. */
.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .site-header .wrap { height: 56px; }
  .brand-text { display: none; }
  .nav { gap: 16px; }
  .hero { padding: 64px 0 48px; }
  .hero-meta { gap: 14px; flex-direction: column; }
  .section { padding: 56px 0; }
  .card { padding: 22px; }
}

/* ============================================================
   Article / write-up pages
   ============================================================ */

.article { padding: 56px 0 80px; }
.article-inner { max-width: 780px; margin: 0 auto; }

.breadcrumb {
  font-size: 13.5px;
  color: var(--text-mute);
  margin-bottom: 26px;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin: 0 8px; color: var(--border-2); }

.article h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  font-weight: 700;
  margin-bottom: 18px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.article-meta span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-mute);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 999px;
}

.article-body h2 {
  font-size: 23px;
  letter-spacing: -0.015em;
  margin: 44px 0 14px;
  padding-top: 8px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  font-size: 18px;
  margin: 30px 0 10px;
  color: var(--text);
}
.article-body p { color: var(--text-dim); margin-bottom: 16px; font-size: 15.5px; }
.article-body strong { color: var(--text); }
.article-body ul, .article-body ol {
  color: var(--text-dim);
  font-size: 15.5px;
  margin: 0 0 18px 22px;
}
.article-body li { margin-bottom: 7px; }
.article-body li::marker { color: var(--accent-dim); }

.article-body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.6;
}
.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13.5px;
  color: #cbd5e1;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.article-body th, .article-body td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.article-body th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.article-body td { color: var(--text-dim); }

.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 0 0 22px;
}
.callout.warn { border-left-color: var(--danger); }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.article-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 38px 0;
}

.article-footer {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.article-footer p { font-size: 14px; color: var(--text-mute); }

@media (max-width: 720px) {
  .article { padding: 36px 0 60px; }
  .article-body h2 { font-size: 20px; margin-top: 34px; }
  .article-footer { flex-direction: column; align-items: flex-start; }
}