:root {
--dark: #1a1a2e;
--cream: #f5f0e8;
--gold: #b9a06a;
--gold-light: #d4c59a;
--text-dark: #1a1a2e;
--text-light: #f5f0e8;
--text-muted: #8a8578;
--text-muted-light: #a8a29e;
--accent: #6b8f71;
--warm: #c4956a;
--border-light: rgba(185,160,106,0.25);
--border-dark: rgba(245,240,232,0.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Raleway',sans-serif; color:var(--text-dark); background:var(--cream); -webkit-font-smoothing:antialiased; } .section-cream, .section-dark {
margin:0 !important;
border:none !important;
}
.section-cream + .section-cream,
.section-dark + .section-dark,
.section-cream + .section-dark,
.section-dark + .section-cream {
margin-top:0 !important;
} .hero {
background:var(--dark);
color:var(--text-light);
padding:100px 0 80px;
text-align:center;
position:relative;
overflow:hidden;
}
.hero::before {
content:'';
position:absolute;
top:-50%;left:-50%;width:200%;height:200%;
background:radial-gradient(ellipse at 30% 50%, rgba(107,143,113,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 70% 30%, rgba(185,160,106,0.06) 0%, transparent 50%);
animation:drift 20s ease-in-out infinite alternate;
}
@keyframes drift { 0%{transform:translate(0,0)} 100%{transform:translate(-3%,2%)} }
.hero-inner { position:relative; max-width:800px; margin:0 auto; padding:0 32px; }
.hero-category {
font-size:12px; letter-spacing:3px; text-transform:uppercase;
color:var(--gold); margin-bottom:24px; font-weight:500;
}
.hero h1 {
font-family: 'Cormorant Garamond', serif !important;
font-weight: 300 !important;
font-size: 56px !important;
line-height: 1.15 !important;
letter-spacing: -.5px !important;
color: #fff !important;
text-align: center !important;
margin-bottom: 22px !important;
}
.hero-date { font-size:13px; color:var(--text-muted-light); letter-spacing:1px; }
.hero-sep {
width:60px; height:1px; background:var(--gold);
margin:32px auto 0; opacity:0.5;
} .section-cream { background:var(--cream); padding:80px 0; }
.section-dark { background:var(--dark); color:var(--text-light); padding:80px 0; }
.container { max-width:780px; margin:0 auto; padding:0 32px; } .summary-box {
background:rgba(185,160,106,0.08);
border-left:3px solid var(--gold);
padding:28px 32px;
margin-bottom:48px;
border-radius:0 8px 8px 0;
font-size:15px; line-height:1.8;
display:flex;
align-items:center;
gap:24px;
}
.summary-box .nicole-summary {
flex-shrink:0;
width:220px;
height:auto;
filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));
order:2;
}
.summary-box .summary-content {
flex:1;
order:1;
}
@media(max-width:640px) {
.summary-box {
flex-direction:column;
}
.summary-box .nicole-summary {
width:120px;
order:-1;
margin:0 auto;
}
}
.section-dark .summary-box {
background:rgba(185,160,106,0.06);
border-left-color:var(--gold-light);
}
.summary-label {
font-family:'Libre Baskerville',serif;
font-style:italic;
font-size:13px;
color:var(--gold);
display:block;
margin-bottom:12px;
} h2 {
font-size:30px !important;
font-weight:400 !important;
margin-bottom:32px !important;
line-height:1.3 !important;
}
.section-cream h2 { color:var(--text-dark); }
.section-dark h2 { color:var(--text-light); }
h3 {
font-family:'Raleway',sans-serif !important;
font-size:18px !important;
font-weight:600 !important;
margin:32px 0 12px !important;
letter-spacing:0.5px;
line-height:1.4 !important;
}
.section-dark h3 { color:var(--gold-light); }
p {
font-size:16px;
line-height:1.85;
margin-bottom:20px;
}
.section-cream p { color:#3a3632; }
.section-dark p { color:#c8c3b8; }
strong { font-weight:600; }
.section-dark strong { color:var(--text-light); } .sep {
width:60px; height:1px;
background:var(--gold);
margin:0 auto 48px;
opacity:0.4;
} .table-wrap { overflow-x:auto; margin:32px 0 40px; -webkit-overflow-scrolling:touch; }
table {
width:100%;
border-collapse:collapse;
font-size:14px;
line-height:1.6;
table-layout:fixed;
}
th {
font-family:'Libre Baskerville',serif;
font-weight:400;
font-style:italic;
font-size:13px;
padding:14px 10px;
text-align:left;
border-bottom:1px solid var(--border-dark);
color:var(--gold-light);
}
td {
padding:12px 10px;
border-bottom:1px solid var(--border-dark);
vertical-align:top;
word-wrap:break-word;
overflow-wrap:break-word;
}
.section-dark td { color:#b8b3a8; }
td:first-child {
font-weight:600;
color:var(--gold-light);
font-size:13px;
width:22%;
}
th:first-child { width:22%; }
th:nth-child(2), td:nth-child(2) { width:28%; }
th:nth-child(3), td:nth-child(3) { width:22%; }
th:nth-child(4), td:nth-child(4) { width:28%; }
.highlight-col { background:rgba(107,143,113,0.06); } .origin-header {
display:flex;
align-items:flex-start;
gap:16px;
margin-bottom:24px;
}
.origin-header .origin-title {
margin-bottom:4px !important;
}
.origin-flag {
width:10px; height:10px;
border-radius:50%;
display:block;
flex-shrink:0;
margin-top:14px;
}
.origin-title {
font-size:24px !important;
font-weight:400 !important;
margin:0 !important;
line-height:1.3 !important;
}
.origin-subtitle {
font-family:'Libre Baskerville',serif;
font-style:italic;
font-size:14px;
color:var(--text-muted);
margin-top:2px;
}
.usage-box {
background:rgba(107,143,113,0.08);
border-radius:8px;
padding:20px 24px;
margin-top:24px;
}
.section-dark .usage-box { background:rgba(107,143,113,0.1); }
.usage-label {
font-size:12px;
text-transform:uppercase;
letter-spacing:2px;
color:var(--accent);
font-weight:600;
margin-bottom:8px;
}
.usage-text { font-size:15px; margin:0; } .pov-box {
background:rgba(185,160,106,0.06);
border:1px solid var(--border-dark);
border-radius:12px;
padding:40px;
margin:40px 0;
}
.pov-author {
display:flex;
align-items:center;
gap:16px;
margin-bottom:24px;
}
.pov-avatar {
width:56px; height:56px;
border-radius:50%;
background:var(--gold);
display:flex; align-items:center; justify-content:center;
font-family:'Libre Baskerville',serif;
font-size:20px;
color:var(--dark);
font-weight:700;
flex-shrink:0;
}
.pov-name {
font-family:'Raleway',sans-serif;
font-weight:600;
font-size:15px;
}
.section-dark .pov-name { color:var(--text-light); }
.pov-title-line {
font-family:'Libre Baskerville',serif;
font-style:italic;
font-size:13px;
color:var(--text-muted-light);
}
.pov-box blockquote {
font-family:'Libre Baskerville',serif !important;
font-size:16px !important;
line-height:1.9 !important;
font-style:italic !important;
margin:0 !important;
padding:24px 0 0 0 !important;
border:none !important;
border-left:none !important;
background:none !important;
color:#c8c3b8 !important;
quotes:none !important;
}
.pov-box blockquote::before,
.pov-box blockquote::after {
content:none !important;
} .faq-item {
border-bottom:1px solid rgba(185,160,106,0.15);
padding:28px 0;
}
.faq-item:first-child { padding-top:0; }
.faq-item:last-child { border-bottom:none; }
.faq-question {
font-family:'Raleway',sans-serif;
font-weight:600;
font-size:17px;
margin-bottom:12px;
color:var(--text-dark);
}
.faq-answer {
font-size:15px;
line-height:1.8;
color:#5a564e;
} .guide-grid {
display:grid;
grid-template-columns:1fr;
gap:16px;
margin:32px 0;
}
.guide-card {
background:rgba(255,255,255,0.04);
border:1px solid var(--border-dark);
border-radius:10px;
padding:24px;
}
.guide-usage {
font-size:12px;
text-transform:uppercase;
letter-spacing:2px;
color:var(--gold);
font-weight:600;
margin-bottom:8px;
}
.guide-recommendation {
font-size:15px;
line-height:1.7;
margin:0;
}
.section-dark .guide-recommendation { color:#b8b3a8; } .links-section { margin-top:48px; padding-top:32px; border-top:1px solid var(--border-light); }
.links-section a {
display:inline-block;
color:var(--gold);
text-decoration:none;
font-size:14px;
padding:6px 0;
border-bottom:1px solid transparent;
transition:border-color 0.3s;
margin-right:24px;
margin-bottom:8px;
}
.links-section a:hover { border-bottom-color:var(--gold); } .article-img {
width:100%;
border-radius:8px;
margin:32px 0;
display:block;
}
.article-img-full {
width:100vw;
margin-left:calc(-50vw + 50%);
max-height:480px;
object-fit:cover;
display:block;
}
.img-caption {
font-family:'Libre Baskerville',serif;
font-style:italic;
font-size:12px;
color:var(--text-muted);
margin-top:-20px;
margin-bottom:32px;
text-align:center;
}
.section-dark .img-caption { color:var(--text-muted-light); } .nicole-float {
width:140px;
height:auto;
float:right;
margin:-10px 0 16px 24px;
filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.nicole-float-left {
width:140px;
height:auto;
float:left;
margin:-10px 24px 16px 0;
filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
@media(max-width:640px) {
.nicole-float, .nicole-float-left {
width:100px;
margin:0 auto 16px;
float:none;
display:block;
}
} .faq-header-flex {
display:flex;
align-items:center;
gap:24px;
}
.faq-header-content {
flex:1;
}
.nicole-faq {
flex-shrink:0;
width:200px;
height:auto;
filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15));
order:2;
}
@media(max-width:640px) {
.faq-header-flex {
flex-direction:column;
}
.nicole-faq {
width:120px;
order:-1;
margin:0 auto;
}
} .footer-note {
text-align:center;
padding:48px 32px;
background:var(--dark);
border-top:1px solid var(--border-dark);
}
.footer-note p {
font-family:'Libre Baskerville',serif;
font-style:italic;
font-size:13px;
color:var(--text-muted-light);
max-width:600px;
margin:0 auto;
line-height:1.8;
} @media(max-width:768px) {
.hero { padding:48px 0 40px; }
.hero h1 { font-size:36px !important; }
.section-cream, .section-dark { padding:40px 0; }
.container { padding:0 16px; } h2 { font-size:22px !important; }
h3 { font-size:16px !important; }
.origin-title { font-size:20px !important; } .table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { font-size:12px; min-width:600px; }
th, td { padding:8px 6px; } .nicole-float, .nicole-float-left {
width:100px;
margin:0 auto 16px;
float:none;
display:block;
} .summary-box {
flex-direction:column;
padding:20px;
}
.summary-box .nicole-summary {
width:120px;
order:-1;
margin:0 auto 12px;
} .faq-header-flex {
flex-direction:column;
}
.nicole-faq {
width:100px;
order:-1;
margin:0 auto 12px;
} .pov-box { padding:20px; }
.pov-box blockquote { font-size:14px !important; line-height:1.7 !important; }
.pov-author { gap:12px; }
.pov-avatar { width:44px; height:44px; font-size:16px; }
}