/*
Theme Name: Pablo Fuentes
Theme URI: https://pablofuentes.org
Author: Pablo Fuentes
Author URI: https://pablofuentes.org
Description: Tema personal de portfolio para Pablo Fuentes. Réplica en WordPress del diseño original en Next.js + Tailwind/shadcn (paleta navy + azul, modo oscuro por defecto). Incluye CPT de Proyectos, blog con categorías, modo claro/oscuro y huecos preparados para formularios de contacto y newsletter.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pablofuentes
Tags: portfolio, blog, custom-post-type, dark-mode, translation-ready, full-width-template
*/

/* =========================================================
   Design tokens (réplica exacta de globals.css — oklch)
   ========================================================= */
:root {
  /* Light: blanco/gris con texto navy y acentos azul brillante */
  --background: oklch(0.99 0.003 250);
  --foreground: oklch(0.20 0.03 255);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.20 0.03 255);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.20 0.03 255);
  --primary: oklch(0.52 0.22 258);
  --primary-foreground: oklch(0.98 0.005 250);
  --secondary: oklch(0.96 0.01 250);
  --secondary-foreground: oklch(0.25 0.05 258);
  --muted: oklch(0.96 0.01 250);
  --muted-foreground: oklch(0.50 0.02 255);
  --accent: oklch(0.94 0.03 255);
  --accent-foreground: oklch(0.30 0.10 258);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.90 0.02 255);
  --input: oklch(0.92 0.02 255);
  --ring: oklch(0.52 0.22 258);
  --radius: 0.625rem;

  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html.dark {
  /* Dark: fondo navy profundo, texto blanco, acentos azul brillante */
  --background: oklch(0.16 0.025 258);
  --foreground: oklch(0.98 0.005 250);
  --card: oklch(0.20 0.03 258);
  --card-foreground: oklch(0.98 0.005 250);
  --popover: oklch(0.20 0.03 258);
  --popover-foreground: oklch(0.98 0.005 250);
  --primary: oklch(0.68 0.20 255);
  --primary-foreground: oklch(0.12 0.03 258);
  --secondary: oklch(0.25 0.04 258);
  --secondary-foreground: oklch(0.98 0.005 250);
  --muted: oklch(0.25 0.04 258);
  --muted-foreground: oklch(0.72 0.02 255);
  --accent: oklch(0.30 0.08 258);
  --accent-foreground: oklch(0.95 0.02 255);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.68 0.20 255);
}

/* Opacidades reutilizadas (equivalen a /60, /40, etc. de Tailwind) */
:root {
  --border-60: color-mix(in oklch, var(--border) 60%, transparent);
  --primary-20: color-mix(in oklch, var(--primary) 20%, transparent);
  --primary-10: color-mix(in oklch, var(--primary) 10%, transparent);
  --primary-05: color-mix(in oklch, var(--primary) 5%, transparent);
  --accent-50: color-mix(in oklch, var(--accent) 50%, transparent);
  --muted-40: color-mix(in oklch, var(--muted) 40%, transparent);
  --card-40: color-mix(in oklch, var(--card) 40%, transparent);
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, svg, video { display: block; max-width: 100%; }
svg { height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; }
button { font-family: inherit; cursor: pointer; }
code, pre, .font-mono { font-family: var(--font-mono); }
.font-heading { font-family: var(--font-heading); }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* =========================================================
   Layout
   ========================================================= */
.site-main { flex: 1 0 auto; }

.container { width: 100%; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-inline: 2rem; } }
.mw-7xl { max-width: 80rem; }
.mw-5xl { max-width: 64rem; }
.mw-4xl { max-width: 56rem; }
.mw-3xl { max-width: 48rem; }
.mw-2xl { max-width: 42rem; }
.mw-xl  { max-width: 36rem; }
.mw-md  { max-width: 28rem; }
.mw-sm  { max-width: 24rem; }

.section { padding-block: 5rem; }
.section-bordered { border-bottom: 1px solid var(--border-60); }
.muted { color: var(--muted-foreground); }
.eyebrow-label { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); }
.lead { color: var(--muted-foreground); line-height: 1.7; }

/* Patrones de fondo */
.bg-grid {
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--foreground) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--foreground) 6%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}
html.dark .bg-grid {
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--foreground) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--foreground) 8%, transparent) 1px, transparent 1px);
}
.bg-dots {
  background-image: radial-gradient(color-mix(in oklch, var(--primary) 30%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
.mask-radial { -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); }
.mask-top { -webkit-mask-image: linear-gradient(to bottom, black, transparent); mask-image: linear-gradient(to bottom, black, transparent); }
.orb { position: absolute; border-radius: 9999px; filter: blur(64px); z-index: 0; }

/* =========================================================
   Badges
   ========================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 9999px; padding: 0.25rem 0.625rem;
  font-size: 0.75rem; font-weight: 500; line-height: 1.2;
  background: var(--secondary); color: var(--secondary-foreground);
}
.badge-primary { border: 1px solid var(--primary-20); background: var(--primary-05); color: var(--primary); }
.badge .dot { height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: var(--primary); }
@keyframes pf-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.animate-pulse { animation: pf-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border-radius: var(--radius); padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 500; border: 1px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s, transform .15s;
  white-space: nowrap;
}
.btn svg { width: 1rem; height: 1rem; }
.btn-lg { padding: 0.65rem 1.4rem; font-size: 0.95rem; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { opacity: .9; }
.btn-outline { border-color: var(--border); background: transparent; color: var(--foreground); }
.btn-outline:hover { background: var(--accent); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; width: 2.5rem; border-radius: var(--radius);
  background: var(--primary-10); color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-20);
}
.icon-chip svg { width: 1.25rem; height: 1.25rem; }
.icon-chip-sm { height: 2rem; width: 2rem; }
.icon-chip-sm svg { width: 1rem; height: 1rem; }

/* =========================================================
   Cards
   ========================================================= */
.card { border: 1px solid var(--border-60); background: var(--card); color: var(--card-foreground); border-radius: 0.75rem; }
.card-pad { padding: 1.5rem; }
.card-hover { transition: border-color .2s, transform .2s, box-shadow .2s; }
.card-hover:hover { border-color: color-mix(in oklch, var(--primary) 40%, transparent); transform: translateY(-2px); }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Grids */
.grid { display: grid; gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
@media (min-width:640px){ .sm\:cols-2{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:768px){ .md\:cols-2{grid-template-columns:repeat(2,minmax(0,1fr));} .md\:cols-3{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:1024px){ .lg\:cols-3{grid-template-columns:repeat(3,minmax(0,1fr));} }

.section-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50; width: 100%;
  border-bottom: 1px solid var(--border-60);
  background: color-mix(in oklch, var(--background) 70%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
}
.header-inner { display:flex; height:4rem; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-heading); font-weight:700; font-size:1.125rem; }
.brand .accent { color: var(--primary); }
.brand-mark { display:grid; place-items:center; height:2rem; width:2rem; border-radius:var(--radius); background:var(--primary); color:var(--primary-foreground); }
.brand-mark svg { width:1rem; height:1rem; }

.nav-desktop { display:none; align-items:center; gap:0.25rem; }
@media (min-width:768px){ .nav-desktop { display:flex; } }
.nav-link { border-radius:var(--radius); padding:0.5rem 0.75rem; font-size:0.875rem; color:var(--muted-foreground); transition:color .15s; }
.nav-link:hover { color:var(--foreground); }
.nav-link.active { color:var(--foreground); font-weight:500; }

.header-actions { display:flex; align-items:center; gap:0.5rem; }
.btn-header { display:none; }
@media (min-width:768px){ .btn-header { display:inline-flex; } }

.icon-btn { display:inline-flex; align-items:center; justify-content:center; height:2.25rem; width:2.25rem; border-radius:var(--radius); border:none; background:transparent; color:var(--foreground); }
.icon-btn:hover { background:var(--accent); }
.icon-btn svg { width:1.25rem; height:1.25rem; }
.menu-toggle { display:inline-flex; }
@media (min-width:768px){ .menu-toggle { display:none; } }

.theme-toggle .icon-moon { display:none; }
html.dark .theme-toggle .icon-sun { display:none; }
html.dark .theme-toggle .icon-moon { display:block; }
.menu-toggle .icon-close { display:none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display:none; }
.menu-toggle[aria-expanded="true"] .icon-close { display:block; }

.nav-mobile { border-top:1px solid var(--border-60); }
.nav-mobile[hidden] { display:none; }
@media (min-width:768px){ .nav-mobile { display:none !important; } }
.nav-mobile nav { display:flex; flex-direction:column; gap:0.25rem; padding:0.75rem 1rem 1rem; }
.nav-mobile a { border-radius:var(--radius); padding:0.65rem 0.75rem; font-size:1rem; color:var(--muted-foreground); }
.nav-mobile a:hover, .nav-mobile a.active { background:var(--accent); color:var(--foreground); }
.nav-mobile .btn { margin-top:0.75rem; }

/* =========================================================
   Hero (home)
   ========================================================= */
.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--border-60); }
.hero .orb-1 { top:-10rem; right:-10%; height:500px; width:500px; background:var(--primary-20); }
.hero .orb-2 { bottom:-10rem; left:-10%; height:400px; width:400px; background:var(--primary-10); }
.hero-inner { position:relative; z-index:1; padding-block:5rem; display:grid; gap:3rem; align-items:center; }
@media (min-width:768px){ .hero-inner { grid-template-columns:7fr 5fr; padding-block:8rem; } }
.hero h1 { margin-top:1.25rem; font-size:clamp(2.25rem,6vw,4.5rem); font-weight:700; line-height:1.05; }
.hero h1 .accent { color:var(--primary); }
.hero p.lead { margin-top:1.5rem; max-width:36rem; font-size:1.125rem; }
.hero-actions { margin-top:2rem; display:flex; flex-wrap:wrap; gap:0.75rem; }

.stats { margin-top:3rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; max-width:28rem; }
.stat dd { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; }
.stat p { margin-top:0.25rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted-foreground); }

/* Tarjeta monograma / terminal del hero */
.hero-card-wrap { position:relative; margin-inline:auto; max-width:28rem; }
.hero-card-glow { position:absolute; inset:-1rem; border-radius:1.5rem; background:linear-gradient(135deg,var(--primary-20),transparent); filter:blur(40px); }
.hero-card { position:relative; overflow:hidden; }
.monogram { display:grid; place-items:center; border-radius:1rem; background:linear-gradient(135deg,var(--primary),color-mix(in oklch,var(--primary) 50%, var(--accent))); color:var(--primary-foreground); font-family:var(--font-heading); font-weight:700; }
.hero-id { display:flex; align-items:center; gap:1rem; }
.hero-id .name { font-family:var(--font-heading); font-size:1.125rem; font-weight:600; }
.hero-id .role { font-size:0.875rem; color:var(--muted-foreground); }
.terminal { margin-top:1.5rem; border:1px solid var(--border-60); background:color-mix(in oklch,var(--background) 60%, transparent); border-radius:var(--radius); padding:1rem; font-family:var(--font-mono); font-size:0.75rem; line-height:1.6; }
.terminal .prompt { color:var(--primary); }
.terminal .dim { color:var(--muted-foreground); }
.hero-meta { margin-top:1.5rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.75rem; font-size:0.875rem; }
.hero-meta .box { border:1px solid var(--border-60); border-radius:var(--radius); padding:0.75rem; }
.hero-meta .box dt { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted-foreground); }
.hero-meta .box dd { margin-top:0.25rem; font-weight:500; }

/* =========================================================
   Skills
   ========================================================= */
.skill-card h3 { margin-top:1rem; font-size:1.125rem; font-weight:600; }
.skill-card p { margin-top:0.5rem; font-size:0.875rem; color:var(--muted-foreground); line-height:1.6; }

/* =========================================================
   Project cards
   ========================================================= */
.project-card { height:100%; overflow:hidden; }
.project-media { position:relative; height:11rem; background:linear-gradient(135deg,var(--primary-20),var(--primary-10),transparent); }
.project-media .dots { position:absolute; inset:0; opacity:.4; }
.project-media .cpu { position:absolute; bottom:1rem; left:1rem; display:inline-flex; height:2.5rem; width:2.5rem; align-items:center; justify-content:center; border-radius:var(--radius); background:color-mix(in oklch,var(--background) 80%, transparent); backdrop-filter:blur(4px); color:var(--primary); box-shadow:0 0 0 1px var(--border-60); }
.project-media .cpu svg { width:1.25rem; height:1.25rem; }
.project-media img { width:100%; height:100%; object-fit:cover; }
.project-media .star { position:absolute; top:0.75rem; right:0.75rem; background:color-mix(in oklch,var(--background) 80%, transparent); backdrop-filter:blur(4px); color:var(--primary); border:1px solid var(--primary-20); }
.project-body { padding:1.25rem; }
.project-body h3, .project-body h2 { font-size:1.125rem; font-weight:600; transition:color .15s; }
.card-hover:hover .project-body h3, .card-hover:hover .project-body h2 { color:var(--primary); }
.project-body .summary { margin-top:0.375rem; font-size:0.875rem; color:var(--muted-foreground); }
.tech-row { margin-top:1rem; display:flex; flex-wrap:wrap; gap:0.375rem; }
.project-links { margin-top:1rem; display:flex; align-items:center; gap:0.75rem; font-size:0.75rem; color:var(--muted-foreground); }
.project-links span { display:inline-flex; align-items:center; gap:0.25rem; }
.project-links svg { width:0.875rem; height:0.875rem; }

/* =========================================================
   Posts list
   ========================================================= */
.posts-list { margin-top:2.5rem; border:1px solid var(--border-60); border-radius:0.75rem; background:var(--card-40); overflow:hidden; }
.post-row { display:flex; flex-direction:column; gap:0.5rem; padding:1.5rem; transition:background-color .15s; border-top:1px solid var(--border-60); }
.posts-list .post-row:first-child { border-top:none; }
.post-row:hover { background:var(--accent-50); }
.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; font-size:0.75rem; color:var(--muted-foreground); }
.post-meta svg { width:0.75rem; height:0.75rem; }
.post-row h2, .post-row h3 { font-family:var(--font-heading); font-weight:600; transition:color .15s; }
.post-row h2 { font-size:clamp(1.25rem,3vw,1.5rem); }
.post-row h3 { font-size:1.125rem; }
.post-row:hover h2, .post-row:hover h3 { color:var(--primary); }
.post-row .excerpt { color:var(--muted-foreground); }
.post-row .read { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.875rem; color:color-mix(in oklch,var(--primary) 80%, transparent); }
.post-row .read svg { width:0.9rem; height:0.9rem; transition:transform .15s; }
.post-row:hover .read svg { transform:translateX(3px); }

.empty-box { margin-top:3rem; border:1px dashed var(--border-60); border-radius:0.75rem; padding:2.5rem; text-align:center; color:var(--muted-foreground); }
.empty-box .sub { margin-top:0.25rem; font-size:0.875rem; }

/* =========================================================
   Newsletter CTA
   ========================================================= */
.cta { position:relative; overflow:hidden; border:1px solid var(--border-60); border-radius:1rem; background:linear-gradient(135deg,var(--card),var(--card),var(--primary-05)); padding:2rem; }
@media (min-width:768px){ .cta { padding:3rem; } }
.cta .dots { position:absolute; inset:0; opacity:.3; }
.cta-inner { position:relative; z-index:1; display:grid; gap:2rem; align-items:center; }
@media (min-width:768px){ .cta-inner { grid-template-columns:3fr 2fr; } }
.cta h2 { margin-top:1rem; font-size:clamp(1.5rem,4vw,1.875rem); font-weight:700; }
.cta p { margin-top:0.5rem; max-width:36rem; color:var(--muted-foreground); }
.cta .icon-lead { width:2rem; height:2rem; color:var(--primary); }

/* =========================================================
   Forms
   ========================================================= */
.form { display:grid; gap:1.25rem; }
.field { display:grid; gap:0.5rem; }
.field label { font-size:0.875rem; font-weight:500; }
.input, .textarea {
  width:100%; border:1px solid var(--input); background:var(--background); color:var(--foreground);
  border-radius:var(--radius); padding:0.55rem 0.8rem; font-size:0.875rem; font-family:inherit;
}
.input:focus, .textarea:focus { outline:2px solid var(--ring); outline-offset:1px; }
.textarea { resize:vertical; }
.newsletter-inline { display:flex; gap:0.5rem; flex-direction:column; }
@media (min-width:640px){ .newsletter-inline.compact { flex-direction:row; } }
.newsletter-inline .field-grow { position:relative; flex:1; }
.newsletter-inline .field-grow svg { position:absolute; left:0.75rem; top:50%; transform:translateY(-50%); width:1rem; height:1rem; color:var(--muted-foreground); }
.newsletter-inline .field-grow .input { padding-left:2.25rem; }
.form-note { margin-top:1rem; font-size:0.75rem; color:var(--muted-foreground); }
.form-placeholder { border:1px dashed var(--border-60); border-radius:var(--radius); padding:1rem; font-size:0.875rem; color:var(--muted-foreground); }
.form-placeholder code { background:var(--secondary); padding:0.1rem 0.35rem; border-radius:0.25rem; font-size:0.85em; }

/* =========================================================
   Articles / prose
   ========================================================= */
.article { padding-block:4rem; }
.back-link { display:inline-flex; align-items:center; gap:0.4rem; margin-left:-0.75rem; padding:0.4rem 0.75rem; border-radius:var(--radius); font-size:0.875rem; color:var(--muted-foreground); transition:background-color .15s, color .15s; }
.back-link:hover { background:var(--accent); color:var(--foreground); }
.back-link svg { width:1rem; height:1rem; }
.article-header { margin-top:1.5rem; }
.article-header h1 { margin-top:0.75rem; font-size:clamp(2rem,5vw,3rem); font-weight:700; line-height:1.1; }
.article-header .summary { margin-top:1rem; font-size:1.125rem; color:var(--muted-foreground); }
.article-cover { margin-top:2rem; width:100%; border-radius:1rem; border:1px solid var(--border-60); }
.project-hero-art { position:relative; margin-top:3rem; height:16rem; border-radius:1rem; overflow:hidden; border:1px solid var(--border-60); background:linear-gradient(135deg,var(--primary-20),var(--primary-10),transparent); }
@media (min-width:640px){ .project-hero-art { height:20rem; } }

.prose { margin-top:2rem; max-width:none; line-height:1.75; color:color-mix(in oklch,var(--foreground) 90%, transparent); }
.prose > * + * { margin-top:1.25rem; }
.prose h2 { font-family:var(--font-heading); font-size:1.5rem; margin-top:2.5rem; }
.prose h3 { font-family:var(--font-heading); font-size:1.25rem; margin-top:2rem; }
.prose a { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.prose img { border-radius:0.5rem; margin-block:1.5rem; }
.prose ul, .prose ol { padding-left:1.5rem; }
.prose ul { list-style:disc; } .prose ol { list-style:decimal; }
.prose blockquote { border-left:3px solid var(--primary); padding-left:1rem; color:var(--muted-foreground); }
.prose code { background:var(--muted); padding:0.125rem 0.375rem; border-radius:0.25rem; font-size:0.875em; }
.prose pre { background:var(--muted-40); border:1px solid var(--border-60); padding:1rem; border-radius:0.5rem; overflow-x:auto; font-size:0.875rem; }
.prose pre code { background:none; padding:0; }

/* =========================================================
   About page
   ========================================================= */
.about-hero { display:flex; flex-direction:column; gap:2.5rem; }
@media (min-width:768px){ .about-hero { flex-direction:row; align-items:flex-start; } }
.about-hero h1 { margin-top:1rem; font-size:clamp(2.25rem,5vw,3rem); font-weight:700; }
.about-hero h1 .accent { color:var(--primary); }
.about-hero .lead { margin-top:1.25rem; max-width:42rem; font-size:1.125rem; }
.work-list { margin-top:1rem; display:flex; flex-direction:column; gap:1rem; color:var(--muted-foreground); }
.work-list li { display:flex; gap:0.75rem; }
.work-list svg { width:1.25rem; height:1.25rem; margin-top:0.15rem; flex-shrink:0; color:var(--primary); }
.dont-list { margin-top:1rem; display:flex; flex-direction:column; gap:1rem; color:var(--muted-foreground); }
.timeline { margin-top:2rem; position:relative; border-left:1px solid var(--border-60); display:flex; flex-direction:column; gap:2rem; }
.timeline li { padding-left:1.5rem; position:relative; }
.timeline .pin { position:absolute; left:-7px; margin-top:0.35rem; height:0.75rem; width:0.75rem; border-radius:9999px; background:var(--primary); box-shadow:0 0 0 4px var(--background); }
.timeline .year { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--primary); font-weight:500; }
.timeline h3 { margin-top:0.25rem; font-size:1.125rem; font-weight:600; }
.timeline p { margin-top:0.25rem; color:var(--muted-foreground); }
.stack-card h3 { font-family:var(--font-heading); font-weight:600; }
.stack-card .head { display:flex; align-items:center; gap:0.5rem; }

/* =========================================================
   Contact page
   ========================================================= */
.contact-grid { display:grid; gap:3rem; }
@media (min-width:768px){ .contact-grid { grid-template-columns:2fr 3fr; } }
.contact-info { margin-top:2rem; display:flex; flex-direction:column; gap:1rem; font-size:0.875rem; }
.contact-info li { display:flex; align-items:flex-start; gap:0.75rem; }
.contact-info .title { font-weight:500; }
.contact-info .value { color:var(--muted-foreground); }
.contact-info a.value:hover { color:var(--primary); }
.contact-card { border:1px solid var(--border-60); background:var(--card); border-radius:1rem; padding:1.5rem; }
@media (min-width:640px){ .contact-card { padding:2rem; } }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { border-top:1px solid var(--border-60); background:var(--muted-40); flex-shrink:0; }
.footer-grid { padding-block:3rem; display:grid; gap:2.5rem; }
@media (min-width:768px){ .footer-grid { grid-template-columns:5fr 3fr 4fr; } }
.footer-brand .brand { font-size:1.125rem; }
.footer-brand p { margin-top:0.75rem; max-width:24rem; font-size:0.875rem; color:var(--muted-foreground); }
.footer-social { margin-top:1.25rem; display:flex; align-items:center; gap:0.5rem; }
.footer-social a { display:inline-flex; height:2.25rem; width:2.25rem; align-items:center; justify-content:center; border-radius:var(--radius); border:1px solid var(--border-60); color:var(--muted-foreground); transition:border-color .15s, background-color .15s, color .15s; }
.footer-social a:hover { border-color:var(--primary-20); background:var(--primary-05); color:var(--primary); }
.footer-social svg { width:1rem; height:1rem; }
.footer-col h3 { font-family:var(--font-heading); font-size:0.875rem; font-weight:600; }
.footer-col ul { margin-top:0.75rem; display:flex; flex-direction:column; gap:0.5rem; font-size:0.875rem; color:var(--muted-foreground); list-style:none; }
.footer-col a:hover { color:var(--foreground); }
.footer-col p { margin-top:0.25rem; font-size:0.875rem; color:var(--muted-foreground); }
.footer-bottom { border-top:1px solid var(--border-60); }
.footer-bottom-inner { padding-block:1.25rem; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:0.75rem; font-size:0.75rem; color:var(--muted-foreground); }
@media (min-width:768px){ .footer-bottom-inner { flex-direction:row; } }
.footer-bottom a { color:color-mix(in oklch,var(--foreground) 80%, transparent); }
.footer-bottom a:hover { color:var(--primary); }

/* =========================================================
   Pagination / misc
   ========================================================= */
.pagination { margin-top:3rem; display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 0.5rem; border-radius:var(--radius); border:1px solid var(--border); font-size:0.875rem; color:var(--muted-foreground); }
.pagination .page-numbers.current { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }
.pagination .page-numbers:hover:not(.current) { background:var(--accent); color:var(--foreground); }

.notfound { padding-block:6rem; text-align:center; }
.notfound h1 { font-size:4rem; color:var(--primary); }
.notfound p { margin-top:1rem; color:var(--muted-foreground); }
.notfound .btn { margin-top:2rem; }

.screen-reader-text, .sr-only { border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:100; background:var(--background); padding:0.5rem 1rem; border-radius:var(--radius); border:1px solid var(--border); }