/*
Theme Name: Alex Rivera Portfolio
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: A dark, modern one-page portfolio theme with services, about, skills, work, testimonials and blog sections.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alexrivera
*/

:root{
  --bg:#0c0c0e;
  --bg-alt:#141417;
  --surface:#1b1b1f;
  --line:#2a2a2f;
  --ink:#f2f0ea;
  --ink-dim:#9a9a9f;
  --accent:#ff5a36;
  --accent-dim:#a83f26;
  --grid-line: rgba(255,90,54,0.16);
  --radius:2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter', sans-serif; font-size:16px; line-height:1.5;
  overflow-x:hidden; position:relative;
}
img{ max-width:100%; display:block; }

/* ---- signature grid overlay ---- */
.grid-overlay{ position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0; transition:opacity .35s ease; }
.grid-overlay.active{opacity:1;}
.grid-overlay .cols{ max-width:1200px; margin:0 auto; height:100%; display:grid; grid-template-columns:repeat(12,1fr); gap:24px; padding:0 32px; }
.grid-overlay .cols div{ background:var(--grid-line); height:100%; }
.grid-overlay .baseline{ position:absolute; inset:0; background-image:repeating-linear-gradient(to bottom, rgba(255,90,54,0.10) 0px, rgba(255,90,54,0.10) 1px, transparent 1px, transparent 28px); }

/* ---- nav ---- */
nav.site-nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:22px 32px; backdrop-filter:blur(10px); background:rgba(12,12,14,0.7); border-bottom:1px solid var(--line); }
.nav-mark{ font-family:'Fraunces', serif; font-weight:600; font-size:19px; letter-spacing:0.01em; color:var(--ink); text-decoration:none; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a{ color:var(--ink-dim); text-decoration:none; font-size:13px; font-family:'JetBrains Mono', monospace; letter-spacing:0.03em; transition:color .2s ease; }
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--ink); }
.grid-toggle{ display:flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--line); color:var(--ink-dim); font-family:'JetBrains Mono', monospace; font-size:12px; padding:8px 12px; border-radius:var(--radius); cursor:pointer; transition:border-color .2s ease, color .2s ease; }
.grid-toggle:hover, .grid-toggle:focus-visible{ border-color:var(--accent); color:var(--ink); }
.grid-toggle .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink-dim); transition:background .2s ease;}
.grid-toggle.on .dot{ background:var(--accent); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

section{ max-width:1200px; margin:0 auto; padding:0 32px; position:relative; }

/* ---- hero ---- */
.hero{ min-height:100vh; display:flex; align-items:center; padding-top:120px; padding-bottom:80px; gap:64px; }
.hero-copy{ flex:1.1; }
.hero-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--accent); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:28px; display:flex; align-items:center; gap:10px; }
.hero-eyebrow::before{ content:''; width:24px; height:1px; background:var(--accent); }
h1.hero-title{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(40px, 6.4vw, 80px); line-height:1.02; letter-spacing:-0.02em; }
h1.hero-title em{ font-style:italic; font-weight:500; color:var(--accent); }
.hero-desc{ max-width:460px; color:var(--ink-dim); font-size:16px; margin-top:24px; }
.hero-actions{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }
.btn{ font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:0.02em; padding:14px 24px; border-radius:var(--radius); text-decoration:none; transition:all .2s ease; display:inline-flex; align-items:center; gap:10px; }
.btn-primary{ background:var(--accent); color:#0c0c0e; font-weight:500; }
.btn-primary:hover{ background:#ff7452; }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.hero-portrait{ flex:0.9; display:flex; justify-content:center; align-items:center; position:relative; }
.portrait-frame{ width:100%; max-width:380px; aspect-ratio:4/5; position:relative; border:1px solid var(--line); overflow:hidden; }
.portrait-frame svg, .portrait-frame img{ width:100%; height:100%; display:block; object-fit:cover; }
.portrait-tag{ position:absolute; bottom:0; left:0; background:var(--accent); color:#0c0c0e; font-family:'JetBrains Mono', monospace; font-size:11px; padding:8px 12px; letter-spacing:0.03em; }

/* ---- section headers ---- */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:56px; padding-top:120px; gap:24px; flex-wrap:wrap; }
.section-head h2{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(30px,4vw,46px); letter-spacing:-0.01em; }
.section-num{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--accent); }

/* ---- services ---- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card{ padding:40px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .25s ease; }
.service-card:hover{ background:var(--bg-alt); }
.service-num{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--accent); }
.service-card h3{ font-family:'Fraunces', serif; font-weight:500; font-size:24px; margin:20px 0 12px; }
.service-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6; }

/* ---- about + stats ---- */
.about-wrap{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start; }
.about-lead{ font-family:'Fraunces', serif; font-weight:400; font-style:italic; font-size:clamp(22px,2.4vw,30px); line-height:1.45; color:var(--ink); margin-bottom:32px; }
.about-body{ color:var(--ink-dim); font-size:15px; line-height:1.7; max-width:520px; }
.stats-row{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; }
.stat{ background:var(--bg); padding:28px; }
.stat strong{ display:block; font-family:'Fraunces', serif; font-size:40px; color:var(--accent); font-weight:500; }
.stat span{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.04em; }
.capabilities{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.cap-row{ display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); font-family:'JetBrains Mono', monospace; font-size:13px; }
.cap-row span:first-child{ color:var(--ink); }
.cap-row span:last-child{ color:var(--ink-dim); }

/* ---- skills / education timeline ---- */
.timeline-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.timeline-item{ display:flex; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); }
.timeline-item:first-child{ border-top:1px solid var(--line); }
.timeline-year{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--accent); white-space:nowrap; padding-top:4px; min-width:90px; }
.timeline-item h4{ font-family:'Fraunces', serif; font-weight:500; font-size:19px; margin-bottom:6px; }
.timeline-item p{ color:var(--ink-dim); font-size:14px; line-height:1.6; }
.skills-list{ display:flex; flex-direction:column; gap:22px; }
.skill-row{ display:flex; flex-direction:column; gap:8px; }
.skill-label{ display:flex; justify-content:space-between; font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--ink-dim); }
.skill-track{ height:2px; background:var(--line); position:relative; }
.skill-fill{ position:absolute; left:0; top:0; height:100%; background:var(--accent); }

/* ---- work grid ---- */
.work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.work-card{ background:var(--bg); padding:40px; position:relative; overflow:hidden; min-height:360px; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; color:inherit; cursor:pointer; }
.work-card .thumb{ position:absolute; inset:0; opacity:0.9; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.work-card:hover .thumb{ transform:scale(1.04); }
.work-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(12,12,14,0.92) 10%, rgba(12,12,14,0.15) 60%); }
.work-card .body{ position:relative; z-index:2; }
.work-tag{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; display:block; }
.work-card h3{ font-family:'Fraunces', serif; font-weight:500; font-size:26px; margin-bottom:8px; }
.work-card p{ color:var(--ink-dim); font-size:14px; max-width:340px; }
.work-arrow{ position:absolute; top:32px; right:32px; z-index:2; width:36px; height:36px; border:1px solid rgba(242,240,234,0.25); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, transform .3s ease; color:var(--ink); }
.work-card:hover .work-arrow{ border-color:var(--accent); transform:rotate(45deg); }

/* ---- testimonials ---- */
.testi-scroll{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.testi-scroll::-webkit-scrollbar{ display:none; }
.testi-card{ background:var(--bg); padding:36px; min-width:340px; flex:1; }
.testi-quote{ font-family:'Fraunces', serif; font-style:italic; font-size:18px; line-height:1.55; color:var(--ink); }
.testi-who{ display:flex; align-items:center; gap:12px; margin-top:24px; }
.testi-avatar{ width:40px; height:40px; border-radius:50%; background:var(--surface); border:1px solid var(--line); flex-shrink:0; overflow:hidden; }
.testi-who strong{ display:block; font-size:14px; font-weight:500; }
.testi-who span{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--ink-dim); }

/* ---- blog ---- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.blog-card{ text-decoration:none; color:inherit; }
.blog-thumb{ aspect-ratio:16/10; background:var(--bg-alt); border:1px solid var(--line); margin-bottom:18px; position:relative; overflow:hidden; }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-date{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; }
.blog-card h3{ font-family:'Fraunces', serif; font-weight:500; font-size:20px; margin-top:10px; line-height:1.3; }

/* ---- generic content pages (fallback template) ---- */
.page-content{ padding-top:160px; padding-bottom:120px; min-height:60vh; }
.page-content h1{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(32px,5vw,56px); margin-bottom:24px; }
.page-content .entry-content{ color:var(--ink-dim); font-size:16px; line-height:1.8; max-width:720px; }
.page-content .entry-content a{ color:var(--accent); }
.post-list{ display:flex; flex-direction:column; gap:40px; max-width:720px; }
.post-list article{ border-bottom:1px solid var(--line); padding-bottom:40px; }
.post-list h2{ font-family:'Fraunces', serif; font-weight:500; font-size:26px; margin-bottom:10px; }
.post-list h2 a{ color:var(--ink); text-decoration:none; }
.post-list .post-meta{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px; display:block; }
.post-list .post-excerpt{ color:var(--ink-dim); font-size:15px; line-height:1.7; }

/* ---- footer / contact ---- */
footer.site-footer{ margin-top:160px; padding:100px 32px 40px; border-top:1px solid var(--line); }
.footer-inner{ max-width:1200px; margin:0 auto; }
.footer-cta h2{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(32px,5.5vw,64px); letter-spacing:-0.02em; margin-bottom:32px; max-width:760px; }
.footer-cta a.email{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); font-family:'JetBrains Mono', monospace; font-size:15px; border-bottom:1px solid var(--accent); padding-bottom:6px; transition:gap .2s ease, color .2s ease; }
.footer-cta a.email:hover{ gap:20px; color:var(--accent); }
.footer-details{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:80px; padding-top:40px; border-top:1px solid var(--line); }
.footer-details h4{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px; }
.footer-details p, .footer-details a{ color:var(--ink-dim); font-size:14px; text-decoration:none; display:block; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:60px; padding-top:24px; border-top:1px solid var(--line); color:var(--ink-dim); font-family:'JetBrains Mono', monospace; font-size:12px; flex-wrap:wrap; gap:16px; }
.footer-bottom .socials{ display:flex; gap:24px; list-style:none; }
.footer-bottom a{ color:var(--ink-dim); text-decoration:none; transition:color .2s ease; }
.footer-bottom a:hover{ color:var(--ink); }

@media (max-width: 900px){
  .hero{ flex-direction:column; text-align:left; padding-top:140px; }
  .services-grid{ grid-template-columns:1fr; }
  .about-wrap, .timeline-wrap{ grid-template-columns:1fr; gap:40px; }
  .stats-row{ grid-template-columns:1fr 1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .footer-details{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
}