/* =========================================
   Fonts & Base Reset
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');

/* Fancy fonts (portfolio / hero / decorative use) */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500&family=Josefin+Slab:wght@300;400;600&family=Ysabeau+SC:wght@300;400&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; }
html { scroll-behavior: smooth; }

/* =========================================
   Fancy Font Overrides
   ========================================= */

/* Hero / big title */
.hero h1 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
}

.hero h3 {
  font-family: 'Josefin Slab', serif;
  font-weight: 300;
  letter-spacing: .45em;
}

/* Intro / portfolio */
.intro h3, .project-card h4 {
  font-family: 'Josefin Slab', serif;
  font-weight: 600;
}

.intro p, .project-card p {
  font-family: 'Ysabeau SC', sans-serif;
  line-height: 1.7;
}


*{ margin:0; padding:0; box-sizing:border-box; font-family:'Open Sans',sans-serif; }
html{ scroll-behavior:smooth; }

/* =========================================
   Page Background & Global Colors
   ========================================= */
body{
  background: radial-gradient(circle, rgba(85,85,85,1) 0%, rgba(51,51,51,1) 100%);
  color:#f5f5f5;
  padding-top:72px; /* space for fixed nav */
}

h1{ font-weight:700; line-height:1.1; font-size:clamp(2rem, 3vw + 1rem, 3.25rem); }
h2{ font-weight:600; line-height:1.2; font-size:clamp(1.5rem, 2.5vw + 1rem, 2.25rem); }
h3{ font-weight:600; line-height:1.25; font-size:clamp(1.15rem, 1.2vw + 1rem, 1.5rem); }
p{ font-size:clamp(1rem, .35vw + 1rem, 1.125rem); color:#cfcfcf; }

.small{ font-size:12px; color:#cfcfcf; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =========================================
   Navigation (Header)
   ========================================= */
.site-header{
  position:fixed; z-index:10; top:0; width:100%;
  background-color:rgba(51,51,51,.75);
  -webkit-backdrop-filter:blur(5.55px); backdrop-filter:blur(5.55px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:72px; }

.logo{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-size:2em; font-weight:700; text-decoration:none;
}
.logo img{ width:55px; height:auto; display:block; }

.nav{ display:none; gap:18px; }
.nav a{
  color:#f5f5f5; opacity:.9; text-decoration:none;
  padding:8px 12px; border-radius:12px;
  transition:background .18s ease, opacity .18s ease;
}
.nav a:hover, .nav a.active{ background:rgba(255,255,255,.08); opacity:1; }

.menu-btn{ font-size:22px; background:none; border:0; color:#fff; padding:8px 10px; cursor:pointer; }
@media (min-width:768px){ .nav{ display:flex; } .menu-btn{ display:none; } }

.mobile-sheet{
  display:none; border-top:1px solid rgba(255,255,255,.08);
  padding:16px; background:rgba(24,24,24,.85);
}
.mobile-sheet a{ display:block; padding:10px 12px; border-radius:12px; color:#f5f5f5; }
@media (max-width:767px){ .mobile-sheet[open]{ display:block; } }

/* =========================================
   Layout helpers
   ========================================= */
:root{ --gutter: clamp(12px, 4vw, 24px); }

.container{
  max-width:1200px;
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.header-inner{ max-width:1200px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.mobile-sheet{ padding-left:var(--gutter); padding-right:var(--gutter); }

@supports(padding:max(0px)){
  .container,.header-inner,.mobile-sheet{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
}

/* =========================================
   Section & Cards
   ========================================= */
.hero{ padding:96px 0 48px; }
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#e5e5e5; }
.hero__actions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }

.section{ padding:56px 0; }
.grid{ display:grid; gap:18px; }
@media (min-width:900px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

.card{ background:rgba(255,255,255,.06); border-radius:20px; padding:18px 20px; box-shadow:0 10px 40px -10px rgba(0,0,0,.25); }

/* Buttons */
.btn{ display:inline-block; padding:10px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.2); color:#f5f5f5; text-decoration:none; }
.btn.primary{ background:#ffffff; color:#111; border-color:#ffffff; }
.btn.neutral:hover{ background:rgba(255,255,255,.08); }

/* Focus */
a:focus,button:focus{ outline:2px solid #79b3ff; outline-offset:3px; border-radius:10px; }

/* Reveal animation */
.reveal{ opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* =========================================
   Articles / Prose
   ========================================= */
.article{ padding:32px 0 64px; }
.article__header{ margin-bottom:16px; }
.article__meta{ color:#cfcfcf; margin-top:6px; font-size:14px; }

.article__toc{ margin:18px 0 28px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.06); }
.article__toc strong{ display:block; margin-bottom:8px; }
.article__toc ul{ list-style:none; margin:0; padding:0; }
.article__toc li{ margin:6px 0; }
.article__toc a{ color:#f5f5f5; text-decoration:none; font-size:14px; }
.article__toc a:hover{ text-decoration:underline; }

.prose{ max-width:78ch; line-height:1.6; }
.prose h2{ font-size:clamp(1.35rem,1.4vw + 1rem,1.85rem); margin:26px 0 10px; }
.prose h3{ font-size:clamp(1.15rem,1vw + 1rem,1.35rem); margin:20px 0 8px; }
.prose h4{ font-size:1rem; margin:14px 0 6px; }
.prose p{ margin:10px 0; }
.prose ul,.prose ol{ margin:10px 0 10px 20px; }
.prose li{ margin:6px 0; }

.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(255,255,255,.08); padding:2px 6px; border-radius:8px; font-size:.95em;
}
.prose pre{
  overflow-x:auto; padding:14px 16px; border-radius:14px;
  background:#222; border:1px solid rgba(255,255,255,.15);
  font-family:"Kode Mono",monospace; margin:14px 0;
}
.prose pre code{ background:none; padding:0; font-size:.95em; color:#e5e5e5; display:block; }

.prose blockquote{ margin:12px 0; padding:10px 14px; border-left:3px solid #9ec2ff; background:rgba(255,255,255,.06); border-radius:8px; font-style:italic; }
.prose img,.prose video{ max-width:100%; height:auto; border-radius:14px; margin:12px 0; }
.prose table{ width:100%; border-collapse:collapse; margin:12px 0; }
.prose th,.prose td{ border:1px solid rgba(255,255,255,.15); padding:8px 10px; text-align:left; }

.article__cta{ margin-top:48px; padding:28px; border-radius:18px; background:rgba(255,255,255,.05); text-align:center; }
.article__cta h2{ margin-bottom:10px; }
.article__cta p{ margin-bottom:18px; }

/* =========================================
   Command / Output Boxes (code articles)
   ========================================= */
.cmd-brdr{
  margin:.75em 0;
  background:linear-gradient(109.2deg, rgb(254,3,104) 9.3%, rgb(103,3,255) 89.5%);
  padding:5px; border-radius:12px; font-family:"Kode Mono",monospace;
}
.cmd-box{ background:#222; color:#e5e5e5; padding:.75em; border-radius:8px; font-family:"Kode Mono",monospace; overflow-x:auto; font-size:.95em; }
.prmpt{ color:rgb(168,251,60); display:inline-block; margin-right:6px; }
.cmd{ display:inline-block; color:#f1f1f2; font-family:"Cutive Mono",monospace; user-select:text; white-space:pre-wrap; }
.op-brdr{
  margin:.75em 0;
  background:linear-gradient(109.6deg, rgb(80,35,217) 11.2%, rgb(217,35,189) 91.1%);
  padding:5px; border-radius:12px; font-family:"Kode Mono",monospace;
}
.op-box{ background:#222; color:#e5e5e5; padding:.75em; border-radius:8px; font-family:"Kode Mono",monospace; overflow-x:auto; }
.output{ color:#0082c9; margin-right:6px; font-family:"Kode Mono",monospace; }
.op-msg{ color:#f1f1f2; font-family:"Cutive Mono",monospace; user-select:text; white-space:pre-wrap; }

/* =========================================
   Footer (Apple-ish columns, icon socials)
   ========================================= */
.site-footer{
  margin-top:56px;
  background:rgba(24,24,24,.82);
  -webkit-backdrop-filter:blur(5.55px); backdrop-filter:blur(5.55px);
  border-top:1px solid rgba(255,255,255,.08);
}

/* Top area */
.footer-top{
  display:grid;
  gap:24px;
  grid-template-columns: 1fr;
  padding-top:28px; padding-bottom:18px;
}

.brand-col .logo img{ width:64px; height:auto; }
.brand-col .small{ margin-top:6px; }

/* Link columns (auto columns like Apple) */
.footer-links{
  column-gap: 32px;
  column-width: 220px;
}
.footer-links a{
  display:block;                /* for CSS columns */
  color:rgba(255,255,255,.82);
  text-decoration:none;
  line-height:1.8;
  padding:2px 0;                /* no pill look */
  border-radius:0;
  transition:color .18s ease, text-decoration-color .18s ease;
}
.footer-links a:hover{
  color:#fff;
}

/* Socials row (icon-only preferred; supports text fallback) */
.footer-socials{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 16px;
  margin-top:4px;
}
.footer-socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: #cfcfcf;
  line-height:1;
  transition: color .18s ease, transform .18s ease;
}
.footer-socials a:hover{
  color:#fff;
  transform: translateY(-2px);
}
/* Icon sizing: FA + Ionicons */
.footer-socials i,
.nav i {
  font-family: "Font Awesome 6 Brands" !important;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  width: 1.25em;           /* keeps icons aligned */
  text-align: center;
}
.footer-socials ion-icon{ font-size:1.35rem; }

/* Bottom bar */
.footer-bottom{
  padding-top:12px; padding-bottom:28px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom .small{
  color:#9aa0a6;
}

/* Wide footer grid */
@media (min-width: 860px){
  .footer-top{
    grid-template-columns: minmax(220px, 300px) 1fr 1fr;
    align-items:start;
  }
}

/* Tiny screens: soften pre block padding */
@media (max-width:480px){ .prose pre{ padding:12px; } }