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

   ---------------------------------------------------------
   HOW TO CUSTOMIZE THIS FILE — QUICK GUIDE
   ---------------------------------------------------------

   1) COLORS
      All colors live as CSS variables in the ":root{...}" block
      just below this comment (dark theme), and again in the
      "html[data-theme=\"light\"]{...}" block right after it
      (light theme). Change a color ONCE in each of those two
      blocks and it updates everywhere on every page, because
      every rule in this file references var(--name) instead
      of a hard-coded color. Each variable is explained inline
      below.

   2) FONTS
      Two fonts are loaded on the @import line directly under
      this comment: "Fraunces" (the serif used for all
      headings — h1/h2/h3, box titles, logo) and "Inter" (the
      sans-serif used for body text, nav, tags, buttons). To
      change either font:
        a. Swap the font name(s) in the @import URL below to a
           font from https://fonts.google.com
        b. Update --font-head and/or --font-body inside :root
           to the new font name.
      Font SIZE for a given element (e.g. hero title, box
      heading) is set individually where that element is
      styled further down this file — search for the class
      name (e.g. ".hero-content h2") to adjust just that one.

   3) BOX / HEADER BACKGROUND IMAGES
      Background images for the hero banner at the top of each
      page and for every expandable box are NOT set in this
      CSS file — they're set per-page, directly in the HTML,
      using a style="background-image:url('...')" attribute.
      This file only controls how those images are framed
      (size, position, height, overlay darkness). See the
      ".hero", ".box-image", and ".expand-image" sections
      further down for those framing rules. Open any .html
      file and search for "background-image" to find every
      spot you can drop in your own picture — each one has a
      comment above it telling you what it's for.
   ========================================================= */

@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{

/* ---- BACKGROUNDS ---- */
--bg:#0c0b0a;              /* page background (behind everything) */
--bg-soft:#131110;         /* slightly lighter background, used behind empty image boxes */

/* ---- PANELS (box/card backgrounds) ---- */
--panel:#161412;           /* background of boxes, cards, the side menu, text panels */
--panel-hover:#1c1a17;     /* box background on mouse hover */

/* ---- BORDERS / DIVIDER LINES ---- */
--border:rgba(233,225,213,.10);         /* thin, subtle lines between boxes/sections */
--border-strong:rgba(233,225,213,.20);  /* slightly more visible lines (pills, buttons) */

/* ---- TEXT COLORS ---- */
--text:#e7e1d6;         /* main/heading text color */
--text-muted:#a79e91;   /* paragraph / body text color */
--text-faint:#787064;   /* smallest, least important text (labels, hints) */

/* ---- ACCENT (the rust-red highlight color) ---- */
--accent:#b1402a;                       /* buttons, dividers, active nav underline */
--accent-hover:#c9503a;                 /* tags, links, hover state of accent elements */
--accent-soft:rgba(177,64,42,.14);      /* faint accent tint, e.g. active side-menu row */
--accent-border:rgba(177,64,42,.4);     /* accent-colored border, currently unused directly */

/* ---- FONTS ----
   Change the font NAME here to switch fonts site-wide.
   Remember to also update the @import line above if you pick
   a font that isn't Fraunces/Inter from Google Fonts. */
--font-head:'Fraunces', Georgia, serif;                              /* all headings + box titles */
--font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  /* body text, nav, buttons */

/* ---- HEADER BAR ---- */
--header-bg:rgba(12,11,10,.86);  /* the sticky top nav bar's background + transparency */

}

/* =========================================================
   LIGHT THEME
   Toggled via [data-theme="light"] on <html>, see site.js.
   This is the SAME list of variables as the :root block
   above, just with light-mode values. If you change a color
   up in :root, come down here and set its light-mode
   equivalent too, or the theme toggle will look inconsistent.
   ========================================================= */

html[data-theme="light"]{

/* ---- BACKGROUNDS ---- */
--bg:#f4efe6;
--bg-soft:#ece5d8;

/* ---- PANELS (box/card backgrounds) ---- */
--panel:#fffdfa;
--panel-hover:#f6f1e9;

/* ---- BORDERS / DIVIDER LINES ---- */
--border:rgba(35,29,22,.10);
--border-strong:rgba(35,29,22,.22);

/* ---- TEXT COLORS ---- */
--text:#241f19;
--text-muted:#5c5347;
--text-faint:#8a8072;

/* ---- ACCENT (the rust-red highlight color) ---- */
--accent:#b1402a;
--accent-hover:#c9503a;
--accent-soft:rgba(177,64,42,.14);
--accent-border:rgba(177,64,42,.4);

/* ---- HEADER BAR ---- */
--header-bg:rgba(244,239,230,.88);

}

html[data-theme="light"] body{
    background-image:radial-gradient(circle at 15% 0%, rgba(168,58,38,.05), transparent 45%);
}

html[data-theme="light"] .logo-symbol{
    color:#fff;
}

html[data-theme="light"] .map-region{
    fill:rgba(35,29,22,.03);
}

html[data-theme="light"] .box-image::after{
    background:linear-gradient(to top, rgba(35,29,22,.20), transparent 55%);
}

html[data-theme="light"] .hero-overlay{

    background:
    linear-gradient(
        100deg,
        rgba(244,239,230,.90) 5%,
        rgba(244,239,230,.72) 40%,
        rgba(244,239,230,.45) 75%,
        rgba(244,239,230,.76) 100%
    );
}

*{
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:var(--header-bg);

backdrop-filter:blur(10px);

margin:0 -40px;

transition:background .2s;
}

.header-right{

display:flex;

align-items:center;

gap:32px;
}

.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);
}

/* THEME TOGGLE BUTTON */

.theme-toggle{

    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    background:transparent;

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

    color:var(--text-muted);

    font-size:16px;

    line-height:1;

    cursor:pointer;

    transition:.2s;
}

.theme-toggle:hover{

    background:var(--accent);

    border-color:var(--accent);

    color:#fff;
}

.theme-icon-light{ display:none; }

.theme-toggle.is-light .theme-icon-dark{ display:none; }
.theme-toggle.is-light .theme-icon-light{ display:inline; }

@media(max-width:900px){

    .header-right{
        gap:20px;
    }

}

@media(max-width:768px){

    .header-right{
        width:100%;
        justify-content:center;
        flex-direction:column;
        gap:16px;
    }

}

/* =========================================================
   HERO (the big banner at the top of every page)
   The actual image is set in the HTML with a
   style="background-image:url('...')" attribute on the
   <section class="hero page-hero"> tag — this CSS block only
   controls its size/shape. min-height controls how tall the
   banner is; the .page-hero rule below makes inner pages
   (everything except the homepage) shorter than the homepage
   hero. The dark gradient over the image is set separately in
   .hero-overlay just below.
   ========================================================= */

.hero{

    position:relative;

    min-height:520px;      /* homepage hero height */

    display:flex;

    align-items:center;

    margin:0 -40px;

    overflow:hidden;

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

.hero.page-hero{
    min-height:280px;      /* inner-page hero height (Species, World, etc.) */
}

/* Darkens the hero background image so the white heading text
   stays readable. The four numbers ending in a percent are how
   far across the banner each shade reaches; the ",.94" / ",.78"
   etc. numbers are opacity (0 = see-through, 1 = solid black).
   If your custom image is busy or light-colored, raise these
   opacity numbers a bit for better text contrast. */
.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:var(--text);

    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:1px -40px 0;

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:40px -40px 0;

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;
}

/* Large decorative image panel on the homepage, set in
   index.html with style="background-image:url('...')" on the
   <div class="showcase-image">. */
.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);
}

/* Modifier: puts the submenu on the right instead of the left.
   Use by adding class="content-layout right-submenu" to the
   wrapper, and placing .content-main before .side-submenu in
   the HTML (see species.html). */
.content-layout.right-submenu{
    grid-template-columns:1fr 250px;
}

.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 (the picture shown on a collapsed/closed card)
   Set the actual picture per-box in the HTML, e.g.:
     <div class="box-image" style="background-image:url('assets/your-image.jpg');">
   If you leave the style attribute off (or the url empty),
   the box just shows the plain --bg-soft color underneath —
   that's fine, it's not required to have an image on every box.
   ========================================================= */

.box-image{

    height:200px;                    /* how tall the image area is when the card is closed */

    background-size:cover;

    background-position:center;

    background-color:var(--bg-soft); /* shown if no image is set */

    position:relative;
}

/* Subtle dark fade at the bottom of the box image, purely
   decorative — safe to delete this whole rule if you don't
   want it. */
.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;
}

/* Picture shown beside the text once a card is OPENED/expanded.
   Set it the same way as .box-image, e.g.:
     <div class="expand-image" style="background-image:url('assets/your-image-full.jpg');">
   This can be the same image as the box-image, or a different,
   larger one — entirely up to you. */
.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
   The map is now a plain picture (.map-image) with small round
   marker buttons (.map-marker) placed on top of it. Each
   marker's position is set with inline "left"/"top" percentages
   in the HTML, not here — see the comment above the markers in
   world.html for how to move or add one. This CSS only controls
   how the image and dots look.
   ========================================================= */

/* Places the map and its region-info panel side by side. The
   map takes a fixed column (560px below — change that number to
   resize the map) and the info panel fills the rest of the row.
   No align-items here (defaults to stretch) so the info panel
   grows to match the map's full height. */
.map-layout{

    display:grid;

    grid-template-columns:560px 1fr;

    gap:24px;
}

.world-map{
 
    background:var(--panel);
 
    border:1px solid var(--border);
 
    padding:24px;
}
 
/* The map picture itself. Change aspect-ratio if you swap in an
   image with different proportions than a square (width/height) —
   e.g. use 16/9 for a wide map, 3/4 for a tall one. */
.map-image{
 
    position:relative;
 
    width:100%;
 
    aspect-ratio:3/4;
 
    background-size:cover;
 
    background-position:center;
 
    border:1px solid var(--border-strong);
 
    overflow:hidden;
}
 
/* Each marker is a small invisible button  sized 28x28px, centred
   exactly on its left/top point (the negative margin does the
   centring so the coordinates line up with the visible dot). */
.map-marker{
 
    position:absolute;
 
    top:0;
    left:0;
 
    width:28px;
    height:28px;
 
    margin:-14px 0 0 -14px;
 
    padding:0;
 
    border:none;
    background:none;
 
    cursor:pointer;
}
 
.map-marker .marker-ring{
 
    position:absolute;
 
    inset:0;
 
    border:1px solid var(--accent);
 
    border-radius:50%;
 
    opacity:.5;
 
    animation:mapPulse 2.6s ease-out infinite;
}
 
.map-marker .marker-dot{
 
    position:absolute;
 
    top:50%;
    left:50%;
 
    width:12px;
    height:12px;
 
    margin:-6px 0 0 -6px;
 
    border-radius:50%;
 
    background:#ffcbb5;
 
    border:2px solid var(--bg);
 
    transition:transform .2s, background .2s;
}
 
.map-marker:hover .marker-dot,
.map-marker.active .marker-dot{
 
    background:var(--accent-hover);
 
    transform:scale(1.3);
}
 
.map-marker.active .marker-ring{
 
    border-color: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:0;
 
    background:var(--panel);
 
    border:1px solid var(--border);
 
    display:flex;
 
    flex-direction:column;
 
    min-height:220px;
}
 
.map-info-image{
 
    background-size:cover;
 
    background-position:center;
 
    background-color:var(--bg-soft);
 
    height:300px;
 
    flex-shrink:0;
}
 
.map-info-body{
 
    padding:32px 36px;
 
    display:flex;
 
    flex-direction:column;
 
    justify-content:center;
 
    flex:1;
}
 
.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:900px){

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

    .world-map{
        max-width:420px;

        margin:0 auto;
    }

}

@media(max-width:700px){
 
    .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;
}

/* =========================================================
   IMAGE LIGHTBOX
   ========================================================= */

.gallery-item img{
    cursor:zoom-in;
}

.expand-image,
.map-info-image{
    cursor:zoom-in;
}

.info-box[open] .box-image{
    cursor:zoom-in;
}

.lightbox-overlay{

    position:fixed;

    inset:0;

    z-index:999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:48px;

    background:rgba(6,5,4,.92);

    opacity:0;

    visibility:hidden;

    transition:opacity .25s ease;
}

.lightbox-overlay.active{

    opacity:1;

    visibility:visible;
}

.lightbox-img{

    max-width:100%;

    max-height:100%;

    box-shadow:0 30px 80px rgba(0,0,0,.55);

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

.lightbox-close{

    position:absolute;

    top:24px;

    right:28px;

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:transparent;

    border:1px solid rgba(255,255,255,.3);

    color:#fff;

    font-size:26px;

    line-height:1;

    cursor:pointer;

    transition:.2s;
}

.lightbox-close:hover{

    background:rgba(255,255,255,.15);
}

body.lightbox-lock{
    overflow:hidden;
}

/* 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;
margin-left:-20px;
margin-right:-20px;
}

.main-grid{
margin-left:-20px;
margin-right:-20px;
}

}