/* ***{/I am sorry made a mistake brother here is where we need to resume |^X3Z^|`/$\}*** */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0a0a0a;
--bg-elevated:#111111;
--bg-surface:#161616;
--gold:#c9a84c;
--gold-dim:rgba(201,168,76,0.35);
--gold-faint:rgba(201,168,76,0.12);
--gold-ghost:rgba(201,168,76,0.06);
--text-primary:rgba(235,230,220,0.92);
--text-secondary:rgba(200,195,185,0.65);
--text-tertiary:rgba(180,175,165,0.4);
--border:rgba(201,168,76,0.1);
--border-hover:rgba(201,168,76,0.25);
--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--display:'Playfair Display',Georgia,serif;
--mono:'JetBrains Mono','Courier New',monospace;
}

[data-theme="light"] {
--bg: #faf8f5;
--bg-elevated: #f0ece5;
--bg-surface: #e8e4de;
--gold: #a08232;
--gold-dim: rgba(160,130,50,0.35);
--gold-faint: rgba(160,130,50,0.12);
--gold-ghost: rgba(160,130,50,0.06);
--text-primary: #1a1a1f;
--text-secondary: #5a5a62;
--text-tertiary: #8a8a92;
--border: rgba(160,130,50,0.15);
--border-hover: rgba(160,130,50,0.3);
}
html{scroll-behavior:smooth;font-size:16px}
body{
background:var(--bg);
color:var(--text-primary);
font-family:var(--serif);
font-weight:400;
line-height:1.85;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
::selection{background:var(--gold-dim);color:#fff}

/* — SCANLINE OVERLAY — */
body::before{
content:'';
position:fixed;
top:0;left:0;right:0;bottom:0;
pointer-events:none;
z-index:9999;
background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.015) 3px,rgba(0,0,0,0.015) 6px);
}

/* — PROGRESS BAR — */
#progress{
position:fixed;
top:0;left:0;
height:2px;
width:0%;
background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-dim));
z-index:10000;
transition:width 0.1s linear;
}

/* ── Site-wide Navigation Header ── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 1000;
  background: rgba(10,10,12,0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  transition: background-color 0.5s cubic-bezier(0.16,1,0.3,1);
}

.site-nav-logo { display: flex; align-items: center; text-decoration: none; }
.site-nav-logo-img { height: 55px; width: auto; filter: brightness(1.6) saturate(1.6); transition: opacity 0.2s; }
.site-nav-logo:hover .site-nav-logo-img { opacity: 0.7; }
.site-nav-menu { display: flex; gap: 2rem; list-style: none; margin: 0; }
.site-nav-menu a {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #d2d2d7; text-decoration: none; transition: color 0.35s, opacity 0.2s; position: relative;
}
.site-nav-menu a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background-color: #fff; transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.site-nav-menu a:hover { color: #fff; opacity: 1; }
.site-nav-menu a:hover::after { width: 100%; }
.site-nav-toggle { display: none; flex-direction: column; gap: 6px; width: 24px; height: 20px; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; }
.site-nav-toggle span { display: block; width: 100%; height: 1px; background-color: #fff; transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94); }
.site-nav-toggle.active span:first-child { transform: rotate(45deg) translate(5px, 5px); }
.site-nav-toggle.active span:last-child { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 1024px) {
  .site-nav { padding: 0 24px; }
  .site-nav-menu {
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    background-color: rgba(10,10,12,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), visibility 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .site-nav-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav-menu a { font-size: 0.85rem; }
  .site-nav-menu a::after { display: none; }
  .site-nav-toggle { display: flex; }
}

/* — HERO — */
.hero{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:140px max(40px,calc((100vw - 720px)/2)) 64px;
position:relative;
overflow:hidden;
}
.hero::before{
content:'';
position:absolute;
top:0;left:0;right:0;bottom:0;
background:
  radial-gradient(ellipse 60% 40% at 30% 70%, rgba(201,168,76,0.04) 0%, transparent 70%),
  radial-gradient(ellipse 50% 50% at 70% 30%, rgba(201,168,76,0.02) 0%, transparent 60%);
pointer-events:none;
}
.hero-rule{
width:48px;
height:1px;
background:var(--gold);
margin-bottom:32px;
opacity:0;
transform:scaleX(0);
transform-origin:center;
animation:ruleIn 1s 0.3s ease forwards;
}
@keyframes ruleIn{to{opacity:1;transform:scaleX(1)}}
.hero h1{
font-family:var(--display);
font-size:clamp(2.2rem,5vw,3.4rem);
font-weight:400;
line-height:1.2;
color:var(--text-primary);
letter-spacing:-0.5px;
max-width:680px;
opacity:0;
transform:translateY(20px);
animation:fadeUp 0.8s 0.5s ease forwards;
}
.hero h1 em{
font-style:italic;
color:var(--gold);
}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.hero-meta{
margin-top:28px;
font-family:var(--mono);
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--text-tertiary);
display:flex;
gap:20px;
flex-wrap:wrap;
align-items:center;
justify-content:center;
opacity:0;
animation:fadeUp 0.8s 0.8s ease forwards;
}
.hero-meta span{display:flex;align-items:center;gap:8px}
.meta-dot{width:3px;height:3px;border-radius:50%;background:var(--gold-dim);display:inline-block}

/* — ARTICLE — */
article{
padding:0 max(40px,calc((100vw - 680px)/2));
padding-bottom:120px;
}
.section-block{
padding:60px 0 0;
opacity:0;
transform:translateY(30px);
transition:opacity 0.7s ease,transform 0.7s ease;
}
.section-block.visible{opacity:1;transform:translateY(0)}

.section-divider{
width:100%;
height:1px;
background:linear-gradient(90deg,transparent,var(--border-hover),transparent);
margin:64px 0 0;
}

article h2{
font-family:var(--display);
font-size:clamp(1.4rem,3vw,1.75rem);
font-weight:400;
color:var(--text-primary);
letter-spacing:-0.2px;
line-height:1.35;
margin-bottom:28px;
position:relative;
padding-left:20px;
}
article h2::before{
content:'';
position:absolute;
left:0;top:6px;bottom:6px;
width:2px;
background:var(--gold);
border-radius:1px;
}

article p{
font-size:1.15rem;
margin-bottom:1.6em;
color:var(--text-primary);
max-width:100%;
}
article p:last-child{margin-bottom:0}

article em{font-style:italic;color:var(--text-primary)}

/* — OPENING PARAGRAPH DROP CAP — */
.opening-graf{
font-size:1.28rem !important;
line-height:1.85;
}
.opening-graf::first-letter{
font-family:var(--display);
font-size:3.8rem;
float:left;
line-height:0.8;
padding-right:0.12em;
padding-top:0.08em;
color:var(--gold);
font-weight:600;
}

/* — PULL QUOTE — */
.pull-quote{
margin:48px 0;
padding:32px 0 32px 28px;
border-left:2px solid var(--gold);
font-family:var(--display);
font-size:clamp(1.2rem,2.5vw,1.55rem);
font-style:italic;
font-weight:400;
line-height:1.55;
color:var(--gold);
opacity:0.85;
}

/* — CLOSING — */
.closing-line{
font-family:var(--display);
font-size:clamp(1.3rem,2.8vw,1.7rem);
font-weight:400;
font-style:italic;
color:var(--gold);
text-align:center;
padding:80px 0 60px;
opacity:0.85;
line-height:1.5;
}

/* — AUTHOR FOOTER — */
.author-footer{
margin-top:80px;
padding:40px 0;
border-top:1px solid var(--border);
display:flex;
align-items:center;
gap:20px;
}
.author-avatar{
width:52px;height:52px;
border-radius:50%;
border:1.5px solid var(--gold-dim);
background:var(--bg-surface);
display:flex;
align-items:center;
justify-content:center;
font-family:var(--display);
font-size:18px;
color:var(--gold);
font-weight:500;
flex-shrink:0;
}
.author-info p:first-child{
font-family:var(--display);
font-size:0.95rem;
color:var(--text-primary);
margin-bottom:2px;
}
.author-info p:last-child{
font-family:var(--serif);
font-size:0.8rem;
color:var(--text-tertiary);
font-style:italic;
}

/* — SITE FOOTER — */
footer{
text-align:center;
padding:60px 40px 40px;
border-top:1px solid var(--border);
}
footer p{
font-family:var(--mono);
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--text-tertiary);
}

/* — RESPONSIVE — */
@media(max-width:680px){
.hero{padding:0 24px 60px}
article{padding:0 24px;padding-bottom:80px}
article h2{padding-left:16px}
.pull-quote{padding-left:20px;margin:36px 0}
}