/* konkomaji.com: one column, classic, no frameworks.
   Background "Calcutta dusk, wired": drifting dusk light + a faint mesh network + film grain. */
:root {
  --bg: #fbf8f2;
  --fg: #1d1d1b;
  --muted: #6b6862;
  --rule: #e4ded2;
  --link: #1a4fb5;
  --visited: #5b3a9e;
  --panel: rgba(255, 253, 248, .72);
  --glow-1: rgba(244, 162, 89, .30);   /* saffron */
  --glow-2: rgba(232, 121, 149, .20);  /* rose */
  --glow-3: rgba(45, 163, 160, .20);   /* river teal */
  --mesh: 60, 60, 70;                  /* rgb of mesh lines */
  --grain: .05;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12131a;
    --fg: #e8e6e1;
    --muted: #9a968e;
    --rule: #2c2d36;
    --link: #8ab4f8;
    --visited: #c3a6f5;
    --panel: rgba(24, 25, 34, .72);
    --glow-1: rgba(244, 162, 89, .16);
    --glow-2: rgba(232, 121, 149, .14);
    --glow-3: rgba(45, 163, 160, .18);
    --mesh: 200, 205, 230;
    --grain: .07;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 18px/1.6 Charter, "Bitstream Charter", "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
}

/* ---------- background ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg::before {                                   /* drifting dusk light */
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 35% at 15% 20%, var(--glow-1), transparent 70%),
    radial-gradient(35% 40% at 85% 30%, var(--glow-2), transparent 70%),
    radial-gradient(45% 40% at 60% 90%, var(--glow-3), transparent 70%);
  filter: blur(20px);
  animation: drift 38s ease-in-out infinite alternate;
}
.bg::after {                                    /* film grain */
  content: ""; position: absolute; inset: 0; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#mesh { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.05); }
  100% { transform: translate3d(-3%, 4%, 0) rotate(-4deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .bg::before { animation: none; } }

/* ---------- layout and type ---------- */
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 16px 40px; }

a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:visited { color: var(--visited); }
a:hover { text-decoration-thickness: 2px; }

h1, h2 { font-weight: 600; line-height: 1.25; }
h1 { font-size: 2rem; margin: 0 0 4px; }
h2 { font-size: 1.25rem; margin: 2.2em 0 .6em; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
p, ul { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
li { margin: 0 0 .55em; }
.muted { color: var(--muted); }

.badge {
  display: inline-block; vertical-align: 2px; margin-left: 2px;
  font: 600 .68rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: #9a5b00; background: rgba(244, 162, 89, .18); border: 1px solid rgba(244, 162, 89, .55);
  padding: 4px 7px; border-radius: 999px;
}
@media (prefers-color-scheme: dark) { .badge { color: #f6b26b; } }

/* ---------- header ---------- */
.hero { display: flex; gap: 28px; align-items: center; margin-bottom: 28px; }
.hero img { width: 132px; height: 132px; border-radius: 50%; flex: none; object-fit: cover; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.tagline { font-size: 1.12rem; margin: 0 0 8px; }
.place { font-size: .95rem; margin: 0 0 10px; }

/* ---------- social icons ---------- */
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social a, .social a:visited {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--muted); background: var(--panel); border: 1px solid var(--rule);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s, border-color .2s, box-shadow .25s;
}
.social svg { width: 18px; height: 18px; transition: transform .3s; }
.social a::after {                              /* label tooltip */
  content: attr(data-label); position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translate(-50%, -4px); opacity: 0; pointer-events: none; white-space: nowrap;
  font: 500 .72rem/1 ui-sans-serif, system-ui, sans-serif; color: var(--bg); background: var(--fg);
  padding: 5px 7px; border-radius: 4px; transition: opacity .2s, transform .2s;
}
.social a:hover, .social a:focus-visible {
  color: #fff; background: var(--brand); border-color: transparent;
  transform: translateY(-3px); box-shadow: 0 8px 18px -6px var(--brand);
}
.social a:hover svg, .social a:focus-visible svg { transform: scale(1.1) rotate(-6deg); }
.social a:hover::after, .social a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.social a.s-github:hover, .social a.s-x:hover,
.social a.s-github:focus-visible, .social a.s-x:focus-visible { color: var(--bg); }
.social a.s-instagram:hover, .social a.s-instagram:focus-visible {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social a:active { transform: translateY(0) scale(.94); }
.social a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.social-sm a, .social-sm a:visited { width: 34px; height: 34px; }
.social-sm svg { width: 15px; height: 15px; }
.social-sm a::after { top: auto; bottom: calc(100% + 6px); }

/* ---------- latest blog posts ---------- */
.posts { list-style: none; padding: 0; }
.posts li { display: flex; gap: 16px; }
.posts time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; min-width: 6.2em; }

/* ---------- footer: contact panel ---------- */
footer { margin-top: 72px; }
.say-hi {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 16px;
  padding: 28px 28px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .35);
}
.say-hi h2 { margin: 0 0 6px; padding: 0; border: 0; font-size: 1.5rem; }
.say-hi > p:first-of-type { margin-bottom: 18px; }
.hi { display: flex; gap: 8px; margin: 0 0 10px; padding: 6px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); transition: border-color .2s, box-shadow .2s; }
.hi:focus-within { border-color: var(--link); box-shadow: 0 0 0 4px rgba(26, 79, 181, .12); }
.hi input {
  font: inherit; font-size: .95rem; color: var(--fg); background: transparent;
  border: 0; padding: 8px 12px; min-width: 0; outline: none;
}
.hi input[type="email"] { flex: 1 1 38%; border-right: 1px solid var(--rule); }
.hi input[name="message"] { flex: 1 1 62%; }
.hi button {
  flex: none; font: 600 .95rem/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer;
  color: var(--bg); background: var(--fg); border: 0; border-radius: 999px; padding: 0 20px;
  transition: transform .2s, background .2s;
}
.hi button:hover { background: var(--link); transform: translateX(2px); }
.hi button:disabled { opacity: .6; cursor: wait; transform: none; }
.hp { position: absolute; left: -9999px; }
#hi-status { font-size: .9rem; margin: 0; }
.foot-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: .9rem; }

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  body { font-size: 17px; }
  .wrap { padding-top: 32px; }
  .hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero img { width: 104px; height: 104px; }
  .posts li { flex-direction: column; gap: 0; }
  .say-hi { padding: 22px 18px 16px; }
  .hi { flex-direction: column; border-radius: 14px; }
  .hi input[type="email"] { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hi button { padding: 12px; }
}