@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
    --paper: #F6F1E7;
    --ink: #191714;
    --accent: #E85D2A;
    --linen: #E7DFCE;
    --stone: #8A8378;
    --rule: 1px solid var(--ink);
    --rule-double: 3px double var(--ink);
}

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

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Archivo', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .serif {
    font-family: 'Fraunces', serif;
}

a { color: inherit; text-decoration: none; transition: opacity 0.2s; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Masthead */
.masthead {
    border-bottom: 3px double var(--ink);
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
}

/* Header */
header {
    border-bottom: var(--rule);
    padding: 24px 0;
}
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo-container { display: flex; align-items: center; gap: 12px; }
.logo-svg { width: 36px; height: 36px; }
.logo-text { font-family: 'Fraunces', serif; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.logo-text span { color: var(--accent); }

nav { display: flex; gap: 24px; align-items: center; }
nav a.nav-link { font-family: 'Fraunces', serif; font-size: 1.1rem; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
nav a.nav-link:hover { border-color: var(--ink); }
.btn-nav {
    border: 2px solid var(--ink);
    padding: 8px 20px;
    font-weight: 600;
    border-radius: 0;
    transition: all 0.2s;
    font-size: 0.9rem;
}
.btn-nav:hover { background-color: var(--ink); color: var(--paper); }

/* Hero */
.hero { padding: 80px 0 60px; }
.hero-content { display: grid; grid-template-columns: 1fr; gap: 40px; }
.hero h1 { font-size: 4.5rem; line-height: 1.05; margin-bottom: 10px; font-weight: 700; letter-spacing: -0.02em; }
.hero-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font-size: 1.15rem; color: var(--ink); }
.hero-intro p:first-child::first-letter {
    font-family: 'Fraunces', serif;
    font-size: 5rem;
    float: left;
    line-height: 0.8;
    margin-right: 12px;
    margin-top: 8px;
    color: var(--ink);
}
.hero-links { margin-top: 40px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.link-accent {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
    font-size: 1.1rem;
    font-family: 'Archivo', sans-serif;
}
.link-accent:hover { opacity: 0.7; }
.link-sub { color: var(--stone); border-bottom: 1px solid var(--stone); padding-bottom: 2px; font-size: 1rem; }
.link-sub:hover { color: var(--ink); border-color: var(--ink); }

/* Ticker */
.ticker-container { border-bottom: var(--rule); border-top: var(--rule); background-color: rgba(0,0,0,0.02); }
.ticker { padding: 12px 0; font-size: 0.85rem; display: flex; align-items: center; gap: 15px; }
.ticker-label { font-weight: 600; background: var(--ink); color: var(--paper); padding: 2px 8px; font-family: 'Archivo', sans-serif; }

/* Sections */
section { padding: 80px 0; border-bottom: var(--rule); }
.section-header { display: flex; align-items: baseline; gap: 20px; margin-bottom: 50px; border-bottom: 1px solid var(--linen); padding-bottom: 15px; }
.section-num { font-family: 'Fraunces', serif; color: var(--accent); font-size: 1.5rem; font-weight: 600; }
.section-title { font-size: 2.5rem; font-weight: 600; }

/* Grid Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.card { border: var(--rule); padding: 40px 30px; background: var(--paper); border-radius: 0; }
.card h3 { font-size: 1.6rem; margin-bottom: 20px; font-weight: 600; }
.card-content { color: var(--ink); font-size: 1.05rem; }

/* Pricing */
.pricing-card { border: var(--rule); padding: 50px 40px; position: relative; background: var(--paper); }
.pricing-card.popular { border: 2px solid var(--ink); }
.popular-tag { position: absolute; top: -14px; left: 30px; background: var(--accent); color: var(--paper); padding: 4px 12px; font-size: 0.85rem; font-family: 'Fraunces', serif; font-weight: 600; border: 1px solid var(--ink); }
.price-title { font-size: 1.75rem; margin-bottom: 15px; font-family: 'Fraunces', serif; font-weight: 600; }
.price-amount { font-family: 'Fraunces', serif; font-size: 3.5rem; line-height: 1; margin-bottom: 30px; font-weight: 700; }
.price-amount span { font-size: 1.1rem; color: var(--stone); font-family: 'Archivo', sans-serif; font-weight: 400; }
.price-list { list-style: none; margin: 30px 0 40px; }
.price-list li { margin-bottom: 15px; border-bottom: 1px solid var(--linen); padding-bottom: 10px; font-size: 1.05rem; display: flex; justify-content: space-between; }
.btn-block { display: block; text-align: center; border: 2px solid var(--ink); padding: 14px; font-weight: 600; transition: all 0.2s; background: transparent; color: var(--ink); font-size: 1.1rem; }
.btn-block:hover { background: var(--ink); color: var(--paper); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--linen); padding: 25px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h4 { font-size: 1.3rem; margin-bottom: 10px; font-weight: 600; }
.faq-item p { color: var(--ink); font-size: 1.05rem; }

/* Content Pages */
.page-container { max-width: 800px; margin: 60px auto; padding: 0 20px; }
.page-container h1 { font-size: 3rem; margin-bottom: 40px; border-bottom: var(--rule-double); padding-bottom: 20px; }
.page-container h2 { font-size: 1.75rem; margin: 40px 0 20px; color: var(--ink); }
.page-container p, .page-container li { font-size: 1.1rem; margin-bottom: 15px; color: var(--ink); }
.page-container ul { margin-left: 20px; margin-bottom: 25px; }

/* Footer */
footer { padding: 80px 0; text-align: center; border-top: var(--rule); }
.footer-logo { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 700; margin-bottom: 30px; }
.footer-logo span { color: var(--accent); }
.footer-links { display: flex; justify-content: center; gap: 40px; margin-bottom: 40px; flex-wrap: wrap; }
.footer-links a { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--ink); border-bottom: 1px solid var(--stone); padding-bottom: 2px; }
.footer-links a:hover { border-color: var(--ink); }
.footer-meta { font-size: 0.9rem; color: var(--stone); display: flex; flex-direction: column; gap: 10px; }

/* Animations */
.reveal { opacity: 0; animation: fadeIn 1s ease-out forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* Floating Buttons */
.floating-buttons { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 10px; z-index: 100; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.floating-buttons.visible { opacity: 1; pointer-events: auto; }
.float-btn { background: var(--paper); border: 2px solid var(--ink); color: var(--ink); width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s; box-shadow: 2px 2px 0 var(--ink); font-family: 'Archivo', sans-serif; font-size: 1.2rem; text-decoration: none !important; }
.float-btn:hover { background: var(--ink); color: var(--paper); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }

/* Next Article */
.next-article { margin-top: 50px; padding-top: 30px; border-top: 3px double var(--ink); }
.next-article-label { font-size: 0.85rem; color: var(--stone); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 10px; }
.next-article-link { display: block; font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--ink); text-decoration: none; transition: color 0.2s; }
.next-article-link:hover { color: var(--accent); opacity: 1 !important; }

/* Image styling */
.hero-image-container { margin: 30px 0; border: 1px solid var(--ink); padding: 10px; background: #fff; }
.hero-image-container img { width: 100%; height: auto; display: block; filter: sepia(10%) contrast(1.1); }

/* Mobile Responsive */
@media (max-width: 768px) {
    .header-container { flex-direction: column; gap: 20px; align-items: flex-start; }
    nav { flex-wrap: wrap; gap: 15px; }
    .hero h1 { font-size: 2.8rem; }
    .hero-intro { grid-template-columns: 1fr; gap: 20px; }
    .hero-intro p:first-child::first-letter { font-size: 4rem; margin-top: 4px; }
    .section-title { font-size: 2rem; }
    .ticker { flex-direction: column; align-items: flex-start; gap: 10px; }
    .footer-links { gap: 20px; flex-direction: column; }
}