/*
Theme Name: OUT-OF-BOUND
Theme URI: https://out-of-bound.com/
Author: OUT-OF-BOUND
Description: A lightweight, responsive custom theme for the OUT-OF-BOUND world gateway.
Version: 0.7.0
Requires at least: 6.6
Requires PHP: 8.3
Text Domain: out-of-bound
*/

:root {
	color-scheme: dark;
	--oob-ink: #e8e5dc;
	--oob-muted: #aaa99f;
	--oob-ground: #101313;
	--oob-surface: #191e1d;
	--oob-line: rgb(232 229 220 / 20%);
	--oob-accent: #d2a66d;
	--oob-cyan: #8ab9b1;
	--oob-space: clamp(1.25rem, 4vw, 4rem);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--oob-ground);
	color: var(--oob-ink);
	font-size: 1rem;
	line-height: 1.6;
}
button, a { color: inherit; font: inherit; }
a { text-decoration-color: var(--oob-accent); text-underline-offset: .25em; }
a:hover { color: var(--oob-accent); }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--oob-accent); outline-offset: 4px; }

.skip-link {
	position: fixed;
	left: 1rem;
	top: 1rem;
	z-index: 20;
	padding: .6rem 1rem;
	transform: translateY(-180%);
	background: var(--oob-ink);
	color: var(--oob-ground);
}
.skip-link:focus { transform: none; }
.gateway [tabindex="-1"]:focus { outline: none; }

.oob-content-index { margin-top: clamp(3rem, 8vw, 6rem); }
.oob-content-index > h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; }
.oob-content-index__list { display: grid; gap: 1px; border-top: 1px solid var(--oob-line); }
.oob-content-index__item { padding: 1.5rem 0; border-bottom: 1px solid var(--oob-line); }
.oob-content-index__item--person { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.oob-content-index__portrait { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--oob-surface); }
.oob-content-index__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.oob-content-index__portrait:hover img { transform: scale(1.04); }
.oob-content-index__item--person h3 { margin-top: 0; }
.oob-content-index__item h3 { margin: .25rem 0; font-size: clamp(1.25rem, 3vw, 2rem); }
.oob-content-index__item p { color: var(--oob-muted); }
.oob-single__meta { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; color: var(--oob-muted); margin: 1.5rem 0; }
.oob-single__relations { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--oob-line); }
.oob-single__cta { display: inline-flex; align-items: center; min-height: 3.5rem; margin-top: 2rem; padding: .8rem 1.3rem; border: 1px solid var(--oob-accent); color: var(--oob-ink); text-decoration: none; letter-spacing: .08em; text-transform: uppercase; }
.oob-single__cta:hover { background: var(--oob-accent); color: var(--oob-ground); }
.site-header, .site-footer { padding: 1rem var(--oob-space); }
.site-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--oob-line); }
body.home .site-header, body.home .site-footer { display: none; }
.site-brand { color: var(--oob-ink); font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-decoration: none; }
.site-header__note, .site-footer { color: var(--oob-muted); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }

.gateway { min-height: 78svh; display: grid; align-items: center; padding: clamp(4rem, 12vh, 9rem) var(--oob-space); }
.gateway__inner { width: min(100%, 72rem); margin-inline: auto; }
.eyebrow { margin: 0 0 1rem; color: var(--oob-accent); font-size: .75rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.gateway h1, .gateway h2 { max-width: 12ch; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.2rem, 10vw, 8rem); font-weight: 400; letter-spacing: -.055em; line-height: .94; }
.gateway__copy { max-width: 38rem; margin: 2rem 0; color: var(--oob-muted); font-size: clamp(1rem, 2vw, 1.25rem); }
.gateway__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.oob-button { min-height: 3.25rem; padding: .8rem 1.15rem; border: 1px solid var(--oob-accent); background: transparent; color: var(--oob-ink); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.oob-button:hover:not(:disabled) { background: var(--oob-accent); color: var(--oob-ground); }
.oob-button:disabled { cursor: not-allowed; opacity: .4; }
.gateway--arrival { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; min-height: 100dvh; padding-block: clamp(3rem, 9vh, 7rem); background: var(--oob-ground); }
.gateway__backdrop { position: absolute; z-index: -1; inset: 0; }
.gateway__backdrop::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 13 13 / 78%) 0%, rgb(10 13 13 / 53%) 35%, rgb(10 13 13 / 10%) 75%), linear-gradient(0deg, rgb(10 13 13 / 42%), transparent 42%); content: ""; }
.gateway__backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gateway--arrival .gateway__inner { width: min(100%, 82rem); }
.gateway--arrival h1 { max-width: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(2.2rem, 5vw, 4.25rem); font-weight: 500; letter-spacing: .08em; line-height: 1.1; }
.gateway--arrival .eyebrow { margin-bottom: .7rem; color: var(--oob-ink); }
.gateway--arrival .oob-button { margin-top: 1.75rem; }
.gateway--reveal { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; min-height: 100dvh; border-top: 0; background: var(--oob-ground); }
.gateway--reveal .gateway__backdrop::after { background: linear-gradient(90deg, rgb(10 13 13 / 78%) 0%, rgb(10 13 13 / 57%) 38%, rgb(10 13 13 / 14%) 82%), linear-gradient(0deg, rgb(10 13 13 / 50%), transparent 55%); }
.gateway--reveal .gateway__inner { width: min(100%, 82rem); }
.gateway--reveal h2 { max-width: 10ch; }
.gateway--index { min-height: 100svh; min-height: 100dvh; border-top: 0; padding-block: clamp(4rem, 9vw, 8rem); background-color: var(--oob-ground); background-image: linear-gradient(90deg, rgb(12 15 15 / 94%), rgb(12 15 15 / 87%)), url("assets/images/world-reveal-tokyo-2058-v1.png"); background-position: center; background-size: cover; }
.has-gateway [data-gateway-panel]:not(.is-active) { display: none; }
.has-gateway [data-gateway-panel].is-leaving { display: grid; animation: gateway-fade-out .65s ease forwards; pointer-events: none; }
.has-gateway [data-gateway-panel].is-entering { animation: gateway-fade-in .65s ease both; }
@keyframes gateway-fade-out { to { opacity: 0; } }
@keyframes gateway-fade-in { from { opacity: 0; } to { opacity: 1; } }

.index-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.index-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.index-heading p { max-width: 24rem; margin: 0; color: var(--oob-muted); }
.window-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); border: 0; background: transparent; }
.window { position: relative; min-height: 19rem; padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid var(--oob-line); background: linear-gradient(145deg, rgb(28 33 31 / 86%), rgb(13 17 16 / 88%)); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: flex-start; transition: border-color .28s ease, background-color .28s ease, transform .28s ease; }
.window::before { position: absolute; top: -1px; left: 1.5rem; width: 3.5rem; height: 2px; background: var(--oob-cyan); content: ""; opacity: .7; transition: width .28s ease, background-color .28s ease; }
.window:hover { transform: translateY(-3px); border-color: rgb(232 229 220 / 38%); }
.window__number { color: var(--oob-cyan); font-size: .7rem; letter-spacing: .18em; }
.window h3 { margin: auto 0 .5rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 400; letter-spacing: -.035em; }
.window__prompt { max-width: 35rem; margin: 1rem 0 0; color: var(--oob-muted); }
.window__steps { display: flex; flex-wrap: wrap; gap: .5rem; }
.window__steps .oob-button { min-height: 2.65rem; padding: .55rem .75rem; font-size: .65rem; }
.window__steps .oob-button[aria-expanded="true"] { border-color: var(--oob-accent); background: rgb(210 166 109 / 14%); color: var(--oob-ink); }
.window__prompt[hidden] { display: none; }
.window__prompt:not([hidden]) { animation: window-copy-in .3s ease both; }
@keyframes window-copy-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }
.window__steps .oob-button[aria-disabled="true"] { cursor: not-allowed; opacity: .4; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.site-footer__links a { color: inherit; }
.entry-page { min-height: 65svh; padding: clamp(4rem, 10vh, 8rem) var(--oob-space); }
.entry-page__inner { width: min(100%, 56rem); margin-inline: auto; }
.entry-page h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 9vw, 7rem); font-weight: 400; letter-spacing: -.05em; line-height: .98; }
.entry-page__content { margin-block: 2rem 3rem; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.entry-page__content > :first-child { margin-top: 0; }
.entry-page__back { display: inline-flex; align-items: center; min-height: 3rem; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--oob-line); }

@media (max-width: 42rem) {
	.site-header { align-items: flex-start; }
	.site-header__note { max-width: 8rem; text-align: right; }
	.gateway { min-height: 72svh; }
	.gateway--arrival { min-height: 100svh; min-height: 100dvh; background-position: 58% center; }
	.gateway__backdrop img { object-position: 58% center; }
	.gateway__backdrop::after { background: linear-gradient(90deg, rgb(10 13 13 / 68%) 0%, rgb(10 13 13 / 30%) 78%), linear-gradient(0deg, rgb(10 13 13 / 50%), transparent 55%); }
	.gateway--reveal .gateway__backdrop img { object-position: 40% center; }
	.gateway--reveal .gateway__backdrop::after { background: linear-gradient(90deg, rgb(10 13 13 / 66%) 0%, rgb(10 13 13 / 28%) 88%), linear-gradient(0deg, rgb(10 13 13 / 54%), transparent 62%); }
	.window-grid { grid-template-columns: 1fr; }
	.window { min-height: 16rem; }
	.oob-content-index__item--person { grid-template-columns: 5rem minmax(0, 1fr); gap: .9rem; }
	.gateway--index { background-position: 42% center; }
	.site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}