/* archive.css - Shared styles for blog & graphics archive subpages
   Extends the main stylesheet.css design system for content pages. */

/* --- ARCHIVE PAGE LAYOUT --- */
.archive-hero {padding-top:6.5rem; padding-bottom:2rem;}
.archive-hero h1 {font-family:var(--serif); font-weight:700; font-size:clamp(2rem,5vw,2.8rem); line-height:1.1; letter-spacing:-.5px; background:linear-gradient(135deg,#f5f0e8 0%,#e8a445 40%,#c8542a 70%,#f5f0e8 100%); background-size:300% 300%; animation:gradientDrift 10s ease-in-out infinite; -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 6px rgba(232,164,69,.12));}
.archive-hero p {color:var(--text-dim); font-size:clamp(.95rem,1.3vw,1.1rem); max-width:680px; margin-top:.5rem;}
.archive-hero .section-num {color:var(--accent-warm); opacity:.6;}

/* --- ARCHIVE CARD GRID --- */
.archive-grid {display:grid; gap:2rem; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); margin-top:2rem;}

/* Full-width section labels that group cards by category */
.archive-group-label {grid-column:1 / -1; margin:1.9rem 0 0; padding-bottom:.55rem; border-bottom:1px solid rgba(232,164,69,.16); font-family:var(--serif); font-weight:700; font-size:1.3rem; color:#fff; letter-spacing:.2px;}
.archive-group-label:first-child {margin-top:.2rem;}
.archive-group-label span {display:block; margin-top:.32rem; font-family:var(--sans); font-size:.74rem; font-weight:400; color:var(--text-dim); letter-spacing:.3px;}

.archive-card {background:linear-gradient(145deg,var(--panel) 0%,var(--panel-accent) 100%); border:1px solid rgba(255,255,255,.04); border-radius:var(--radius-lg); padding:1.65rem 1.75rem; position:relative; box-shadow:var(--shadow-1); overflow:hidden; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .35s ease;}
.archive-card::before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% -10%,rgba(232,164,69,.06),transparent 60%); opacity:.6; pointer-events:none; transition:opacity .4s ease;}
.archive-card:nth-child(odd)::before {background:radial-gradient(circle at 15% 90%,rgba(200,84,42,.08),transparent 55%);}
.archive-card:hover {transform:translateY(-5px) scale(1.008); border-color:rgba(232,164,69,.2); box-shadow:0 16px 40px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(232,164,69,.15), 0 0 28px -6px rgba(232,164,69,.08);}
.archive-card:hover::before {opacity:.85;}
.archive-card h3 {margin:0 0 .45rem; font-size:1.05rem; font-weight:600; letter-spacing:.2px; color:#fff;}
.archive-card p {margin:0 0 .75rem; font-size:.82rem; color:var(--text-dim); line-height:1.55;}
.archive-card a {color:var(--brand-accent); font-size:.8rem; font-weight:500; transition:color .2s ease;}
.archive-card a:hover {color:#fff;}

/* Tech pill row inside archive cards */
.archive-tech {display:flex; flex-wrap:wrap; gap:.4rem; margin:.65rem 0 .85rem; padding-top:.65rem; border-top:1px solid rgba(255,255,255,.04);}
.archive-tech span {background:rgba(232,164,69,.08); color:var(--accent-warm); border:1px solid rgba(232,164,69,.1); font-size:.55rem; letter-spacing:.6px; padding:.4rem .6rem; border-radius:var(--radius-pill); font-weight:500; transition:background .2s ease, transform .2s ease;}
.archive-tech span:hover {background:rgba(232,164,69,.12); transform:scale(.96);}

/* Image gallery inside archive cards */
.archive-images {display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); margin-top:.85rem; border-radius:var(--radius-md); overflow:hidden;}
.archive-images img {width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.04); filter:brightness(.8) saturate(.9); transition:filter .4s ease, transform .4s cubic-bezier(.16,1,.3,1);}
.archive-images img:hover {filter:brightness(1) saturate(1.1); transform:scale(1.04);}

/* --- ARTICLE LAYOUT (blog posts) --- */
.article-wrapper {max-width:780px; margin:0 auto; padding:0 4vw;}
.article-header {padding-top:6.5rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:2rem;}
.article-header h1 {font-family:var(--serif); font-weight:700; font-size:clamp(1.8rem,4.5vw,2.4rem); line-height:1.15; letter-spacing:-.3px; color:#fff; margin:0 0 .65rem; text-shadow:0 2px 10px rgba(0,0,0,.3);}
.article-header .article-subtitle {font-size:clamp(.9rem,1.2vw,1.05rem); color:var(--text-dim); margin:0 0 .85rem; line-height:1.55;}
.article-meta {display:flex; flex-wrap:wrap; gap:1rem; font-size:.72rem; color:var(--text-dim); letter-spacing:.5px;}
.article-meta span {display:flex; align-items:center; gap:.35rem;}
.article-meta strong {color:var(--accent-warm); font-weight:600;}
.article-tags {display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem;}
.article-tags span {background:rgba(232,164,69,.08); color:var(--accent-warm); border:1px solid rgba(232,164,69,.1); font-size:.55rem; letter-spacing:.6px; padding:.35rem .55rem; border-radius:var(--radius-pill); font-weight:500;}

/* Article body typography */
.article-body {padding-bottom:4rem;}
.article-body h3 {font-size:1.15rem; font-weight:600; color:#fff; margin:2rem 0 .75rem; letter-spacing:.15px; text-shadow:0 1px 6px rgba(0,0,0,.2);}
.article-body h4 {font-size:.95rem; font-weight:600; color:var(--text-dim); margin:1.5rem 0 .6rem;}
.article-body p {font-size:.88rem; color:var(--text-dim); line-height:1.75; margin:0 0 1rem;}
.article-body a {color:var(--brand-accent); text-decoration:underline; text-underline-offset:3px;}
.article-body a:hover {color:#fff;}
.article-body img {max-width:100%; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.05); margin:1rem 0; transition:transform .4s ease, box-shadow .4s ease;}
.article-body img:hover {transform:scale(1.01); box-shadow:0 8px 24px -6px rgba(0,0,0,.4);}
.article-body ul, .article-body ol {margin:0 0 1rem; padding-left:1.5rem;}
.article-body li {font-size:.85rem; color:var(--text-dim); line-height:1.65; margin-bottom:.35rem;}
.article-body li a {color:var(--brand-accent);}

/* Code blocks - dark theme overrides for Prism */
.article-body pre[class*="language-"],
.article-body code[class*="language-"] {
  color:var(--text); background:var(--bg-alt); text-shadow:none;
  font-family:var(--mono); font-size:.78rem; line-height:1.55;
  border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.05);
}
.article-body pre[class*="language-"] {padding:1.2rem 1.4rem; margin:1rem 0 1.25rem; overflow-x:auto;}
.article-body code {background:var(--panel); padding:.2rem .45rem; border-radius:var(--radius-sm); font-size:.8rem; color:var(--accent-warm);}
.article-body pre code {background:transparent; padding:0; border-radius:0; color:var(--text);}

/* Prism syntax token palette - remapped to site brand (warm amber) */
.article-body .token.comment,
.article-body .token.prolog,
.article-body .token.doctype,
.article-body .token.cdata {color:var(--text-dim); font-style:italic;}
.article-body .token.punctuation {color:var(--text-dim);}
.article-body .token.namespace {opacity:.7;}
.article-body .token.property,
.article-body .token.tag,
.article-body .token.boolean,
.article-body .token.number,
.article-body .token.constant,
.article-body .token.symbol,
.article-body .token.deleted {color:var(--accent-glow);}
.article-body .token.selector,
.article-body .token.attr-name,
.article-body .token.string,
.article-body .token.char,
.article-body .token.builtin,
.article-body .token.inserted {color:var(--accent-warm);}
.article-body .token.operator,
.article-body .token.entity,
.article-body .token.url,
.article-body .language-css .token.string,
.article-body .style .token.string {color:#c9bda6;}
.article-body .token.atrule,
.article-body .token.attr-value,
.article-body .token.keyword {color:var(--brand-accent);}
.article-body .token.function,
.article-body .token.class-name {color:var(--accent-cream);}
.article-body .token.regex,
.article-body .token.important,
.article-body .token.variable {color:var(--accent-glow);}
.article-body .token.important,
.article-body .token.bold {font-weight:600;}
.article-body .token.italic {font-style:italic;}
.article-body .token.entity {cursor:help;}

/* Prism::selection override (defeat light-blue from prism.css) */
.article-body pre[class*="language-"]::selection,
.article-body pre[class*="language-"] ::selection,
.article-body code[class*="language-"]::selection,
.article-body code[class*="language-"] ::selection {background:rgba(232,164,69,.4); text-shadow:none;}

/* Prism line-numbers plugin (used by /blog/posts/1) */
.article-body .line-numbers .line-numbers-rows {border-right:1px solid rgba(255,255,255,.08);}
.article-body .line-numbers-rows > span:before {color:var(--text-dim); opacity:.6;}

/* Back link */
.back-link {display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-dim); margin-bottom:1.5rem; transition:color .2s ease, transform .2s ease;}
.back-link:hover {color:var(--accent-warm); transform:translateX(-3px);}
.back-link::before {content:"←"; font-size:.9rem;}

@media (max-width:640px){
  .archive-grid {grid-template-columns:1fr;}
  .archive-images {grid-template-columns:repeat(2,1fr);}
  .article-wrapper {padding:0 5vw;}
}

/* --- ARTICLE EXTRAS - technical write-ups (figures, callouts, stats, tables) --- */
.article-body .lede {font-size:1.04rem; line-height:1.7; color:var(--text); border-left:2px solid var(--brand-accent); padding-left:1.1rem; margin:0 0 1.7rem;}

.article-figure {margin:1.9rem 0; text-align:center;}
.article-figure svg {max-width:100%; height:auto; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.06); background:linear-gradient(160deg,#100c08,#0b0907); box-shadow:var(--shadow-1);}
.article-figure figcaption {margin-top:.75rem; font-size:.74rem; color:var(--text-dim); letter-spacing:.2px; font-style:italic; max-width:90%; margin-left:auto; margin-right:auto;}

.callout {margin:1.6rem 0; padding:1rem 1.25rem; border-radius:var(--radius-md); background:rgba(232,164,69,.05); border:1px solid rgba(232,164,69,.14); border-left:3px solid var(--brand-accent);}
.callout p {margin:0; font-size:.86rem; color:var(--text); line-height:1.65;}
.callout strong {color:var(--accent-warm);}
.callout.key {background:rgba(200,84,42,.07); border-left-color:var(--accent-warm);}

.stat-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin:1.7rem 0;}
.stat {background:linear-gradient(145deg,var(--panel),var(--panel-accent)); border:1px solid rgba(255,255,255,.05); border-radius:var(--radius-md); padding:1.1rem 1rem; text-align:center;}
.stat b {display:block; font-family:var(--serif); font-size:1.7rem; font-weight:700; color:var(--accent-warm); line-height:1.05;}
.stat span {display:block; margin-top:.45rem; font-size:.66rem; color:var(--text-dim); letter-spacing:.5px; text-transform:uppercase;}

.article-body table {width:100%; border-collapse:collapse; margin:1.3rem 0 1.6rem; font-size:.8rem;}
.article-body th, .article-body td {text-align:left; padding:.6rem .7rem; border-bottom:1px solid rgba(255,255,255,.07); vertical-align:top;}
.article-body th {color:var(--accent-warm); font-weight:600; font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; border-bottom-color:rgba(232,164,69,.22);}
.article-body td {color:var(--text-dim);}
.article-body td code {font-size:.74rem;}
.article-body tbody tr:last-child td {border-bottom:none;}

/* --- DEEP-LINK LANDING (arriving from a credit detail modal's "Full entry" link) --- */
.archive-card {scroll-margin-top:90px;}
.archive-card:target {animation:archiveTargetGlow 2.4s ease;}
.archive-card:target::after {content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(232,164,69,.5); pointer-events:none; animation:archiveTargetFade 2.4s ease forwards;}
@keyframes archiveTargetGlow {
  0%   {box-shadow:0 0 0 1px rgba(232,164,69,.7), 0 0 46px -6px rgba(232,164,69,.5);}
  100% {box-shadow:var(--shadow-1);}
}
@keyframes archiveTargetFade {from{opacity:1;} to{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .archive-card:target {animation:none;}
  .archive-card:target::after {animation:none; opacity:0;}
}