/* ═══════════════════════════════════════════════════════════════════════════
   lailajhane.com — nocturnal · diaristic · hand-made
   Shared design system. Linked by every page. Mirrors index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
    --font-display: 'IM Fell English', Georgia, 'Times New Roman', serif;
    --font-drawn: 'Caveat Brush', 'Marker Felt', cursive;
    --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-mono: 'Anonymous Pro', 'Courier New', ui-monospace, monospace;

    --ink: oklch(94% 0.01 80);
    --ink-dim: oklch(72% 0.02 75);
    --ink-fade: oklch(52% 0.015 75);
    --bg: oklch(11% 0.01 60);
    --bg-raised: oklch(16% 0.012 60);
    --edge: oklch(28% 0.01 60);

    --lamp: oklch(82% 0.14 78);
    --moss: oklch(68% 0.13 140);
    --cobalt: oklch(62% 0.15 250);

    --glass: rgba(30, 26, 22, 0.72);
    --glass-edge: rgba(255, 255, 255, 0.12);

    --measure: 65ch;
}

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
}

/* Ambient grain — warm atmosphere, not decoration */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a { color: inherit; }

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

::selection { background: var(--lamp); color: var(--bg); }

/* ══════════════════════ STATUSBAR — sticky, shared across pages ══════════════════════ */
.statusbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(17, 14, 11, 0.78);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--edge);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0.55rem clamp(1rem, 3vw, 2rem);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-fade);
}
.statusbar .clock {
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.statusbar .clock .dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lamp);
    box-shadow: 0 0 8px var(--lamp);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.statusbar .brand {
    justify-self: center;
    color: var(--ink);
    font-family: var(--font-mono);
    letter-spacing: 0.2em;
    text-decoration: none;
}
.statusbar nav {
    display: flex;
    gap: clamp(0.8rem, 2vw, 1.4rem);
    flex-wrap: wrap;
    justify-self: end;
    align-items: center;
}
.statusbar nav a {
    color: var(--ink-dim);
    text-decoration: none;
    transition: color 0.2s;
}
.statusbar nav a:hover,
.statusbar nav a[aria-current="page"],
.statusbar nav a.current {
    color: var(--lamp);
}

@media (max-width: 780px) {
    .statusbar { grid-template-columns: 1fr auto; gap: 0.75rem; }
    .statusbar .clock { display: none; }
    .statusbar .brand { justify-self: start; }
    .statusbar nav { font-size: 0.65rem; gap: 0.85rem; }
}
@media (max-width: 480px) {
    .statusbar nav a:nth-child(n+5) { display: none; }
}

/* Hide legacy header/nav/mobile overlay wholesale — replaced by .statusbar.
   Keeps legacy pages functional even before markup swap. */
body > header:not(.page-header),
.mobile-nav-overlay,
.mobile-menu-toggle,
.main-nav { display: none !important; }
body > header.statusbar { display: grid !important; }

/* ══════════════════════ MAIN / CONTENT WRAPPERS ══════════════════════ */
main {
    display: block;
    min-height: 60vh;
}

.content-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.section {
    padding: 4rem 0 3rem;
}

/* ══════════════════════ PAGE HEADS (page-title / page-subtitle / section-heading) ══════════════════════ */
.page-title,
h1.page-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw + 0.5rem, 3.8rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin: 0 0 1rem;
    text-align: left;
    text-transform: none;
}

.page-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(1.05rem, 1.4vw + 0.4rem, 1.35rem);
    color: var(--ink-dim);
    max-width: 64ch;
    margin: 0 0 3rem;
    line-height: 1.55;
    text-align: left;
    letter-spacing: 0;
}

.section-heading {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.2rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin: 0 0 1.5rem;
    text-transform: none;
}

.kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-fade);
    margin-bottom: 1rem;
    display: block;
}

/* ══════════════════════ HEADINGS (generic fallback) ══════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.2;
}

/* Detail-page title classes share display typography */
.speaking-title,
.workshop-title,
.project-title,
.modal-title,
.exhibition-name {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
    letter-spacing: 0.005em !important;
}

.speaking-date,
.workshop-date,
.project-date,
.speaking-event,
.workshop-event {
    font-family: var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-fade);
}

.speaking-content,
.workshop-content,
.project-content {
    font-family: var(--font-body);
    color: var(--ink-dim);
    font-size: 1.08rem;
    line-height: 1.7;
}

.speaking-content h2,
.workshop-content h2,
.project-content h2 {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
}

.speaking-meta,
.workshop-meta,
.project-meta {
    color: var(--ink-fade);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}
.meta-item strong {
    color: var(--ink);
    font-weight: 400;
}

/* Detail header rule */
.speaking-header,
.workshop-header,
.project-header {
    border-bottom: 1px solid var(--edge);
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}

/* ══════════════════════ PROSE ══════════════════════ */
p, li {
    font-family: var(--font-body);
    color: var(--ink-dim);
    line-height: 1.65;
}

.mission-text,
.about-description,
.page-description {
    color: var(--ink-dim);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    max-width: 68ch;
    font-family: var(--font-body);
}

a.text-link {
    color: var(--lamp);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
a.text-link:hover { border-bottom-color: var(--lamp); }

/* ══════════════════════ CARDS / HIGHLIGHT-ITEM / FEATURE-BOX ══════════════════════ */
.highlight-item,
.feature-box,
.detail-card,
.installation-card {
    padding: 1.6rem 1.5rem;
    background: var(--bg-raised);
    border: 1px solid var(--edge);
    border-radius: 4px;
    color: var(--ink);
    transition: border-color 0.3s, transform 0.3s;
}
.highlight-item:hover,
.feature-box:hover,
.detail-card:hover,
.installation-card:hover {
    border-color: var(--lamp);
    transform: translateY(-2px);
}
.highlight-item h3,
.feature-box h3,
.detail-card h3,
.installation-card h3 {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0.5rem 0 0.4rem;
}
.highlight-item p,
.feature-box p,
.detail-card p,
.installation-card p {
    color: var(--ink-dim);
    font-size: 0.98rem;
    line-height: 1.55;
    font-style: italic;
}
.highlight-item i,
.feature-box i,
.feature-icon {
    display: none;  /* Font Awesome icons — banned; we removed the CDN */
}

.intro-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-bottom: 3rem;
}
.intro-highlights {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
@media (max-width: 820px) {
    .intro-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ══════════════════════ BUTTONS ══════════════════════ */
.cta-button,
a.cta-button,
button.cta-button,
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.15rem;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
}
.cta-button:hover,
a.cta-button:hover,
button.cta-button:hover,
.filter-btn:hover {
    border-color: var(--lamp);
    color: var(--lamp);
}
.filter-btn.active {
    background: var(--lamp);
    color: var(--bg);
    border-color: var(--lamp);
}

/* ══════════════════════ FILTER / SEARCH BARS ══════════════════════ */
.filter-bar,
.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.search-bar {
    display: flex;
    margin-bottom: 1.5rem;
}
.search-bar input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-raised);
    border: 1px solid var(--edge);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.05em;
}
.search-bar input:focus {
    outline: none;
    border-color: var(--lamp);
}
.search-bar input::placeholder {
    color: var(--ink-fade);
    font-style: italic;
}

/* ══════════════════════ ENGAGEMENT / EVENT GRID (speaking + workshops) ══════════════════════ */
.engagement-grid,
.exhibitions-grid,
.installations-grid,
.features-grid,
.portfolio-grid,
.detail-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.engagement-item,
.exhibition-item,
.portfolio-folder {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.5rem;
    background: var(--bg-raised);
    border: 1px solid var(--edge);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s, transform 0.3s;
}
.engagement-item:hover,
.exhibition-item:hover,
.portfolio-folder:hover {
    border-color: var(--lamp);
    transform: translateY(-2px);
}

.engagement-date,
.exhibition-meta,
.engagement-notes,
.folder-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-fade);
    margin-bottom: 0.75rem;
}

.engagement-title,
.exhibition-title,
.folder-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 0.5rem;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-transform: none;
}

.engagement-event,
.exhibition-description,
.folder-description {
    color: var(--ink-dim);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 0.6rem;
}

.engagement-details {
    color: var(--ink-fade);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.folder-icon { display: none; } /* Font Awesome replaced; show nothing or keep silent */

/* ══════════════════════ DETAIL PAGES (individual speaking/workshop pages) ══════════════════════ */
.detail-item {
    padding: 1rem 0;
    border-bottom: 1px dashed var(--edge);
}
.detail-item:last-child { border-bottom: none; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
    text-decoration: none;
    margin: 1.5rem 0 2rem;
    border-bottom: 1px dotted transparent;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
.back-link:hover {
    color: var(--lamp);
    border-bottom-color: var(--lamp);
}

/* ══════════════════════ FOOTER ══════════════════════ */
footer,
.site-footer {
    padding: 3rem clamp(1rem, 4vw, 2.5rem) 4rem;
    border-top: 1px solid var(--edge);
    margin-top: 4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-fade);
}
.footer-content,
footer > div {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
}
.footer-social,
.footer-socials {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}
footer a {
    color: var(--ink-dim);
    text-decoration: none;
    transition: color 0.2s;
    margin-right: 1.2rem;
}
footer a:hover { color: var(--lamp); }
footer .sign {
    font-family: var(--font-drawn);
    font-size: 1.6rem;
    color: var(--lamp);
    text-transform: none;
    letter-spacing: 0;
    line-height: 0.9;
}

/* Hide Font Awesome icon markers everywhere (Font Awesome CDN removed) */
i.fa-solid, i.fa-brands, i.fa-regular, i[class^="fa-"], i[class*=" fa-"] {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ══════════════════════ CHATBOT — remove from view (legacy) ══════════════════════ */
.chatbot, .chatbot-toggle, .chatbot-window { display: none !important; }

/* ══════════════════════ LOADING / EMPTY STATES ══════════════════════ */
.loading,
.loading-state,
.empty-state,
.no-results {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ink-fade);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ══════════════════════ COPYRIGHT ══════════════════════ */
.copyright {
    color: var(--ink-fade);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
}
.copyright::before { content: "© "; }

/* ══════════════════════ LINKS in prose ══════════════════════ */
main a:not(.cta-button):not(.filter-btn):not(.back-link):not(.engagement-item):not(.exhibition-item):not(.portfolio-folder):not(.nav a):not(.brand) {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-fade);
    transition: border-color 0.2s, color 0.2s;
}
main a:not(.cta-button):not(.filter-btn):not(.back-link):not(.engagement-item):not(.exhibition-item):not(.portfolio-folder):hover {
    color: var(--lamp);
    border-bottom-color: var(--lamp);
}

/* ══════════════════════ MISC INLINE OVERRIDES (defensive) ══════════════════════ */
body[style*="#0f0f0f"],
body[style*="background: #0a0a0a"] { background: var(--bg) !important; }

.exhibition-sketch,
.decor-item,
.floating-year {
    filter: brightness(0.9) contrast(1.05);
}

.film-collection-hero {
    padding: 3rem 0 2rem;
}