@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');

/* || RESET */
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea {
    font: inherit;
}

/* || VARIABLES */

:root {
    /* FONTS */
    --FF: 'Lato', sans-serif;
    --FF-HEADINGS: Libre Baskerville, serif;
    --FS: clamp(1rem, 2.2vh, 1.5rem);

    /* COLORS */
    --BGCOLOR: rgb(140, 174, 205);
    --BGCOLOR-FADE:rgb(182, 182, 192);
    --BGIMAGE: linear-gradient(to bottom, var(--BGCOLOR), var(--BGCOLOR-FADE));
    --BODY-BGCOLOR: #FFF;
    --FONT-COLOR: #000;
    --BORDER-COLOR: #333;
    --HIGHLIGHT-COLOR: rgb(63, 76, 0);
    --LINK-COLOR: #000;
    --LINK-HOVER: hsla(0, 0%, 0%, 0.6);
    --LINK-ACTIVE: rgb(140, 174, 205);
    --HEADER-BGCOLOR: #FFF;
    --HEADER-COLOR: #000;
    --NAV-BGCOLOR: rgb(182, 182, 192);

    /* BORDERS */
    --BORDERS: 1px solid var(--BORDER-COLOR);

    /* STANDARD PADDDING */
    --PADDING-TB: 0.25em;
    --PADDING-SIDE: 2.5%;
    --PADDING-BOTTOM: 0.50em;

    /* STANDARD MARGIN */
    --MARGIN: clamp(1em, 2.5vh, 1.5em), 0;
}

/* || UTILITY CLASSES */
.offscreen {
    position: absolute;
    left: -10000px;
}

.nowrap {
    white-space: nowrap;
}

.center {
    text-align: center;
}

/* || GENERAL STYLES */

html {
    scroll-behavior: smooth;
    font-size: var(--FS);
    font-family: var(--FF);
    background-color: var(--BGCOLOR);
    background-image: var(--BGIMAGE);
}

body {
    background-color: var(--BODY-BGCOLOR);
    color: var(--FONT-COLOR);
    min-height: 100vh;
    max-width: 900px;
    margin: auto;
    border-left: var(--BORDERS);
    border-right: var(--BORDERS);
    box-shadow: 0 0 10px var(--BORDER-COLOR);

    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: 90px 40px auto 35px;
    grid-template-areas: "hd hd hd hd hd hd hd hd so"
                         "nv nv nv nv nv nv nv nv nv"
                         "mn mn mn mn mn mn mn mn mn"
                         "ft ft ft ft ft ft ft ft ft";
}

h1, h2, h3 {
    font-family: var(--FF);
    letter-spacing: 0.1em;
}

h2, h3 {
    margin-bottom: 1em;
    color: var(--HIGHLIGHT-COLOR);
}

p {
    line-height: 1.5;
}

a:any-link {
    color: var(--LINK-COLOR);
    text-decoration: none;
}

a:hover, a:focus-visible {
    color: var(--LINK-HOVER);
}

a:active {
    color: var(--LINK-ACTIVE);
}

/* HEADER */

.header {
    grid-area: hd;
    position: sticky;
    display: grid;
    grid-column: 0 / 1;
    grid-row: 0 / 8;
    top: 0;
    z-index: 1;
}

.header__h1 {
    font-family: var(--FF-HEADINGS);
    text-align: left;
    background-color: var(--HEADER-BGCOLOR);
    color: var(--HEADER-COLOR);
    padding: var(--PADDING-TB) var(--PADDING-SIDE);
}

.social {
    grid-area: so;
    position: sticky;
    display: grid;
    grid-row: 0 / 1;
    grid-column: 9 / 10;
    top: 0;
    z-index: 1;
    background-color: var(--HEADER-BGCOLOR);
}

.social__ul {
    list-style-type: none;
    display: flex;
    align-content: start;
    justify-content: end;
    padding: var(--PADDING-TB);
}

/* NAVIGATION */
.nav {
    grid-area: nv;
    background-color: var(--NAV-BGCOLOR);
    border-bottom: var(--BORDERS);
    border-top: var(--BORDERS);
    font-weight: bold;
    box-shadow: 0, 6px, 5px, -5px, var(--BORDER-COLOR);
    
}

.nav__ul {
    padding: var(--PADDING-TB) var(--PADDING-SIDE);
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
}

/* FOOTER */
.footer {
    grid-area: ft;
    position: sticky;
    bottom: 0;
    background-color: var(--HEADER-BGCOLOR);
    color: var(--HEADER-COLOR);
    padding: var(--PADDING-TB);
    text-align: center;
}

/* MAIN */
.main {
    grid-area: mn;
    padding: var(--PADDING-TB) var(--PADDING-SIDE);
    display: grid;
    grid-template-columns: repeat(1, 2fr 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 1em;
}

.book__published {
    grid-column: 1 / 4;   /* spans columns 1, 2, and 3 of main grid */
    display: grid;
    grid-template-columns: 1.5fr 1.25fr 1.25fr;  /* 3 columns: image + text split */
    gap: 30px;
    align-items: start;
}

.book__published img {
    grid-column: 1 / 2;
    width: 100%;       /* scale down to container */
    max-width: 300px;  /* never grow beyond this */
    height: auto;      /* keep aspect ratio */
    display: block;    /* avoids extra space below */
    margin-left: 0;
    margin-right: auto;
    margin-top: 20px; /* space below the nav bar */
    border-radius: 3px; /* tiny rounding for realism */
    /* Book-on-a-table lighting */
    box-shadow:
            0px 8px 20px rgba(0, 0, 0, 0.25),    /* soft diffuse shadow below */
            12px 12px 25px rgba(0, 0, 0, 0.35),  /* main deep shadow bottom-right */
            1px 1px 4px rgba(0, 0, 0, 0.15);     /* tight close-in shadow for realism */
}

.h1_book {
    text-align: center;
    margin-bottom: 1em;
}

.book__article {
    grid-column: 2 / 4;  /* spans columns 2 and 3 */
    grid-row: 1 / 2;
    display: block; /* or grid/flex if needed */
    margin-top: 20px; /* space below the nav bar */
}

.book__article a {
    color: blue;
}

.book__article a:hover {
    color: darkblue;
}

.book__articleP {
    margin-bottom: .75em;  /* space after each paragraph */
    line-height: 1.0;    /* improves readability */
    /* font-size: 0.85rem; */
}

.book__quote {
    font-size: 0.85rem; /* smaller than normal */
    font-style: italic; /* optional, for a nice quote style */
    color: #555;        /* optional, softer color */
    margin-top: 5px;   /* some spacing above */
}

.main__barb {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.hero__barb {
    position: relative;
}

.hero__barb img {
    display: block;    /* avoids extra space below */
    max-width: 90%;    /* never grow beyond this */
    float: right;
    width: 100%;       /* scale down to container */
    margin-top: 10px;
    height: auto;      /* keep aspect ratio */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* soft shadow */
    border-radius: 8px; /* soften corners */
    filter: brightness(1.05) contrast(0.98);
    border: none;
}

.hero__barb::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, rgba(255,255,255,0) 85%, rgba(255,255,255,1) 100%);
    pointer-events: none;
}

.main__article {
    display: grid;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.main__article h1 {
    padding-top: var(--PADDING-BOTTOM);
}

.main__article-list {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

.main__article-list ul {
    line-height: 1.5;
    padding: var(--PADDING-SIDE);
}

.main__article-list h2 {
    margin: 0;
}

.hero__prairie {
    grid-column: 1 / 3;
    grid-row: 4 / 4;
    border-left: var(--BORDERS);
    border-right: var(--BORDERS);
    box-shadow: 0 0 10px var(--BORDER-COLOR);
}

/* CONTACT FORM CSS */

.contact__main {
    grid-area: mn;
    padding: var(--PADDING-TB) var(--PADDING-SIDE);
    display: grid;
    grid-template-columns: 1.5fr 1.5fr;
    grid-template-rows: auto 75px auto;
    gap: 1em;
}

.contact__parallax {
    background-image: url("../images/lhotp_class.jpg");
    min-height: 700px;
    width: 100%;
    height: auto;
    margin-top: 5px;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    grid-column: 1 / 3;
    grid-row: 1 / 2;

    border-left: var(--BORDERS);
    border-right: var(--BORDERS);
    box-shadow: 0 0 10px var(--BORDER-COLOR);
}

.contact__h1 {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin: 0;
    font-size: 2.0em;
    color: rgb(142, 126, 107);
    place-content: start center;
    font-weight: bold;
}

.contact__ul {
    padding-left: .75em;
}

.contact__form {
    display: grid;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.contact__fieldset {
    border: none;
}

.contact__p {
    margin: 1em 0;
}

.contact__label {
    display: block;
    font-weight: bold;
}

.contact__input {
    padding: 0.5em;
    border-radius: 15px;
    border-width: 2px;
    width: 100%;
}

.contact__textarea {
    padding: 0.5em;
    border-radius: 15px;
    border-width: 2px;
    width: 100%;
}

.contact__button {
    padding: 0.5em;
    border-radius: 15px;
    background-color: var(--NAV-BGCOLOR);
    color: var(--HEADER-COLOR);
}

/* ABOUT FORM CSS */

.about {
    grid-area: mn;
    padding: var(--PADDING-TB) var(--PADDING-SIDE);
    display: grid;
    grid-template-columns: 1.5fr 1.5fr;
    grid-template-rows: auto 50px auto auto;
    gap: 1em;
}

.about__h1 {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 2 / 2;
    place-content: center center;
    font-weight: bold;
    color: rgb(142, 126, 107);
    font-size: 1.5em;
    opacity: 0.75;
}

.main__about {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

.main__about img {
    float: right;
    width: 40%;
    height: auto;
    margin: var(--PADDING-TB);
}

.barb__about img {
    border-left: var(--BORDERS);
    border-right: var(--BORDERS);
    box-shadow: 0 0 10px var(--BORDER-COLOR);
}

.parallax {
    background-image: url("../images/badlands.jpg");
    min-height: 700px;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    grid-column: 1 / 3;
    grid-row: 1 / 1;

    border-left: var(--BORDERS);
    border-right: var(--BORDERS);
    box-shadow: 0 0 10px var(--BORDER-COLOR);
}

/* Research FORM CSS */

.main__research {
    grid-area: mn;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 75px auto auto auto;
}

.research__general {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    padding: var(--PADDING-TB);
}

.research__general img {
    float: right;
    width: 50%;
    height: auto;
    margin: var(--PADDING-TB);

}

.research__list a:hover {
    color: darkblue;
}

.research__list a:link {
    color: blue;
}

.research__list a:visited {
    color: slateblue;
}

.research__ul {
    list-style-type: none;
}

.research__h1 {
    display: grid;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    place-content: center start;
    font-weight: bold;
    color: rgb(142, 126, 107);
    font-size: 1.5em;
    opacity: 0.75;
    padding: var(--PADDING-TB);
}

.research__paragraph {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    margin: var(--PADDING-TB);
}

.barb__research img {
    border-left: var(--BORDERS);
    border-right: var(--BORDERS);
    box-shadow: 0 0 10px var(--BORDER-COLOR);
}

.parallax__research {
    background-image: url("../images/weather_map.jpg");
    min-height: 700px;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    grid-column: 1 / 2;
    grid-row: 3 / 4;

    border-left: var(--BORDERS);
    border-right: var(--BORDERS);
    box-shadow: 0 0 10px var(--BORDER-COLOR);
}

/* Writing FORM CSS */

.main__writing {
    grid-area: mn;
    display: grid;
    grid-template-columns: 1.5fr;
    grid-template-rows: auto 50px auto;
    padding: var(--PADDING-TB) var(--PADDING-SIDE);
    gap: 1em;
}

.writing__h1 {
    display: grid;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    place-content: center center;
    font-weight: bold;
    color: rgb(142, 126, 107);
    font-size: 1.50em;
    opacity: 0.75;
    padding-top: 15px;
    padding-bottom: 20px;
}

.writing__section {
    display: grid;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    padding: var(--PADDING-TB);
}

.writing__ul a:hover {
    color: darkblue;
}

.writing__ul a:link {
    color: blue;
}

.writing__ul a:visited {
    color: slateblue;
}

.writing__p a:hover {
    color: darkblue;
}

.writing__p a:link {
    color: blue;
}

.writing__p a:visited {
    color: slateblue;
}

.writing__ul {
    line-height: 1.5;
    padding-left: 5%;
}

.parallax__writing {
    background-image: url("../images/typewriter_image.jpg");
    min-height: 700px;
    width: 100%;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    grid-column: 1 / 2;
    grid-row: 1 / 2;

    border-left: var(--BORDERS);
    border-right: var(--BORDERS);
    box-shadow: 0 0 10px var(--BORDER-COLOR);

}