/* ============================================================
   Bento Bright — modular bento-grid personal-site template
   Trend: 2026 bento grids (Apple / SaaS / portfolio). Light,
   rounded cards, soft depth, one electric-indigo accent + a few
   colour tiles. All values are tokens; see design.md.
   ============================================================ */

:root {
  --bg:        #eef0f4;
  --card:      #ffffff;
  --ink:       #14161c;
  --ink-2:     #565b66;
  --faint:     #8a909c;
  --line:      #e4e7ec;

  --accent:    #2f4bff;   /* electric indigo */
  --accent-ink:#1b2ecc;
  --tile-indigo:#2f4bff;
  --tile-mint: #d8f3e6;   /* soft mint tile */
  --tile-mint-ink:#0f7a52;
  --tile-amber:#ffe9c7;   /* soft amber tile */
  --tile-amber-ink:#a7691a;
  --tile-ink:  #16181d;   /* dark tile */

  --disp: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, sans-serif;

  --pad:   clamp(18px, 4vw, 40px);
  --gap:   clamp(12px, 1.4vw, 18px);
  --radius:22px;
  --radius-sm:14px;
  --shadow: 0 1px 2px rgba(20,22,28,.04), 0 10px 30px -12px rgba(20,22,28,.14);
  --shadow-hover: 0 2px 4px rgba(20,22,28,.06), 0 18px 44px -14px rgba(20,22,28,.22);
  --ease:  cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }

.eyebrow { font-family: var(--disp); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

/* ---- nav ---------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px var(--pad);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
}
.nav .brand { font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; }
.nav .brand .mark { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); display: inline-block; }
.nav .links { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 14px); }
.nav .links a { font-family: var(--disp); font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease); }
.nav .links a:hover { background: var(--card); color: var(--ink); }
.nav .links a[aria-current="page"] { background: var(--ink); color: #fff; }

.lang { display: inline-flex; background: var(--card); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); }
.lang button { font-family: var(--disp); font-size: 12px; font-weight: 600; padding: 6px 12px; border: 0; background: transparent; color: var(--faint); border-radius: 999px; cursor: pointer; transition: .2s var(--ease); }
.lang button[aria-pressed="true"] { background: var(--accent); color: #fff; }

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

/* ---- buttons ------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--disp); font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: .2s var(--ease); }
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.solid:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- bento grid -------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); grid-auto-rows: minmax(120px, auto); }
.tile { background: var(--card); border-radius: var(--radius); padding: clamp(18px, 2vw, 26px); box-shadow: var(--shadow); transition: transform .22s var(--ease), box-shadow .22s var(--ease); display: flex; flex-direction: column; overflow: hidden; position: relative; }
a.tile:hover, .tile.hoverable:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.r2 { grid-row: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .c3, .c4 { grid-column: span 2; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .c2, .c3, .c4 { grid-column: span 1; } .r2 { grid-row: span 1; } }

.tile.indigo { background: var(--tile-indigo); color: #fff; }
.tile.mint { background: var(--tile-mint); color: var(--tile-mint-ink); }
.tile.amber { background: var(--tile-amber); color: var(--tile-amber-ink); }
.tile.dark { background: var(--tile-ink); color: #fff; }

.tile .tile-label { font-family: var(--disp); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 10px; }
.tile h3 { font-family: var(--disp); font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -.01em; margin-bottom: 6px; }
.tile p { font-size: 14.5px; color: inherit; opacity: .82; }
.tile .stat-num { font-family: var(--disp); font-weight: 700; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.03em; line-height: 1; margin-top: auto; }
.tile .grow { margin-top: auto; }

/* hero tile */
.tile.hero h1 { font-family: var(--disp); font-weight: 700; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 14px; text-wrap: balance; }
.tile.hero .lede { font-size: clamp(15px, 1.4vw, 18px); color: var(--ink-2); max-width: 46ch; margin-bottom: 22px; }
.tile.hero .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

/* avatar bubble */
.avatar { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), #6f83ff); color: #fff; font-family: var(--disp); font-weight: 700; font-size: 22px; display: grid; place-items: center; }

/* chips / stack */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { font-family: var(--disp); font-size: 12.5px; font-weight: 500; padding: 6px 11px; border-radius: 999px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
.tile.dark .chip, .tile.indigo .chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #fff; }

/* section heading band */
.band { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: clamp(40px,7vw,80px) 0 var(--gap); }
.band h2 { font-family: var(--disp); font-weight: 700; font-size: clamp(24px, 3.4vw, 40px); letter-spacing: -.03em; }
.band p { color: var(--ink-2); max-width: 40ch; }

/* ---- blog cards -------------------------------------------- */
.post-card { grid-column: span 2; display: flex; flex-direction: column; }
@media (max-width: 900px){ .post-card{ grid-column: span 2; } }
@media (max-width: 560px){ .post-card{ grid-column: span 1; } }
.post-card .thumb { border-radius: var(--radius-sm); aspect-ratio: 16/8; margin-bottom: 16px; background: linear-gradient(135deg, #eef1ff, #dfe6ff); display: grid; place-items: center; color: var(--accent); font-family: var(--disp); font-weight: 600; letter-spacing:.1em; font-size: 12px; text-transform: uppercase; }
.post-card.k2 .thumb { background: linear-gradient(135deg, #e7f7ef, #d2f0e0); color: var(--tile-mint-ink); }
.post-card.k3 .thumb { background: linear-gradient(135deg, #fff2dc, #ffe6bf); color: var(--tile-amber-ink); }
.post-card .meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--faint); font-family: var(--disp); margin-bottom: 10px; }
.post-card h3 { font-family: var(--disp); font-weight: 600; font-size: clamp(18px, 2vw, 23px); letter-spacing: -.01em; margin-bottom: 8px; }
.post-card p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 14px; }
.post-card .readmore { margin-top: auto; font-family: var(--disp); font-weight: 600; font-size: 14px; color: var(--accent); display: inline-flex; gap: 7px; }

/* ---- form -------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--disp); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.field input, .field textarea { width: 100%; font-family: var(--body); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,75,255,.14); }
.field textarea { resize: vertical; min-height: 120px; }

/* ---- AI chat ----------------------------------------------- */
.chat { display: flex; flex-direction: column; min-height: 440px; padding: 0; overflow: hidden; }
.chat .chat-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); font-family: var(--disp); font-weight: 600; font-size: 14px; }
.chat .chat-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #16c784; box-shadow: 0 0 0 4px rgba(22,199,132,.16); }
.chat .log { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.msg { max-width: 84%; }
.msg .who { font-family: var(--disp); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.msg .bubble { font-size: 14.5px; line-height: 1.55; padding: 12px 15px; border-radius: 16px; background: var(--bg); }
.msg.user { align-self: flex-end; text-align: right; }
.msg.user .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg.ai .bubble { border-bottom-left-radius: 5px; }
.chat .composer { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
.chat .composer input { flex: 1; font-family: var(--body); font-size: 15px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; }
.chat .composer input:focus { outline: none; border-color: var(--accent); }

.prompt-chip { text-align: left; cursor: pointer; }
.prompt-chip:hover { border-color: var(--accent); }

/* ---- footer ------------------------------------------------ */
.footer { margin: clamp(48px,7vw,90px) 0 40px; }
.footer .tile.c4 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer h2 { font-family: var(--disp); font-weight: 700; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.02em; }
.footer .social { display: flex; gap: 14px; }
.footer .social a { font-family: var(--disp); font-weight: 500; color: var(--ink-2); }
.footer .social a:hover { color: var(--accent); }
.footer .tile.indigo .social a, .footer .tile.dark .social a { color: rgba(255,255,255,.86); }
.footer .tile.indigo .social a:hover, .footer .tile.dark .social a:hover { color: #fff; }

.tpl-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--faint); text-align: center; padding: 8px; }

/* ---- entrance motion (guarded) ----------------------------- */
html.js [data-rise] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s 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; } }