:root{
--bg:#0a0a0c;
--bg-elevated:#111115;
--bg-card:#18181e;
--fg:#f4f0e8;
--fg-muted:#7e7872;
--fg-faint:#4a4744;
--accent:#c4a35a;
--accent-dim:rgba(196,163,90,0.10);
--border:rgba(244,240,232,0.07);
--border-mid:rgba(244,240,232,0.13);
}
*,*::before,*::after{ box-sizing:border-box;margin:0;padding:0}
html{ font-size:16px;scroll-behavior:smooth}
body{
background:var(--bg);
color:var(--fg);
font-family:'Inter',system-ui,sans-serif;
font-weight:400;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{ color:inherit;text-decoration:none}
img{ display:block;max-width:100%}
.masthead{
position:sticky;
top:0;
z-index:100;
border-bottom:1px solid var(--border);
background:rgba(10,10,12,0.90);
backdrop-filter:blur(20px);
}
.masthead-inner{
max-width:1280px;
margin:0 auto;
padding:0.875rem 2rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
}
.masthead-left{ flex:0 0 auto}
.masthead-issue{
font-size:0.7rem;
font-weight:400;
color:var(--fg-muted);
letter-spacing:0.06em;
text-transform:uppercase;
}
.masthead-center{ text-align:center;flex:1}
.masthead-logo{
font-family:'Playfair Display',serif;
font-size:1.5rem;
font-weight:900;
letter-spacing:-0.02em;
color:var(--fg);
line-height:1;
}
.masthead-logo em{
font-style:normal;
font-weight:400;
color:var(--accent);
}
.masthead-right{ flex:0 0 auto}
.masthead-nav{
display:flex;
align-items:center;
gap:2rem;
}
.masthead-nav a{
font-size:0.75rem;
font-weight:500;
color:var(--fg-muted);
text-transform:uppercase;
letter-spacing:0.1em;
transition:color 0.2s;
}
.masthead-nav a:hover{ color:var(--fg)}
.cta-nav{
color:var(--accent) !important;
border:1px solid rgba(196,163,90,0.3);
padding:0.4rem 0.875rem;
border-radius:2px;
transition:border-color 0.2s,background 0.2s !important;
}
.cta-nav:hover{
border-color:var(--accent) !important;
background:var(--accent-dim) !important;
}
.hero{
min-height:72vh;
display:flex;
align-items:flex-end;
padding-bottom:4rem;
position:relative;
overflow:hidden;
background:linear-gradient(160deg,#0e0e12 0%,#0a0a0c 50%,#080810 100%);
}
.hero::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(ellipse 60% 40% at 70% 40%,rgba(196,163,90,0.06) 0%,transparent 70%),
radial-gradient(ellipse 80% 60% at 20% 80%,rgba(196,163,90,0.03) 0%,transparent 60%);
pointer-events:none;
}
.hero-inner{
max-width:1280px;
margin:0 auto;
padding:0 2rem;
width:100%;
}
.hero-meta{ margin-bottom:1.5rem}
.hero-category-badge{
display:inline-flex;
align-items:center;
gap:0.5rem;
font-size:0.65rem;
font-weight:500;
text-transform:uppercase;
letter-spacing:0.18em;
color:var(--fg-muted);
}
.badge-dot{
width:6px;
height:6px;
border-radius:50%;
background:var(--accent);
opacity:0.7;
}
.hero-headline-block{ max-width:720px}
.hero-headline{
font-family:'Playfair Display',serif;
font-size:clamp(2.8rem,5.5vw,4.8rem);
font-weight:900;
letter-spacing:-0.03em;
line-height:1.08;
color:var(--fg);
margin-bottom:1.75rem;
}
.hero-headline em{
font-style:italic;
font-weight:400;
color:var(--accent);
}
.hero-subheadline{
font-size:1.05rem;
color:var(--fg-muted);
line-height:1.75;
max-width:540px;
font-weight:300;
}
.hero-scroll-hint{
display:flex;
align-items:center;
gap:0.5rem;
margin-top:3rem;
font-size:0.7rem;
text-transform:uppercase;
letter-spacing:0.12em;
color:var(--fg-faint);
}
.section-header{
display:flex;
align-items:center;
gap:1.5rem;
margin-bottom:2.5rem;
}
.section-label{
font-size:0.65rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.2em;
color:var(--accent);
white-space:nowrap;
}
.section-rule{
flex:1;
height:1px;
background:var(--border);
}
.articles{ padding:5rem 0}
.articles-inner{
max-width:1280px;
margin:0 auto;
padding:0 2rem;
}
.articles-grid{
display:grid;
grid-template-columns:1.6fr 1fr;
grid-template-rows:auto auto;
gap:1px;
background:var(--border);
border:1px solid var(--border);
}
.article-card{
background:var(--bg);
display:flex;
flex-direction:column;
}
.article-featured{
grid-row:1;
grid-column:1;
}
.articles-grid >.article-card:not(.article-featured):nth-child(3){
grid-column:2;
grid-row:1;
}
.articles-grid >.article-card:not(.article-featured):nth-child(4){
grid-column:1;
grid-row:2;
}
.articles-grid >.article-card:not(.article-featured):nth-child(5){
grid-column:2;
grid-row:2;
}
.article-image{
height:220px;
position:relative;
overflow:hidden;
background:var(--bg-card);
}
.article-featured .article-image{ height:340px}
.article-image-1{
background:linear-gradient(135deg,#1a1a24 0%,#0e0e16 50%,#1a1208 100%);
}
.article-image-1::after{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(ellipse 50% 60% at 30% 60%,rgba(196,163,90,0.12) 0%,transparent 60%),
radial-gradient(ellipse 80% 80% at 80% 20%,rgba(255,255,255,0.03) 0%,transparent 50%);
}
.article-image-2{
background:linear-gradient(135deg,#12191a 0%,#0a1a12 100%);
}
.article-image-3{
background:linear-gradient(135deg,#161220 0%,#0a0a1a 100%);
}
.article-image-4{
background:linear-gradient(135deg,#1a1212 0%,#1a0e0a 100%);
}
.article-image-overlay{
position:absolute;
bottom:1rem;
left:1rem;
}
.article-category-tag{
font-size:0.6rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.15em;
color:var(--accent);
background:rgba(10,10,12,0.8);
padding:0.3rem 0.6rem;
border:1px solid rgba(196,163,90,0.25);
border-radius:1px;
}
.article-body{
padding:1.75rem 2rem 2rem;
flex:1;
display:flex;
flex-direction:column;
}
.article-meta{
display:flex;
align-items:center;
gap:1rem;
margin-bottom:0.875rem;
}
.article-date,.article-read-time{
font-size:0.7rem;
color:var(--fg-faint);
letter-spacing:0.04em;
}
.article-date::after{ content:'•';margin-left:1rem}
.article-read-time{ color:var(--accent)}
.article-title{
font-family:'Playfair Display',serif;
font-size:1.2rem;
font-weight:700;
line-height:1.3;
letter-spacing:-0.01em;
color:var(--fg);
margin-bottom:0.875rem;
}
.article-featured .article-title{ font-size:1.6rem}
.article-excerpt{
font-size:0.85rem;
color:var(--fg-muted);
line-height:1.7;
flex:1;
margin-bottom:1.25rem;
}
.article-read-more{
display:inline-flex;
align-items:center;
gap:0.4rem;
font-size:0.7rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.12em;
color:var(--accent);
transition:gap 0.2s;
}
.article-read-more:hover{ gap:0.7rem}
.categories{ padding:5rem 0;border-top:1px solid var(--border)}
.categories-inner{
max-width:1280px;
margin:0 auto;
padding:0 2rem;
}
.categories-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
border:1px solid var(--border);
}
.category-card{
padding:2.5rem 2rem;
border-right:1px solid var(--border);
background:var(--bg-elevated);
transition:background 0.25s;
}
.category-card:last-child{ border-right:none}
.category-card:hover{ background:var(--bg-card)}
.category-icon{
color:var(--accent);
opacity:0.6;
margin-bottom:1.5rem;
}
.category-name{
font-family:'Playfair Display',serif;
font-size:1.15rem;
font-weight:700;
color:var(--fg);
margin-bottom:0.75rem;
letter-spacing:-0.01em;
}
.category-desc{
font-size:0.8rem;
color:var(--fg-muted);
line-height:1.7;
margin-bottom:1.5rem;
}
.category-link{
display:inline-flex;
align-items:center;
gap:0.35rem;
font-size:0.7rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.12em;
color:var(--fg-faint);
transition:color 0.2s,gap 0.2s;
}
.category-link:hover{ color:var(--accent);gap:0.6rem}
.cta-section{
padding:6rem 0;
border-top:1px solid var(--border);
background:linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg) 100%);
}
.cta-inner{
max-width:700px;
margin:0 auto;
padding:0 2rem;
text-align:center;
}
.cta-badge{
display:inline-flex;
align-items:center;
gap:0.5rem;
margin-bottom:1.75rem;
}
.cta-badge span{
font-size:0.65rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.2em;
color:var(--accent);
border:1px solid rgba(196,163,90,0.3);
padding:0.35rem 0.875rem;
border-radius:1px;
}
.cta-headline{
font-family:'Playfair Display',serif;
font-size:clamp(2rem,4vw,3rem);
font-weight:900;
letter-spacing:-0.03em;
line-height:1.1;
color:var(--fg);
margin-bottom:1.5rem;
}
.cta-body{
font-size:0.95rem;
color:var(--fg-muted);
line-height:1.8;
margin-bottom:1rem;
}
.cta-button{
display:inline-flex;
align-items:center;
gap:0.6rem;
margin:2rem 0 1.5rem;
padding:0.875rem 2rem;
background:var(--accent);
color:#0a0a0c;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
border-radius:2px;
transition:background 0.2s,gap 0.2s;
}
.cta-button:hover{
background:#d4b36a;
gap:0.9rem;
}
.cta-note{
font-size:0.75rem;
color:var(--fg-faint);
letter-spacing:0.02em;
}
.footer{
padding:4rem 0 2.5rem;
border-top:1px solid var(--border);
}
.footer-inner{
max-width:1280px;
margin:0 auto;
padding:0 2rem;
}
.footer-top{
display:flex;
justify-content:space-between;
align-items:start;
margin-bottom:3rem;
padding-bottom:3rem;
border-bottom:1px solid var(--border);
gap:3rem;
}
.footer-logo{
font-family:'Playfair Display',serif;
font-size:1.75rem;
font-weight:900;
display:block;
margin-bottom:0.75rem;
letter-spacing:-0.02em;
}
.footer-logo em{ font-style:normal;font-weight:400;color:var(--accent)}
.footer-tagline{
font-size:0.8rem;
color:var(--fg-faint);
max-width:280px;
line-height:1.6;
}
.footer-nav{
display:flex;
gap:4rem;
}
.footer-nav-col{ display:flex;flex-direction:column;gap:0.875rem}
.footer-nav-label{
font-size:0.65rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.15em;
color:var(--fg-faint);
margin-bottom:0.25rem;
}
.footer-nav-col a{
display:inline-flex;
align-items:center;
gap:0.4rem;
font-size:0.8rem;
color:var(--fg-muted);
transition:color 0.2s;
}
.footer-nav-col a:hover{ color:var(--fg)}
.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
}
.footer-copy{ font-size:0.75rem;color:var(--fg-faint)}
.footer-contact a{
font-size:0.75rem;
color:var(--fg-faint);
transition:color 0.2s;
}
.footer-contact a:hover{ color:var(--fg-muted)}
.article-hero{
width:100%;
height:55vh;
min-height:360px;
max-height:560px;
position:relative;
overflow:hidden;
margin-bottom:0;
}
.article-hero-image{
position:absolute;
inset:0;
background:linear-gradient(135deg,#111118 0%,#0e0e16 40%,#1a1208 100%);
background-image:
radial-gradient(ellipse 60% 80% at 50% 50%,rgba(196,163,90,0.08) 0%,transparent 60%),
radial-gradient(ellipse 100% 100% at 20% 100%,rgba(196,163,90,0.04) 0%,transparent 50%);
}
.article-hero-gradient{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(10,10,12,0.9) 0%,rgba(10,10,12,0.3) 50%,transparent 100%);
}
.article-breadcrumb-wrap{
border-bottom:1px solid var(--border);
background:var(--bg-elevated);
}
.article-breadcrumb{
display:flex;
align-items:center;
gap:0.4rem;
padding:0.75rem 0;
font-size:0.72rem;
color:var(--fg-muted);
}
.article-breadcrumb a{
color:var(--fg-muted);
transition:color 0.2s;
}
.article-breadcrumb a:hover{ color:var(--fg)}
.breadcrumb-sep{ color:var(--fg-faint)}
.article-header-wrap{
padding:3rem 0 2.5rem;
background:var(--bg);
}
.article-container{
max-width:1080px;
margin:0 auto;
padding:0 2rem;
}
.article-category-label{
font-size:0.65rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.2em;
color:var(--accent);
margin-bottom:1.25rem;
}
.article-headline{
font-family:'Playfair Display',serif;
font-size:clamp(2rem,4vw,3.25rem);
font-weight:900;
letter-spacing:-0.03em;
line-height:1.12;
color:var(--fg);
max-width:820px;
margin-bottom:1.75rem;
}
.article-byline{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:0.5rem 1rem;
font-size:0.8rem;
color:var(--fg-muted);
}
.article-author strong{ color:var(--fg);font-weight:500}
.article-byline-sep{ color:var(--fg-faint)}
.article-read-time{ color:var(--accent)}
.article-body-wrap{
padding:3rem 0 5rem;
}
.article-layout{
display:grid;
grid-template-columns:220px 1fr;
gap:4rem;
align-items:start;
}
.article-toc{
position:sticky;
top:5.5rem;
}
.toc-sticky{ padding-top:0.5rem}
.toc-title{
font-size:0.65rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.18em;
color:var(--fg-faint);
margin-bottom:1rem;
}
.toc-list{
list-style:none;
display:flex;
flex-direction:column;
gap:0.5rem;
counter-reset:toc-counter;
}
.toc-item{ counter-increment:toc-counter}
.toc-link{
display:block;
font-size:0.78rem;
color:var(--fg-muted);
line-height:1.5;
padding:0.25rem 0;
border-left:2px solid var(--border);
padding-left:0.75rem;
transition:color 0.2s,border-color 0.2s;
}
.toc-link:hover{ color:var(--fg);border-left-color:var(--accent)}
.toc-h3 .toc-link{ padding-left:1.5rem;font-size:0.74rem}
.article-content{ max-width:720px}
.article-lead{
font-size:1.2rem;
font-weight:400;
line-height:1.8;
color:var(--fg-muted);
margin-bottom:2.5rem;
padding-bottom:2.5rem;
border-bottom:1px solid var(--border);
font-style:italic;
}
.article-h2{
font-family:'Playfair Display',serif;
font-size:1.65rem;
font-weight:700;
letter-spacing:-0.02em;
line-height:1.25;
color:var(--fg);
margin:3rem 0 1.25rem;
}
.article-h3{
font-family:'Playfair Display',serif;
font-size:1.25rem;
font-weight:600;
letter-spacing:-0.01em;
line-height:1.35;
color:var(--fg);
margin:2.25rem 0 1rem;
}
.article-p{
font-size:1rem;
line-height:1.85;
color:var(--fg-muted);
margin-bottom:1.5rem;
}
.article-inline-cta{
margin:2.5rem 0;
border:1px solid rgba(196,163,90,0.2);
background:var(--accent-dim);
border-radius:2px;
}
.article-inline-cta-inner{
padding:1.75rem 2rem;
text-align:center;
}
.inline-cta-text{
font-family:'Playfair Display',serif;
font-size:1.05rem;
font-weight:700;
color:var(--fg);
margin-bottom:1rem;
}
.inline-cta-button{
display:inline-flex;
align-items:center;
gap:0.5rem;
padding:0.7rem 1.5rem;
background:var(--accent);
color:#0a0a0c;
font-size:0.75rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
border-radius:2px;
transition:background 0.2s,gap 0.2s;
}
.inline-cta-button:hover{
background:#d4b36a;
gap:0.75rem;
}
.article-share{
display:flex;
align-items:center;
gap:1rem;
margin:3rem 0 2rem;
padding:1.5rem 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.article-share-label{
font-size:0.72rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.12em;
color:var(--fg-faint);
white-space:nowrap;
}
.article-share-buttons{ display:flex;gap:0.75rem;flex-wrap:wrap}
.share-btn{
display:inline-flex;
align-items:center;
gap:0.4rem;
padding:0.5rem 1rem;
font-size:0.75rem;
font-weight:500;
border:1px solid var(--border-mid);
border-radius:2px;
background:var(--bg-elevated);
color:var(--fg-muted);
transition:border-color 0.2s,color 0.2s,background 0.2s;
}
.share-btn:hover{
border-color:var(--accent);
color:var(--fg);
background:var(--accent-dim);
}
.share-linkedin:hover{ border-color:#0A66C2;color:#0A66C2}
.share-instagram:hover{ border-color:#E4405F;color:#E4405F}
.share-whatsapp:hover{ border-color:#25D366;color:#25D366}
.share-x:hover{ border-color:#fff;color:#fff}
.article-bottom-cta{
margin-top:3rem;
padding:4rem 0;
border-top:1px solid var(--border);
text-align:center;
background:linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg) 100%);
}
.article-bottom-cta-inner{ max-width:560px;margin:0 auto}
.bottom-cta-eyebrow{
font-size:0.7rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.2em;
color:var(--fg-faint);
margin-bottom:1rem;
}
.bottom-cta-heading{
font-family:'Playfair Display',serif;
font-size:clamp(1.5rem,3vw,2.25rem);
font-weight:900;
letter-spacing:-0.02em;
line-height:1.15;
color:var(--fg);
margin-bottom:1rem;
}
.bottom-cta-sub{
font-size:0.9rem;
color:var(--fg-muted);
margin-bottom:2rem;
}
.bottom-cta-button{
display:inline-flex;
align-items:center;
gap:0.6rem;
padding:0.875rem 2rem;
background:var(--accent);
color:#0a0a0c;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
border-radius:2px;
transition:background 0.2s,gap 0.2s;
}
.bottom-cta-button:hover{ background:#d4b36a;gap:0.9rem}
.related-section{
padding:4rem 0 5rem;
border-top:1px solid var(--border);
background:var(--bg-elevated);
}
.related-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
border:1px solid var(--border);
}
.related-card{
display:flex;
flex-direction:column;
background:var(--bg);
border-right:1px solid var(--border);
transition:background 0.25s;
}
.related-card:last-child{ border-right:none}
.related-card:hover{ background:var(--bg-card)}
.related-card-image{
height:180px;
position:relative;
overflow:hidden;
}
.related-card-image-overlay{
position:absolute;
inset:0;
background:
radial-gradient(ellipse 60% 60% at 40% 60%,rgba(196,163,90,0.1) 0%,transparent 60%);
}
.related-card-body{ padding:1.5rem;flex:1;display:flex;flex-direction:column}
.related-category{
font-size:0.6rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.15em;
color:var(--accent);
margin-bottom:0.75rem;
}
.related-title{
font-family:'Playfair Display',serif;
font-size:1rem;
font-weight:700;
line-height:1.35;
color:var(--fg);
flex:1;
margin-bottom:1rem;
}
.related-link{
font-size:0.72rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--fg-faint);
transition:color 0.2s;
}
.related-card:hover .related-link{ color:var(--accent)}
.racconta-hero{
padding:5rem 0 4rem;
background:var(--bg);
border-bottom:1px solid var(--border);
}
.racconta-hero-inner{
max-width:720px;
margin:0 auto;
padding:0 2rem;
}
.racconta-eyebrow{
font-size:0.65rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.2em;
color:var(--accent);
margin-bottom:1.25rem;
}
.racconta-headline{
font-family:'Playfair Display',serif;
font-size:clamp(2.2rem,5vw,3.5rem);
font-weight:900;
letter-spacing:-0.03em;
line-height:1.1;
color:var(--fg);
margin-bottom:1.5rem;
}
.racconta-subhead{
font-size:1rem;
color:var(--fg-muted);
line-height:1.8;
margin-bottom:2.5rem;
max-width:560px;
}
.racconta-criteria{
display:flex;
flex-wrap:wrap;
gap:1rem 2.5rem;
}
.criteria-item{
display:flex;
align-items:center;
gap:0.5rem;
font-size:0.8rem;
color:var(--fg-muted);
}
.criteria-icon{
color:var(--accent);
display:flex;
align-items:center;
flex-shrink:0;
}
.racconta-body{
padding:4rem 0 6rem;
background:var(--bg-elevated);
}
.racconta-form-wrap{
max-width:720px;
margin:0 auto;
padding:0 2rem;
}
.racconta-form{
display:flex;
flex-direction:column;
gap:2.5rem;
}
.form-section{
display:flex;
flex-direction:column;
gap:1.25rem;
}
.form-section-title{
font-family:'Playfair Display',serif;
font-size:1.1rem;
font-weight:700;
color:var(--fg);
letter-spacing:-0.01em;
padding-bottom:0.75rem;
border-bottom:1px solid var(--border);
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.25rem;
}
.form-field{
display:flex;
flex-direction:column;
gap:0.5rem;
}
.form-label{
font-size:0.75rem;
font-weight:500;
color:var(--fg-muted);
text-transform:uppercase;
letter-spacing:0.08em;
}
.form-input,
.form-textarea,
.form-select{
background:var(--bg);
border:1px solid var(--border-mid);
color:var(--fg);
font-family:'Inter',system-ui,sans-serif;
font-size:0.9rem;
padding:0.75rem 1rem;
border-radius:2px;
transition:border-color 0.2s,box-shadow 0.2s;
appearance:none;
}
.form-input::placeholder,
.form-textarea::placeholder{ color:var(--fg-faint)}
.form-input:focus,
.form-textarea:focus,
.form-select:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(196,163,90,0.08);
}
.form-textarea{ resize:vertical;min-height:120px}
.form-select{ cursor:pointer}
.form-select option{ background:var(--bg)}
.form-footer{
display:flex;
flex-direction:column;
gap:1.25rem;
padding-top:0.5rem;
}
.form-disclaimer{
font-size:0.78rem;
color:var(--fg-faint);
line-height:1.6;
}
.form-submit{
display:inline-flex;
align-items:center;
gap:0.6rem;
align-self:flex-start;
padding:0.875rem 2rem;
background:var(--accent);
color:#0a0a0c;
font-family:'Inter',system-ui,sans-serif;
font-size:0.8rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.1em;
border:none;
border-radius:2px;
cursor:pointer;
transition:background 0.2s,gap 0.2s;
}
.form-submit:hover:not(:disabled){ background:#d4b36a;gap:0.9rem}
.form-submit:disabled{ opacity:0.6;cursor:not-allowed}
.form-success{
display:none;
text-align:center;
padding:3rem 2rem;
background:var(--bg);
border:1px solid var(--border);
border-radius:2px;
}
.form-success-icon{
width:56px;
height:56px;
background:rgba(196,163,90,0.1);
border:1px solid rgba(196,163,90,0.25);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 1.5rem;
color:var(--accent);
}
.form-success h3{
font-family:'Playfair Display',serif;
font-size:1.5rem;
font-weight:700;
color:var(--fg);
margin-bottom:0.75rem;
}
.form-success p{
font-size:0.9rem;
color:var(--fg-muted);
line-height:1.7;
}
.form-error-msg{
display:none;
padding:0.875rem 1rem;
background:rgba(220,50,50,0.08);
border:1px solid rgba(220,50,50,0.2);
border-radius:2px;
font-size:0.85rem;
color:#e05050;
}
@media (max-width:640px){
.form-row{ grid-template-columns:1fr}
.form-submit{ width:100%;justify-content:center}
}
.footer-newsletter{ margin-top:1.5rem}
.footer-newsletter-label{
font-size:0.65rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.15em;
color:var(--fg-faint);
margin-bottom:0.75rem;
}
.footer-newsletter-form{
display:flex;
gap:0;
max-width:280px;
}
.footer-newsletter-input{
flex:1;
background:var(--bg-elevated);
border:1px solid var(--border-mid);
border-right:none;
color:var(--fg);
font-family:'Inter',system-ui,sans-serif;
font-size:0.8rem;
padding:0.6rem 0.875rem;
border-radius:2px 0 0 2px;
}
.footer-newsletter-input::placeholder{ color:var(--fg-faint)}
.footer-newsletter-input:focus{
outline:none;
border-color:var(--accent);
}
.footer-newsletter-btn{
display:flex;
align-items:center;
justify-content:center;
width:40px;
background:var(--accent);
color:#0a0a0c;
border:none;
cursor:pointer;
border-radius:0 2px 2px 0;
transition:background 0.2s;
}
.footer-newsletter-btn:hover{ background:#d4b36a}
.footer-newsletter-success{
font-size:0.78rem;
color:var(--accent);
margin-top:0.5rem;
}
.footer-newsletter-error{
font-size:0.78rem;
color:#e05050;
margin-top:0.5rem;
}
.footer-legal{
display:flex;
align-items:center;
gap:0.5rem;
}
.footer-legal-link{
font-size:0.72rem;
color:var(--fg-faint);
transition:color 0.2s;
}
.footer-legal-link:hover{ color:var(--fg-muted)}
.footer-legal-sep{
font-size:0.72rem;
color:var(--fg-faint);
}
.back-to-top{
position:fixed;
bottom:2rem;
right:2rem;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
background:var(--bg-elevated);
border:1px solid var(--border-mid);
border-radius:2px;
color:var(--fg-muted);
cursor:pointer;
opacity:0;
pointer-events:none;
transition:opacity 0.3s,border-color 0.2s,color 0.2s;
z-index:90;
}
.back-to-top.visible{ opacity:1;pointer-events:auto}
.back-to-top:hover{ border-color:var(--accent);color:var(--accent)}
.cookie-banner{
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--bg-elevated);
border-top:1px solid var(--border-mid);
padding:1.25rem 2rem;
display:none;
align-items:center;
justify-content:center;
gap:1rem;
z-index:200;
}
.cookie-banner.visible{ display:flex}
.cookie-banner-text{
font-size:0.8rem;
color:var(--fg-muted);
max-width:600px;
text-align:center;
}
.cookie-banner-text a{ color:var(--accent);text-decoration:underline}
.cookie-banner-text a:hover{ color:var(--fg)}
.cookie-banner-actions{
display:flex;
gap:0.75rem;
flex-shrink:0;
}
.cookie-accept{
padding:0.5rem 1.25rem;
background:var(--accent);
color:#0a0a0c;
font-size:0.72rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.08em;
border:none;
border-radius:2px;
cursor:pointer;
transition:background 0.2s;
}
.cookie-accept:hover{ background:#d4b36a}
.cookie-settings{
padding:0.5rem 1rem;
background:transparent;
color:var(--fg-muted);
font-size:0.72rem;
font-weight:500;
border:1px solid var(--border-mid);
border-radius:2px;
cursor:pointer;
transition:border-color 0.2s,color 0.2s;
}
.cookie-settings:hover{ border-color:var(--fg-muted);color:var(--fg)}
.article-author-section{
margin:3rem 0 2rem;
padding:2rem;
border:1px solid var(--border);
background:var(--bg-elevated);
border-radius:2px;
}
.author-bio-block{
display:flex;
gap:1.5rem;
align-items:start;
}
.author-avatar-placeholder{
width:56px;
height:56px;
border-radius:50%;
background:var(--accent-dim);
border:1px solid rgba(196,163,90,0.25);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-family:'Playfair Display',serif;
font-size:1.5rem;
font-weight:900;
color:var(--accent);
}
.author-bio-content{ flex:1}
.author-bio-name{
font-family:'Playfair Display',serif;
font-size:1rem;
font-weight:700;
color:var(--fg);
margin-bottom:0.5rem;
}
.author-bio-text{
font-size:0.85rem;
color:var(--fg-muted);
line-height:1.7;
}
.article-view-counter{
display:inline-flex;
align-items:center;
gap:0.35rem;
font-size:0.7rem;
color:var(--fg-faint);
margin-left:0.5rem;
}
.article-view-counter svg{ opacity:0.6}
@media (max-width:1024px){
.categories-grid{ grid-template-columns:repeat(2,1fr)}
.category-card:nth-child(2){ border-right:none}
.category-card:nth-child(3){ border-top:1px solid var(--border)}
.category-card:nth-child(4){ border-top:1px solid var(--border);border-right:none}
.article-layout{ grid-template-columns:180px 1fr;gap:2.5rem}
.related-grid{ grid-template-columns:repeat(2,1fr)}
.related-card:nth-child(2){ border-right:none}
.related-card:nth-child(3){ border-top:1px solid var(--border);border-right:none}
}
@media (max-width:768px){
.masthead-left{ display:none}
.masthead-nav{ gap:1.25rem}
.masthead-nav a:not(.cta-nav){ display:none}
.hero{ min-height:55vh}
.articles-grid{ grid-template-columns:1fr}
.article-featured{ grid-column:1;grid-row:auto}
.articles-grid >.article-card:not(.article-featured){ grid-column:1 !important;grid-row:auto !important}
.article-featured .article-image{ height:240px}
.categories-grid{ grid-template-columns:1fr}
.category-card{ border-right:none;border-bottom:1px solid var(--border)}
.category-card:last-child{ border-bottom:none}
.footer-top{ flex-direction:column;gap:2.5rem}
.footer-nav{ gap:2.5rem}
.footer-bottom{ flex-direction:column;gap:0.75rem;align-items:start}
.article-layout{ grid-template-columns:1fr}
.article-toc{ display:none}
.article-hero{ height:40vh;min-height:280px}
.article-headline{ font-size:clamp(1.75rem,5vw,2.5rem)}
.article-share{ flex-direction:column;align-items:start;gap:0.75rem}
.related-grid{ grid-template-columns:1fr}
.related-card{ border-right:none;border-bottom:1px solid var(--border)}
.related-card:last-child{ border-bottom:none}
}
@media (max-width:480px){
.masthead-inner{ padding:0.75rem 1.25rem}
.hero-headline{ font-size:2.2rem}
.articles-inner{ padding:0 1.25rem}
.categories-inner{ padding:0 1.25rem}
.cta-inner{ padding:0 1.25rem}
.footer-inner{ padding:0 1.25rem}
.article-container{ padding:0 1.25rem}
.article-inline-cta-inner{ padding:1.25rem}
.article-bottom-cta{ padding:3rem 0}
}