/* ============================================================
   Neo-Brutalist — tactile-brutalism personal-site template
   Trend: 2026 anti-grid / tactile brutalism (v0.dev, Browser
   Company, indie SaaS). Warm newsprint base, black 3px hard
   borders, solid offset shadows, 0 radius, acid accents,
   monospace + heavy grotesque. See design.md.
   ============================================================ */

:root {
  --paper:  #f3f1e6;   /* warm newsprint */
  --paper-2:#ffffff;
  --ink:    #111111;
  --ink-2:  #3b3b36;
  --accent: #2e1df0;   /* electric blue — links / primary */
  --lime:   #ccf13d;   /* acid block */
  --coral:  #ff5b39;   /* hot block */
  --sky:    #8fd6ff;   /* cool block */
  --border: 3px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);

  --mono: "Space Mono", ui-monospace, monospace;
  --disp: "Archivo", ui-sans-serif, system-ui, sans-serif;

  --pad: clamp(16px, 4vw, 44px);
  --ease: cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--disp); font-size: 16px; line-height: 1.55; font-weight: 500;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 26px 26px; background-position: -13px -13px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--pad); }

.label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---- nav ---------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--pad); background: var(--paper);
  border-bottom: var(--border);
}
.nav .brand { font-family: var(--disp); font-weight: 900; font-size: 20px; letter-spacing: -.02em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.nav .brand .mark { width: 24px; height: 24px; background: var(--lime); border: var(--border); }
.nav .links { display: flex; gap: 6px; }
.nav .links a { font-family: var(--mono); font-size: 13px; font-weight: 700; text-transform: uppercase; padding: 7px 12px; border: 2px solid transparent; transition: .12s var(--ease); }
.nav .links a:hover { border: 2px solid var(--ink); }
.nav .links a[aria-current="page"] { background: var(--ink); color: var(--paper); }

.lang { display: inline-flex; border: var(--border); }
.lang button { font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 7px 11px; border: 0; background: var(--paper-2); color: var(--ink); cursor: pointer; }
.lang button + button { border-left: 3px solid var(--ink); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

@media (max-width: 700px) {
  .nav { flex-wrap: wrap; }
  .nav .links { order: 3; width: 100%; justify-content: space-between; gap: 4px; }
  .nav .links a { padding: 7px 8px; font-size: 12px; }
}

/* ---- buttons ------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; font-weight: 700; text-transform: uppercase; padding: 13px 20px; border: var(--border); background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .1s var(--ease), box-shadow .1s var(--ease); }
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn.solid { background: var(--accent); color: #fff; }
.btn.lime { background: var(--lime); }

/* ---- boxes -------------------------------------------------- */
.box { background: var(--paper-2); border: var(--border); box-shadow: var(--shadow); padding: clamp(18px, 2.4vw, 30px); }
.box.flat { box-shadow: none; }
.box.lime { background: var(--lime); } .box.coral { background: var(--coral); color: var(--ink); } .box.sky { background: var(--sky); } .box.ink { background: var(--ink); color: var(--paper); }

/* ---- hero --------------------------------------------------- */
.hero { padding: clamp(28px,5vw,60px) 0; }
.hero .kicker { font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--lime); border: var(--border); display: inline-block; padding: 6px 12px; box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.hero h1 { font-family: var(--disp); font-weight: 900; font-size: clamp(44px, 11vw, 128px); line-height: .92; letter-spacing: -.04em; text-transform: uppercase; }
.hero h1 .out { -webkit-text-stroke: 2px var(--ink); color: transparent; }
.hero .lede { font-size: clamp(16px, 1.7vw, 20px); max-width: 52ch; margin: 22px 0 26px; font-weight: 500; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- generic grid of boxes --------------------------------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px,1.6vw,20px); }
.col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
@media (max-width: 780px) { .col-4,.col-6,.col-8 { grid-column: span 12; } }

.stat { display: flex; flex-direction: column; }
.stat .n { font-family: var(--disp); font-weight: 900; font-size: clamp(40px,6vw,68px); line-height: .9; letter-spacing: -.03em; }
.stat .l { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-top: 8px; }

.section-title { font-family: var(--disp); font-weight: 900; font-size: clamp(26px,4vw,44px); text-transform: uppercase; letter-spacing: -.03em; margin: clamp(40px,6vw,72px) 0 clamp(16px,2vw,24px); display: flex; align-items: center; gap: 14px; }
.section-title::before { content: ""; width: 20px; height: 20px; background: var(--coral); border: var(--border); display: inline-block; }

.box h3 { font-family: var(--disp); font-weight: 800; font-size: clamp(18px,2vw,24px); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 8px; }
.box p { font-weight: 500; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; border: 2px solid var(--ink); padding: 4px 9px; background: var(--paper); }
.box.ink .tag { background: transparent; color: var(--paper); border-color: var(--paper); }

/* project row */
.proj { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.proj .idx { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.proj .arrow { font-family: var(--disp); font-weight: 900; font-size: 28px; transition: transform .12s var(--ease); }
a.box:hover .arrow { transform: translateX(6px); }

/* ---- blog list --------------------------------------------- */
.post { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: baseline; padding: 22px; border: var(--border); box-shadow: var(--shadow-sm); background: var(--paper-2); margin-bottom: 16px; transition: transform .1s var(--ease), box-shadow .1s var(--ease); }
.post:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.post .date { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.post h3 { font-family: var(--disp); font-weight: 800; font-size: clamp(18px,2.2vw,26px); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 8px; }
.post .read { font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (max-width: 700px){ .post{ grid-template-columns: 1fr; gap: 8px; } }

/* ---- form -------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 7px; }
.field input, .field textarea { width: 100%; font-family: var(--disp); font-size: 15px; font-weight: 500; color: var(--ink); background: var(--paper); border: var(--border); padding: 12px 14px; }
.field input:focus, .field textarea:focus { outline: none; background: #fff; box-shadow: var(--shadow-sm); }
.field textarea { resize: vertical; min-height: 120px; }

/* ---- AI chat ----------------------------------------------- */
.chat { display: flex; flex-direction: column; min-height: 440px; padding: 0; }
.chat .chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: var(--border); font-family: var(--mono); font-weight: 700; text-transform: uppercase; font-size: 13px; }
.chat .chat-head .dot { width: 12px; height: 12px; background: var(--lime); border: 2px solid var(--ink); }
.chat .log { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.msg { max-width: 86%; }
.msg .who { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; }
.msg .bubble { font-size: 14.5px; font-weight: 500; padding: 12px 15px; border: var(--border); background: var(--paper); }
.msg.user { align-self: flex-end; text-align: right; }
.msg.user .bubble { background: var(--sky); }
.msg.ai .bubble { background: var(--paper-2); }
.chat .composer { display: flex; gap: 10px; padding: 14px; border-top: var(--border); }
.chat .composer input { flex: 1; font-family: var(--disp); font-weight: 500; font-size: 15px; background: var(--paper); border: var(--border); padding: 11px 14px; }
.chat .composer input:focus { outline: none; background: #fff; }
button.prompt { text-align: left; cursor: pointer; }

/* ---- footer ------------------------------------------------ */
.footer { margin: clamp(48px,7vw,90px) 0 40px; }
.footer .box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer h2 { font-family: var(--disp); font-weight: 900; font-size: clamp(24px,4vw,44px); text-transform: uppercase; letter-spacing: -.03em; }
.footer .social { display: flex; gap: 12px; flex-wrap: wrap; }
.footer .social a { font-family: var(--mono); font-weight: 700; text-transform: uppercase; font-size: 13px; border-bottom: 3px solid var(--ink); }
.footer .box.ink .social a { border-color: var(--lime); color: var(--lime); }

.tpl-note { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: center; margin-top: 22px; opacity: .7; }

/* ---- entrance motion (guarded) ----------------------------- */
html.js [data-rise] { opacity: 0; transform: translate(0, 18px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
html.js [data-rise].in { opacity: 1; transform: none; }
html.js [data-rise][data-d="1"]{transition-delay:.05s} html.js [data-rise][data-d="2"]{transition-delay:.1s} html.js [data-rise][data-d="3"]{transition-delay:.15s}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } html.js [data-rise] { opacity: 1; transform: none; transition: none; } }