/*
Theme Name: HATAKITI
Theme URI: https://hatakiti.com
Author: HATAKITI
Description: HATAKITI.com official theme. A personal archive for theatre thought, viewing records, and daily writing. Black-based, theatrical-lighting motif.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: hatakiti
*/

/* -------------------------------------------------
   Reset / base
------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:root{
    --hk-bg: #0a0a0c;
    --hk-bg-elevated: #151517;
    --hk-bg-card: #1b1b1e;
    --hk-border: #2c2c30;
    --hk-fg: #ececef;
    --hk-fg-dim: #a3a3aa;
    --hk-fg-faint: #6d6d75;
    --hk-accent-warm: #e8a33d;
    --hk-accent-cool: #6fa8dc;
    --hk-link: #e8c07d;
    --hk-max-width: 1080px;
    --hk-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
    --hk-font-serif: "Shippori Mincho", "Hiragino Mincho ProN", serif;
}

html { background: var(--hk-bg); }

body {
    margin: 0;
    background: var(--hk-bg);
    color: var(--hk-fg);
    font-family: var(--hk-font);
    line-height: 1.9;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--hk-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.5; margin: 0 0 0.75em; color: var(--hk-fg); }

p { margin: 0 0 1.3em; }

ul, ol { padding-left: 1.4em; }

.hk-container {
    max-width: var(--hk-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.hk-screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}

/* -------------------------------------------------
   Header / Logo
------------------------------------------------- */
.hk-site-header {
    padding: 40px 20px 0;
    text-align: center;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(232,163,61,0.10), transparent 55%),
        radial-gradient(ellipse at 85% 0%, rgba(111,168,220,0.10), transparent 55%);
}

.hk-logo {
    display: inline-block;
    max-width: 480px;
    width: 100%;
    padding: 0 16px;
}

.hk-logo img { width: 100%; height: auto; }

.hk-logo-text {
    font-size: 28px;
    letter-spacing: 0.12em;
    color: var(--hk-fg);
}

/* -------------------------------------------------
   Global nav (horizontal menu)
------------------------------------------------- */
.hk-nav-wrap {
    margin-top: 28px;
    border-top: 1px solid var(--hk-border);
    border-bottom: 1px solid var(--hk-border);
    background: var(--hk-bg-elevated);
}

.hk-nav {
    max-width: var(--hk-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.hk-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.hk-nav li { border-left: 1px solid var(--hk-border); }
.hk-nav li:first-child { border-left: none; }

.hk-nav a {
    display: block;
    padding: 16px 22px;
    color: var(--hk-fg-dim);
    font-size: 14px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.hk-nav a:hover,
.hk-nav .current-menu-item a,
.hk-nav .current-menu-parent a {
    color: var(--hk-accent-warm);
    text-decoration: none;
}

.hk-nav-toggle {
    display: none;
    width: 100%;
    background: none;
    border: none;
    color: var(--hk-fg);
    font-size: 15px;
    padding: 14px 20px;
    text-align: center;
    cursor: pointer;
}

/* -------------------------------------------------
   Intro statement
------------------------------------------------- */
.hk-intro {
    max-width: 640px;
    margin: 56px auto;
    padding: 0 20px;
    text-align: center;
    color: var(--hk-fg-dim);
    font-size: 17px;
    line-height: 2.1;
}

.hk-intro strong { color: var(--hk-fg); font-weight: 600; }

/* -------------------------------------------------
   Section headings
------------------------------------------------- */
.hk-section {
    margin: 64px 0;
}

.hk-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--hk-border);
    padding-bottom: 12px;
}

.hk-section-head h2 {
    font-size: 20px;
    letter-spacing: 0.04em;
    margin: 0;
}

.hk-section-head .hk-more {
    font-size: 13px;
    color: var(--hk-fg-faint);
}

/* -------------------------------------------------
   Cards
------------------------------------------------- */
.hk-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hk-card {
    background: var(--hk-bg-card);
    border: 1px solid var(--hk-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.hk-card:hover { border-color: var(--hk-accent-warm); }

.hk-card-thumb {
    aspect-ratio: 16 / 9;
    background: var(--hk-bg-elevated);
    overflow: hidden;
}

.hk-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.hk-card-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }

.hk-card-type {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--hk-accent-warm);
    margin-bottom: 8px;
}

.hk-card-title {
    font-size: 16px;
    margin-bottom: 10px;
}

.hk-card-title a { color: var(--hk-fg); }

.hk-card-excerpt {
    font-size: 13px;
    color: var(--hk-fg-dim);
    flex: 1;
}

.hk-card-meta {
    font-size: 12px;
    color: var(--hk-fg-faint);
    margin-top: 12px;
}

/* -------------------------------------------------
   Content nav tiles (各コンテンツへの導線)
------------------------------------------------- */
.hk-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hk-tile {
    display: block;
    border: 1px solid var(--hk-border);
    padding: 22px 16px;
    text-align: center;
    color: var(--hk-fg);
    background: var(--hk-bg-elevated);
}

.hk-tile:hover {
    border-color: var(--hk-accent-cool);
    text-decoration: none;
    color: var(--hk-accent-cool);
}

.hk-tile-label { display: block; font-size: 14px; letter-spacing: 0.04em; }

/* -------------------------------------------------
   StageArt block
------------------------------------------------- */
.hk-stageart {
    border: 1px solid var(--hk-border);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(111,168,220,0.06), rgba(232,163,61,0.06));
}

.hk-stageart h3 { margin: 0 0 8px; font-size: 18px; }
.hk-stageart p { margin: 0; color: var(--hk-fg-dim); font-size: 14px; }

.hk-btn {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid var(--hk-fg-dim);
    color: var(--hk-fg);
    font-size: 13px;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.hk-btn:hover {
    border-color: var(--hk-accent-warm);
    color: var(--hk-accent-warm);
    text-decoration: none;
}

.hk-badge-soon {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--hk-fg-faint);
    border: 1px dashed var(--hk-fg-faint);
    padding: 4px 12px;
}

/* -------------------------------------------------
   Article / single
------------------------------------------------- */
.hk-article {
    max-width: 720px;
    margin: 48px auto 80px;
    padding: 0 20px;
}

.hk-article-header { margin-bottom: 32px; text-align: center; }

.hk-article-header h1 {
    font-size: 26px;
    margin-bottom: 14px;
}

.hk-article-meta {
    font-size: 13px;
    color: var(--hk-fg-faint);
}

.hk-article-meta a { color: var(--hk-fg-faint); }

.hk-occult-subtitle {
    margin: 10px 0 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--hk-accent-warm);
    text-transform: uppercase;
}

/* Newspaper-style multi-column layout for 週刊オカルト新聞 (docs/07
   "新聞レイアウト" — PC: 複数カラム / スマートフォン: 自然に1カラム).
   The 大見出し stays full-width (front-page lead treatment); only
   中記事・小記事 go into columns, reusing the existing 900px breakpoint
   already used elsewhere in this stylesheet. */
.hk-occult-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.hk-record-list--grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.hk-record-list--grid li { border-bottom: 1px solid var(--hk-border); }

@media (min-width: 901px) {
    .hk-occult-grid { grid-template-columns: 1fr 1fr; }
    .hk-record-list--grid { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

.hk-article-thumb { margin: 0 0 32px; }

.hk-article-body { font-size: 16px; }

.hk-article-body p { margin: 0 0 1.4em; }

.hk-article-body h2, .hk-article-body h3 {
    margin-top: 2em;
}

.hk-article-body pre {
    background: var(--hk-bg-elevated);
    border: 1px solid var(--hk-border);
    padding: 16px 20px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.7;
}

.hk-article-body blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--hk-accent-warm);
    color: var(--hk-fg-dim);
}

.hk-article-tags {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--hk-border);
}

.hk-tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.hk-tag-list a {
    display: inline-block;
    font-size: 12px;
    padding: 5px 12px;
    border: 1px solid var(--hk-border);
    color: var(--hk-fg-dim);
}

.hk-tag-list a:hover { border-color: var(--hk-accent-cool); color: var(--hk-accent-cool); text-decoration: none; }

/* 文責バッジ (theatre essays) */
.hk-credit-badge {
    display: inline-block;
    margin-top: 28px;
    font-size: 13px;
    color: var(--hk-fg-faint);
    letter-spacing: 0.04em;
    border-top: 1px dotted var(--hk-border);
    padding-top: 14px;
}

/* -------------------------------------------------
   Structured record info box (観劇記録・映画記録)
------------------------------------------------- */
.hk-record-box {
    border: 1px solid var(--hk-border);
    background: var(--hk-bg-elevated);
    padding: 22px 26px;
    margin-bottom: 32px;
}

.hk-record-box dl {
    margin: 0;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px 16px;
}

.hk-record-box dt { color: var(--hk-fg-faint); font-size: 13px; }
.hk-record-box dd { margin: 0; color: var(--hk-fg); font-size: 14px; }

.hk-about-subnav {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--hk-border);
}

.hk-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px 16px;
}

.hk-book-card {
    display: block;
    color: var(--hk-fg);
}

.hk-book-card:hover { text-decoration: none; }
.hk-book-card:hover .hk-book-title { color: var(--hk-accent-warm); }

.hk-book-cover {
    aspect-ratio: 2 / 3;
    background: var(--hk-bg-elevated);
    border: 1px solid var(--hk-border);
    overflow: hidden;
    margin-bottom: 8px;
}

.hk-book-cover img { width: 100%; height: 100%; object-fit: cover; }

.hk-book-title {
    font-size: 12px;
    line-height: 1.5;
    color: var(--hk-fg-dim);
}

.hk-activity-filter {
    margin: 0 0 32px;
    justify-content: center;
}

.hk-related-link {
    margin-top: 24px;
}

.hk-related-link a {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--hk-accent-cool);
    color: var(--hk-accent-cool);
    font-size: 13px;
}

.hk-related-link a:hover {
    background: var(--hk-accent-cool);
    color: var(--hk-bg);
    text-decoration: none;
}

.hk-divider {
    border: none;
    border-top: 1px dashed var(--hk-border);
    margin: 32px 0;
}

.hk-review-heading {
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--hk-fg-faint);
    margin-bottom: 20px;
}

.hk-method-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 10px;
    border: 1px solid var(--hk-accent-cool);
    color: var(--hk-accent-cool);
}

/* -------------------------------------------------
   Archive list
------------------------------------------------- */
.hk-archive-header { text-align: center; margin: 48px 0 32px; }
.hk-archive-header h1 { font-size: 22px; }
.hk-archive-header p { color: var(--hk-fg-dim); font-size: 14px; }

.hk-record-list { list-style: none; margin: 0 0 40px; padding: 0; }

.hk-record-list li {
    border-bottom: 1px solid var(--hk-border);
    padding: 20px 0;
    display: flex;
    gap: 20px;
    align-items: baseline;
    flex-wrap: wrap;
}

.hk-record-list .hk-record-date {
    font-size: 13px;
    color: var(--hk-fg-faint);
    width: 100px;
    flex-shrink: 0;
}

.hk-record-list .hk-record-info { flex: 1; min-width: 200px; }

.hk-record-list .hk-record-title { font-size: 16px; }
.hk-record-list .hk-record-title a { color: var(--hk-fg); }

.hk-record-list .hk-record-sub {
    font-size: 12px;
    color: var(--hk-fg-faint);
    margin-top: 4px;
}

/* -------------------------------------------------
   Pagination
------------------------------------------------- */
.hk-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 40px 0 80px;
    font-size: 13px;
}

.hk-pagination a, .hk-pagination span {
    padding: 8px 14px;
    border: 1px solid var(--hk-border);
    color: var(--hk-fg-dim);
}

.hk-pagination .current { color: var(--hk-accent-warm); border-color: var(--hk-accent-warm); }

/* -------------------------------------------------
   Search form
------------------------------------------------- */
.hk-search-form { display: flex; max-width: 480px; margin: 0 auto 48px; }
.hk-search-form input[type="search"] {
    flex: 1;
    background: var(--hk-bg-elevated);
    border: 1px solid var(--hk-border);
    color: var(--hk-fg);
    padding: 10px 14px;
    font-size: 14px;
}
.hk-search-form button {
    background: var(--hk-fg);
    color: var(--hk-bg);
    border: none;
    padding: 10px 20px;
    font-size: 13px;
    cursor: pointer;
}

/* -------------------------------------------------
   Footer
------------------------------------------------- */
.hk-site-footer {
    border-top: 1px solid var(--hk-border);
    margin-top: 60px;
    padding: 32px 20px 40px;
    text-align: center;
}

.hk-footer-credit {
    font-size: 12px;
    color: var(--hk-fg-faint);
    margin-bottom: 10px;
}

.hk-footer-nav {
    font-size: 12px;
    color: var(--hk-fg-faint);
}

.hk-footer-nav a { color: var(--hk-fg-faint); margin: 0 8px; }

/* -------------------------------------------------
   Coming soon
------------------------------------------------- */
.hk-coming-soon {
    text-align: center;
    padding: 80px 20px;
    color: var(--hk-fg-faint);
}

.hk-coming-soon .hk-badge-soon { margin-bottom: 16px; }

/* -------------------------------------------------
   Responsive
------------------------------------------------- */
@media (max-width: 900px) {
    .hk-card-grid { grid-template-columns: repeat(2, 1fr); }
    .hk-tile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .hk-site-header { padding: 28px 16px 0; }
    .hk-logo { max-width: 300px; }

    .hk-nav-toggle { display: block; }
    .hk-nav ul { display: none; flex-direction: column; }
    .hk-nav.is-open ul { display: flex; }
    .hk-nav li { border-left: none; border-top: 1px solid var(--hk-border); width: 100%; }
    .hk-nav li:first-child { border-top: none; }
    .hk-nav a { text-align: center; padding: 14px 20px; }

    .hk-card-grid { grid-template-columns: 1fr; }
    .hk-tile-grid { grid-template-columns: repeat(2, 1fr); }

    .hk-record-box dl { grid-template-columns: 100px 1fr; }

    .hk-stageart { flex-direction: column; text-align: center; }
}