/* =========================================================
   ESTERASUL — RADRIAN ARCHIVE
   Professional theme, matched to the reference artwork:
   charcoal / bone / rust-red, editorial serif + clean sans.
   ========================================================= */

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

:root{

--bg:#0c0b0a;
--bg-soft:#131110;

--panel:#161412;
--panel-hover:#1c1a17;

--border:rgba(233,225,213,.10);
--border-strong:rgba(233,225,213,.20);

--text:#e7e1d6;
--text-muted:#a79e91;
--text-faint:#787064;

--accent:#b1402a;
--accent-hover:#c9503a;
--accent-soft:rgba(177,64,42,.14);
--accent-border:rgba(177,64,42,.4);

--font-head:'Fraunces', Georgia, serif;
--font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:var(--font-body);

color:var(--text);

background:var(--bg);

background-image:radial-gradient(circle at 15% 0%, rgba(177,64,42,.06), transparent 45%);

overflow-x:hidden;

line-height:1.5;
}

a{ color:inherit; }

img{ max-width:100%; display:block; }

/* PAGE */

.page{

max-width:1360px;

margin:auto;

padding:0 40px 40px;

position:relative;
}

/* HEADER */

header{

display:flex;

justify-content:space-between;

align-items:center;

padding:26px 40px;

border-bottom:1px solid var(--border);

position:sticky;

top:0;

z-index:50;

background:rgba(12,11,10,.86);

backdrop-filter:blur(10px);

margin:0 -40px;
}

.logo{

display:flex;

gap:14px;

align-items:center;

text-decoration:none;

color:var(--text);
}

.logo-symbol{

width:38px;
height:38px;

display:flex;

align-items:center;

justify-content:center;

font-family:var(--font-head);

font-weight:600;

font-size:17px;

color:var(--bg);

background:var(--accent);

flex-shrink:0;
}

.logo h1{

font-family:var(--font-head);

font-weight:600;

font-size:19px;

letter-spacing:.5px;
}

.logo span{

display:block;

letter-spacing:2.5px;

font-size:10.5px;

color:var(--text-faint);

margin-top:2px;

text-transform:uppercase;
}

nav ul{

display:flex;

gap:30px;

list-style:none;
}

nav a{

text-decoration:none;

color:var(--text-muted);

font-family:var(--font-body);

font-size:13px;

font-weight:500;

letter-spacing:.5px;

text-transform:uppercase;

transition:.2s;

padding-bottom:4px;

border-bottom:1px solid transparent;
}

nav a:hover{
    color:var(--text);
}

nav a.active{
    color:var(--text);
    border-bottom:1px solid var(--accent);
}

/* HERO */

.hero{

    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    margin:0 -40px;

    overflow:hidden;

    background-size:cover;
    background-position:center;
}

.hero.page-hero{
    min-height:280px;
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        100deg,
        rgba(9,8,7,.94) 5%,
        rgba(9,8,7,.78) 40%,
        rgba(9,8,7,.55) 75%,
        rgba(9,8,7,.82) 100%
    );

    z-index:1;
}

.hero-circle{ display:none; }

.hero-content{

    position:relative;

    z-index:3;

    max-width:640px;

    padding:60px;
}

.hero-small{

    display:inline-block;

    font-family:var(--font-body);

    letter-spacing:3px;

    margin-bottom:16px;

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

    color:var(--accent-hover);
}

.hero-content h2{

    font-family:var(--font-head);

    font-weight:600;

    font-size:64px;

    line-height:1.04;

    margin-bottom:18px;

    color:#f4ede1;

    letter-spacing:-.5px;
}

.hero.page-hero .hero-content h2{
    font-size:46px;
}

.hero-content h3{

    font-family:var(--font-body);

    font-size:18px;

    font-weight:400;

    line-height:1.5;

    margin-bottom:20px;

    color:var(--text-muted);
}

.hero-divider{

    width:60px;

    height:2px;

    background:var(--accent);

    margin-bottom:20px;
}

.hero-content p{

    font-size:16px;

    line-height:1.7;

    color:var(--text-muted);

    max-width:480px;
}

.hero-button{

    display:inline-block;

    margin-top:28px;

    padding:13px 28px;

    background:var(--accent);

    color:#fff;

    text-decoration:none;

    font-family:var(--font-body);

    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

    border:1px solid var(--accent);

    transition:.2s;
}

.hero-button:hover{

    background:var(--accent-hover);

    border-color:var(--accent-hover);
}

@media(max-width:900px){

    .hero-content h2{ font-size:44px; }

    .hero.page-hero .hero-content h2{ font-size:34px; }

    .hero-content{ padding:40px 28px; }

}

/* ARCHIVE NAV (home quick links) */

.archive-nav{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:1px;

margin-top:1px;

background:var(--border);

border:1px solid var(--border);
}

.archive-card{

background:var(--panel);

padding:28px 22px;

text-decoration:none;

color:var(--text);

transition:.2s;

position:relative;
}

.archive-card:hover{

background:var(--panel-hover);
}

.icon{

font-family:var(--font-head);

font-size:13px;

font-weight:600;

color:var(--accent-hover);

margin-bottom:14px;

letter-spacing:1px;
}

.archive-card h4{

font-family:var(--font-head);

font-size:17px;

font-weight:600;

margin-bottom:8px;

letter-spacing:.2px;
}

.archive-card p{
    font-size:13.5px;
    color:var(--text-muted);
}

/* MAIN GRID (home) */

.main-grid{

display:grid;

grid-template-columns:1fr 1.4fr 1fr;

gap:1px;

margin-top:40px;

background:var(--border);

border:1px solid var(--border);
}

.about-panel,
.showcase-panel,
.discoveries{

background:var(--panel);

padding:34px;
}

.about-panel h2,
.discoveries h2{

font-family:var(--font-head);

font-size:20px;

font-weight:600;

margin-bottom:26px;

letter-spacing:.3px;

text-transform:uppercase;

color:var(--text-muted);
}

.about-item{

margin-bottom:26px;
}

.about-item h3{

margin-bottom:8px;

font-family:var(--font-head);

font-size:18px;

font-weight:600;

color:var(--text);
}

.about-item p{

font-size:15px;

line-height:1.65;

color:var(--text-muted);
}

.showcase-panel{
    padding:0;
}

.showcase-image{

height:100%;

min-height:460px;

background-size:cover;
background-position:center;
}

.discovery{

padding:16px 0;

border-bottom:1px solid var(--border);
}

.discovery:last-of-type{
    border-bottom:none;
}

.discovery h3{

margin-bottom:6px;

font-family:var(--font-head);

font-size:16px;

font-weight:600;

color:var(--text);
}

.discovery p{
    font-size:14px;
    color:var(--text-muted);
    line-height:1.6;
}

/* BUTTON */

.main-button{

display:inline-block;

margin-top:10px;

padding:12px 24px;

border:1px solid var(--border-strong);

text-decoration:none;

font-family:var(--font-body);

font-size:13px;

font-weight:600;

letter-spacing:.5px;

text-transform:uppercase;

color:var(--text);

transition:.2s;
}

.main-button:hover{

background:var(--accent);

border-color:var(--accent);

color:#fff;
}

/* FOOTER */

footer{

margin-top:60px;

padding:44px 0 30px;

border-top:1px solid var(--border);

text-align:center;
}

footer .footer-links{

display:flex;

justify-content:center;

gap:26px;

margin-bottom:18px;

flex-wrap:wrap;
}

footer .footer-links a{

color:var(--text-muted);

text-decoration:none;

font-size:12.5px;

font-weight:500;

letter-spacing:.5px;

text-transform:uppercase;

transition:.2s;
}

footer .footer-links a:hover{
    color:var(--text);
}

footer p{
    font-size:12px;
    color:var(--text-faint);
    letter-spacing:1px;
}

/* =========================================================
   PAGE INTRO
   ========================================================= */

.page-intro{

    max-width:760px;

    margin:44px 0 6px;
}

.page-intro span.eyebrow{

    display:block;

    font-family:var(--font-body);

    letter-spacing:2.5px;

    font-size:11.5px;

    font-weight:600;

    text-transform:uppercase;

    color:var(--accent-hover);

    margin-bottom:12px;
}

.page-intro p{

    font-size:17px;

    line-height:1.75;

    color:var(--text-muted);
}

/* =========================================================
   CONTENT LAYOUT WITH SIDE SUBMENU
   ========================================================= */

.content-layout{

    display:grid;

    grid-template-columns:250px 1fr;

    gap:32px;

    margin-top:36px;

    align-items:start;
}

.side-submenu{

    position:sticky;

    top:100px;

    background:var(--panel);

    border:1px solid var(--border);
}

.side-submenu h4{

    font-family:var(--font-body);

    letter-spacing:1.5px;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    color:var(--text-faint);

    padding:16px 20px;

    border-bottom:1px solid var(--border);
}

.side-submenu ul{

    list-style:none;
}

.side-submenu li a{

    display:block;

    padding:12px 20px;

    text-decoration:none;

    color:var(--text-muted);

    font-size:14.5px;

    border-left:2px solid transparent;

    transition:.15s;
}

.side-submenu li a:hover,
.side-submenu li a.active{

    color:var(--text);

    border-left:2px solid var(--accent);

    background:var(--accent-soft);
}

.content-main{

    display:flex;

    flex-direction:column;

    gap:36px;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.section-heading{

    display:flex;

    align-items:baseline;

    gap:16px;

    margin-bottom:4px;

    grid-column:1/-1;
}

.section-heading h2{

    font-family:var(--font-head);

    font-size:26px;

    font-weight:600;

    color:var(--text);
}

.section-heading .rule{

    flex:1;

    height:1px;

    background:var(--border);
}

.section-lede{

    font-size:15.5px;

    line-height:1.7;

    color:var(--text-muted);

    max-width:760px;

    margin-bottom:6px;

    grid-column:1/-1;
}

/* =========================================================
   EXPANDABLE CARD GRID
   Cards open in place, span the full grid width, and push
   the remaining cards down — no page reflow tricks required,
   CSS Grid handles it natively via [open]{grid-column:1/-1}.
   ========================================================= */

.box-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:1px;

    background:var(--border);

    border:1px solid var(--border);
}

@media(max-width:1000px){
    .box-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:680px){
    .box-grid{ grid-template-columns:1fr; }
}

.info-box{

    background:var(--panel);

    display:block;

    transition:background .2s;
}

.info-box:not([open]):hover{

    background:var(--panel-hover);
}

.info-box[open]{

    grid-column:1/-1;

    background:var(--panel);
}

.info-box > summary{

    cursor:pointer;

    list-style:none;

    outline:none;

    display:block;
}

.info-box > summary::-webkit-details-marker{

    display:none;
}

.info-box[open] > summary{

    display:grid;

    grid-template-columns:340px 1fr;
}

.info-box[open] > summary .box-image{

    height:100%;

    min-height:280px;
}

@media(max-width:800px){
    .info-box[open] > summary{
        grid-template-columns:1fr;
    }
}

.box-image{

    height:200px;

    background-size:cover;

    background-position:center;

    background-color:var(--bg-soft);

    position:relative;
}

.box-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top, rgba(8,7,6,.35), transparent 55%);
}

.box-body{

    padding:22px 24px 24px;
}

.box-body h3{

    font-family:var(--font-head);

    font-size:19px;

    font-weight:600;

    color:var(--text);

    margin-bottom:9px;

    letter-spacing:.1px;
}

.box-tag{

    display:inline-block;

    font-family:var(--font-body);

    font-size:10.5px;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

    color:var(--accent-hover);

    margin-bottom:10px;
}

.box-body p{

    font-size:14.5px;

    line-height:1.6;

    color:var(--text-muted);
}

.box-facts{

    margin-top:14px;

    padding-top:14px;

    border-top:1px solid var(--border);

    font-size:13px;

    line-height:1.85;

    color:var(--text-muted);
}

.box-facts b{
    color:var(--text);
    font-weight:600;
}

.box-toggle{

    margin-top:16px;

    display:flex;

    align-items:center;

    gap:8px;

    font-family:var(--font-body);

    font-size:12px;

    font-weight:600;

    letter-spacing:.8px;

    text-transform:uppercase;

    color:var(--accent-hover);
}

.box-toggle .toggle-mark{

    display:inline-block;

    font-size:15px;

    line-height:1;

    transition:transform .25s;
}

.info-box[open] .box-toggle .toggle-mark{

    transform:rotate(45deg);
}

.box-toggle .toggle-text-open{
    display:none;
}

.info-box[open] .toggle-text-closed{
    display:none;
}

.info-box[open] .toggle-text-open{
    display:inline;
}

/* EXPANDED CONTENT */

.box-expand{

    display:grid;

    grid-template-columns:1fr 300px;

    gap:32px;

    padding:0 24px 32px;
}

.box-expand .expand-text p{

    font-size:15.5px;

    line-height:1.8;

    color:var(--text-muted);

    margin-bottom:15px;
}

.box-expand .expand-text p:last-child{

    margin-bottom:0;
}

.expand-image{

    min-height:200px;

    background-size:cover;

    background-position:center;

    background-color:var(--bg-soft);

    border:1px solid var(--border);
}

@media(max-width:800px){

    .box-expand{
        grid-template-columns:1fr;
    }

    .expand-image{
        height:220px;
    }

}

/* =========================================================
   TEXT PANEL
   ========================================================= */

.text-panel{

    background:var(--panel);

    border:1px solid var(--border);

    padding:36px 40px;
}

.text-panel h2{

    font-family:var(--font-head);

    font-size:24px;

    font-weight:600;

    color:var(--text);

    margin-bottom:16px;
}

.text-panel p{

    font-size:16px;

    line-height:1.75;

    margin-bottom:14px;

    color:var(--text-muted);
}

.text-panel p:last-child{
    margin-bottom:0;
}

.pill-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;
}

.pill-list span{

    border:1px solid var(--border-strong);

    padding:7px 14px;

    font-size:12.5px;

    font-weight:500;

    letter-spacing:.3px;

    color:var(--text-muted);
}

/* =========================================================
   GALLERY GRID
   ========================================================= */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:1px;

    background:var(--border);

    border:1px solid var(--border);
}

.gallery-item{

    position:relative;

    height:340px;

    background:var(--panel);

    overflow:hidden;
}

.gallery-item img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .5s;
}

.gallery-item:hover img{
    transform:scale(1.05);
}

.gallery-caption{

    position:absolute;

    left:0;right:0;bottom:0;

    padding:18px 20px;

    background:linear-gradient(to top,rgba(8,7,6,.9),transparent);

    font-family:var(--font-head);

    font-size:15px;

    font-weight:600;
}

.gallery-caption span{

    display:block;

    font-family:var(--font-body);

    font-size:11.5px;

    font-weight:500;

    color:var(--text-muted);

    text-transform:uppercase;

    letter-spacing:1px;

    margin-top:4px;
}

/* =========================================================
   INTERACTIVE WORLD MAP
   ========================================================= */

.world-map{

    background:var(--panel);

    border:1px solid var(--border);

    padding:24px;
}

.map-svg{

    width:100%;

    height:auto;

    display:block;
}

.map-region{

    fill:rgba(233,225,213,.03);

    stroke:var(--border-strong);

    stroke-width:1;

    transition:fill .2s;

    cursor:pointer;
}

.map-region:hover{

    fill:var(--accent-soft);
}

.map-label{

    font-family:var(--font-body);

    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

    fill:var(--text-faint);

    pointer-events:none;
}

.map-marker{

    cursor:pointer;
}

.map-marker .marker-ring{

    fill:none;

    stroke:var(--accent);

    stroke-width:1;

    opacity:.5;

    transform-box:fill-box;

    transform-origin:center;

    animation:mapPulse 2.6s ease-out infinite;
}

.map-marker .marker-dot{

    fill:var(--accent);

    stroke:var(--bg);

    stroke-width:2;

    transform-box:fill-box;

    transform-origin:center;

    transition:transform .2s, fill .2s;
}

.map-marker:hover .marker-dot,
.map-marker.active .marker-dot{

    fill:var(--accent-hover);

    transform:scale(1.3);
}

.map-marker.active .marker-ring{

    stroke:var(--accent-hover);

    opacity:.8;
}

@keyframes mapPulse{

    0%{ transform:scale(.55); opacity:.6; }
    100%{ transform:scale(2); opacity:0; }
}

.map-hint{

    margin-top:14px;

    font-family:var(--font-body);

    font-size:11.5px;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:var(--text-faint);

    text-align:center;
}

.map-info{

    margin-top:20px;

    background:var(--panel);

    border:1px solid var(--border);

    display:grid;

    grid-template-columns:280px 1fr;

    min-height:220px;
}

.map-info-image{

    background-size:cover;

    background-position:center;

    background-color:var(--bg-soft);

    min-height:220px;
}

.map-info-body{

    padding:32px 36px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.map-info-body h3{

    font-family:var(--font-head);

    font-size:26px;

    font-weight:600;

    color:var(--text);

    margin:8px 0 12px;
}

.map-info-body p{

    font-size:16px;

    line-height:1.75;

    color:var(--text-muted);
}

@media(max-width:700px){

    .map-info{
        grid-template-columns:1fr;
    }

    .map-info-image{
        height:200px;
    }

}

/* =========================================================
   LANGUAGE PAGE — vocabulary tables
   ========================================================= */

.lang-table{

    width:100%;

    border-collapse:collapse;

    font-size:15px;
}

.lang-table thead th{

    text-align:left;

    font-family:var(--font-body);

    font-size:11px;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

    color:var(--text-faint);

    padding:0 0 12px;

    border-bottom:1px solid var(--border-strong);
}

.lang-table tbody td{

    padding:13px 14px 13px 0;

    border-bottom:1px solid var(--border);

    color:var(--text-muted);

    vertical-align:top;
}

.lang-table tbody tr:last-child td{
    border-bottom:none;
}

.lang-table .word{
    font-family:var(--font-head);
    font-weight:600;
    color:var(--text);
    white-space:nowrap;
}

.lang-table .pron{
    font-style:italic;
    color:var(--text-faint);
    white-space:nowrap;
}

.sound-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

    gap:14px;

    margin-top:20px;
}

.sound-chip{

    border:1px solid var(--border);

    padding:14px 16px;
}

.sound-chip .letter{

    font-family:var(--font-head);

    font-size:20px;

    font-weight:600;

    color:var(--accent-hover);
}

.sound-chip .desc{

    font-size:12.5px;

    color:var(--text-muted);

    margin-top:4px;
}

/* RESPONSIVE */

@media(max-width:1100px){

.archive-nav{
grid-template-columns:repeat(3,1fr);
}

.main-grid{
grid-template-columns:1fr;
}

.content-layout{
    grid-template-columns:1fr;
}

.side-submenu{
    position:relative;
    top:0;
}

}

@media(max-width:768px){

.page{
    padding:0 20px 20px;
}

header{
    margin:0 -20px;
    padding-left:20px;
    padding-right:20px;
    flex-direction:column;
    gap:16px;
}

.hero{
    margin-left:-20px;
    margin-right:-20px;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
gap:18px;
}

.archive-nav{
grid-template-columns:1fr;
}

}