/*
Theme Name: Andy Portfolio
Theme URI: https://a-kw.com/
Author: Andy
Author URI: https://a-kw.com/
Description: Custom theme for personal portfolio and writing section
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: andy-portfolio
*/

:root{
  --midnight:#070C18;
  --navy-panel:#101B33;
  --paper:#F4F6F9;
  --panel:#FFFFFF;
  --ink:#0B1220;
  --ink-dim:#5B6472;
  --on-dark:#E8ECF3;
  --on-dark-dim:#93A0B7;
  --gold:#AD7A2C;
  --gold-soft:#D9AE6A;
  --brick:#B23A2E;
  --brick-hover:#963026;
  --green:#3F9B6F;
  --line:rgba(11,18,32,0.12);
  --line-dark:rgba(232,236,243,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ background:var(--paper); color:var(--ink); font-family:'Inter', sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img,svg{display:block; max-width:100%;}
::selection{ background:var(--gold-soft); color:var(--midnight); }
h1,h2,h3{ font-family:'Fraunces', serif; line-height:1.1; letter-spacing:-0.01em; color:var(--ink); font-weight:450; }
h1{ font-size:clamp(2.5rem, 5.2vw, 4.4rem); font-weight:340; }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.9rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); font-weight:560; }
p{ line-height:1.7; }
.mono{ font-family:'IBM Plex Mono', monospace; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:0.6rem; margin-bottom:0.8rem;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold); display:inline-block; }
.on-dark .eyebrow{ color:var(--gold-soft); }
.on-dark .eyebrow::before{ background:var(--gold-soft); }
.wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 6vw; }
@media(min-width:1500px){ .wrap{ padding:0 4vw; } }
section{ position:relative; padding:9vh 0; }
.on-dark{ background:var(--midnight); color:var(--on-dark); }
.on-dark p{ color:var(--on-dark-dim); }
.on-dark h1, .on-dark h2, .on-dark h3{ color:var(--on-dark); }
a{ color:inherit; }
.btn{
  display:inline-flex; align-items:center; gap:0.55rem; font-family:'IBM Plex Mono', monospace; font-size:0.8rem; letter-spacing:0.03em;
  text-decoration:none; padding:0.95rem 1.5rem; min-height:46px; border-radius:3px; white-space:nowrap;
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-primary{ background:var(--brick); color:#fff; border:1px solid var(--brick); box-shadow:0 14px 30px -14px rgba(178,58,46,0.55); }
.btn-primary:hover{ background:var(--brick-hover); border-color:var(--brick-hover); }
.on-dark .btn-primary{ background:var(--brick); color:#fff; border:1px solid var(--brick); }
a:focus-visible, .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.skip-link{ position:absolute; left:-999px; top:0; z-index:60; background:var(--gold-soft); color:var(--midnight); padding:0.8rem 1.2rem; font-family:'IBM Plex Mono', monospace; font-size:0.8rem; }
.skip-link:focus{ left:1rem; top:1rem; }

/* Navigation */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 6vw; background:transparent; border-bottom:1px solid transparent;
  transition:background 0.4s ease, border-color 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease;
}
.nav.scrolled{
  background:rgba(7,12,24,0.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dark);
  padding:0.9rem 6vw;
}
.nav-id{ display:flex; align-items:center; gap:0.65rem; text-decoration:none; }
.nav-mark{
  width:32px; height:32px; border-radius:7px; background:var(--midnight); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:1rem; font-weight:560;
  border:1px solid var(--line-dark); flex-shrink:0;
}
.nav-name{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--on-dark); }
.nav-name span{ color:var(--on-dark-dim); font-size:0.72rem; display:block; letter-spacing:0.05em; margin-top:0.1rem; }
.nav-links{ display:flex; align-items:center; gap:1.7rem; }
.nav-links a:not(.btn){ font-family:'IBM Plex Mono', monospace; font-size:0.75rem; letter-spacing:0.05em; color:var(--on-dark-dim); text-decoration:none; transition:color 0.2s ease; }
.nav-links a:not(.btn):hover{ color:var(--on-dark); }
.nav-links .btn-primary{ padding:0.7rem 1.2rem; min-height:auto; }
@media(max-width:820px){ .nav-links a:not(.btn){ display:none; } .nav{ padding:1.1rem 5vw; } }

.scroll-progress{
  position:fixed; right:1.2rem; top:14vh; bottom:14vh; width:1px; background:var(--line-dark); z-index:35;
}
.scroll-progress .fill{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--gold-soft); transition:height 0.1s linear; }
@media(max-width:760px){ .scroll-progress{ display:none; } }

/* Page Header */
#page-header{ padding-top:11vh; padding-bottom:4vh; }
.header-sub{ margin-top:1.2rem; font-size:1.05rem; color:var(--on-dark-dim); max-width:560px; }

/* Article Grid */
#article-list{ padding-top:6vh; }
.grid{ display:grid; grid-template-columns:1fr; gap:2px; background:var(--line); border:1px solid var(--line); }
@media(min-width:760px){ .grid{ grid-template-columns:repeat(2,1fr); } }

.card{
  background:var(--panel); text-decoration:none; display:flex; flex-direction:column;
  transition:background 0.25s ease;
}
.card:hover{ background:#FBFAF7; }
.card:hover .card-title{ color:var(--gold); }
.card-media{
  aspect-ratio:16/9; background:linear-gradient(135deg, var(--navy-panel), var(--midnight));
  position:relative; overflow:hidden;
}
.card-media::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, transparent, transparent 21px, rgba(232,236,243,0.05) 22px),
                    repeating-linear-gradient(90deg, transparent, transparent 21px, rgba(232,236,243,0.04) 22px);
}
.card-media .initial{
  position:absolute; bottom:1rem; right:1.2rem; font-family:'Fraunces', serif; font-size:2.6rem; color:var(--gold-soft); opacity:0.35;
}
.card-body{ padding:1.7rem 1.6rem 1.9rem; display:flex; flex-direction:column; flex:1; }
.card-meta{ display:flex; align-items:center; gap:0.7rem; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.04em; color:var(--ink-dim); text-transform:uppercase; }
.card-tag{ color:var(--gold); }
.card-title{ margin-top:0.7rem; font-size:1.28rem; transition:color 0.2s ease; }
.card-excerpt{ margin-top:0.7rem; font-size:0.92rem; color:var(--ink-dim); line-height:1.65; flex:1; }
.card-readmore{ margin-top:1.2rem; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.04em; color:var(--ink); }
.card-readmore span{ color:var(--gold); }

.empty-state{ text-align:center; padding:5rem 1rem; font-family:'IBM Plex Mono', monospace; font-size:0.85rem; color:var(--ink-dim); }

/* Footer */
footer.on-dark{ padding:2.2rem 0 2.6rem; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--on-dark-dim); letter-spacing:0.04em; border-top:1px solid var(--line-dark); margin-top:6vh; }
footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.6rem; }

.reveal{ opacity:0; transform:translateY(18px); }
@media(prefers-reduced-motion:reduce){ .card{ transition:none; } }

/* --- Custom Additions --- */
.latest-article {
  margin-bottom: 6vh;
}
.latest-article .card-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 1.2rem;
}
.full-content {
  margin-top: 1.2rem;
  line-height: 1.8;
  color: var(--ink);
}
.full-content p {
  margin-bottom: 1rem;
}
.full-content a {
  color: var(--gold);
  text-decoration: underline;
}
.article-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
}
.article-nav a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
.article-nav a:hover {
  color: var(--gold);
}
.prev-heading {
  margin-bottom: 1.5rem;
}
.grid-3col {
  grid-template-columns: repeat(3, 1fr);
}
@media(max-width:900px){
  .grid-3col { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:600px){
  .grid-3col { grid-template-columns: 1fr; }
}
.single-article {
  max-width: 820px;
  margin: 0 auto;
}
.article-featured-image {
  margin: 2rem 0 2.5rem;
  border-radius: 3px;
  overflow: hidden;
  background: var(--navy-panel);
}
#article-content {
  padding-top: 6vh;
  padding-bottom: 8vh;
}
.single-article .full-content {
  font-size: 1.05rem;
  line-height: 1.85;
}
.single-article .full-content h2,
.single-article .full-content h3 {
  margin: 2rem 0 0.8rem;
}
.single-article .full-content ul,
.single-article .full-content ol {
  margin: 1rem 0 1rem 1.8rem;
}
.single-article .full-content blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 1.2rem;
  color: var(--ink-dim);
  font-style: italic;
  margin: 1.5rem 0;
}