/* ============================================================================
   hadiitani.dev — Cloud engineer, Beirut
   The Observable System. Hand-built, no framework, no build step.
   Tokens + styles in one file (self-contained for Azure Storage static hosting).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- color: muted natural neutrals + one olive accent ---- */
  --linen:        oklch(96% 0.006 120);
  --linen-2:      oklch(93.5% 0.008 120);
  --linen-deep:   oklch(90% 0.012 118);
  --stone:        oklch(86% 0.014 115);

  --ink:          oklch(26% 0.012 140);
  --ink-body:     oklch(31% 0.012 140);
  --ink-muted:    oklch(48% 0.012 110);
  --ink-faint:    oklch(60% 0.012 110);
  --ink-disabled: oklch(70% 0.012 110);

  --olive:        oklch(48% 0.085 135);
  --olive-text:   oklch(43% 0.085 135);
  --olive-deep:   oklch(36% 0.075 138);
  --olive-soft:   oklch(62% 0.085 132);
  --sage:         oklch(80% 0.050 135);
  --sage-pale:    oklch(88% 0.030 130);

  --hairline:     oklch(86% 0.012 120);
  --border:       oklch(61% 0.022 120);
  --border-strong:oklch(48% 0.085 135);
  --focus:        oklch(43% 0.085 135);

  /* legacy aliases */
  --cream:      var(--linen);
  --cream-2:    var(--linen-2);
  --cream-deep: var(--linen-deep);
  --sand:       var(--stone);
  --terra:      var(--olive);
  --terra-text: var(--olive-text);
  --terra-deep: var(--olive-deep);
  --terra-soft: var(--olive-soft);
  --amber:      var(--sage);
  --amber-pale: var(--sage-pale);

  /* ---- type ---- */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-meta:   0.875rem;
  --t-small:  1rem;
  --t-body:   1.125rem;
  --t-lead:   1.375rem;
  --t-h4:     1.25rem;
  --t-h3:     1.5rem;
  --t-h2:     clamp(1.9rem, 1.2rem + 2.6vw, 2.75rem);
  --t-h1:     clamp(2.5rem, 1.4rem + 4.4vw, 4rem);

  --lh-display: 1.08;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-loose:   1.75;
  --tracking-eyebrow: 0.16em;
  --tracking-tight:  -0.025em;

  /* ---- spacing (4/8 scale) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --measure: 68ch;
  --measure-narrow: 56ch;
  --content-max: 1100px;

  /* ---- radii ---- */
  --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* ---- elevation ---- */
  --shadow-sm:   0 1px 2px oklch(26% 0.02 140 / 0.07);
  --shadow-md:   0 6px 22px oklch(26% 0.02 140 / 0.10);
  --shadow-lift: 0 14px 40px oklch(26% 0.03 140 / 0.14);
  --glow-sage:   0 0 40px oklch(80% 0.05 135 / 0.4);
  --glow-amber:  var(--glow-sage);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 600ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(130% 55% at 50% 0%, oklch(97.8% 0.012 125) 0%, transparent 55%),
    var(--linen);
  background-attachment: fixed;
  color: var(--ink-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); }

/* ---- atmosphere ---- */
.atmos { position: relative; }
.atmos--hero {
  display: flex; align-items: center;
  min-height: calc(100vh - 60px);
  min-height: calc(100svh - 60px);
  max-width: var(--content-max);
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(115% 95% at 80% 6%, oklch(82% 0.06 135 / 0.52), oklch(70% 0.06 142 / 0.22) 36%, transparent 68%),
    radial-gradient(95% 85% at 4% 104%, oklch(60% 0.05 150 / 0.14), transparent 56%),
    linear-gradient(170deg, var(--linen) 0%, oklch(94% 0.012 125) 54%, oklch(91% 0.020 130) 100%);
}
.atmos--hero > .wrap { width: 100%; }
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: soft-light;
}
.atmos > .wrap { position: relative; z-index: 1; }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 40; width: 100%;
  background: oklch(96% 0.006 120 / 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--hairline); box-shadow: var(--shadow-sm); background: oklch(96% 0.006 120 / 0.92); }
.nav__inner { display: flex; align-items: center; justify-content: space-between;
  max-width: var(--content-max); margin: 0 auto; padding: 17px var(--space-6); }
.brand { font-family: var(--font-mono); font-size: 19px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--ink); text-decoration: none; }
.brand .tld { color: var(--ink-muted); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 16.5px; text-decoration: none; color: var(--ink-body); }
.nav-links a:hover { color: var(--olive-text); }
.nav-links a.active { color: var(--olive-text); font-weight: 600; }
.nav-links .icon { color: var(--ink-muted); display: flex; }
.nav-links .icon:hover { color: var(--olive-text); }

/* ---- type ---- */
.eyebrow { font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--olive-text); margin: 0 0 14px; }
.h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h1);
  line-height: var(--lh-display); letter-spacing: -0.025em; color: var(--ink); margin: 0 0 var(--space-5); text-wrap: balance; }
.h1 em { color: var(--olive-text); font-style: normal; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2);
  line-height: var(--lh-heading); letter-spacing: -0.018em; color: var(--ink); margin: 0; text-wrap: balance; }
.lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-lead);
  line-height: var(--lh-body); color: var(--ink-body); max-width: 52ch; }
.prose { font-size: var(--t-body); line-height: 1.75; color: var(--ink-body); max-width: 68ch; }
.prose p { margin: 0 0 var(--space-5); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { margin: 0 0 var(--space-5); padding-left: 1.15em; }
.prose li { margin: 0 0 9px; line-height: 1.6; }
.prose li strong { color: var(--ink); }
.req-path { font-family: var(--font-mono); font-size: 14px; color: var(--olive-text) !important;
  background: var(--linen-2); border: 1px solid var(--hairline); border-left: 3px solid var(--olive);
  border-radius: var(--r-sm); padding: 12px 16px; line-height: 1.7; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.015em;
  color: var(--ink); margin: var(--space-7) 0 var(--space-4); }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--linen-2);
  border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 0.1em 0.4em; color: var(--ink); }
pre { font-family: var(--font-mono); font-size: 14px; line-height: 1.7; background: var(--linen-2);
  border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--space-5);
  overflow-x: auto; margin: 0 0 var(--space-5); color: var(--ink-body); }

/* ---- buttons ---- */
.btn { font-family: var(--font-sans); font-size: 16px; font-weight: 600; border-radius: var(--r-sm);
  padding: 12px 20px; cursor: pointer; border: 1px solid transparent; display: inline-flex;
  align-items: center; gap: 9px; text-decoration: none; line-height: 1.1; white-space: nowrap; transition: all var(--dur) var(--ease); }
.btn svg { flex: none; }
.btn--primary { background: var(--olive); color: var(--linen); }
.btn--primary:hover { background: var(--olive-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0); }
.btn--secondary { background: transparent; color: var(--olive-text); border-color: var(--border); }
.btn--secondary:hover { border-color: var(--olive); background: var(--stone); }
.btn--download { background: transparent; color: var(--olive-text); border-color: var(--border); }
.btn--download:hover { border-color: var(--olive); background: var(--stone); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--download:active { transform: translateY(0); }
.btn--download .dl-ico { display: inline-flex; color: var(--olive-text); }

/* ---- tags ---- */
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-family: var(--font-mono); font-size: 13px; padding: 5px 13px; border-radius: var(--r-pill);
  background: var(--linen-2); border: 1px solid var(--border); color: var(--ink-body); white-space: nowrap; }

/* ---- live counter ---- */
.counter { display: flex; align-items: center; gap: 16px; }
.counter__num { font-family: var(--font-display); font-weight: 600; line-height: 1; color: var(--olive);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.counter--lg .counter__num { font-size: 64px; min-width: 160px; }
.counter--sm .counter__num { font-size: 34px; min-width: 92px; }
.counter__meta { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); line-height: 1.65; }
.counter__live { display: inline-flex; align-items: center; gap: 6px; color: var(--olive-text); font-weight: 500; letter-spacing: 0.06em; }
.live-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--olive); }

/* ---- hero ---- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-8); align-items: center; padding: var(--space-7) 0; width: 100%; }
.hero-photo { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.portrait { position: relative; width: 248px; height: 248px; }
.portrait .ring { position: absolute; inset: -7px; border-radius: 50%; border: 1px solid oklch(62% 0.085 132 / 0.45); }
.portrait img { width: 248px; height: 248px; object-fit: cover; border-radius: 50%;
  filter: saturate(1.04) contrast(1.02);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 88%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, black 88%, transparent 100%); }
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* ---- work index ---- */
.section { padding: var(--space-9) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-6); }
.section-head .meta { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--ink-muted); }
.entry { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--space-7);
  align-items: start; padding: var(--space-7) 0; border-top: 1px solid var(--border); }
.entry-list .entry:last-child { border-bottom: 1px solid var(--border); }
.entry[data-clickable] { cursor: pointer; }
.entry__meta { display: flex; flex-direction: column; gap: 10px; }
.entry__idx { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; }
.entry__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.022em;
  color: var(--ink); margin: 0; line-height: 1.1; transition: color var(--dur) var(--ease); }
.entry__year { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); }
.entry__line { font-size: 16.5px; line-height: 1.65; color: var(--ink-body); margin: 0 0 14px; max-width: 64ch; }
.entry__shows { font-family: var(--font-mono); font-size: 12px; color: var(--olive-text); letter-spacing: 0.02em;
  margin: 0 0 16px; line-height: 1.6; }
.entry__stack { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); }
.entry__read { display: block; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--olive-text); }
.entry[data-clickable]:hover .entry__title { color: var(--olive-text); }
.entry[data-clickable]:hover .entry__read { text-decoration: underline; text-underline-offset: 3px; }

/* ---- about ---- */
.about-figure { margin: 0; }
.about-figure img { display: block; width: 100%; max-width: 820px; height: auto;
  border-radius: var(--r-lg); border: 1px solid var(--hairline); }

/* ---- project / blog ---- */
.narrow { max-width: 860px; }
.narrower { max-width: 720px; }
.back { font-size: 15px; color: var(--ink-muted); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: var(--space-6); font-family: var(--font-sans); }
.back:hover { color: var(--olive-text); }
.stack-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 14px; }
.stack-table tr { border-top: 1px solid var(--hairline); }
.stack-table td { padding: 12px 0; color: var(--ink); vertical-align: top; }
.stack-table td:first-child { padding-right: 16px; color: var(--ink-muted); white-space: nowrap; }
.post-meta { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); margin: 0 0 14px; }
.post-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  line-height: 1.12; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 var(--space-6); }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--hairline); background: var(--linen-2); }
.footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-7);
  max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-6); }
.footer__brand { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--ink); }
.footer__brand .tld { color: var(--ink-muted); }
.footer__tagline { font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 12px 0 0; max-width: 30ch; }
.footer__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 14px; }
.footer__email { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em; color: var(--olive-text); text-decoration: none; }
.footer__email:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer__loc { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); margin: 12px 0 0; }
.footer__link { display: block; width: max-content; white-space: nowrap; font-size: 15.5px; color: var(--ink-body);
  text-decoration: none; margin-bottom: 10px; transition: color var(--dur) var(--ease); }
.footer__link span { color: var(--ink-faint); margin-left: 2px; }
.footer__link:hover, .footer__link:hover span { color: var(--olive-text); }
.footer__bar { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  max-width: var(--content-max); margin: 0 auto; padding: 18px var(--space-6);
  border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }

/* ---- view switching ---- */
.view { display: none; }
.view.is-active { display: block; }

/* ---- focus + motion ---- */
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 50;
  background: var(--ink); color: var(--linen); font-family: var(--font-sans); font-size: 15px;
  padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none;
  transition: top var(--dur) var(--ease); }
.skip-link:focus-visible { top: 16px; outline: 2px solid var(--focus); outline-offset: 3px; }
#main:focus { outline: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: obs-pulse 2.4s var(--ease) infinite; }
}
@keyframes obs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---- responsive ---- */
@media (max-width: 1140px) {
  .atmos--hero { border-radius: 0; }
}
@media (min-width: 1141px) {
  body {
    background:
      radial-gradient(130% 55% at 50% 0%, oklch(97.8% 0.012 125) 0%, transparent 55%),
      linear-gradient(90deg,
        oklch(91% 0.024 132) 0%,
        oklch(97.8% 0.010 122) 5.5%,
        var(--linen) 12%,
        var(--linen) 88%,
        oklch(97.8% 0.010 122) 94.5%,
        oklch(91% 0.024 132) 100%),
      var(--linen);
    background-attachment: fixed;
  }
}
@media (max-width: 960px) {
  .section { padding: var(--space-8) 0; }
  .nav-links { gap: 22px; }
  .hero-grid { gap: var(--space-6); }
}
@media (max-width: 760px) {
  .atmos--hero { min-height: auto; display: block; }
  .hero-grid { grid-template-columns: 1fr; padding: var(--space-7) 0; }
  .hero-photo { align-items: flex-start; margin-top: var(--space-6); }
  .counter--lg .counter__num { font-size: 52px; min-width: 132px; }
  .entry { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 var(--space-4); }
  .nav__inner { padding: 14px var(--space-4); }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 15px; }
  .brand { font-size: 17px; }
  .section { padding: var(--space-7) 0; }
  .btn-row { width: 100%; }
  .btn { width: 100%; justify-content: center; }
  .entry__title { font-size: 25px; }
  .entry__line { max-width: none; }
  .stack-table tr { display: block; border-top: 1px solid var(--hairline); padding: 12px 0; }
  .stack-table td { display: block; padding: 0; }
  .stack-table td:first-child { margin-bottom: 3px; }
  .counter--lg .counter__num { font-size: 46px; min-width: 112px; }
  .counter { gap: 12px; }
  pre { font-size: 12px; padding: var(--space-4); }
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-7) var(--space-4) var(--space-5); }
  .footer__bar { flex-direction: column; gap: 8px; padding: 16px var(--space-4); }
}