@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Montserrat:wght@500;600;700&display=swap');

:root {
    --ink: #26170f;
    --muted-ink: #715e50;
    --gold: #c99a2e;
    --gold-light: #f7dfa0;
    --paper: #fffaf0;
    --line: rgba(173, 122, 29, .34);
    --article-bg: rgba(255, 252, 245, .88);
}

* { box-sizing: border-box;}

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink);
    background-color: #20160f;
    background-image:
        linear-gradient(rgba(35, 23, 15, .58), rgba(35, 23, 15, .58)),
        url('/assets/articlesbg.jpg'),
        radial-gradient(circle at top, #dfc17f, #342417 65rem);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/* Optional fixed image layer for pages that provide #homebackimage. */
#homebackimage {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

article {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100% - 2rem, 62rem);
    max-width: 100%;
    margin: clamp(0.6rem, 5vw, 4rem) auto 3rem;
    padding: clamp(1rem, 4vw, 3rem);
    background: var(--article-bg);
    border: 1px solid var(--line);
    border-inline: 5px solid var(--gold);
    border-radius: 1.25rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .36);
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    line-height: 1.6;
    text-align: center;
}

article p {
    font-size: clamp(1rem, 1.5vw, 1.35rem);
     font-family: 'Cormorant Garamond', Georgia;
}

h1, h2, h3, h4 {
    width: 100%;
    margin-inline: auto;
    color: var(--ink);
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1.2;
    text-align: center;
}

h1 {
    max-width: 16ch;
    margin-top: 0;
    margin-bottom: 2.5rem;
    color: #321a0c;
    font-size: clamp(2.25rem, 5.2vw, 4.45rem);
    text-shadow: 0 1px var(--gold-light);
}

h2 {
    margin-top: 4rem;
    margin-bottom: 1.35rem;
    color: #8a5514;
    font-size: clamp(1.38rem, 2.3vw, 2rem);
}

h3 { margin-top: 3rem; margin-bottom: 1rem; font-size: clamp(1.15rem, 2vw, 1.45rem); }
h4 { margin-top: 2.2rem; margin-bottom: .7rem; font-size: 1.08rem; }

article p, article li, article figcaption { text-align: center; }
article p { width: 100%; max-width: 48rem; margin: 0 auto 1.35rem; }

article figure { width: 100%; margin: 2.5rem auto; text-align: center; }
article figure img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto;
    border: 1px solid rgba(201, 154, 46, .48);
    border-radius: .8rem;
    box-shadow: 0 .8rem 2rem rgba(46, 28, 13, .24);
}

figcaption {
    margin-top: .7rem;
    color: var(--muted-ink);
    font-family: Montserrat, Arial, sans-serif;
    font-size: .78rem;
    font-style: italic;
}

blockquote {
    width: 100%;
    margin: 2.25rem auto;
    padding: 1.5rem clamp(1rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: #5d3928;
    font-size: 1.1em;
}

article ul,
article ol {
    width: 100%;
    max-width: 44rem;
    margin: 1.2rem auto 1.8rem;
    padding: 0 1rem;
    list-style-position: inside;
}

article li {
    margin: .55rem auto;
}

article hr {
    width: 100%;
    height: 2px;
    margin: 3rem 0;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );
}

article strong {
    color: orange;
    -webkit-text-stroke: .5px black;
}

article a {
    color: #8b5d05;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

article a:hover {
    color: #4e2e03;
}

/* Shared styles for surrounding article index and navigation components. */
.articlemain, .section-container, main .link, .searchboxdiv { display: flex; justify-content: center; }
.section-container { flex-wrap: wrap; gap: 1.5rem; margin-top: 5%; }
.container { overflow: hidden; width: min(25rem, 100%); border: 2px solid var(--gold); background: rgba(35, 165, 213, .46); }
.container img { display: block; width: 100%; transition: transform .5s ease-in-out; }
.container img:hover { transform: scale(1.07); }
.articletitle { color: #fff; text-shadow: 0 1px 3px #000; }
.articledescription { width: min(28rem, 100%); padding: 5%; }
.searchbox { width: min(25%, 24rem); color: #fff; font-size: 150%; background: transparent; border: 0; }
.searchbox:focus { outline: 1px solid var(--gold); }
main ::placeholder { color: #fff; }
main .link { position: relative; padding: 1rem; color: #fff; text-decoration: none; }
main .link::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ''; background: var(--gold); transform: scaleX(0); transform-origin: bottom right; transition: transform .25s ease-in-out; }
main .link:hover::after { transform: scaleX(1); transform-origin: bottom left; }

@media (max-width: 800px) {
    article { width: min(100% - 1rem, 62rem); margin: .5rem auto 2rem; padding: 1.5rem 1rem; border-inline-width: 3px; }
    h1 { max-width: none; }
    .container { width: 100%; }
    .searchbox { width: 55%; }
}

/* Additional responsive tweaks */
@media (max-width: 1200px) {
    article { padding: 1.25rem; }
    h2 { font-size: clamp(1.25rem, 2.2vw, 1.9rem); }
}

@media (max-width: 600px) {
    body { background-attachment: scroll; }
    article { border-radius: 1rem; padding: 1rem; margin: .6rem .5rem 1.2rem; }
    h1 { font-size: clamp(1.6rem, 6.5vw, 3rem); margin-bottom: 1.2rem; }
    h2 { margin-top: 2rem; }
    p, li, figcaption { text-align: left; }
    p { padding: 0 0.25rem; }
    blockquote { padding: .9rem 1rem; }
    .section-container { gap: 1rem; }
    .container { width: 100%; }
    .searchbox { width: 70%; }
}
/* Barra de progreso siempre visible */
.reading-progress {
    position: fixed;
    z-index: 2147483647;
    inset: 0 0 auto;
    display: block;
    height: calc(8px + env(safe-area-inset-top, 0px));
    background: #4a2b0d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.reading-progress__bar {
    width: 100%;
    height: 8px;
    margin-top: env(safe-area-inset-top, 0px);
    background: linear-gradient(90deg, #f5d174, var(--gold), #fff0b4);
    box-shadow: 0 0 12px rgba(255, 214, 117, .9);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 90ms linear;
}

.reading-progress__label {
    position: fixed;
    z-index: 2147483647;
    top: calc(.9rem + env(safe-area-inset-top, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    padding: .35rem .6rem;
    border: 1px solid rgba(247, 223, 160, .7);
    border-radius: 999px;
    background: rgba(38, 23, 12, .76);
    color: #fff3cd;
    font: 600 .7rem/1 Montserrat, Arial, sans-serif;
    letter-spacing: .06em;
    opacity: 1;
    transform: translateY(0);
    transition: background .25s ease;
    pointer-events: none;
}

/* Tabletas */
@media (max-width: 800px) {
    .reading-progress {
        height: calc(9px + env(safe-area-inset-top, 0px));
    }

    .reading-progress__bar {
        height: 9px;
    }

    .reading-progress__label {
        top: calc(.75rem + env(safe-area-inset-top, 0px));
        right: max(.75rem, env(safe-area-inset-right, 0px));
        padding: .42rem .68rem;
        font-size: .72rem;
    }
}

/* Teléfonos */
@media (max-width: 480px) {
    .reading-progress {
        height: calc(10px + env(safe-area-inset-top, 0px));
    }

    .reading-progress__bar {
        height: 10px;
    }

    .reading-progress__label {
        top: calc(.65rem + env(safe-area-inset-top, 0px));
        right: max(.55rem, env(safe-area-inset-right, 0px));
        padding: .38rem .55rem;
        font-size: .66rem;
        letter-spacing: .04em;
    }
}

.gyanganj-responsive-image {
    display: block;
    width: min(100%, 1024px);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

#trademark {
    color: #fff;
    text-align: center;
    margin-left: 30%;
}