/* ==========================================================================
   sakai log - Main Stylesheet
   Monochrome editorial design / Sora + Space Mono
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
	--color-bg: #0A0A0A;
	--color-bg-footer: #050505;
	--color-bg-card: #1A1A1A;
	--color-divider: #222222;
	--color-text-primary: #FFFFFF;
	--color-text-secondary: #888888;
	--color-text-meta: #555555;
	--color-text-excerpt: #666666;
	--color-text-muted: #999999;
	--color-text-dim: #777777;
	--color-cta-bg: #FFFFFF;
	--color-cta-text: #000000;
	--font-display: 'Sora', sans-serif;
	--font-mono: 'Space Mono', monospace;
	--max-width: 1440px;
	--content-padding: 56px;
	--gap-cards: 24px;
}

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

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-display);
	background-color: var(--color-bg);
	color: var(--color-text-primary);
	line-height: 1.6;
	overflow-x: hidden;
}

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

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

ul, ol {
	list-style: none;
}

/* ---------- Utility ---------- */
.btn {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
	padding: 16px 40px;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.btn:hover {
	opacity: 0.85;
}

.btn--primary {
	background-color: var(--color-cta-bg);
	color: var(--color-cta-text);
}

.btn--outline {
	background-color: transparent;
	color: var(--color-text-primary);
	border: 1px solid var(--color-divider);
}

.btn--outline:hover {
	border-color: var(--color-text-primary);
	opacity: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: rgba(10, 10, 10, 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-divider);
}

.site-header__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header__logo {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--color-text-primary);
}

.site-header__nav .header-menu {
	display: flex;
	gap: 32px;
}

.site-header__nav .header-menu li a {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	transition: color 0.2s ease;
}

.site-header__nav .header-menu li a:hover {
	color: var(--color-text-primary);
}

/* Hamburger */
.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	z-index: 110;
}

.hamburger {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-text-primary);
	position: relative;
	transition: background-color 0.2s ease;
}

.hamburger::before,
.hamburger::after {
	content: '';
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background-color: var(--color-text-primary);
	transition: transform 0.3s ease;
}

.hamburger::before {
	top: -7px;
}

.hamburger::after {
	top: 7px;
}

[aria-expanded="true"] .hamburger {
	background-color: transparent;
}

[aria-expanded="true"] .hamburger::before {
	transform: translateY(7px) rotate(45deg);
}

[aria-expanded="true"] .hamburger::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Overlay */
.mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0a0a0a;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 105;
}

.mobile-nav.is-open {
	opacity: 1;
	visibility: visible;
}

.mobile-nav .header-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-nav .header-menu li a {
	font-family: var(--font-mono);
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	transition: color 0.2s ease;
}

.mobile-nav .header-menu li a:hover {
	color: var(--color-text-primary);
}

@media (min-width: 768px) {
	.mobile-nav {
		display: none;
	}
}

/* ==========================================================================
   Main content offset for fixed header
   ========================================================================== */
.site-main {
	padding-top: 72px;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
	min-height: calc(100vh - 72px);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	padding: 80px var(--content-padding);
	border-bottom: 1px solid var(--color-divider);
}

.hero__inner {
	max-width: var(--max-width);
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.hero__label {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-bottom: 32px;
}

.hero__title {
	font-family: var(--font-display);
	font-size: 120px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -4px;
	margin-bottom: 32px;
}

.hero__subtitle {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--color-text-secondary);
	max-width: 600px;
	margin: 0 0 48px;
}

/* ==========================================================================
   Posts Section
   ========================================================================== */
.section-posts {
	padding: 96px 0;
	border-bottom: 1px solid var(--color-divider);
}

.section-posts__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

.section-posts__heading {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-bottom: 48px;
}

.section-posts__more {
	text-align: center;
	margin-top: 48px;
}

/* Posts Grid */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap-cards);
}

/* ==========================================================================
   Post Card
   ========================================================================== */
.post-card {
	background-color: var(--color-bg-card);
	border-radius: 0;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.post-card:hover {
	transform: translateY(-2px);
}

.post-card__link {
	display: block;
}

.post-card__thumbnail {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: #111;
}

.post-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.post-card:hover .post-card__thumbnail img {
	transform: scale(1.03);
}

.post-card__thumbnail--placeholder {
	background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.post-card__body {
	padding: 24px;
}

.post-card__category {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-text-meta);
	margin-bottom: 12px;
}

.post-card__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 12px;
	color: var(--color-text-primary);
}

.post-card__excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-excerpt);
	margin-bottom: 16px;
}

.post-card__date {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-text-meta);
}

/* ==========================================================================
   About Section
   ========================================================================== */
.about-section {
	padding: 96px 0;
	border-bottom: 1px solid var(--color-divider);
}

.about-section__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.about-section__image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: grayscale(20%);
}

.about-section__label {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-text-meta);
	margin-bottom: 24px;
}

.about-section__heading {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 24px;
}

.about-section__text {
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text-dim);
}

.about-section__text p {
	margin-bottom: 16px;
}

.about-section__text p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background-color: var(--color-bg-footer);
	padding: 64px 0 32px;
}

.site-footer__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

.site-footer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--color-divider);
	margin-bottom: 32px;
}

.site-footer__logo {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text-primary);
}

.site-footer__nav .footer-menu {
	display: flex;
	gap: 24px;
}

.site-footer__nav .footer-menu li a {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-text-secondary);
	transition: color 0.2s ease;
}

.site-footer__nav .footer-menu li a:hover {
	color: var(--color-text-primary);
}

.site-footer__social {
	display: flex;
	gap: 16px;
}

.site-footer__social a {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-text-secondary);
	transition: color 0.2s ease;
}

.site-footer__social a:hover {
	color: var(--color-text-primary);
}

.site-footer__bottom {
	text-align: center;
}

.site-footer__bottom p {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-text-meta);
}

/* ==========================================================================
   Single Post
   ========================================================================== */
.single-post {
	max-width: 960px;
	margin: 0 auto;
	padding: 80px var(--content-padding);
}

.single-post__header {
	text-align: left;
	margin-bottom: 48px;
}

.single-post__category {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-text-meta);
	margin-bottom: 24px;
}

.single-post__title {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1px;
	margin-bottom: 24px;
}

.single-post__date {
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-text-meta);
}

.single-post__thumbnail {
	margin-bottom: 48px;
	border-radius: 0;
	overflow: hidden;
}

.single-post__thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.single-post__content {
	max-width: 800px;
	margin: 0 auto 64px;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text-muted);
}

.single-post__content h2 {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 48px 0 16px;
}

.single-post__content h3 {
	font-size: 22px;
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 32px 0 12px;
}

.single-post__content p {
	margin-bottom: 24px;
}

.single-post__content a {
	color: var(--color-text-primary);
	border-bottom: 1px solid var(--color-text-meta);
	transition: border-color 0.2s ease;
}

.single-post__content a:hover {
	border-color: var(--color-text-primary);
}

.single-post__content ul,
.single-post__content ol {
	margin: 0 0 24px 24px;
}

.single-post__content ul {
	list-style: disc;
}

.single-post__content ol {
	list-style: decimal;
}

.single-post__content li {
	margin-bottom: 8px;
}

.single-post__content blockquote {
	border-left: 3px solid var(--color-divider);
	padding-left: 24px;
	margin: 32px 0;
	font-style: italic;
	color: var(--color-text-dim);
}

.single-post__content img {
	margin: 32px 0;
	border-radius: 0;
}

.single-post__content pre {
	background-color: var(--color-bg-card);
	padding: 24px;
	overflow-x: auto;
	margin: 32px 0;
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1.6;
}

.single-post__content code {
	font-family: var(--font-mono);
	font-size: 14px;
	background-color: var(--color-bg-card);
	padding: 2px 6px;
}

/* Post Navigation */
.single-post__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	padding-top: 48px;
	border-top: 1px solid var(--color-divider);
}

.single-post__nav-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-text-meta);
	margin-bottom: 8px;
}

.single-post__nav a {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.single-post__nav a:hover {
	color: var(--color-text-secondary);
}

.single-post__nav-next {
	text-align: right;
}

/* ==========================================================================
   Archive Page
   ========================================================================== */
.archive-page {
	padding: 80px 0;
}

.archive-page__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--content-padding);
}

.archive-page__header {
	margin-bottom: 48px;
}

.archive-page__title {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 16px;
}

.archive-page__description {
	font-size: 16px;
	color: var(--color-text-secondary);
	max-width: 600px;
}

/* Pagination */
.nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 64px;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--color-text-secondary);
	border: 1px solid var(--color-divider);
	transition: all 0.2s ease;
}

.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
	background-color: var(--color-cta-bg);
	color: var(--color-cta-text);
	border-color: var(--color-cta-bg);
}

/* ==========================================================================
   404 Page
   ========================================================================== */
.error-404 {
	min-height: calc(100vh - 72px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.error-404__inner {
	text-align: center;
}

.error-404__title {
	font-family: var(--font-display);
	font-size: 120px;
	font-weight: 800;
	letter-spacing: -4px;
	margin-bottom: 16px;
}

.error-404__text {
	font-size: 16px;
	color: var(--color-text-secondary);
	margin-bottom: 48px;
}

/* No content */
.content-none {
	grid-column: 1 / -1;
	text-align: center;
	padding: 96px 0;
}

.content-none__text {
	font-size: 16px;
	color: var(--color-text-secondary);
}

/* ==========================================================================
   Gutenberg Block Styles
   ========================================================================== */

/* Wide & Full alignment */
.single-post__content .alignwide {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.single-post__content .alignfull {
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* Image block */
.single-post__content .wp-block-image {
	margin: 32px 0;
}

.single-post__content .wp-block-image figcaption {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-text-meta);
	text-align: center;
	margin-top: 12px;
}

/* Gallery block */
.single-post__content .wp-block-gallery {
	margin: 32px 0;
	gap: 16px;
}

/* Quote block */
.single-post__content .wp-block-quote {
	border-left: 3px solid var(--color-divider);
	padding-left: 24px;
	margin: 32px 0;
	font-style: italic;
	color: var(--color-text-dim);
}

.single-post__content .wp-block-quote cite {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-text-meta);
	margin-top: 12px;
	font-style: normal;
}

/* Pullquote block */
.single-post__content .wp-block-pullquote {
	border-top: 3px solid var(--color-divider);
	border-bottom: 3px solid var(--color-divider);
	padding: 32px 0;
	margin: 48px 0;
	text-align: center;
}

.single-post__content .wp-block-pullquote blockquote p {
	font-size: 22px;
	font-weight: 600;
	color: var(--color-text-primary);
	line-height: 1.5;
}

/* Separator block */
.single-post__content .wp-block-separator {
	border: none;
	border-top: 1px solid var(--color-divider);
	margin: 48px auto;
	max-width: 100px;
}

.single-post__content .wp-block-separator.is-style-wide {
	max-width: 100%;
}

.single-post__content .wp-block-separator.is-style-dots {
	border: none;
	max-width: 100%;
	text-align: center;
}

.single-post__content .wp-block-separator.is-style-dots::before {
	color: var(--color-text-meta);
}

/* Table block */
.single-post__content .wp-block-table {
	margin: 32px 0;
	overflow-x: auto;
}

.single-post__content .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.single-post__content .wp-block-table td,
.single-post__content .wp-block-table th {
	border: 1px solid var(--color-divider);
	padding: 12px 16px;
	font-size: 14px;
}

.single-post__content .wp-block-table th {
	background-color: var(--color-bg-card);
	color: var(--color-text-primary);
	font-weight: 600;
}

/* Columns block */
.single-post__content .wp-block-columns {
	margin: 32px 0;
	gap: 24px;
}

/* Group block */
.single-post__content .wp-block-group {
	margin: 32px 0;
}

.single-post__content .wp-block-group.has-background {
	padding: 24px;
}

/* Cover block */
.single-post__content .wp-block-cover {
	margin: 32px 0;
}

/* Embed / Video */
.single-post__content .wp-block-embed {
	margin: 32px 0;
}

.single-post__content .wp-block-embed__wrapper {
	position: relative;
}

.single-post__content .wp-block-embed.is-type-video .wp-block-embed__wrapper::before {
	content: '';
	display: block;
	padding-top: 56.25%;
}

.single-post__content .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Button block */
.single-post__content .wp-block-button .wp-block-button__link {
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.5px;
	padding: 16px 40px;
	transition: opacity 0.2s ease;
}

.single-post__content .wp-block-button .wp-block-button__link:hover {
	opacity: 0.85;
}

.single-post__content .wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--color-divider);
	background: transparent;
	color: var(--color-text-primary);
}

/* List block - restore markers */
.single-post__content .wp-block-list {
	margin: 0 0 24px 24px;
}

.single-post__content ul.wp-block-list {
	list-style: disc;
}

.single-post__content ol.wp-block-list {
	list-style: decimal;
}

/* Details block */
.single-post__content .wp-block-details {
	margin: 24px 0;
	border: 1px solid var(--color-divider);
	padding: 16px 20px;
}

.single-post__content .wp-block-details summary {
	font-weight: 600;
	color: var(--color-text-primary);
	cursor: pointer;
}

/* Color utility classes from theme.json */
.has-background-background-color { background-color: #0A0A0A; }
.has-foreground-background-color { background-color: #FFFFFF; }
.has-card-background-color { background-color: #1A1A1A; }
.has-divider-background-color { background-color: #222222; }
.has-foreground-color { color: #FFFFFF; }
.has-secondary-color { color: #888888; }
.has-meta-color { color: #555555; }
.has-muted-color { color: #999999; }

/* ==========================================================================
   WordPress defaults
   ========================================================================== */
.wp-caption {
	max-width: 100%;
}

.aligncenter {
	display: block;
	margin: 0 auto;
}

.alignleft {
	float: left;
	margin-right: 24px;
}

.alignright {
	float: right;
	margin-left: 24px;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* ==========================================================================
   Responsive - Tablet (1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	:root {
		--content-padding: 32px;
	}

	.hero__title {
		font-size: 80px;
		letter-spacing: -3px;
	}

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

	.about-section__inner {
		gap: 48px;
	}

	.about-section__heading {
		font-size: 28px;
	}

	.single-post__title {
		font-size: 36px;
	}
}

/* ==========================================================================
   Responsive - Mobile (640px)
   ========================================================================== */
@media (max-width: 640px) {
	:root {
		--content-padding: 20px;
		--gap-cards: 16px;
	}

	/* Mobile menu toggle */
	.mobile-menu-toggle {
		display: block;
		position: fixed;
		top: 16px;
		right: var(--content-padding);
		z-index: 120;
	}

	.site-header__nav--desktop {
		display: none;
	}

	/* Hero */
	.hero {
		min-height: auto;
		padding: 80px var(--content-padding);
	}

	.hero__title {
		font-size: 48px;
		letter-spacing: -2px;
	}

	.hero__subtitle {
		font-size: 14px;
	}

	.hero__label {
		font-size: 11px;
		margin-bottom: 24px;
	}

	/* Posts */
	.section-posts {
		padding: 64px 0;
	}

	.posts-grid {
		grid-template-columns: 1fr;
	}

	/* About */
	.about-section {
		padding: 64px 0;
	}

	.about-section__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.about-section__heading {
		font-size: 24px;
	}

	/* Single */
	.single-post {
		padding: 48px var(--content-padding);
	}

	.single-post__title {
		font-size: 28px;
	}

	.single-post__nav {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.single-post__nav-next {
		text-align: left;
	}

	/* Archive */
	.archive-page__title {
		font-size: 32px;
	}

	/* Footer */
	.site-footer__top {
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}

	/* 404 */
	.error-404__title {
		font-size: 72px;
	}
}