/*
Theme Name: Kazumi Portfolio
*/

/* =========================
   Font: Isotype (global)
   ========================= */

@font-face {
    font-family: 'isotyperegular';
    src: url('../fonts/ism-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* =========================
   Global reset + base styles
   (from original main.css)
   ========================= */

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}
html, body {
    overflow-x: hidden;
}

body {
    font-family: 'isotyperegular', serif;
    height: 100%;
    color: #9D9CA0;
}

#wrapper {
    min-height: 100%;
}
#wrapper {
    width: 100%;
}

#banner {
    font-size: 18px;
    color: #A8A7AB;
    letter-spacing: 0.35em; /* NEW: start here, then fine-tune to match PDF */
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
}


#back {
    position: absolute;
    right: 25px;
    bottom: 0;
    padding-right: 0;
    margin-top: 0;
}

#content {
    text-align: center;
    font-size: 16px;
    height: 100%;
    position: relative;
    top: 10%;
    letter-spacing: 0.8px;
    line-height: 1.2em;
}

#content p {
    margin-bottom: 1.5em;
}

#navi {
    position: absolute;
    right: 20px;
    bottom: 25px;
    font-size: 16px;
    margin: 0;
    transform: scale(1.05);
    transform-origin: bottom right;
}


#footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
}

#alphabet {
    float: left;
    margin-bottom: 0;
    font-size: 16px;
}

.vertical {
    width: 18px;
    float: left;
    padding-right: 25px;
    text-align: right;
    letter-spacing: 0.1em;
    line-height: 25px;
}

#categories {
    float: left;
    text-align: left;      /* NEW: left aligned */
    padding-top: 18px;
    line-height: 16px;
    letter-spacing: 0.5px;
    clear: left;
    font-size: 15px;
}

#credit {
    float: left;
    clear: right;
    color: #999;
    font-size: 10px;
    padding-left: 25px;
    padding-bottom: 25px;
    letter-spacing: 0px;
}

a:link,
a:visited {
    color: #555555;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #EC3C00;
}

.tumblr {
    width: 90%;
    min-height: 700px;
    padding: 20px 0 0 50px;
}

/* =========================
   Front page only (homepage)
   (from original index inline CSS)
   ========================= */

/*
  WordPress adds body classes like:
  - .home
  - .front-page
  We scope homepage-only styles to prevent affecting other pages.
*/

body.home #centercontent,
body.front-page #centercontent {
    text-align: center;
    height: 100%;
    margin-top: 15%;
}

body.home .name,
body.front-page .name {
    font-size: 15px;
    letter-spacing: 0.25em;
    margin-top: 8px;
}
.kazumi-home #centercontent {
    text-align: center;
    height: 100%;
    margin-top: 15%;
}
.kazumi-home .name {
    font-size: 15px;
    letter-spacing: 0.25em;
    margin-top: 8px;
}

/* =========================
   Gallery / Letter single pages (from original gallery.css)
   ========================= */

.slideshow{
    position: relative;
    width: 800px;
    height: 800px;
    margin: auto;
    padding: 20px 60px 0 60px;

    /* NEW: prevent overflow on smaller desktops */
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 180px);
}


.pic{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* prevent image dragging/clicking like original */
.pic img{
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    /* NEW: always fully visible */
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    min-width: 320px;
}


.end-right,
.end-left,
.next,
.prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


.next:hover, .prev:hover{
    cursor: pointer;
}

.end-right, .next{
    right: 0;
}

.end-left, .prev{
    left: 0;
}

/* About page (Bio) */
#bio {
    color: #5F5F5F;
    text-align: left;
    width: 700px;
    height: 100%;
    margin: auto;
    padding-top: 50px;
}

/* =========================
   Blog layout (minimal, content-first)
   ========================= */

.kazumi-blog-layout{
    width: 90%;
    margin: 0 auto;
    text-align: left;
}

.kazumi-blog-main{
    width: 62%;
    float: left;
    padding: 20px 40px 60px 50px;
}

.kazumi-blog-side{
    width: 28%;
    float: right;
    padding: 40px 30px 60px 0;
}

.kazumi-blog-item{
    display: flex;
    gap: 16px;
    margin: 0 0 28px 0;
    align-items: flex-start;
}

.kazumi-blog-thumb img{
    display:block;
    width: 120px;
    height: auto;
}

.kazumi-blog-item-title a{
    font-size: 18px;
    letter-spacing: 0.5px;
}

.kazumi-blog-readmore a{
    display:inline-block;
    margin-top: 6px;
}

.kazumi-blog-date{
    margin-top: 10px;
    color: #A8A7AB;
    letter-spacing: 0.25em;
    font-size: 12px;
}

/* Single post */
.kazumi-single{
    width: 90%;
    margin: 0 auto;
    text-align: left;
    padding: 50px 40px 80px 50px;
}

.kazumi-single-title{
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 0.2px;
    margin-bottom: 6px;
    color: rgba(168,167,171,0.6);
}

.kazumi-single-meta{
    color: #B9B8BC;
    letter-spacing: 0.25em;
    margin-bottom: 12px;
    font-size: 12px;
}
.entry-content.kazumi-entry {
    color: rgba(168,167,171,0.8);
}
.kazumi-single-tags{
    color: rgba(157,156,160,0.3);
    font-size: 14px;
    margin-top: 10px;
}

#content .kazumi-entry p {
    margin-bottom: 2em;
}
/* Gallery-like grids inside content */
.kazumi-entry img{
    max-width: 100%;
    height: auto;
}

/* =========================
   Lightbox (simple slider)
   ========================= */

.kazumi-lightbox{
    display:none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.98);
    z-index: 99999;
}

.kazumi-lightbox.is-open{
    display:block;
}

.kazumi-lightbox__inner{
    position: absolute;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.kazumi-lightbox__img{
    max-width: calc(100vw - 160px);
    max-height: calc(100vh - 160px);
    width: auto;
    height: auto;
}

.kazumi-lightbox__close{
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 34px;
    background: transparent;
    border: 0;
    color: #444445;
    cursor: pointer;
}

.kazumi-lightbox__prev,
.kazumi-lightbox__next{
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    background: transparent;
    border: 0;
    color: #444445;
    cursor:pointer;
    padding: 10px 16px;
}

.kazumi-lightbox__prev{ left: 20px; }
.kazumi-lightbox__next{ right: 20px; }

/* =========================
   Blog Archive (1-column)
   ========================= */

.kazumi-blog-archive{
    width: 90%;
    margin: 0 auto;
    padding: 40px 0 80px 50px;
    text-align: left;
}

.kazumi-blog-archive-item{
    margin: 0 0 100px 0;
}

.kazumi-blog-archive-thumb .kazumi-blog-featured-img{
    display: block;
    max-width: 680px;
    width: 100%;
    height: auto;
}

.kazumi-blog-archive-text{
    margin-top: 20px;
}

.kazumi-blog-archive-title a{
    font-size: 14px;
    letter-spacing: 0.5px;
}

.kazumi-blog-archive-date{
    margin-top: 0;
    color: #A8A7AB;
    letter-spacing: 0.25em;
    font-size: 12px;
}
.kazumi-blog-archive-tags {
    display: flex;
    gap: 15px;
}
.kazumi-blog-archive-tags a {
    color: rgba(157,156,160,0.25);
    font-size: 11px;
    letter-spacing: 0.2px;
}
.kazumi-blog-nav{
    font-size: 13px;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
}

.kazumi-blog-nav a{
    color: #555555;
    font-weight: bold;
    text-decoration: none;
}

.kazumi-blog-nav a:hover{
    color: #EC3C00;
}

.kazumi-blog-nav__older:empty,
.kazumi-blog-nav__newer:empty{
    visibility: hidden;
}
.kazumi-blog-archive-excerpt{
    font-size: 12px;
    color: #A8A7AB;
    letter-spacing: 0.25em;
    max-width: 680px;
    opacity: 0.75;
}

.kazumi-blog-archive-excerpt.is-empty{
    opacity: 0.55;
}


/* Blog archive: subtle arrow hint on thumbnail */
.kazumi-blog-archive-thumb {
    position: relative;
    max-width: 725px;
    display: block;
}
.kazumi-blog-arrow-img {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 16px;
    line-height: 1;
    opacity: 0.55;              /* very subtle */
    color: #ffffff;
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
    pointer-events: none;       /* don't block clicking the image */
}


/* ===== Blog: Recent posts (single) ===== */
.blog-recent {
    margin-top: 25px;
}

.blog-recent-title {
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #9D9CA0;
    margin-bottom: 5px;
}

.blog-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-recent-item {
    margin: 0 0 6px 0;
    padding: 0;
}

.blog-recent-item a {
    font-size: 12px;
    font-weight: normal;
    color: #9D9CA0;
    text-decoration: none;
}

.blog-recent-item a:hover {
    color: #444445;
}

.blog-recent-date {
    margin-left: 8px;
    opacity: 0.65;
}

.kazumi-search-link {
    font-size: 16px;
    right: 18px;
    position: absolute;
    bottom: 20px;
}
.kazumi-search-link:hover{ color:#EC3C00; }


.kazumi-search-form{
    width: 600px;
    max-width: calc(100vw - 100px);
    margin: 120px auto 40px auto;
    text-align:left;
}
.kazumi-search-form input[type="search"]{
    width: 100%;
    border: none;
    outline: none;
    font-family: 'isotyperegular', serif;
    font-size: 16px;
    color: #444445;
    background: transparent;
}
.kazumi-search-results{
    width: 600px;
    max-width: calc(100vw - 100px);
    margin: 0 auto 120px auto;
    text-align:left;
}
.kazumi-search-item{
    margin-bottom: 18px;
}
.kazumi-search-item a{
    font-weight: bold;
    color:#444445;
}
.kazumi-search-date{
    font-size: 12px;
    color: #9D9CA0;
    margin-top: 2px;
}
.kazumi-search-empty{
    color:#9D9CA0;
}
/* Search page - minimal visible input */
.kazumi-search-form input[type="search"]{
    width: 100%;
    border: none;
    outline: none;
    background: transparent;

    font-family: 'isotyperegular', serif;
    font-size: 16px;
    color: #444445;

    padding: 6px 0;
    border-bottom: 1px solid rgba(68, 68, 69, 0.15); /* minimal underline */
}

.kazumi-search-form input[type="search"]::placeholder{
    color: rgba(68, 68, 69, 0.35);
}

.kazumi-search-form input[type="search"]:focus{
    border-bottom-color: rgba(68, 68, 69, 0.35);
}

.kazumi-recent-on-search{
    width: 600px;
    max-width: calc(100vw - 100px);
    margin: 20px auto 50px auto;
    text-align: left;
}

.kazumi-recent-title{
    color: #9D9CA0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

.kazumi-recent-item{
    margin-bottom: 3px;
    font-size: 14px;
    line-height: 18px;
}

.kazumi-recent-item a{
    color: #777777;
    font-weight: bold;
    text-decoration: none;
    margin-right: 8px;
}

.kazumi-recent-date{
    color: #9D9CA0;
    font-size: 12px;
}

/* =========================
   WORK: archive (3-col grid)
   ========================= */

.kazumi-work-grid{
    width: 90%;
    max-width: calc(100% - 50px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 40px;
    margin-top: 40px;
}

.kazumi-work-card{
    display: block;
    text-decoration: none;
}

.kazumi-work-thumb img{
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.kazumi-work-thumb p {
    font-size: 14px;
    color: #A8A7AB;
    margin-top: 7px;
    text-align: left;
}

/* responsive */
@media (max-width: 900px){
    .kazumi-work-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
    .kazumi-work-grid{ grid-template-columns: 1fr; }
}

/* =========================
   WORK: single
   ========================= */

.kazumi-work-entry{
    width: 860px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
    text-align: left;
}

.kazumi-work-title{
    font-size: 22px;
    letter-spacing: 0.8px;
    margin: 0 0 6px 0;
}

.kazumi-work-meta{
    margin-top: 8px;
    opacity: .75;
    font-size: 13px;
    line-height: 1.5;
}

.kazumi-work-meta-row{
    display: flex;
    gap: 10px;
}

.kazumi-work-meta-label{
    width: 70px;
    opacity: .7;
}

.kazumi-work-meta-link,
.kazumi-work-meta-text{
    opacity: .95;
}

.kazumi-work-desc{
    margin-top: 14px;
    opacity: .65;
    font-size: 13px;
    line-height: 1.7;
}

.kazumi-work-content{
    margin-top: 30px;
}

.kazumi-work-content .wp-block-gallery{
    margin-top: 20px;
}



/*------------------------------------
  Responsive – Home (Mobile)
------------------------------------*/
@media (max-width: 420px) {
    .kazumi-home #wrapper #centercontent img{height:auto;width:100%}
}
@media (max-width: 768px) {
    .kazumi-home {height: 100%;display: flex;justify-content: center;align-items: center;}
    .kazumi-home #wrapper {display: flex;justify-content: center;align-items: center;}
    .kazumi-home #wrapper #centercontent {margin: 0;}
}

/*----------------------------------------------
  Responsive – Back, Search & Copyright (Mobile)
----------------------------------------------*/
@media (max-width: 768px) {
    #footer #navi{transform: scale(1);font-size: 20px;position: unset;display: flex;flex-direction: column;padding-inline: 25px;margin-bottom: 15px;align-items: end;}
    #footer #navi #back,#footer #navi .kazumi-search-link{text-align: center;margin-top: 10px;font-size: 14px;}
    #footer #credit{float: unset;text-align: center;font-size: 12px;padding-inline: 25px;line-height: 15px;color: #A8A7AB;}
    /*#footer #navi #back a,#footer #navi .kazumi-search-link{color: #A8A7AB;}*/
}


/*----------------------------------------------
  Responsive – Alphabet Archive (/home) (Mobile)
----------------------------------------------*/
@media (max-width: 768px) {
    .page-template-page-home  #footer #navi{margin-bottom: 30px;}
    .page-template-page-home #categories{display:flex;flex-direction:column;gap: 5px;padding-top: 15px;}
    .page-template-page-home .vertical{padding-right: 28px;line-height: 40px;}
    .page-template-page-home .vertical:last-child{padding-right: 0;}
    .page-template-page-home #alphabet{font-size: 16px;display: flex;justify-content: flex-end;width: 294px;}
    .page-template-page-home #categories{text-align: left;font-size: 14px;line-height: 16px;margin-top: 0;width: 293px;}
}
@media (max-width: 420px) {
    .page-template-page-home .vertical{padding-right: 25px;}
    .page-template-page-home .vertical:last-child{padding-right: 0;}
    .page-template-page-home #categories{margin-top: 0;width: 275px;}
}
@media (max-width: 360px) {
    .page-template-page-home .vertical{padding-right: 20px;}
    .page-template-page-home #categories{margin-top: 0;width: 246px;}
}


/*----------------------------------------------
  Responsive – Letter single (Mobile)
----------------------------------------------*/
@media (max-width: 420px) {
    .single-kazumi_letter .pic img {min-width: auto;}
}
@media (max-width: 360px) {
    .single-kazumi_letter #navi{bottom: 50px;font-size: 14px;}
}


/*----------------------------------------------
  Responsive – Blog archive (Mobile)
----------------------------------------------*/
@media (max-width: 820px) {
    .blog #footer{background: #ffffff;}
    .kazumi-blog-archive {padding-inline: 0;width: 80%;padding-bottom: 150px;}
    .kazumi-blog-archive-excerpt {letter-spacing: 0.15em;line-height: 1.15em;}
    .kazumi-blog-archive-thumb {padding-right: 50px;}
    .kazumi-blog-archive-tags { flex-wrap: wrap; gap: 5px; line-height: 10px; margin-top: 5px; }
}


/*----------------------------------------------
  Responsive – Blog single (Mobile)
----------------------------------------------*/
@media (max-width: 768px) {
    .kazumi-single {padding-inline: 0;padding-bottom: 200px;}
    .single-post #footer{background: #ffffff;}
    .kazumi-single .wp-block-gallery, .wp-block-gallery.has-nested-images { display: block; }
    .kazumi-single .wp-block-gallery .wp-block-image {width: 100% !important;margin: 0 0 18px 0 !important;}
    .kazumi-single .wp-block-gallery.columns-2, .wp-block-gallery.columns-3, .wp-block-gallery.columns-4 { grid-template-columns: 1fr !important; }
}


/*----------------------------------------------
  Responsive – Search (Mobile)
----------------------------------------------*/
@media (max-width: 768px) {
    .kazumi-recent-on-search { max-width: unset; width: 100%; }
    .kazumi-recent-title { font-size: 15px; }
    .kazumi-recent-item { font-size: 13px; }
}




/*----------------------------------------------
  Responsive – Work Archive (Mobile)
----------------------------------------------*/
@media (max-width: 768px) {
    .kazumi-work-grid {padding-bottom: 150px;}
    .post-type-archive-kazumi_work #footer{background: #ffffff;}
}



/*----------------------------------------------
  Responsive – Work Single (Mobile)
----------------------------------------------*/
@media (max-width: 768px) {
    .single-kazumi_work #footer{background: #ffffff;}
    .kazumi-work-content { margin-top: 0; }
    .kazumi-work-entry {margin-top: 20px;padding-bottom: 150px;}
    .kazumi-work-title { font-size: 16px; }
    .kazumi-work-entry .wp-block-gallery, .wp-block-gallery.has-nested-images { display: block; }
    .kazumi-work-entry .wp-block-gallery .wp-block-image {width: 100% !important;margin: 0 0 18px 0 !important;}
    .kazumi-work-entry .wp-block-gallery.columns-2, .wp-block-gallery.columns-3, .wp-block-gallery.columns-4 { grid-template-columns: 1fr !important; }
}



/*----------------------------------------------
  Responsive – About (Mobile)
----------------------------------------------*/
@media (max-width: 768px) {
    #bio {width: 85%;padding-bottom: 150px;}
    .page #footer{background: #ffffff;}
}



/*----------------------------------------------
  Only Desktop
----------------------------------------------*/
@media (min-width: 768px) {
	#back a {color: #777777;font-size: 15px;}
}