/* =========================================================
   THE EXPAT EDITS
   EDITORIAL NOTES MASTER STYLESHEET
   VERSION 1.0

   Notes:
   - Same site framework as Editions
   - No photography required
   - Editorial / journal treatment
   - Existing master CSS remains untouched
========================================================= */


/* =========================================================
   01. NOTE INTRO
========================================================= */

.note-intro {

    padding-block:
        clamp(75px, 9vw, 120px)
        clamp(65px, 8vw, 105px);

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


.note-intro-inner {

    max-width: 850px;

    margin-inline: auto;

    text-align: center;
}


.note-intro .section-label {

    margin-bottom: 20px;
}


.note-intro h1 {

    margin: 0;

    color: var(--ivory);

    font-family: var(--font-display);

    font-size: clamp(
        4rem,
        7vw,
        6.5rem
    );

    font-weight: 500;

    line-height: 0.88;
}


.note-subtitle {

    margin: 22px auto 0;

    color: var(--muted);

    font-family: var(--font-display);

    font-size: clamp(
        1.25rem,
        2vw,
        1.65rem
    );

    font-style: italic;

    line-height: 1.25;
}


.note-opening {

    max-width: 700px;

    margin: 38px auto 0;

    color: var(--muted);

    font-size: 0.92rem;

    line-height: 1.9;
}


.note-opening p {

    margin: 0;
}


/* =========================================================
   02. NOTE DAYS
========================================================= */

.note-day {

    padding-block:
        clamp(60px, 7vw, 95px);

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


.note-day-grid {

    display: grid;

    grid-template-columns:
        minmax(180px, 0.55fr)
        minmax(0, 1.45fr);

    gap: clamp(45px, 8vw, 120px);

    max-width: 1050px;

    margin-inline: auto;

    align-items: start;
}


.note-day-heading {

    padding-top: 3px;
}


.note-day-number {

    margin: 0;

    color: var(--gold);

    font-size: 0.62rem;

    font-weight: 500;

    letter-spacing: 0.20em;

    line-height: 1.4;

    text-transform: uppercase;
}


.note-rule {

    width: 28px;

    height: 1px;

    margin-top: 17px;

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


.note-day-route {

    margin: 18px 0 0;

    color: var(--muted);

    font-family: var(--font-display);

    font-size: 1.35rem;

    font-style: italic;

    line-height: 1.25;
}


.note-day-content {

    max-width: 680px;

    color: var(--muted);

    font-size: 0.88rem;

    line-height: 1.9;
}


.note-day-content p {

    margin: 0;
}


.note-day-content p + p {

    margin-top: 20px;
}


/* =========================================================
   03. THE EXPAT EDIT
========================================================= */

.note-closing {

    padding-block:
        clamp(65px, 8vw, 100px);
}


.note-closing-inner {

    max-width: 900px;

    margin-inline: auto;

    padding:
        clamp(35px, 5vw, 55px)
        clamp(25px, 7vw, 90px);

    background: var(--bg-soft);

    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);

    text-align: center;
}


.note-closing .section-label {

    margin-bottom: 20px;
}


.note-closing-quote {

    max-width: 720px;

    margin: 0 auto;

    color: var(--ivory);

    font-family: var(--font-display);

    font-size: clamp(
        1.55rem,
        2.7vw,
        2.25rem
    );

    font-style: italic;

    line-height: 1.25;
}


/* =========================================================
   04. END NAVIGATION
========================================================= */

.note-end {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    width: 100%;

    padding:
        55px var(--page-padding) 70px;

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


.note-end .text-link {

    display: inline-flex;

    align-items: center;

    color: var(--gold);

    font-family: var(--font-body);

    font-size: 0.64rem;

    font-weight: 500;

    letter-spacing: 0.16em;

    line-height: 1.4;

    text-transform: uppercase;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition),
        opacity var(--transition);
}


.note-end .text-link:hover {

    color: var(--ivory);
}


/* =========================================================
   05. TABLET
========================================================= */

@media (max-width: 800px) {

    .note-day-grid {

        grid-template-columns:
            minmax(150px, 0.45fr)
            minmax(0, 1.55fr);

        gap: 45px;
    }

}


/* =========================================================
   06. PHONE
========================================================= */

@media (max-width: 700px) {

    .note-intro {

        padding-block:
            65px
            55px;
    }


    .note-intro h1 {

        font-size: 3.7rem;

        line-height: 0.9;
    }


    .note-subtitle {

        margin-top: 18px;

        font-size: 1.18rem;

        line-height: 1.3;
    }


    .note-opening {

        margin-top: 28px;

        font-size: 0.84rem;

        line-height: 1.8;
    }


    /* -----------------------------------------------------
       DAYS
    ----------------------------------------------------- */

    .note-day {

        padding-block: 52px;
    }


    .note-day-grid {

        display: block;
    }


    .note-day-heading {

        margin-bottom: 28px;
    }


    .note-day-number {

        font-size: 0.56rem;

        letter-spacing: 0.17em;
    }


    .note-rule {

        margin-top: 13px;
    }


    .note-day-route {

        margin-top: 14px;

        font-size: 1.25rem;

        line-height: 1.25;
    }


    .note-day-content {

        font-size: 0.84rem;

        line-height: 1.8;
    }


    .note-day-content p + p {

        margin-top: 18px;
    }


    /* -----------------------------------------------------
       CLOSING
    ----------------------------------------------------- */

    .note-closing {

        padding-block: 50px;
    }


    .note-closing-inner {

        padding:
            35px 22px;
    }


    .note-closing-quote {

        font-size: 1.55rem;

        line-height: 1.3;
    }


    /* -----------------------------------------------------
       END NAVIGATION
    ----------------------------------------------------- */

    .note-end {

        gap: 25px;

        padding:
            42px 24px 55px;
    }


    .note-end .text-link {

        font-size: 0.54rem;

        letter-spacing: 0.10em;
    }

}


/* =========================================================
   07. VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .note-intro h1 {

        font-size: 3.25rem;
    }


    .note-subtitle {

        font-size: 1.08rem;
    }


    .note-day {

        padding-block: 45px;
    }


    .note-closing-quote {

        font-size: 1.42rem;
    }


    .note-end {

        gap: 18px;

        padding-left: 18px;
        padding-right: 18px;
    }


    .note-end .text-link {

        font-size: 0.48rem;

        letter-spacing: 0.08em;
    }

}

/* =========================================================
   08. HOMEPAGE — EDITORIAL NOTES
========================================================= */

.editorial-notes-home {

    padding-block:
        clamp(75px, 8vw, 110px);

    border-top: 1px solid var(--gold);
}


.editorial-notes-home-inner {

    display: grid;

    grid-template-columns:
        minmax(180px, 0.55fr)
        minmax(0, 1.45fr);

    gap:
        clamp(45px, 8vw, 110px);

    width: min(
        calc(100% - 48px),
        1100px
    );

    margin-inline: auto;

    align-items: start;
}


.editorial-notes-home-heading {

    padding-top: 4px;
}


.editorial-notes-home-heading .section-label {

    margin: 0 0 18px;

    color: var(--gold);

    font-size: 0.62rem;

    font-weight: 500;

    letter-spacing: 0.20em;

    line-height: 1.4;

    text-transform: uppercase;
}


.editorial-notes-home-heading h2 {

    max-width: 260px;

    margin: 0;

    color: var(--ivory);

    font-family: var(--font-display);

    font-size: clamp(
        2rem,
        3vw,
        2.8rem
    );

    font-weight: 400;

    line-height: 1.05;
}


/* ---------------------------------------------------------
   NOTE CONTENT
--------------------------------------------------------- */

.editorial-notes-home-content {

    max-width: 700px;
}


.editorial-notes-home-title {

    margin: 0;

    color: var(--ivory);

    font-family: var(--font-display);

    font-size: clamp(
        1.65rem,
        2.5vw,
        2.15rem
    );

    font-weight: 400;

    line-height: 1.15;
}


.editorial-notes-home-description {

    max-width: 620px;

    margin:
        13px 0 20px;

    color: var(--muted);

    font-family: var(--font-body);

    font-size: 0.84rem;

    font-weight: 300;

    line-height: 1.8;
}


.editorial-notes-home .text-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--gold);

    font-family: var(--font-body);

    font-size: 0.60rem;

    font-weight: 500;

    letter-spacing: 0.15em;

    line-height: 1.4;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        color var(--transition),
        opacity var(--transition);
}


.editorial-notes-home .text-link:hover {

    color: var(--ivory);
}


/* ---------------------------------------------------------
   SECOND NOTE
   Creates separation without needing extra HTML
--------------------------------------------------------- */

.editorial-notes-home-title + .editorial-notes-home-description
+ .text-link
+ .editorial-notes-home-title {

    margin-top: 48px;

    padding-top: 48px;

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


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 700px) {

    .editorial-notes-home {

        padding-block:
            65px
            70px;
    }


    .editorial-notes-home-inner {

        display: block;

        width: calc(100% - 48px);

        margin-inline: auto;

        text-align: center;
    }


    .editorial-notes-home-heading {

        padding-top: 0;

        margin-bottom: 45px;
    }


    .editorial-notes-home-heading .section-label {

        margin-bottom: 14px;

        font-size: 0.58rem;

        letter-spacing: 0.18em;
    }


    .editorial-notes-home-heading h2 {

        max-width: none;

        font-size: 2rem;

        line-height: 1.1;
    }


    .editorial-notes-home-content {

        max-width: 560px;

        margin-inline: auto;
    }


    .editorial-notes-home-title {

        font-size: 1.65rem;

        line-height: 1.15;
    }


    .editorial-notes-home-description {

        max-width: 500px;

        margin:
            12px auto 19px;

        font-size: 0.82rem;

        line-height: 1.75;
    }


    .editorial-notes-home .text-link {

        font-size: 0.56rem;

        letter-spacing: 0.13em;
    }


    .editorial-notes-home-title + .editorial-notes-home-description
    + .text-link
    + .editorial-notes-home-title {

        margin-top: 40px;

        padding-top: 40px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .editorial-notes-home-inner {

        width: calc(100% - 40px);
    }


    .editorial-notes-home-heading {

        margin-bottom: 40px;
    }


    .editorial-notes-home-heading h2 {

        font-size: 1.85rem;
    }


    .editorial-notes-home-title {

        font-size: 1.55rem;
    }


    .editorial-notes-home-description {

        font-size: 0.80rem;

        line-height: 1.72;
    }

}
/* =========================================================
   END — EDITORIAL NOTES V1.0
========================================================= */