/* =========================================================================
Raemsha — Nation Page (Illuminated Atlas)
Reference implementation styles.
Design language: illuminated manuscript × modern museum exhibit.
Palette and tokens here should be promoted to docs/02_Design_System.md and
reference/style-guides/ (color-palette.md, typography.md) once approved.
========================================================================= */
/* ---- Design tokens ----------------------------------------------------- */
:root {
--parchment: #f3e9d2;
--parchment-2: #ece0c4;
--parchment-deep: #e3d4b0;
--ivory: #faf4e6;
--ink: #2a2450; /* soft navy ink for body text */
--ink-soft: #5a527e;
--gold: #b3904c;
--gold-deep: #8c6d34;
--gold-soft: #d8be86;
--lavender: #b6a4d4;
--lavender-deep: #7d6aa6;
--navy: #211d44;
--navy-2: #2c2658;
--plum: #6d4f7a;
--frame-radius: 14px;
--card-radius: 12px;
--gap: clamp(1rem, 2.4vw, 2rem);
--shadow-soft: 0 6px 22px rgba(33, 29, 68, 0.14);
--shadow-lift: 0 14px 38px rgba(33, 29, 68, 0.24);
/* Brand families come first; they activate once self-hosted files exist
(see assets/fonts/fonts.css). Until then the stack falls back gracefully. */
--font-display: "Almendra SC", "Cinzel", Georgia, serif; /* large headers (bold, small-caps) */
--font-heading: "Almendra", "Cinzel", Georgia, serif; /* medium headers + labels */
--font-body: "Merriweather", Georgia, "Times New Roman", serif; /* body text (Light, 300) */
--font-script: "Almendra", "Merriweather", Georgia, serif; /* italic quotes / leads */
--font-accent: "Cinzel", Georgia, serif; /* available if needed */
--maxw: 1200px;
}
/* ---- Reset-ish --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
margin: 0;
font-family: var(--font-body);
font-weight: 300;
color: var(--ink);
font-size: clamp(1rem, 0.6vw + 0.9rem, 1.12rem);
line-height: 1.6;
/* Parchment field: layered washes + faint fibre texture */
background-color: var(--parchment);
background-image:
radial-gradient(120% 80% at 50% -10%, rgba(214,193,134,0.35), transparent 60%),
radial-gradient(80% 60% at 100% 0%, rgba(182,164,212,0.18), transparent 55%),
url("data:image/svg+xml;utf8,");
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--lavender-deep); text-underline-offset: 3px; }
/* ---- Typography -------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--navy); line-height: 1.15; margin: 0 0 .4em; }
h1, h2 { font-family: var(--font-display); font-weight: 700; } /* Almendra SC Bold — large headers */
h3, h4 { font-family: var(--font-heading); font-weight: 400; } /* Almendra Regular — medium headers */
.section__title {
text-align: center;
font-size: clamp(1.5rem, 2.4vw, 2.2rem);
letter-spacing: .04em;
color: var(--plum);
margin-bottom: .2em;
}
.eyebrow { font-family: var(--font-heading); letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; color: var(--gold-deep); }
.script { font-family: var(--font-script); font-style: italic; }
/* ---- Layout shell ------------------------------------------------------ */
.page { width: 100%; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.section { padding-block: clamp(2rem, 5vw, 3.6rem); }
/* =========================================================================
Decorative panel — the reusable container every section sits in
========================================================================= */
.panel {
position: relative;
background:
linear-gradient(180deg, rgba(255,250,238,0.7), rgba(243,233,210,0.55)),
var(--parchment-2);
border: 1px solid var(--gold-soft);
border-radius: var(--frame-radius);
box-shadow: var(--shadow-soft), inset 0 0 0 4px rgba(255,250,238,0.5), inset 0 0 0 5px rgba(179,144,76,0.35);
padding: clamp(1.25rem, 3vw, 2.4rem);
}
/* double-rule gold frame */
.panel::after {
content: "";
position: absolute; inset: 9px;
border: 1px solid rgba(140,109,52,0.45);
border-radius: calc(var(--frame-radius) - 6px);
pointer-events: none;
}
/* ornamental corners */
.panel > .corner {
position: absolute; width: 34px; height: 34px; color: var(--gold-deep); opacity: .9; pointer-events: none;
}
.panel > .corner.tl { top: 6px; left: 6px; }
.panel > .corner.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.panel > .corner.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.panel > .corner.br { bottom: 6px; right: 6px; transform: scale(-1, -1); }
.panel--dark {
background: linear-gradient(180deg, var(--navy-2), var(--navy));
border-color: var(--gold-deep);
color: var(--ivory);
}
.panel--dark .section__title, .panel--dark h3 { color: var(--gold-soft); }
.panel--dark .corner { color: var(--gold-soft); }
/* floral divider (svg via