/* political.day - Retro Broadsheet Newspaper Design */
/* Colors: #7a8c5a #c4857a #8b6914 #f5edd6 #d4a96a #2b1810 #c9a227 #9ba8b0 */
/* Fonts: Playfair Display, Crimson Text, Courier Prime */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
--parchment:#f5edd6;
--sepia:#d4a96a;
--brown:#8b6914;
--ink:#2b1810;
--rose:#c4857a;
--olive:#7a8c5a;
--gray:#9ba8b0;
--gold:#c9a227;
}

html,body{
height:100%;
overflow:hidden;
background:var(--parchment);
color:var(--ink);
font-family:'Crimson Text',Georgia,serif;
font-size:18px;
line-height:1.6;
}

/* LEATHER TEXTURE NAV */
#masthead-nav{
position:fixed;
top:0;
left:0;
right:0;
z-index:100;
background:var(--ink);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
padding:10px 0;
border-bottom:3px double var(--gold);
}

.nav-inner{
max-width:1200px;
margin:0 auto;
text-align:center;
padding:0 20px;
}

.nav-brand{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
}

.nav-title{
font-family:'Playfair Display',serif;
font-weight:900;
font-size:20px;
letter-spacing:6px;
color:var(--parchment);
}

.nav-subtitle{
font-family:'Courier Prime',monospace;
font-size:10px;
letter-spacing:4px;
text-transform:uppercase;
color:var(--sepia);
margin-top:2px;
}

.nav-date{
font-family:'Courier Prime',monospace;
font-size:10px;
color:var(--gray);
margin-top:2px;
}

.nav-columns{
display:flex;
justify-content:center;
gap:6px;
margin-top:6px;
}

.nav-col-btn{
background:transparent;
border:1px solid var(--sepia);
color:var(--sepia);
font-family:'Playfair Display',serif;
font-size:12px;
padding:2px 10px;
cursor:pointer;
transition:all 0.3s ease;
}

.nav-col-btn:hover,.nav-col-btn.active{
background:var(--gold);
color:var(--ink);
border-color:var(--gold);
}

/* SCROLL INDICATOR */
.scroll-indicator{
position:fixed;
bottom:0;
left:0;
right:0;
height:3px;
background:rgba(43,24,16,0.2);
z-index:100;
}

.scroll-indicator-fill{
height:100%;
width:0%;
background:linear-gradient(90deg,var(--gold),var(--sepia));
transition:width 0.1s linear;
}

/* SCROLL HINT */
.scroll-hint{
position:fixed;
bottom:20px;
right:30px;
z-index:99;
display:flex;
align-items:center;
gap:8px;
color:var(--brown);
font-family:'Courier Prime',monospace;
font-size:12px;
letter-spacing:2px;
opacity:1;
transition:opacity 0.5s ease;
animation:hintPulse 2s ease-in-out infinite;
}

.scroll-hint.hidden{opacity:0;pointer-events:none}

.scroll-hint-arrow{font-size:18px;animation:arrowSlide 1.5s ease-in-out infinite}

@keyframes hintPulse{0%,100%{opacity:0.6}50%{opacity:1}}
@keyframes arrowSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

/* HORIZONTAL SCROLL CONTAINER */
.horizontal-scroll{
display:flex;
height:100vh;
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
}

.horizontal-scroll::-webkit-scrollbar{display:none}
.horizontal-scroll{-ms-overflow-style:none;scrollbar-width:none}

/* EDITORIAL COLUMNS */
.editorial-column{
flex:0 0 100vw;
width:100vw;
height:100vh;
scroll-snap-align:start;
overflow-y:auto;
padding-top:85px;
position:relative;
}

.editorial-column::-webkit-scrollbar{width:6px}
.editorial-column::-webkit-scrollbar-track{background:var(--parchment)}
.editorial-column::-webkit-scrollbar-thumb{background:var(--sepia);border-radius:3px}

.column-inner{
max-width:800px;
margin:0 auto;
padding:40px 30px 60px;
}

/* SECTION HEADERS */
.section-header{
text-align:center;
margin-bottom:40px;
}

.section-number{
font-family:'Playfair Display',serif;
font-size:14px;
font-style:italic;
color:var(--brown);
letter-spacing:3px;
margin-bottom:8px;
}

.section-title{
font-family:'Playfair Display',serif;
font-weight:900;
font-size:36px;
color:var(--ink);
letter-spacing:2px;
margin-bottom:12px;
}

.section-rule{
width:100%;
height:2px;
background:linear-gradient(90deg,transparent,var(--ink),transparent);
margin-top:12px;
}

/* HERO / FRONT PAGE */
.column-hero{
background:var(--parchment);
background-image:
  radial-gradient(ellipse at 20% 50%,rgba(201,162,39,0.05) 0%,transparent 50%),
  radial-gradient(ellipse at 80% 30%,rgba(139,105,20,0.05) 0%,transparent 50%);
}

.masthead{
text-align:center;
padding:20px 0 30px;
}

.masthead-rule{
width:100%;
height:3px;
background:var(--ink);
margin:15px 0;
position:relative;
}

.masthead-rule::after{
content:'';
position:absolute;
top:5px;
left:0;
right:0;
height:1px;
background:var(--ink);
}

.masthead-title{
font-family:'Playfair Display',serif;
font-weight:900;
font-size:64px;
letter-spacing:8px;
color:var(--ink);
line-height:1.1;
}

.masthead-tagline{
font-family:'Courier Prime',monospace;
font-size:14px;
letter-spacing:4px;
color:var(--brown);
margin-top:10px;
min-height:22px;
}

.masthead-meta{
font-family:'Courier Prime',monospace;
font-size:11px;
letter-spacing:2px;
color:var(--gray);
margin-top:10px;
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.hero-content{margin-top:30px}

.hero-headline{
text-align:center;
margin-bottom:30px;
}

.hero-headline h2{
font-family:'Playfair Display',serif;
font-weight:700;
font-size:32px;
font-style:italic;
color:var(--ink);
}

.hero-columns{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

.hero-col{
border-top:1px solid var(--ink);
padding-top:15px;
}

.hero-col p{
font-family:'Crimson Text',serif;
font-size:16px;
line-height:1.7;
color:var(--ink);
text-align:justify;
}

.skyline-container{
position:absolute;
bottom:0;
left:0;
right:0;
height:150px;
overflow:hidden;
pointer-events:none;
}

.city-skyline{
width:100%;
height:100%;
}

/* ANALYSIS SECTION */
.column-analysis{
background:var(--parchment);
border-left:1px solid var(--sepia);
}

.newspaper-grid{
display:grid;
gap:25px;
}

.news-article{
border-bottom:1px solid rgba(43,24,16,0.2);
padding-bottom:20px;
}

.article-headline{
font-family:'Playfair Display',serif;
font-weight:700;
font-size:24px;
color:var(--ink);
margin-bottom:8px;
line-height:1.3;
}

.article-lead .article-headline{font-size:28px}

.article-byline{
font-family:'Courier Prime',monospace;
font-size:12px;
color:var(--gray);
letter-spacing:1px;
margin-bottom:12px;
text-transform:uppercase;
}

.article-text{
font-family:'Crimson Text',serif;
font-size:16px;
line-height:1.7;
color:var(--ink);
margin-bottom:10px;
text-align:justify;
}

/* OPINION SECTION */
.column-opinion{
background:var(--parchment);
border-left:1px solid var(--sepia);
}

.editorial-quote{
text-align:center;
padding:30px 20px;
margin-bottom:30px;
border-top:2px solid var(--gold);
border-bottom:2px solid var(--gold);
}

.editorial-quote p{
font-family:'Playfair Display',serif;
font-size:22px;
font-style:italic;
color:var(--ink);
line-height:1.5;
}

.editorial-quote cite{
font-family:'Courier Prime',monospace;
font-size:12px;
color:var(--brown);
letter-spacing:2px;
display:block;
margin-top:12px;
font-style:normal;
}

.opinion-columns{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:20px;
}

.column-divider{
width:1px;
background:var(--ink);
min-height:100%;
}

.opinion-title{
font-family:'Playfair Display',serif;
font-weight:700;
font-size:20px;
color:var(--ink);
margin-bottom:12px;
}

.opinion-piece p{
font-family:'Crimson Text',serif;
font-size:15px;
line-height:1.7;
color:var(--ink);
margin-bottom:10px;
text-align:justify;
}

/* POLICY SECTION */
.column-policy{
background:var(--parchment);
border-left:1px solid var(--sepia);
}

.policy-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

.policy-card{
padding:25px;
border:1px solid rgba(43,24,16,0.15);
background:rgba(245,237,214,0.5);
transition:transform 0.3s ease,box-shadow 0.3s ease;
}

.policy-card:hover{
transform:translateY(-3px);
box-shadow:0 6px 20px rgba(43,24,16,0.1);
}

.policy-icon{
margin-bottom:15px;
}

.policy-title{
font-family:'Playfair Display',serif;
font-weight:700;
font-size:18px;
color:var(--ink);
margin-bottom:10px;
}

.policy-desc{
font-family:'Crimson Text',serif;
font-size:15px;
line-height:1.6;
color:var(--ink);
opacity:0.85;
}

/* HISTORY SECTION */
.column-history{
background:var(--parchment);
border-left:1px solid var(--sepia);
}

.history-timeline{
position:relative;
padding-left:40px;
}

.history-timeline::before{
content:'';
position:absolute;
left:12px;
top:0;
bottom:0;
width:2px;
background:var(--gold);
}

.timeline-item{
position:relative;
margin-bottom:40px;
}

.timeline-marker{
position:absolute;
left:-34px;
top:5px;
width:12px;
height:12px;
border-radius:50%;
background:var(--gold);
border:2px solid var(--ink);
}

.timeline-title{
font-family:'Playfair Display',serif;
font-weight:700;
font-size:22px;
color:var(--ink);
margin-bottom:10px;
}

.timeline-content p{
font-family:'Crimson Text',serif;
font-size:16px;
line-height:1.7;
color:var(--ink);
text-align:justify;
}

/* FORUM SECTION */
.column-forum{
background:var(--parchment);
border-left:1px solid var(--sepia);
}

.forum-lead{
font-family:'Playfair Display',serif;
font-size:20px;
font-style:italic;
color:var(--ink);
text-align:center;
margin-bottom:35px;
line-height:1.5;
}

.forum-topics{
display:grid;
gap:25px;
}

.forum-topic{
padding:25px;
border-left:3px solid var(--gold);
background:rgba(201,162,39,0.04);
}

.topic-label{
font-family:'Courier Prime',monospace;
font-size:11px;
letter-spacing:3px;
color:var(--brown);
margin-bottom:8px;
}

.topic-title{
font-family:'Playfair Display',serif;
font-weight:700;
font-size:20px;
color:var(--ink);
margin-bottom:10px;
}

.topic-desc{
font-family:'Crimson Text',serif;
font-size:15px;
line-height:1.7;
color:var(--ink);
opacity:0.85;
}

/* SUBSCRIBE SECTION */
.column-subscribe{
background:var(--parchment);
border-left:1px solid var(--sepia);
}

.subscribe-lead{
font-family:'Playfair Display',serif;
font-size:20px;
font-style:italic;
color:var(--ink);
text-align:center;
margin-bottom:15px;
line-height:1.5;
}

.subscribe-message p:not(.subscribe-lead){
font-family:'Crimson Text',serif;
font-size:16px;
line-height:1.7;
color:var(--ink);
text-align:center;
margin-bottom:30px;
}

.subscribe-form-wrapper{
display:flex;
justify-content:center;
margin-bottom:40px;
}

.subscribe-box{
text-align:center;
padding:35px;
border:2px solid var(--ink);
max-width:450px;
width:100%;
background:rgba(245,237,214,0.7);
}

.subscribe-heading{
font-family:'Playfair Display',serif;
font-weight:700;
font-size:22px;
color:var(--ink);
margin-bottom:10px;
}

.subscribe-desc{
font-family:'Crimson Text',serif;
font-size:15px;
color:var(--ink);
margin-bottom:20px;
}

.subscribe-form{
display:flex;
gap:0;
}

.subscribe-input{
flex:1;
padding:12px 15px;
border:1px solid var(--ink);
border-right:none;
background:var(--parchment);
font-family:'Courier Prime',monospace;
font-size:14px;
color:var(--ink);
outline:none;
}

.subscribe-input::placeholder{color:var(--gray)}

.subscribe-btn{
padding:12px 24px;
background:var(--ink);
color:var(--parchment);
border:1px solid var(--ink);
font-family:'Courier Prime',monospace;
font-size:12px;
letter-spacing:2px;
cursor:pointer;
transition:all 0.3s ease;
}

.subscribe-btn:hover{
background:var(--gold);
color:var(--ink);
border-color:var(--gold);
}

.subscribe-note{
font-family:'Courier Prime',monospace;
font-size:11px;
color:var(--gray);
letter-spacing:1px;
margin-top:15px;
}

.footer-info{margin-top:40px}

.footer-rule{
width:100%;
height:1px;
background:var(--ink);
margin-bottom:15px;
}

.footer-meta{
text-align:center;
font-family:'Courier Prime',monospace;
font-size:11px;
color:var(--gray);
letter-spacing:2px;
display:flex;
justify-content:center;
gap:12px;
}

/* TYPEWRITER CURSOR */
.typewriter-cursor{
display:inline-block;
width:2px;
height:1em;
background:var(--ink);
margin-left:2px;
animation:blink 0.8s step-end infinite;
vertical-align:text-bottom;
}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* SECTION TRANSITIONS */
.editorial-column .column-inner{
opacity:0;
transform:translateY(20px);
transition:opacity 0.8s ease,transform 0.8s ease;
}

.editorial-column.in-view .column-inner{
opacity:1;
transform:translateY(0);
}

/* RESPONSIVE */
@media(max-width:768px){
.masthead-title{font-size:36px;letter-spacing:4px}
.hero-columns{grid-template-columns:1fr}
.opinion-columns{grid-template-columns:1fr}
.column-divider{width:100%;height:1px;min-height:1px}
.policy-grid{grid-template-columns:1fr}
.column-inner{padding:30px 20px 50px}
.section-title{font-size:28px}
.nav-columns{flex-wrap:wrap}
}