/* ========================================
   Harry Potter Themed Portfolio - CSS
   Created for Ela Slama
======================================== */

:root {
    /* Gryffindor Colors */
    --burgundy: #740001;
    --gold: #d3a625;
    --dark-burgundy: #4a0000;
    --light-gold: #eeba30;
    --cream: #f5f5dc;
    --parchment: #f4e8d0;
    --dark-text: #2c1810;
    --ink-black: #1a1a1a;
    
    /* Shadows & Effects */
    --shadow-sm: 0 2px 8px rgba(116, 0, 1, 0.1);
    --shadow-md: 0 4px 16px rgba(116, 0, 1, 0.2);
    --shadow-lg: 0 8px 32px rgba(116, 0, 1, 0.3);
    --glow-gold: 0 0 20px rgba(211, 166, 37, 0.6);
    
    /* Fonts */
    --font-display: 'Cinzel', serif;
    --font-body: 'IM Fell English', serif;
    --font-text: 'Crimson Text', serif;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-text);
    background-color: var(--ink-black);
    color: var(--cream);
    overflow-x: hidden;
    line-height: 1.7;
    -webkit-tap-highlight-color: rgba(211, 166, 37, 0.25);
}

/* ========================================
   Magical Particles Background
======================================== */
#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: float 8s infinite;
    box-shadow: 0 0 10px var(--gold);
}

@keyframes float {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-100px) translateX(50px) scale(1);
    }
}

/* ========================================
   Custom Cursor Trail
======================================== */
.cursor-trail {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s;
    mix-blend-mode: screen;
}

body:hover .cursor-trail {
    opacity: 0.6;
}

/* ========================================
   Landing Page - Hogwarts Letter
======================================== */
.section-landing {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: linear-gradient(135deg, var(--dark-burgundy) 0%, var(--ink-black) 100%);
}

.section-landing.active {
    display: flex;
}

.letter-container {
    position: relative;
    perspective: 1000px;
}

.envelope {
    width: 400px;
    height: 280px;
    position: relative;
    cursor: pointer;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.envelope:hover {
    transform: translateY(-10px);
}

.envelope-body {
    width: 100%;
    height: 100%;
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    position: relative;
    box-shadow: var(--shadow-lg);
}

.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--cream);
    border-left: 3px solid var(--burgundy);
    border-right: 3px solid var(--burgundy);
    border-top: 3px solid var(--burgundy);
    clip-path: polygon(0 0, 50% 60%, 100% 0);
    transform-origin: top center;
    transition: transform 0.8s;
    z-index: 2;
}

.envelope.opened .envelope-flap {
    transform: rotateX(-180deg);
}

.hogwarts-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--burgundy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 3;
}

.seal-letter {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.letter {
    position: absolute;
    top: -20px;
    left: 0;
    width: 400px;
    min-height: 500px;
    background: var(--parchment);
    border: 2px solid var(--burgundy);
    padding: 40px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s;
    pointer-events: none;
}

.letter.visible {
    opacity: 1;
    transform: translateY(-50px);
    pointer-events: all;
}

.letter-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--burgundy);
    padding-bottom: 20px;
}

.letter-header h1 {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--burgundy);
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(116, 0, 1, 0.2);
}

.letter-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    font-style: italic;
    color: var(--dark-text);
}

.letter-header h2 {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--gold);
    margin-top: 5px;
}

.letter-body {
    font-family: var(--font-body);
    color: var(--dark-text);
    line-height: 1.8;
    margin-bottom: 30px;
}

.welcome-text {
    font-size: 18px;
    margin-bottom: 15px;
}

.letter-body p {
    margin-bottom: 15px;
}

.signature {
    font-style: italic;
    text-align: right;
    margin-top: 20px;
}

.enter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 30px;
    background: var(--burgundy);
    color: var(--gold);
    border: 2px solid var(--gold);
    font-family: var(--font-display);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--shadow-md);
}

.enter-button:hover {
    background: var(--gold);
    color: var(--burgundy);
    transform: translateY(-2px);
    box-shadow: var(--glow-gold);
}

.magic-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ========================================
   Navigation
======================================== */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--burgundy);
    z-index: 1000;
    transition: all 0.3s;
}

#main-nav.hidden {
    transform: translateY(-100%);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--gold);
}

.initials {
    display: inline-block;
    padding: 10px 15px;
    background: var(--burgundy);
    border: 2px solid var(--gold);
    border-radius: 5px;
    box-shadow: var(--shadow-sm);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 24px;
}

.nav-link {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--cream);
    text-decoration: none;
    position: relative;
    padding: 5px 10px;
    transition: color 0.3s;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s;
}

.nav-link:hover {
    color: var(--gold);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.special {
    color: var(--gold);
    font-weight: 600;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: var(--gold);
    transition: all 0.3s;
}

/* ========================================
   Section Content Base Styles
======================================== */
.section-content {
    min-height: 100vh;
    padding: 120px 0 80px;
    position: relative;
    z-index: 10;
}

.section-content.hidden {
    display: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--gold);
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(211, 166, 37, 0.3);
}

.title-underline {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--burgundy), var(--gold), var(--burgundy), transparent);
    margin: 15px auto;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--cream);
    font-style: italic;
    opacity: 0.8;
}

/* ========================================
   About Section - The Sorted Student
======================================== */
#about {
    background: linear-gradient(135deg, var(--ink-black) 0%, var(--dark-burgundy) 100%);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: start;
}

.profile-card {
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    padding: 30px;
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 100px;
}

.profile-image-container {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
}

.magical-border {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid var(--gold);
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

.profile-image {
    width: 100%;
    height: auto;
    display: block;
    border: 4px solid var(--burgundy);
    box-shadow: var(--shadow-md);
}

img.loaded {
    opacity: 1 !important;
}

.house-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: var(--burgundy);
    border: 3px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.house-badge i {
    font-size: 24px;
    color: var(--gold);
}

.profile-details {
    text-align: center;
}

.profile-name {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--burgundy);
    margin-bottom: 10px;
}

.profile-house {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--dark-text);
    font-style: italic;
    margin-bottom: 20px;
}

.profile-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--dark-text);
    font-size: 14px;
}

.stat-item i {
    color: var(--burgundy);
}

.about-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.detail-card {
    background: var(--parchment);
    border: 2px solid var(--burgundy);
    padding: 30px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s;
}

.detail-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-icon {
    width: 60px;
    height: 60px;
    background: var(--burgundy);
    border: 2px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon i {
    font-size: 28px;
    color: var(--gold);
}

.detail-card h4 {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--burgundy);
    margin-bottom: 15px;
}

.detail-card p {
    color: var(--dark-text);
    line-height: 1.7;
}

.certifications-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.certifications-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-text);
}

.certifications-list i {
    color: var(--gold);
}

.languages {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.lang-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--burgundy);
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 25px;
    font-family: var(--font-body);
    font-size: 14px;
}

/* ========================================
   Skills Section - Spellbook of Talents
======================================== */
#skills {
    background: linear-gradient(135deg, var(--dark-burgundy) 0%, var(--ink-black) 100%);
}

.spellbook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.spell-card {
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    padding: 30px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.spell-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(211, 166, 37, 0.2), transparent);
    transition: left 0.5s;
}

.spell-card:hover::before {
    left: 100%;
}

.spell-card:hover {
    transform: translateY(-10px) rotateY(5deg);
    box-shadow: var(--shadow-lg), var(--glow-gold);
}

.spell-icon {
    width: 80px;
    height: 80px;
    background: var(--burgundy);
    border: 3px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s;
}

.spell-card:hover .spell-icon {
    transform: rotate(360deg);
    box-shadow: var(--glow-gold);
}

.spell-icon i {
    font-size: 36px;
    color: var(--gold);
}

.spell-name {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--burgundy);
    margin-bottom: 15px;
}

.spell-description {
    font-family: var(--font-text);
    color: var(--dark-text);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.spell-level {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.level-dot {
    width: 12px;
    height: 12px;
    border: 2px solid var(--burgundy);
    border-radius: 50%;
    transition: all 0.3s;
}

.level-dot.filled {
    background: var(--gold);
    box-shadow: 0 0 10px rgba(211, 166, 37, 0.5);
}

/* ========================================
   Experience Section - Daily Prophet
======================================== */
#experience {
    background: linear-gradient(135deg, var(--ink-black) 0%, var(--dark-burgundy) 100%);
}

.timeline {
    position: relative;
    padding: 40px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--burgundy), var(--gold), var(--burgundy));
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
    position: relative;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-right: 50%;
    padding-right: 40px;
}

.timeline-item:nth-child(even) .timeline-content {
    margin-left: 50%;
    padding-left: 40px;
}

.timeline-marker {
    position: absolute;
    left: 50%;
    top: 30px;
    width: 20px;
    height: 20px;
    background: var(--gold);
    border: 4px solid var(--burgundy);
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(211, 166, 37, 0.2);
    animation: pulse-marker 2s infinite;
}

@keyframes pulse-marker {
    0%, 100% { box-shadow: 0 0 0 4px rgba(211, 166, 37, 0.2); }
    50% { box-shadow: 0 0 0 10px rgba(211, 166, 37, 0.4); }
}

.newspaper-card {
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    padding: 30px;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s;
}

.newspaper-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg), var(--glow-gold);
}

.newspaper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--burgundy);
}

.newspaper-date {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--burgundy);
    font-weight: 600;
}

.company-logo {
    height: 40px;
    object-fit: contain;
}

.experience-title {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--burgundy);
    margin-bottom: 10px;
}

.company-name {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--gold);
    font-style: italic;
    margin-bottom: 15px;
}

.experience-description {
    color: var(--dark-text);
    line-height: 1.7;
    margin-bottom: 20px;
}

.experience-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag {
    padding: 5px 15px;
    background: var(--burgundy);
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 15px;
    font-size: 12px;
    font-family: var(--font-body);
}

/* ========================================
   Published Works - Restricted Section
======================================== */
#works {
    background: linear-gradient(135deg, var(--dark-burgundy) 0%, var(--ink-black) 100%);
}

.books-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.book-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    padding: 40px;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s;
}

.book-card.reverse {
    grid-template-columns: 2fr 1fr;
}

.book-card.reverse .book-cover-container {
    order: 2;
}

.book-card.reverse .book-info {
    order: 1;
}

.book-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg), var(--glow-gold);
}

.book-cover-container {
    position: relative;
    perspective: 1000px;
}

.book-spine {
    position: absolute;
    left: -10px;
    top: 5%;
    width: 10px;
    height: 90%;
    background: linear-gradient(180deg, var(--dark-burgundy), var(--burgundy));
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.book-cover {
    width: 100%;
    height: auto;
    border: 4px solid var(--burgundy);
    box-shadow: var(--shadow-lg);
    transition: transform 0.4s;
    position: relative;
    z-index: 2;
}

.book-card:hover .book-cover {
    transform: rotateY(-5deg) translateX(10px);
}

.book-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(211, 166, 37, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.book-card:hover .book-glow {
    opacity: 1;
}

.book-info {
    color: var(--dark-text);
}

.book-title {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--burgundy);
    margin-bottom: 10px;
}

.book-author {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--gold);
    font-style: italic;
    margin-bottom: 20px;
}

.book-description {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.book-quote {
    background: rgba(116, 0, 1, 0.1);
    border-left: 4px solid var(--burgundy);
    padding: 20px;
    margin: 25px 0;
    position: relative;
}

.book-quote i {
    color: var(--gold);
    font-size: 20px;
}

.book-quote p {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
    margin: 10px 0;
    color: var(--dark-text);
}

.book-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: var(--burgundy);
    color: var(--gold);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 16px;
    border: 2px solid var(--gold);
    transition: all 0.3s;
    box-shadow: var(--shadow-md);
}

.book-link:hover {
    background: var(--gold);
    color: var(--burgundy);
    transform: translateY(-2px);
    box-shadow: var(--glow-gold);
}

/* ========================================
   Marauder's Map Section
======================================== */
#map {
    background: linear-gradient(135deg, var(--ink-black) 0%, var(--dark-burgundy) 100%);
}

.map-container {
    max-width: 1000px;
    margin: 0 auto;
}

.map-activation {
    text-align: center;
    padding: 60px 40px;
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    box-shadow: var(--shadow-lg);
    margin-bottom: 40px;
}

.activation-text {
    font-family: var(--font-body);
    font-size: 24px;
    font-style: italic;
    color: var(--burgundy);
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(116, 0, 1, 0.2);
}

.activation-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 40px;
    background: var(--burgundy);
    color: var(--gold);
    border: 3px solid var(--gold);
    font-family: var(--font-display);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--shadow-md);
}

.activation-button:hover {
    background: var(--gold);
    color: var(--burgundy);
    transform: translateY(-3px);
    box-shadow: var(--glow-gold);
}

.marauder-map {
    display: none;
    opacity: 0;
    transition: opacity 1s;
}

.marauder-map.active {
    display: block;
    animation: fadeInMap 2s forwards;
}

@keyframes fadeInMap {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.map-parchment {
    background: linear-gradient(135deg, #e8dcc8 0%, #f5f1e8 50%, #e8dcc8 100%);
    background-image: 
        repeating-linear-gradient(0deg, rgba(116, 0, 1, 0.02) 0px, transparent 2px, transparent 3px, rgba(116, 0, 1, 0.02) 4px),
        repeating-linear-gradient(90deg, rgba(116, 0, 1, 0.02) 0px, transparent 2px, transparent 3px, rgba(116, 0, 1, 0.02) 4px);
    border: 4px solid var(--burgundy);
    padding: 60px;
    box-shadow: var(--shadow-lg);
    position: relative;
    min-height: 700px;
}

.tunisia-map {
    width: 100%;
    height: auto;
    filter: sepia(30%);
}

.tunisia-map * {
    fill: rgba(245, 241, 232, 1) !important;
    opacity: 1 !important;
}

.map-outline {
    fill: var(--parchment);
    stroke: var(--burgundy);
    stroke-width: 3;
    filter: drop-shadow(3px 3px 5px rgba(116, 0, 1, 0.3));
    animation: drawMap 3s ease-in-out;
}

@keyframes drawMap {
    0% { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
    100% { stroke-dasharray: 1000; stroke-dashoffset: 0; }
}

.city-marker {
    cursor: pointer;
    transition: all 0.3s;
}

.city-marker:hover .city-dot {
    r: 12;
    fill: var(--gold);
}

.city-dot {
    fill: var(--burgundy);
    stroke: var(--gold);
    stroke-width: 2;
    transition: all 0.3s;
    animation: pulse-city 2s infinite;
}

@keyframes pulse-city {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.city-label {
    font-family: var(--font-body);
    font-size: 12px;
    fill: var(--dark-text);
    pointer-events: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.footprints-path {
    stroke-dasharray: 5, 5;
    animation: drawFootprints 10s linear infinite;
}

@keyframes drawFootprints {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

.city-info-panel {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 300px;
    background: var(--cream);
    border: 3px solid var(--burgundy);
    padding: 25px;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 10;
}

.city-info-panel.active {
    display: block;
    animation: slideIn 0.5s;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-50%) translateX(20px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.close-info {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: var(--burgundy);
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.close-info:hover {
    transform: rotate(90deg);
    background: var(--gold);
    color: var(--burgundy);
}

.city-info-title {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--burgundy);
    margin-bottom: 15px;
}

.city-info-description {
    font-family: var(--font-text);
    color: var(--dark-text);
    line-height: 1.7;
    font-size: 14px;
}

.map-footer {
    text-align: center;
    margin-top: 30px;
}

.deactivation-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: var(--burgundy);
    color: var(--gold);
    border: 2px solid var(--gold);
    font-family: var(--font-display);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--shadow-md);
}

.deactivation-button:hover {
    background: var(--gold);
    color: var(--burgundy);
    transform: translateY(-2px);
    box-shadow: var(--glow-gold);
}

/* ========================================
   Footer
======================================== */
.main-footer {
    background: var(--ink-black);
    border-top: 3px solid var(--burgundy);
    padding: 60px 0 30px;
    position: relative;
    z-index: 10;
}

.main-footer.hidden {
    display: none;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3, .footer-section h4 {
    font-family: var(--font-display);
    color: var(--gold);
    margin-bottom: 15px;
}

.footer-section p, .footer-section ul {
    color: var(--cream);
    line-height: 1.8;
}

.footer-section ul {
    list-style: none;
}

.footer-section a {
    color: var(--cream);
    text-decoration: none;
    transition: color 0.3s;
    cursor: pointer;
    display: block;
    padding: 5px 0;
}

.footer-section a:hover {
    color: var(--gold);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--burgundy);
}

.footer-bottom p {
    color: var(--cream);
    font-size: 14px;
    opacity: 0.8;
}

/* ========================================
   Responsive Design
======================================== */
@media (max-width: 968px) {
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(26, 26, 26, 0.98);
        flex-direction: column;
        padding: 20px;
        gap: 15px;
        display: none;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .profile-card {
        position: static;
    }
    
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        margin-left: 60px;
        margin-right: 0;
        padding-left: 20px;
        padding-right: 0;
    }
    
    .timeline-marker {
        left: 20px;
    }
    
    .book-card, .book-card.reverse {
        grid-template-columns: 1fr;
    }
    
    .book-card.reverse .book-cover-container,
    .book-card.reverse .book-info {
        order: initial;
    }
    
    .city-info-panel {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 36px;
    }
    
    .letter, .envelope {
        width: 90%;
        max-width: 350px;
    }
    
    .spellbook-grid {
        grid-template-columns: 1fr;
    }
    
    .map-parchment {
        padding: 20px;
    }
}

/* ========================================
   Utility Classes
======================================== */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.fade-in {
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   Marauder's Map SVG Regions + Tooltip
======================================== */
.tunisia-map .region{
    fill: rgba(245, 241, 232, 1) !important;
    stroke: var(--burgundy);
    stroke-width: 1.4;
    transition: fill 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
    cursor: pointer;
    opacity: 1 !important;
    filter: drop-shadow(2px 2px 4px rgba(116, 0, 1, 0.18));
}

.tunisia-map .region:hover{
    fill: rgba(211, 166, 37, 0.25);
    filter: drop-shadow(0 0 10px rgba(211, 166, 37, 0.45));
    opacity: 1;
}

.tunisia-map .region.is-selected{
    fill: rgba(211, 166, 37, 0.35);
    filter: drop-shadow(0 0 14px rgba(211, 166, 37, 0.55));
    opacity: 1;
}

.map-tooltip{
    position: absolute;
    display: none;
    z-index: 20;
    max-width: 260px;
    padding: 10px 12px;
    background: rgba(245, 241, 232, 0.92);
    border: 2px solid var(--burgundy);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.map-tooltip .tt-title{
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--burgundy);
    margin-bottom: 4px;
}

.map-tooltip .tt-desc{
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--dark-text);
    line-height: 1.35;
}

/* Make the big SVG fit better inside parchment */
.map-parchment .tunisia-map{
    max-width: 720px;
    margin: 0 auto;
    display: block;
}


@keyframes drawRegion{
    from { stroke-dashoffset: 9999; opacity: 0.35; }
    to { stroke-dashoffset: 0; opacity: 0.95; }
}

/* ========================================
   English build — new components
======================================== */

/* --- Certifications as links --- */
.certifications-list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-text);
    text-decoration: none;
    transition: color 0.25s;
}
.certifications-list a:hover { color: var(--burgundy); }
.certifications-list a:hover i { transform: scale(1.15); }
.certifications-list a i { transition: transform 0.25s; }

/* --- Language badges with CEFR level --- */
.lang-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.3;
}
.lang-level {
    font-size: 11px;
    color: var(--light-gold);
    font-family: var(--font-text);
    opacity: 0.9;
}

/* --- Experience: achievement bullets & logoless icon --- */
.experience-achievements {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.experience-achievements li {
    position: relative;
    padding-left: 24px;
    color: var(--dark-text);
    line-height: 1.6;
    font-size: 15px;
}
.experience-achievements li::before {
    content: '\2726';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gold);
    font-size: 14px;
}
.company-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--burgundy);
    border: 2px solid var(--gold);
}
.company-logo-icon i { color: var(--gold); font-size: 20px; }

/* --- Experience: press links & video embed --- */
.press-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.press-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--burgundy);
    text-decoration: none;
    border: 1px solid var(--burgundy);
    border-radius: 20px;
    padding: 6px 14px;
    transition: all 0.25s;
}
.press-link:hover { background: var(--burgundy); color: var(--gold); }
.video-embed {
    position: relative;
    padding-top: 56.25%;
    margin: 0 0 18px;
    border: 2px solid var(--burgundy);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========================================
   Automation Grimoire — GoHighLevel
======================================== */
#grimoire {
    background: linear-gradient(135deg, var(--dark-burgundy) 0%, var(--ink-black) 100%);
}
.grimoire-intro {
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: center;
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.7;
}
.grimoire-intro strong { color: var(--gold); }

.grimoire-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}
.grim-stat {
    background: linear-gradient(160deg, var(--burgundy), var(--dark-burgundy));
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 24px 18px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s;
}
.grim-stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), var(--glow-gold); }
.grim-num {
    display: block;
    font-family: var(--font-display);
    font-size: 42px;
    line-height: 1;
    color: var(--gold);
    text-shadow: var(--glow-gold);
}
.grim-label {
    display: block;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--cream);
    line-height: 1.4;
}

.grimoire-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
}
.grim-shot {
    margin: 0;
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    padding: 14px;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}
.grim-shot:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), var(--glow-gold); }
.grim-shot a {
    display: block;
    border: 1px solid rgba(44, 24, 16, 0.15);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.grim-shot img { width: 100%; height: auto; display: block; }
.grim-shot figcaption {
    margin-top: 12px;
    font-family: var(--font-text);
    color: var(--dark-text);
    font-size: 13.5px;
    line-height: 1.5;
}
.grim-shot-wide { grid-column: 1 / -1; }
.grim-shot-wide a { max-width: 560px; }
.grim-note { color: var(--burgundy); font-style: italic; opacity: 0.85; }

/* ========================================
   Projects — Enchanted Artifacts
======================================== */
#projects {
    background: linear-gradient(135deg, var(--dark-burgundy) 0%, var(--ink-black) 100%);
}
.artifacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.artifact-card {
    display: flex;
    flex-direction: column;
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    padding: 30px;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.artifact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(211, 166, 37, 0.2), transparent);
    transition: left 0.5s;
}
.artifact-card:hover::before { left: 100%; }
.artifact-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg), var(--glow-gold);
}
.artifact-icon {
    width: 70px;
    height: 70px;
    background: var(--burgundy);
    border: 3px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.artifact-icon i { font-size: 30px; color: var(--gold); }
.artifact-name {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--burgundy);
    margin-bottom: 12px;
    line-height: 1.3;
}
.artifact-description {
    font-family: var(--font-text);
    color: var(--dark-text);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1;
}
.artifact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--gold);
    background: var(--burgundy);
    padding: 8px 16px;
    border: 2px solid var(--gold);
    align-self: flex-start;
    transition: all 0.3s;
}
.artifact-card:hover .artifact-link { background: var(--gold); color: var(--burgundy); }

/* ========================================
   Recommendations — Words from Fellow Wizards
======================================== */
#recommendations {
    background: linear-gradient(135deg, var(--ink-black) 0%, var(--dark-burgundy) 100%);
}
.portraits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.portrait-card {
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    padding: 30px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}
.portrait-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg), var(--glow-gold);
}
.portrait-quote {
    font-family: var(--font-text);
    font-style: italic;
    color: var(--dark-text);
    line-height: 1.7;
    margin-bottom: 20px;
    flex: 1;
}
.portrait-quote i { color: var(--gold); margin-right: 8px; }
.portrait-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 2px solid var(--burgundy);
    padding-top: 16px;
}
.portrait-name {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--burgundy);
    font-weight: 600;
}
.portrait-title {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--dark-text);
    font-style: italic;
}
.portrait-letter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--gold);
    background: var(--burgundy);
    border: 1px solid var(--gold);
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    align-self: flex-start;
    transition: all 0.3s;
}
.portrait-letter:hover { background: var(--gold); color: var(--burgundy); }

/* ========================================
   Education — Academy & Order of the Phoenix
======================================== */
#education {
    background: linear-gradient(135deg, var(--dark-burgundy) 0%, var(--ink-black) 100%);
}
.education-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}
.edu-card {
    background: var(--parchment);
    border: 2px solid var(--burgundy);
    padding: 30px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s;
}
.edu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.edu-card .card-icon { margin-bottom: 16px; }
.edu-date {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--gold);
    background: var(--burgundy);
    padding: 4px 12px;
    border-radius: 12px;
    margin-bottom: 12px;
}
.edu-card h4 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--burgundy);
    margin-bottom: 8px;
}
.edu-place { color: var(--dark-text); font-style: italic; }
.edu-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--burgundy);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    border-bottom: 1px solid var(--gold);
    transition: color 0.25s;
}
.edu-link:hover { color: var(--dark-burgundy); }
.order-block {
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    padding: 30px;
    box-shadow: var(--shadow-md);
}
.order-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--burgundy);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.order-title i { color: var(--gold); }
.volunteer-list { list-style: none; display: flex; flex-direction: column; }
.volunteer-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 20px;
    row-gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(116, 0, 1, 0.2);
}
.volunteer-list li:last-child { border-bottom: none; }
.vol-role {
    grid-column: 1; grid-row: 1;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--burgundy);
}
.vol-org {
    grid-column: 1; grid-row: 2;
    font-family: var(--font-text);
    color: var(--dark-text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.vol-date {
    grid-column: 2; grid-row: 1;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--gold);
    background: var(--burgundy);
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
    align-self: start;
}
.vol-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--burgundy);
    text-decoration: underline;
    text-decoration-color: var(--gold);
}
.vol-link:hover { color: var(--dark-burgundy); }

/* ========================================
   Contact — Owl Post
======================================== */
#contact {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at bottom, #321b35 0%, #090a0f 100%);
}
.starfield {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
#contact .container { position: relative; z-index: 1; }
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}
.contact-details { color: var(--cream); }
.contact-intro {
    font-family: var(--font-body);
    font-size: 20px;
    margin-bottom: 24px;
    line-height: 1.6;
}
.contact-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; flex-wrap: wrap; }
.contact-list i { color: var(--gold); width: 22px; text-align: center; }
.contact-list a {
    color: var(--cream);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.25s;
}
.contact-list a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.owl-form {
    background: var(--parchment);
    border: 3px solid var(--burgundy);
    padding: 30px;
    box-shadow: var(--shadow-lg);
}
.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-row label { font-family: var(--font-display); font-size: 14px; color: var(--burgundy); }
.form-row input,
.form-row textarea {
    font-family: var(--font-text);
    font-size: 15px;
    padding: 12px 14px;
    border: 2px solid var(--burgundy);
    background: #fffdf6;
    color: var(--dark-text);
    border-radius: 6px;
    width: 100%;
    resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus {
    outline: 3px solid var(--gold);
    outline-offset: 1px;
    border-color: var(--gold);
}
.owl-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 30px;
    background: var(--burgundy);
    color: var(--gold);
    border: 2px solid var(--gold);
    font-family: var(--font-display);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}
.owl-submit:hover:not(:disabled) {
    background: var(--gold);
    color: var(--burgundy);
    box-shadow: var(--glow-gold);
}
.owl-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.owl-status { margin-top: 14px; font-family: var(--font-body); font-size: 15px; min-height: 1.2em; }
.owl-status.error { color: var(--burgundy); }
.owl-status.success { color: #2e7d32; }
.owl-spinner-wrap { display: flex; justify-content: center; margin-top: 20px; }

/* Spinner (Uiverse.io by xXJollyHAKERXx) */
.spinner {
    background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
    width: 70px;
    height: 70px;
    animation: spinning82341 1.7s linear infinite;
    text-align: center;
    border-radius: 50px;
    filter: blur(1px);
    box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);
}
.spinner1 {
    background-color: rgb(36, 36, 36);
    width: 70px;
    height: 70px;
    border-radius: 50px;
    filter: blur(10px);
}
@keyframes spinning82341 {
    to { transform: rotate(360deg); }
}

/* ========================================
   Responsive — new sections
======================================== */
/* Keep the 9-item nav on one line on mid-width desktops */
@media (min-width: 969px) and (max-width: 1140px) {
    .nav-menu { gap: 15px; }
    .nav-link { font-size: 15px; padding: 5px 6px; }
}
@media (max-width: 968px) {
    .contact-content { grid-template-columns: 1fr; }
    .volunteer-list li { grid-template-columns: 1fr; }
    .vol-date { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    #stars, #stars2, #stars3, .spinner { animation: none !important; }
}

/* ========================================
   Phone / iPhone optimisations
======================================== */

/* iOS Safari zooms into any input whose font-size < 16px on focus. */
@media (max-width: 768px) {
    .form-row input,
    .form-row textarea { font-size: 16px; }

    /* Safe-area (notch / Dynamic Island / home indicator) */
    .nav-container { padding-top: max(15px, env(safe-area-inset-top)); }
    .main-footer { padding-bottom: env(safe-area-inset-bottom); }
    .container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    /* Full-height sections should track the visible viewport on iOS */
    .section-content { min-height: 100dvh; }
}

/* Phones (≤ 480px) — tighten spacing so nothing feels cramped or overflows */
@media (max-width: 480px) {
    .section-content { padding: 90px 0 56px; }
    .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .section-header { margin-bottom: 40px; }
    .section-title { font-size: 30px; line-height: 1.15; }
    .section-subtitle { font-size: 15px; }

    /* One column on phones — avoids minmax() tracks wider than the screen */
    .artifacts-grid,
    .portraits-grid,
    .education-grid,
    .spellbook-grid,
    .grimoire-gallery { grid-template-columns: 1fr; }

    /* Keep the stat tiles two-up on phones */
    .grimoire-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .grim-num { font-size: 34px; }
    .grimoire-intro { font-size: 16px; }

    /* Nav dropdown a touch tighter */
    .nav-container { padding-left: 18px; padding-right: 18px; }

    /* Cards: reduce inner padding to reclaim width */
    .detail-card,
    .spell-card,
    .newspaper-card,
    .artifact-card,
    .portrait-card,
    .edu-card,
    .order-block,
    .owl-form { padding: 22px; }

    /* Experience timeline: bring the rail in so cards get more room */
    .timeline::before { left: 14px; }
    .timeline-marker { left: 14px; }
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        margin-left: 40px;
        margin-right: 0;
        padding-left: 14px;
        padding-right: 0;
    }
    .newspaper-header { flex-wrap: wrap; gap: 10px; }
    .experience-title { font-size: 21px; }
    .artifact-name { font-size: 18px; }

    /* Book cards read better stacked and centred */
    .book-card, .book-card.reverse { padding: 24px; text-align: center; }
    .book-cover-container { margin: 0 auto; }
    .book-quote { text-align: left; }
    .book-link { align-self: center; }

    /* Contact: comfortable single column */
    .contact-intro { font-size: 18px; }
    .contact-list li { font-size: 15px; }

    /* Map fits within the parchment on small screens */
    .map-parchment .tunisia-map { width: 100%; height: auto; }
    .activation-button, .deactivation-button { width: 100%; justify-content: center; }

    /* Footer bottom clears the home indicator */
    .footer-bottom { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* Very small phones (≤ 360px, e.g. iPhone SE / mini) */
@media (max-width: 360px) {
    .section-title { font-size: 26px; }
    .letter-header h1 { font-size: 26px; }
    .detail-card, .spell-card, .newspaper-card, .artifact-card,
    .portrait-card, .edu-card, .order-block, .owl-form { padding: 18px; }
}