/* Reference light palette. Photographs remain original; fades sit behind copy. */
html[data-theme="light"] {
    color-scheme: light;
    --bg: #f8faf7;
    --panel: #ffffff;
    --text: #26362f;
    --muted: #586860;
    --gold: #173f35;
    --line: #d3dfd5;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme-icon="dark"] {
    display: none;
}

html[data-theme="dark"] [data-theme-icon="light"] {
    display: none;
}

html[data-theme="dark"] [data-theme-icon="dark"] {
    display: flex;
}

.nav-tools [data-theme-toggle] {
    width: 32px;
    height: 32px;
    justify-content: center;
}

.search-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--gold);
    padding: 12px 18px;
}

.live-search-status {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 18px;
}

.live-search-status:empty {
    display: none;
}

.live-search-status[data-state="error"] {
    color: #bc5f48;
}


html[data-theme="light"] :is(h1, h2, h3, .wordmark) {
    color: #173f35;
}

html[data-theme="light"] .site-header {
    background: #fff;
    border-color: var(--line);
}

html[data-theme="light"] .nav-tools .location-link {
    background: #e0eadc;
    color: #173f35;
}

html[data-theme="light"] :is(.intro, .about-grid .intro, .stats-row span) {
    color: #344b3e;
}

html[data-theme="light"] .button.gold {
    color: #fff;
    background: #173f35;
    border-color: #173f35;
    box-shadow: 0 4px 12px #173f3512;
}

html[data-theme="light"] .button.gold:hover {
    background: #245844;
    filter: none;
}

html[data-theme="light"] .button.outline {
    color: #173f35;
    border-color: #b4c8b9;
    background: #fffffff0;
}

html[data-theme="light"] .page-hero-art img {
    opacity: 1;
    mask-image: none;
}

html[data-theme="light"] :is(.contact-details span, .contact-details a) {
    color: #344b3e;
}

html[data-theme="light"] :is(input, textarea, select) {
    color: #26362f;
    background: #fff;
    border-color: #bccdc0;
    accent-color: #173f35;
}

html[data-theme="light"] :is(input, textarea)::placeholder {
    color: #68766e;
    opacity: 1;
}

html[data-theme="light"] .contact-form :is(input, textarea) {
    background: #fffffff5;
}

html[data-theme="light"] .search-bar {
    background: #fff;
    border-color: #c5d4c8;
    box-shadow: 0 2px 7px #173f3504;
}

html[data-theme="light"] .search-bar input {
    background: transparent;
    border: 0;
}

html[data-theme="light"] :is(.filter-pills a, .more-filters summary) {
    color: #344b3e;
    background: #fff;
    border-color: #cad7cc;
}

html[data-theme="light"] .filter-pills a.selected {
    color: #fff;
    background: #173f35;
    border-color: #173f35;
}

html[data-theme="light"] .more-filters>div {
    background: #fff;
    border-color: #c5d4c8;
    box-shadow: 0 10px 30px #173f351c;
}

html[data-theme="light"] :is(.story-card, .album-card, .publication-card) {
    background: #fff;
    border-color: #d3dfd5;
    box-shadow: 0 3px 12px #173f3507;
}

html[data-theme="light"] :is(
    .story-date,
    .story-row small,
    .breadcrumbs,
    .article-meta,
    .article-quote small,
    .about-badges small
) {
    color: #596e61;
}

html[data-theme="light"] :is(
    .story-counts,
    .comment-thread,
    .newsletter-section,
    .site-footer
) {
    border-color: var(--line);
}

html[data-theme="light"] :is(
    .destination-card,
    .photo-tile,
    .article-cover,
    .story-image img
) {
    border-color: #bdcdbf;
}

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

html[data-theme="light"] .destination-card h2 {
    color: #fff;
}

html[data-theme="light"] .destination-card p {
    color: #f1f6e7;
}

html[data-theme="light"] .destination-card small {
    color: #d4ded6;
}

html[data-theme="light"] .circle-arrow {
    color: #f1f6e7;
    border-color: #d9e5ce;
}

html[data-theme="light"] .prose {
    color: #34443a;
}

html[data-theme="light"] .publication-cover {
    background: #e6eee4;
}

html[data-theme="light"] .publication-placeholder {
    background: linear-gradient(135deg, #edf3e9, #dbe8d8);
}

html[data-theme="light"] .book-grid .publication-cover {
    background: radial-gradient(ellipse, #eef4e7, #dce9dc);
}

html[data-theme="light"] :is(
    .publication-detail-cover img,
    .book-grid .publication-cover img,
    .book-grid .publication-placeholder
) {
    box-shadow: 7px 12px 22px #173f351c;
}

html[data-theme="light"] .book-grid .publication-placeholder {
    border-left-color: #b2c9ad;
}

html[data-theme="light"] :is(.social-circles a, .footer-icons a) {
    border-color: #bfd1c3;
}

html[data-theme="light"] .footer-icons a:hover {
    background: #e6eee4;
}

html[data-theme="light"] .site-footer {
    color: #5d6f62;
}

html[data-theme="light"] .quote-banner blockquote {
    color: #fff;
}

html[data-theme="light"] .milestone-list {
    border-color: #adc5b4;
}

html[data-theme="light"] .milestone-list li:before {
    box-shadow: 0 0 0 5px #dfeade;
}

html[data-theme="light"] .comment-replies {
    border-color: #afcbb7;
}

html[data-theme="light"] :is(.route-endpoints, .stop-content) {
    background: #fff;
    border-color: var(--line);
}

html[data-theme="light"] .journey-timeline:before {
    background: #b0c9b5;
}

html[data-theme="light"] .stop-number {
    background: #e6eee4;
    border-color: #aec8b4;
}

html[data-theme="light"] :is(
    #journey-map,
    .footprints-page #footprints-map
) {
    background: #e9f0e9;
    border-color: #c7d8ca;
}

html[data-theme="light"] .map-filters button {
    color: #344b3e;
}

html[data-theme="light"] .map-filters button.selected {
    background: #dbe8dcd9;
    color: #173f35;
}

html[data-theme="light"] .map-summary span {
    color: #4c6555;
}

html[data-theme="light"] .favourites-filter {
    background: #fff;
    border-color: #b7cdbd;
}

html[data-theme="light"] .favourites-filter[aria-pressed=true] {
    background: #173f35;
    color: #fff;
}

html[data-theme="light"] .travel-pin {
    background: #2f6951;
    border-color: #f1f8e9;
    box-shadow: 0 0 10px #173f3533;
}

html[data-theme="light"] .favourite-pin {
    background: #173f35;
}

html[data-theme="light"] .favourite-pin span {
    color: #fff;
}

html[data-theme="light"] :is(
    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip
) {
    background: #fff !important;
    color: #26362f !important;
    border-color: #b8cebf !important;
}

html[data-theme="light"] .leaflet-control-attribution {
    background: #ffffffdf !important;
    color: #52685a !important;
}

html[data-theme="light"] .leaflet-control-attribution a {
    color: #173f35 !important;
}

html[data-theme="light"] .leaflet-control-zoom a {
    background: #fff !important;
    color: #173f35 !important;
    border-color: #bfcec3 !important;
}

html[data-theme="light"] .mobile-drawer {
    color: var(--text);
    background: linear-gradient(145deg, #fff, #f1f6ed);
    border-color: #c5d4c8;
    box-shadow: -24px 0 70px #173f3526;
}

html[data-theme="light"] .mobile-drawer nav a {
    border-color: #dbe5dc;
}

html[data-theme="light"] dialog {
    color: #26362f;
    background: #fff;
}

html[data-theme="light"] dialog button {
    background: #e6eee4;
    color: #173f35;
}

html[data-theme="light"] .drawer-heading button {
    background: transparent;
}

html[data-theme="light"] .back-to-top {
    color: #fff;
    background: #173f35;
    border-color: #173f35;
    box-shadow: 0 5px 20px #173f3526;
}

html[data-theme="light"] .notice {
    background: #e6f1e2;
    border-color: #b2cdaa;
    color: #244728;
}

html[data-theme="light"] .form-feedback[data-state=success] {
    background: #e8f3e8;
    border-color: #8db69a;
    color: #1d4b2d;
}

html[data-theme="light"] .form-feedback[data-state=error] {
    background: #fff0e9;
    border-color: #d0a28c;
    color: #793b2a;
}

html[data-theme="light"] .form-feedback[data-state=pending] {
    background: #f4f1df;
    border-color: #c5bd8d;
    color: #57522b;
}

html[data-theme="light"] .demo-label {
    background: #f7f9f4ed;
    color: #526b51;
    border-color: #a9c0aa;
}

html[data-theme="light"] .live-search-status[data-state="error"] {
    color: #793b2a;
}


/* =========================================================
   SHARED GEOMETRY
   ========================================================= */

.nav-row {
    height: 62px;
    gap: 20px;
}

.desktop-nav {
    gap: 18px;
    font-size: 12px;
}

.desktop-nav a {
    padding-block: 20px;
}

.desktop-nav a.active::after {
    bottom: 13px;
}

.wordmark {
    font-size: 26px;
}

.nav-tools {
    gap: 12px;
    flex-shrink: 0;
}

.nav-tools a,
.nav-tools button {
    min-width: 28px;
    min-height: 32px;
    justify-content: center;
}

.nav-tools .location-link {
    width: 32px;
    height: 32px;
}

.home-copy,
.about-grid>*,
.contact-grid>*,
.newsletter-section>*,
.timeline-section>* {
    min-width: 0;
}

.contact-details a,
.intro,
.milestone-list h3,
.album-card h2 {
    overflow-wrap: anywhere;
}

.search-bar input {
    min-width: 0;
}

.journal-search>label {
    min-width: 0;
}


/* =========================================================
   HOME
   ========================================================= */

/* Approved option 3: full photograph, white editorial copy and a dark reading scrim. */
.home-hero {
    overflow: clip;

    min-height: calc(
        100svh
        - var(--site-header-height, 63px)
        - var(--home-footer-height, 75px)
        - var(--home-notice-height, 0px)
    );

    min-height: calc(
        100dvh
        - var(--site-header-height, 63px)
        - var(--home-footer-height, 75px)
        - var(--home-notice-height, 0px)
    );

    justify-content: center;

    background-color: #08171b;

    background-image:
        linear-gradient(
            90deg,
            #0312188c,
            #03121826 47%,
            transparent 70%
        ),
        linear-gradient(
            0deg,
            #03121845,
            transparent 28%
        ),
        var(--hero);

    background-position:
        center,
        center,
        78% center;

    background-size: cover;
}

.home-introduction {
    position: relative;
    min-height: inherit;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-block: clamp(16px, 5svh, 54px);
}

.home-introduction.shell {
    width: min(1680px, 64%);
}

.home-copy {
    padding: 0;
}

.home-hero h1 {
    max-width: 810px;
    font-size: clamp(46px, min(5.8vw, 9svh), 88px);
    line-height: 1;
}

.home-copy .eyebrow {
    margin-bottom: clamp(12px, 1.7svh, 20px);
}

.home-copy .malayalam {
    margin-top: clamp(12px, 1.8svh, 21px);
}

.home-copy .intro {
    margin-top: clamp(12px, 1.8svh, 19px);
}

.home-copy .hero-actions {
    margin-top: clamp(17px, 2.5svh, 28px);
}

.stats-row {
    margin: clamp(20px, 3svh, 34px) 0 0;
    padding: 0;

    width: min(660px, 100%);
    gap: 0;
}

.stats-row>div {
    align-items: center;
    text-align: center;

    padding-inline: 15px;

    border-right: 1px solid #ffffff60;
}

.stats-row>div:last-child {
    border-right: 0;
}

.stats-row .icon {
    width: 29px;
    height: 29px;
    margin-bottom: 5px;
}

.stats-row strong {
    font-size: 23px;
    margin-bottom: 5px;
}

.stats-row span {
    font-size: 13px;
}

.page-home .home-hero :is(
    h1,
    .eyebrow,
    .malayalam,
    .intro,
    .stats-row,
    .stats-row .icon,
    .stats-row span
) {
    color: #fff;
    text-shadow: 0 1px 3px #00101566;
}

.page-home .home-hero .button.gold {
    color: #fff;
    background: #00634f;
    border-color: #00634f;
    box-shadow: none;
}

.page-home .home-hero .button.gold:hover {
    background: #087b61;
    border-color: #087b61;
    filter: none;
}

.page-home .home-hero .button.outline {
    color: #fff;
    background: #04131826;
    border: 1.5px solid #fff;
    box-shadow: none;
}

.page-home .home-hero .button.outline:hover {
    background: #ffffff1f;
}

.page-home .home-hero .button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.page-home .site-footer {
    padding-block: 12px;
    min-height: 66px;
}

html[data-theme="light"] .page-home {
    background: #fff;
}

html[data-theme="light"] .page-home .site-footer {
    background: #fff;
}

.page-home .demo-label {
    font-size: 10px;
    line-height: 1.4;
    padding: 3px 8px;
    margin-bottom: 5px;
}


/* =========================================================
   LISTING / PAGE HERO
   ========================================================= */

.page-hero {
    min-height: 350px;
    padding: 65px 0 75px;
}

.page-hero-art img {
    inset: 0;

    width: 100%;
    max-width: none;
    height: 100%;

    object-fit: cover;
    object-position: center 43%;

    mask-image: none;
    opacity: 1;
}

.page-hero h1 {
    font-size: clamp(52px, 5vw, 72px);
}

.page-hero .intro {
    max-width: 460px;
}

.page-journal .page-hero {
    min-height: 320px;
    padding-top: 62px;
}

.page-gallery .page-hero {
    min-height: 385px;
    padding-top: 82px;
}

html[data-theme="light"] .page-hero {
    background: var(--bg);
}

html[data-theme="light"] .page-hero::after {
    background:
        linear-gradient(
            to top,
            var(--bg),
            transparent 23%
        ),
        linear-gradient(
            90deg,
            #f8faf7fa,
            #f8faf7d9 25%,
            #f8faf761 46%,
            transparent 65%
        );
}

html[data-theme="light"] .page-hero :is(h1, .malayalam) {
    color: #173f35;
    text-shadow: none;
}

html[data-theme="light"] .page-hero .intro {
    color: #26362f;
    text-shadow: none;
}

.listing {
    padding-bottom: 40px;
}

.page-journal .listing {
    margin-top: -28px;
}

.page-gallery .listing {
    margin-top: -20px;
}

.filter-pills {
    gap: 10px;
    margin-bottom: 18px;
}

.journal-search {
    margin-bottom: 22px;
}

.story-list,
.album-grid {
    gap: 20px;
}

.story-card,
.album-card {
    border-radius: 9px;
}

.story-card-content {
    padding: 18px;
}

.story-card h2 {
    font-size: 28px;
    line-height: 1.12;
}

.story-card[lang="ml"] h2 {
    font-size: 19px;
    line-height: 1.65;
}

.story-card .eyebrow {
    font-size: 10px;
    letter-spacing: .035em;
    margin-bottom: 10px;
}

.story-card .story-excerpt {
    font-size: 13px;
    margin: 13px 0 18px;
}

.album-card a>div {
    padding: 19px;
}

.album-card h2 {
    font-size: 29px;
}

html[data-theme="light"] .story-card h2 {
    color: #142b25;
}


/* =========================================================
   ABOUT
   ========================================================= */

.page-about .shell {
    width: min(1000px, 91%);
}

.page-about .nav-row {
    width: min(1100px, 94%);
}

.about-hero {
    position: relative;

    padding: 36px 0 0;

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

.about-hero::after {
    content: none;
}

.about-grid {
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1fr);

    gap: 48px;

    min-height: 476px;

    align-items: center;
}

.about-grid h1 {
    font-size: clamp(42px, 3.5vw, 52px);
}

.about-grid .hello {
    font-size: 23px;
}

.about-grid .malayalam {
    font-size: 23px;
    line-height: 1.5;
    margin-top: 20px;
}

.about-grid .intro {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 25px;
}

.about-grid .portrait {
    align-self: end;
    justify-self: center;

    width: min(100%, 410px);
    height: auto;

    max-height: 600px;

    object-fit: contain;
    object-position: center bottom;

    border-radius: 0;

    mask-image: none;
}

.timeline-section {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.18fr);

    gap: 65px;

    padding-block: 58px 52px;
}

.timeline-intro {
    max-width: 320px;
}

.timeline-intro h2 {
    font-size: 37px;
    max-width: 280px;
}

.timeline-intro p:not(.eyebrow) {
    font-size: 14px;
    margin-top: 17px;
}

.timeline-intro .eyebrow {
    font-size: 11px;
    margin-bottom: 20px;
}

.milestone-list li {
    grid-template-columns:
        84px
        minmax(0, 1fr);

    gap: 23px;

    padding: 0 0 36px 23px;
}

.milestone-list h3 {
    font-size: 28px;
}

.milestone-list p {
    margin-top: 8px;
    font-size: 13px;
}

.about-badges {
    padding: 24px 0 30px;
    gap: 18px;
}

.about-badges>div {
    flex: 1;
    min-width: 0;

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

.about-badges>div:last-child {
    border-right: 0;
}

.about-badges span {
    font-size: 14px;
}

.quote-banner {
    min-height: 223px;

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

.quote-banner::before {
    display: none;
}

.quote-banner blockquote {
    font-size: 32px;
}

html[data-theme="light"] .about-hero {
    background-image:
        linear-gradient(
            90deg,
            #f8faf7ed,
            #f8faf7c2 33%,
            #f8faf733 57%,
            transparent 74%
        ),
        var(--hero);
}

html[data-theme="light"] .about-grid .hello {
    color: #173f35;
}


/* =========================================================
   CONTACT
   ========================================================= */

/*
 * Desktop Contact composition:
 * Keep the hero compact like the approved reference.
 *
 * IMPORTANT:
 * With background-size: cover, the image is taller than this
 * hero on wide screens. A HIGHER vertical background-position
 * percentage moves more of that excess image upward.
 *
 * 100% bottom-aligns the covered image. On wide desktop screens,
 * this shifts the shoreline, water level and boats upward so they
 * remain above the first contact input, matching the approved reference.
 */
.contact-page {
    position: relative;

    min-height: clamp(540px, 44vw, 620px);

    padding: 72px 0 34px;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 100%;
}

.contact-heading h1 {
    font-size: clamp(52px, 5vw, 72px);
}

.contact-heading .intro {
    font-size: 16px;
    max-width: 520px;
}

.contact-grid {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.1fr);

    gap: 65px;

    margin-top: 45px;
}

.contact-details strong {
    font-size: 16px;
}

.contact-details>div {
    margin-bottom: 22px;
}

.contact-form :is(input, textarea) {
    backdrop-filter: none;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter-band {
    background: var(--panel);
    border-top: 1px solid var(--line);
}

.newsletter-section {
    margin-top: 0;

    padding-block: 38px;

    border: 0;

    gap: 65px;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;
}

.newsletter-section .eyebrow {
    margin-bottom: 15px;
    font-size: 11px;
}

.newsletter-section h2 {
    font-size: 39px;
    margin-bottom: 14px;
}

.newsletter-section p {
    font-size: 15px;
}

.newsletter-section form {
    font-size: 14px;
}

.newsletter-section .consent {
    font-size: 12px;
    margin: 15px 0;
}


/* =========================================================
   LIGHT CONTACT BACKGROUND
   ========================================================= */

html[data-theme="light"] .contact-page {
    isolation: isolate;

    background-image: var(--hero);
    background-repeat: no-repeat;
    background-size: cover;

    /*
     * Do not use 36% here.
     * Because the covered image is taller than the Contact hero,
     * 100% bottom-aligns the covered image and shifts the shoreline
     * and boats upward above the contact input fields.
     */
    background-position: center 100%;
}

/*
 * Soft editorial fade:
 * - strong enough on the left for readable copy
 * - much clearer through the centre/right so the boats remain visible
 * - a gentle lower fade into the newsletter section
 */
html[data-theme="light"] .contact-page::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 68%,
            rgba(248, 250, 247, 0.20) 78%,
            rgba(248, 250, 247, 0.62) 91%,
            var(--bg) 100%
        ),
        linear-gradient(
            to right,
            rgba(248, 250, 247, 0.97) 0%,
            rgba(248, 250, 247, 0.91) 22%,
            rgba(248, 250, 247, 0.68) 39%,
            rgba(248, 250, 247, 0.28) 54%,
            rgba(248, 250, 247, 0.06) 67%,
            transparent 76%
        );

    mask-image: none;
}

html[data-theme="light"] .contact-page::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 30px;

    z-index: -1;
    pointer-events: none;

    background: linear-gradient(
        transparent,
        var(--bg)
    );
}

html[data-theme="light"] .contact-form :is(input, textarea) {
    background: #ffffffd4;
}

html[data-theme="light"] .newsletter-band {
    background: #eaf1e6;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    padding-block: 22px;
    min-height: 74px;
}

.page-home .site-footer,
.page-contact .site-footer {
    border-top: 0;
}


/* =========================================================
   TABLET NAVIGATION
   ========================================================= */

@media (max-width: 1180px) {

    .desktop-nav {
        display: none;
    }

    .nav-tools .menu-button {
        display: flex;
        padding-left: 3px;
    }

    .nav-tools {
        margin-left: auto;
    }

    .page-about .nav-row {
        width: 91%;
    }
}


/* =========================================================
   <= 1000PX
   ========================================================= */

@media (max-width: 1000px) {

    .story-list,
    .album-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .about-grid {
        gap: 30px;
        min-height: 440px;
    }

    .about-grid .malayalam {
        font-size: 21px;
    }

    .timeline-section {
        gap: 35px;
    }

    .milestone-list li {
        grid-template-columns:
            60px
            minmax(0, 1fr);

        gap: 12px;
    }

    .contact-grid,
    .newsletter-section {
        gap: 35px;
    }
}


/* =========================================================
   TABLET 601 - 900PX
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

    .about-badges {
        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .about-badges>div {
        width: auto;

        flex-direction: column;
        align-items: flex-start;

        gap: 10px;
    }

    .about-grid h1 {
        font-size: 42px;
    }

    .timeline-section {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.3fr);
    }

    .milestone-list li {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}


/* =========================================================
   MOBILE <= 600PX
   ========================================================= */

@media (max-width: 600px) {

    .nav-row {
        height: 62px;
        gap: 8px;
    }

    .wordmark {
        font-size: clamp(18px, 5.15vw, 25px);
    }

    .nav-tools {
        gap: 3px;
    }

    .nav-tools a,
    .nav-tools button,
    .nav-tools [data-theme-toggle] {
        min-width: 27px;
        width: 27px;
        padding: 3px;
    }

    .nav-tools .location-link {
        width: 28px;
        height: 28px;
    }


    /* HOME */

    .home-hero {
        background-image:
            linear-gradient(
                90deg,
                #03121880,
                #0312182e 53%,
                transparent 82%
            ),
            linear-gradient(
                0deg,
                #0210149c,
                transparent 27%
            ),
            var(--hero);

        background-position:
            center,
            center,
            75% center;
    }

    .home-introduction.shell {
        width: 87%;
    }

    .home-introduction {
        justify-content: space-between;

        padding-block:
            clamp(20px, 5.4svh, 48px)
            clamp(23px, 4svh, 35px);
    }

    .home-copy {
        padding: 0;
    }

    .home-hero h1 {
        font-size:
            clamp(
                35px,
                min(11.8vw, 6svh),
                54px
            );

        max-width: 100%;
    }

    .home-copy .eyebrow {
        font-size: 9px;

        letter-spacing: .18em;

        margin-bottom: 13px;
    }

    .home-copy .malayalam {
        font-size: clamp(17px, 5.1vw, 22px);
        margin-top: 14px;
    }

    .home-copy .intro {
        font-size: 13px;
        line-height: 1.5;

        margin-top: 17px;

        max-width: min(330px, 78%);
    }

    .home-copy .hero-actions {
        flex-direction: column;
        align-items: flex-start;

        gap: 10px;

        margin-top: 19px;
    }

    .home-copy .hero-actions .button {
        min-height: 40px;

        padding: 10px 18px;

        gap: 12px;

        font-size: 12px;
    }

    .home-copy .hero-actions .button.gold {
        min-width: 175px;
    }

    .home-copy .hero-actions .button.outline {
        min-width: 162px;
    }

    .hero-actions .icon {
        width: 18px;
        height: 18px;
    }

    .stats-row {
        margin-top: 22px;
        padding: 0;
    }

    .stats-row>div {
        padding-inline: 3px;
    }

    .stats-row .icon {
        width: 25px;
        height: 25px;
        margin-bottom: 4px;
    }

    .stats-row strong {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .stats-row span {
        font-size: 10px;
    }

    .page-home .nav-tools .location-link {
        display: none;
    }

    .page-home .wordmark {
        font-size: clamp(20px, 5.6vw, 25px);
    }

    .page-home .site-footer {
        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 5px 8px;

        min-height: 0;

        padding-block: 7px;
    }

    .page-home .site-footer .footer-icons {
        grid-column: 1 / -1;
        grid-row: 1;

        justify-content: center;
    }

    .page-home .site-footer>span,
    .page-home .site-footer>small {
        grid-column: 1 / -1;

        text-align: center;

        font-size: 9px;
        line-height: 1.4;
    }

    .page-home .footer-icons a {
        width: 28px;
        height: 28px;
    }

    .page-home .footer-icons .icon {
        width: 16px;
        height: 16px;
    }


    /* PAGE HERO */

    .page-hero,
    .page-journal .page-hero {
        min-height: 295px;

        padding: 48px 0 65px;
    }

    .page-gallery .page-hero {
        min-height: 325px;

        padding: 55px 0 65px;
    }

    .page-hero h1 {
        font-size: 52px;
    }

    .page-hero .intro {
        font-size: 14px;
        max-width: 270px;
    }

    .page-hero .malayalam {
        font-size: 20px;
    }

    .page-hero-art img {
        object-position: 65% center;
    }

    html[data-theme="light"] .page-hero::after {
        background:
            linear-gradient(
                to top,
                var(--bg),
                transparent 23%
            ),
            linear-gradient(
                90deg,
                #f8faf7ed,
                #f8faf7b8 42%,
                #f8faf74d 68%,
                transparent 100%
            );
    }


    /* STORIES */

    .story-list,
    .album-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 22px;
    }

    .story-card-content {
        padding: 19px;
    }

    .story-card h2 {
        font-size: 29px;
    }

    .story-card[lang="ml"] h2 {
        font-size: 19px;
    }

    .filter-pills {
        gap: 8px;
    }

    .filter-pills a {
        font-size: 12px;
        padding: 7px 13px;
    }

    .journal-search .search-bar {
        flex-basis: 100%;
    }

    .journal-search select {
        max-width: 100%;
    }


    /* ABOUT */

    .about-hero {
        padding-top: 40px;
    }

    .about-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 25px;

        min-height: 0;
    }

    .about-grid h1 {
        font-size: clamp(38px, 10vw, 48px);
    }

    .about-grid .hello {
        font-size: 22px;
    }

    .about-grid .intro {
        font-size: 14px;
    }

    .about-grid .portrait {
        width: min(100%, 410px);
        max-height: 600px;
    }

    html[data-theme="light"] .about-hero {
        background-image:
            linear-gradient(
                180deg,
                #f8faf7ed,
                #f8faf7cc 26%,
                #f8faf74d 45%,
                transparent 66%
            ),
            var(--hero);
    }

    .timeline-section {
        grid-template-columns:
            minmax(0, 1fr);

        padding-block: 40px;

        gap: 30px;
    }

    .timeline-intro h2 {
        font-size: 36px;
    }

    .milestone-list li {
        grid-template-columns:
            64px
            minmax(0, 1fr);

        gap: 15px;
    }

    .milestone-list h3 {
        font-size: 26px;
    }

    .about-badges {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 24px 12px;

        padding-block: 25px 30px;
    }

    .about-badges>div {
        width: auto;
        gap: 9px;
    }

    .about-badges>div:nth-child(even) {
        border-right: 0;
    }

    .about-badges span {
        font-size: 13px;
    }

    .quote-banner {
        min-height: 210px;
    }

    .quote-banner blockquote {
        font-size: 27px;
        padding: 20px;
    }


    /* CONTACT MOBILE */

    .contact-page {
        min-height: 0;

        padding: 52px 0 35px;

        background-position: center top;
    }

    .contact-heading h1 {
        font-size: clamp(44px, 12vw, 58px);
    }

    .contact-heading .intro {
        font-size: 14px;
    }

    .contact-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 28px;

        margin-top: 35px;
    }

    .contact-details {
        order: 0;
    }

    html[data-theme="light"] .contact-page {
        background-size: auto 540px;

        background-repeat: no-repeat;

        background-position: center top;

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

    html[data-theme="light"] .contact-page::before {
        bottom: auto;
        height: 540px;

        mask-image: none;

        background:
            linear-gradient(
                to bottom,
                transparent 0%,
                transparent 56%,
                #f8faf7a6 78%,
                var(--bg) 100%
            ),
            linear-gradient(
                to right,
                #f8faf7eb 0%,
                #f8faf7c2 43%,
                transparent 100%
            );
    }


    /* NEWSLETTER */

    .newsletter-section {
        grid-template-columns:
            minmax(0, 1fr);

        padding-block: 32px;

        gap: 24px;
    }

    .newsletter-section h2 {
        font-size: 35px;
    }


    /* FOOTER */

    .site-footer {
        justify-content: center;

        text-align: center;

        gap: 16px;

        padding-block: 24px;
    }

    .site-footer>span,
    .site-footer>small {
        flex-basis: 100%;
    }
}


/* =========================================================
   JOURNEY DESKTOP
   ========================================================= */

@media (min-width: 901px) {

    .journey-timeline {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 32px 88px;

        align-items: start;
    }

    .journey-timeline li,
    .journey-timeline li:nth-child(even) {
        display: block;

        min-width: 0;

        padding: 0;
    }

    .journey-timeline .stop-content {
        width: 100%;

        overflow-wrap: anywhere;
    }

    /* Connect each card to the central timeline */
    .journey-timeline li::before {
        content: "";

        position: absolute;

        top: 33px;

        width: 44px;
        height: 1px;

        background: var(--gold);
    }

    .journey-timeline li:nth-child(odd)::before {
        right: -44px;
    }

    .journey-timeline li:nth-child(even)::before {
        left: -44px;
    }

    /* Separate numbered markers for both cards */
    .journey-timeline .stop-number {
        top: 18px;

        transform: none;

        z-index: 2;
    }

    .journey-timeline li:nth-child(odd) .stop-number {
        left: auto;
        right: -38px;
    }

    .journey-timeline li:nth-child(even) .stop-number {
        left: -38px;
        right: auto;
    }
}


/* =========================================================
   DEMO NOTICE
   ========================================================= */

/* The sample-content notice must not cover controls or timeline text. */
.demo-label {
    position: static;

    width: fit-content;

    max-width: 91%;

    margin: 0 auto 12px;
}


/* =========================================================
   SHORT MOBILE HEIGHT
   ========================================================= */

@media (max-width: 600px) and (max-height: 700px) {

    .home-introduction {
        padding-block: 8px;
    }

    .home-copy .eyebrow {
        font-size: 8px;
        margin-bottom: 7px;
    }

    .home-hero h1 {
        font-size: 32px;
    }

    .home-copy .malayalam {
        font-size: 16px;
        margin-top: 8px;
    }

    .home-copy .intro {
        font-size: 12px;
        line-height: 1.4;

        margin-top: 8px;
    }

    .home-copy .hero-actions {
        flex-direction: row;

        gap: 8px;

        margin-top: 11px;
    }

    .home-copy .hero-actions .button {
        min-width: 0;
        min-height: 34px;

        padding: 7px 10px;

        font-size: 11px;
    }

    .stats-row {
        margin-top: 14px;
    }

    .stats-row .icon {
        width: 20px;
        height: 20px;

        margin-bottom: 3px;
    }

    .stats-row strong {
        font-size: 17px;
        margin-bottom: 3px;
    }

    .stats-row span {
        font-size: 9px;
    }
}


/* =========================================================
   LANDSCAPE MOBILE
   ========================================================= */

@media (orientation: landscape) and (max-height: 520px) {

    .home-hero {
        background-image:
            linear-gradient(
                90deg,
                #08171b 25%,
                #08171be6 42%,
                transparent 70%
            ),
            var(--hero);

        background-position:
            center,
            right center;

        background-size:
            100% 100%,
            auto 100%;

        background-color: #08171b;
    }

    .home-introduction {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(140px, 32%);

        gap: 20px;

        align-items: center;

        padding-block: 10px;
    }

    .home-copy .eyebrow {
        font-size: 8px;
        margin-bottom: 5px;
    }

    .home-hero h1 {
        font-size: 32px;
    }

    .home-copy .malayalam {
        font-size: 16px;
        margin-top: 5px;
    }

    .home-copy .intro {
        font-size: 12px;
        line-height: 1.4;
        margin-top: 5px;
    }

    .home-copy .hero-actions {
        flex-direction: row;

        gap: 8px;

        margin-top: 8px;
    }

    .hero-actions .button {
        min-height: 32px;

        padding: 6px 12px;

        font-size: 11px;
    }

    .stats-row {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px 0;

        margin: 0;

        width: 140px;
    }

    .stats-row>div {
        padding-inline: 3px;
    }

    .stats-row>div:nth-child(even) {
        border: 0;
    }

    .stats-row .icon {
        width: 20px;
        height: 20px;

        margin-bottom: 3px;
    }

    .stats-row strong {
        font-size: 17px;
        margin-bottom: 3px;
    }

    .stats-row span {
        font-size: 9px;
    }

    .page-home .site-footer {
        min-height: 50px;
        padding-block: 8px;
    }

    .page-home .footer-icons a {
        width: 28px;
        height: 28px;
    }
}


/* =========================================================
   CLICKABLE HOME STATISTICS
   ========================================================= */

.page-home .stats-row>div {
    position: relative;
}

.page-home .stat-link {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    min-height: 44px;

    color: inherit;

    text-decoration: none;
}

.page-home .stat-link::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 6px;
}

.page-home .stat-link:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.page-home .stat-link:focus-visible {
    outline: none;
}

.page-home .stat-link:focus-visible::after {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* Keep all four Home statistics clickable without underlines. */
.page-home .stats-row .stat-link,
.page-home .stats-row .stat-link:is(:hover, :focus, :active, :visited),
.page-home .stats-row .stat-link span,
.page-home .stats-row .stat-link:is(:hover, :focus, :active, :visited) span {
    text-decoration: none;
}