body{
    background-color:white;
    min-height:100%;
    margin:0;
    font-family:Karla,sans-serif;
    cursor:url("../mouse.cur"), auto !important;
    overflow-x:hidden;
}

a,
button{
    cursor:url("../mouse.cur"), auto !important;
}

a{
    text-decoration-line:none;
    color:inherit;
}

ul{
    list-style:none;
    margin:0;
    padding:0;
}

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

/* ---------- NAV ---------- */

.nav{
    position:fixed;
    left:0;
    right:0;
    top:0em;
    padding-top:1em;
    padding-bottom:.5em;
    overflow:hidden;
    z-index:20;
    width:100%;
    background:white;
}

.nav-list{
     display:flex;
    width:100%;
    position:relative;
    z-index:2;
    pointer-events:auto;
    align-items:center;   /* ← THIS centers everything vertically */
}

.nav-link,
.nav-item{
    font-family:Karla, sans-serif;
    letter-spacing:.12em;
    font-weight:bold;
    font-size:.9em;
    color:black;
    text-align:center;
    vertical-align:top;
}

/* scalable widths */
.nav-item{
    flex:1 1 0;
    min-width:0;
}

.nav-item:first-child{
  
    align-items:center;       /* vertical alignment with others */
            margin-left:3em; 
}

/* keep original hover feel */
.nav-item:hover{
    animation:bounce 0.5s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
}

@keyframes bounce{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(0,-10px,0);}
}

/* link block fills each flex item */
.nav-link{
    display:block;
    width:100%;
    text-align:center;
    line-height:1.05;
}

/* keep original line breaks */
.nav-link br{
    display:block;
    content:"";
}

/* icon centered, tighter gap */
#navimg{
    display:block;
    max-height:20px;
    max-width:20px;
    margin:0 auto 1px auto;
}

/* logo centered like original */
#logo{
 
    display:inline-block;
    width:auto;
    margin:0 auto;
    text-align:center;
    font-family:Karla, sans-serif;
    letter-spacing:.13em;
    font-weight:bold;
    font-size:1.2em;
    text-decoration-line:underline;
    text-decoration-style:wavy;
    text-decoration-color:skyblue;
    color:skyblue;
    white-space:nowrap;
      line-height:1.2em;
}
/* ---------- GRID ---------- */

.portfolio-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    align-items:center;
}

.portfolio-card{
    background:transparent;
    border:none;
    padding:0;
    margin:0;
    appearance:none;
    -webkit-appearance:none;
}

.portfolio-card-image{
    margin-top:6em;
    margin-left:1.5em;
    margin-right:1.5em;
    margin-bottom:1.5em;
    max-width:325px;
    max-height:300px;
    width:auto;
    height:auto;
    object-fit:contain;
}

.portfolio-card:hover .portfolio-card-image,
.portfolio-card:focus-visible .portfolio-card-image{
    opacity:.5;
}

.portfolio-card-overlay,
.portfolio-card-title,
.portfolio-card-year{
    display:none !important;
}

.portfolio-card,
.portfolio-card:focus,
.portfolio-card:active,
.portfolio-card:focus-visible{
    outline:none;
    box-shadow:none;
}

/* ---------- MODAL ---------- */

.modal{
    display:none;
    position:fixed;
    z-index:50;
    inset:0;
}

.modal.is-open{
    display:block;
}

.modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.8);
}

.modal-panel{
    position:absolute;
    inset:0;
    z-index:2;
}

.modal-scroll{
    position:absolute;
    inset:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding-top:150px;
    padding-bottom:8em;
    box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
    z-index:1;
}

/* ---------- MODAL CONTROLS ---------- */

/* Close X (top-right) */
.modal-close{
    position:fixed;
    top:2em;
    right:1em;
    font-size:40px;
    color:greenyellow;
    background:none;
    border:none;
    padding:0;
    line-height:1;
    z-index:300;
    cursor:pointer;
}

/* Arrows */
.modal-nav{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    font-size:30px;
    color:lightskyblue;
    background:none;
    border:none;
    z-index:300;
    cursor:pointer;
}

/* Left arrow */
.modal-prev{
    left:1em;
}

/* Right arrow */
.modal-next{
    right:1em;
}

/* ---------- MODAL CONTENT ---------- */

.modal-meta{
    max-width:700px;
    margin:auto;
    margin-bottom:2em;
    padding-left:1.5em;
    padding-right:1.5em;
    text-align:center;
}

.modal-title{
    margin:0 0 .35em 0;
    font-size:14px;
    line-height:1.3em;
    font-weight:bold;
    font-style:italic;
    color:black;
}

.modal-year,
.modal-medium,
.modal-dimensions{
    display:block;
    margin:.2em 0;
    font-size:10.5pt;
    line-height:1.45em;
    color:black;
}

.modal-image-wrap{
    margin:0 auto 2em auto;
    width:100%;
}

.modal-work-image{
    max-width:650px;
    width:auto;
    height:auto;
    margin:auto;
    display:block;
    object-fit:contain;
}

.modal-image-caption{
    display:none !important;
}

/* ---------- TYPE ---------- */

h2{color:hotpink;}
h3{color:green;}
h4{text-decoration:overline;}
h5{text-decoration:underline wavy;}
h6{text-decoration:underline dotted;}
p{font-size:14px;}


/* txt section */

.readcategories{
    padding-top:7em;
    text-align:center;
}
.readcategories2{
    padding-top:.5em;
    text-align:center;
}
.readcategories p{
    font-size: 1.5em;
    font-weight:bold;
}
.readcategories2 p{
    font-size: 1.5em;
    font-weight:bold;
}
.contentread{
        padding-top:1em;
        background:white;
        display: flex;
        flex-direction:row ltr;
        flex-wrap:wrap;
        justify-content:space-evenly;
        align-items:center;
        width:100%;
        padding-bottom: 2em;
    }
.contentread img{
    object-fit: cover;
    width: 250px;
    height: 250px;
    padding-bottom: .75em;
}
.contentread img:hover{
    opacity:50%;
}
.txtImgblock a, a:hover, a:focus, a:active {
    color:inherit;
    text-decoration:none;!important;
}

.txtImginfo{
    font-size:1.1em;
    font-weight:bolder;
}
.txtImginfo:hover{
    color:hotpink;
}
.txtImgsubtitle{
    font-size:.8em;
    max-width:250px;
}
/* end of txt section */
/* individual txt section */

#txtpostcontentcontainer1{
    position: absolute;
    padding-left: 4em;
    padding-right: 4em;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-auto-rows:0fr;
    text-align: left;
    grid-column-gap:1em;
    grid-row-gap:0;
    padding-bottom:0;
    margin-bottom:0;
}
#txtpostcontentcontainer1 a{
    color: inherit;
    text-decoration: none;
}
#txtpostcontentcontainer1 a:hover{
    color: skyblue;
}
/* to read */
.griditem1 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
}
/* books */
.griditem4 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
}
/* book links */
/* essays */
.griditem5 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
}
/* essaylinks */
/* to click */
.griditem2 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
}
/* clicklinks */
.griditem6 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 5;
    grid-row-end: 6;
}
/* to see */
.griditem3 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 6;
    grid-row-end: 7;
}
/* seelinks */
.griditem7 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 7;
    grid-row-end: 8;
}
.griditem6, .griditem7 a{
   display:inline;
}

/* end of individual txt section */

/* bibliography */
#txtpostcontentcontainer2{
    text-align:center;
    padding-top:15em;
}
#underconstruction{    
    display:block;
    margin:0 auto;
}

/*-------About----------*/
 #container1 {
        position: absolute;
        top:1.5em;
        padding:5em;
    }
    #container1 a{
        color: skyblue;
    }
/*-------Contact-------------*/
    #container2 {
        position:absolute;
        width:100%;
        text-align:center;
        top:5em;
        padding-top:5em;
        padding-bottom:5em;
    }
    #container2 a{
        color: white;
        background:rgba(108,192,255,.48);
    }
    #container2 a:hover{
        color:magenta;
    }
#container2 img{
    display:block;
    margin:0 auto;
}
/*-------CV-------------*/
#container3 {
        position: absolute;
        top:1.5em;
        padding:5em;
    }
    #container3 a{
        text-decoration:inherit;
        color:black;
    }
  #container3 a:hover{
        color: skyblue;
        text-decoration:underline;
        text-decoration-style:wavy;
    }
/* ---------- MOBILE ---------- */

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

   .nav{
        position:fixed;
        left:0;
        right:0;
        top:0em;
        padding-top:1em;
        padding-bottom:.5em;
        overflow:hidden;
        z-index:20;
        width:100%;
        background:white;
    }

    .nav-list{
        display:flex;
    width:100%;
    position:relative;
    z-index:2;
    pointer-events:auto;
    align-items:center;   /* ← THIS centers everything vertically */
    }

    .nav-link,
    .nav-item{
        font-family:Karla, sans-serif;
        letter-spacing:.12em;
        font-weight:bold;
        font-size:.9em;
        color:black;
        text-align:center;
        vertical-align:top;
    }

    .nav-item{
        flex:1 1 0;
        min-width:0;
    }

    .nav-item:first-child{
        margin-left:.75em; 
    }

    .nav-link{
        display:block;
        width:100%;
        text-align:center;
        line-height:1.05;
    }

    .nav-link br{
        display:block;
    }

    #navimg{
        display:block;
        max-height:20px;
        max-width:20px;
        margin:0 auto 1px auto;
    }

    #logo{
        display:block;
        width:100%;
        text-align:left;
        font-family:Karla, sans-serif;
        letter-spacing:.13em;
        font-weight:bold;
        font-size:.7em;
        text-decoration-line:underline;
        text-decoration-style:wavy;
        text-decoration-color:skyblue;
        color:skyblue;
        white-space:normal;
         line-height:1.2em;
    }

    .portfolio-card-image{
        max-width:250px;
        margin-left:1em;
        margin-right:1em;
        margin-bottom:1em;
    }

    .modal-scroll{
        padding-top:150px;
        padding-bottom:6em;
    }

    .modal-work-image{
        max-width:400px;
    }


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

    .portfolio-card-image{
        max-width:88vw;
    }

    .modal-work-image{
        max-width:88vw;
    }

    
}