/*
Theme Name: White Noize
Description: 詩と白い猫。2026年10月のHTML案を引き継ぐ専用テーマ。
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.0
Author: T.O.
Text Domain: white-noize
*/
/* 全ページ共通：リセット、ヘッダー、ロゴ、メニュー。ページごとの違いは各CSSの変数で決める。 */
:root{--wrap-max:1180px;--mast-h:100px;--font-ui:Lato,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{width:min(var(--wrap-max),calc(100% - 112px));margin:auto}

.masthead{height:var(--mast-h);display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:5}
.masthead.wrap{width:100%;padding-inline:max(56px,calc((100% - var(--wrap-max))/2));background:linear-gradient(180deg,#000 0,#000 16px,rgba(0,0,0,.9) calc(18% + 16px),rgba(0,0,0,.52) calc(52% + 16px),rgba(0,0,0,.03) 100%)}
.masthead::after{content:"";position:absolute;top:100%;left:0;right:0;height:20px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.03),transparent)}
.identity img{display:block;width:280px;height:auto}

.nav{display:flex;align-items:center;gap:28px}
.nav a{display:inline-flex;align-items:center;gap:7px;padding:12px 0;font:700 15px/1.6 var(--font-ui);letter-spacing:.03em;color:#e4e4dd;transition:color .25s}
.nav a:hover{color:#c9bc96}
.nav a[aria-current=page]{color:#fff}
.nav-mark{flex:none;width:16px;height:16px;stroke-width:1.9;opacity:.95}
.menu{display:none;background:none;border:0;padding:12px 0 12px 15px;font-size:10px;letter-spacing:.12em}

@media(max-width:1000px){
.wrap{width:calc(100% - 64px)}
.masthead.wrap{padding-inline:32px}
.identity img{width:230px}
.nav{gap:19px}
}
@media(max-width:700px){
.wrap{width:calc(100% - 40px)}
.masthead{height:82px}
.masthead.wrap{padding-inline:20px}
.identity img{width:190px}
.menu{display:block}
.nav{display:none;position:absolute;top:82px;left:0;right:0;z-index:5;background:color-mix(in srgb,var(--bg) 97%,transparent);padding:25px 22px 30px;border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr;gap:10px 25px}
.nav.open{display:grid}
.nav a{font-size:18px}
}

/* Titles and text fade in: the title first, the body a little later. Opacity only. */
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero-copy .overline,.hero-copy h1,.entrance h1,.page-prose h1{animation:fade .9s ease-out both}
.hero-copy .hero-fragment{animation:fade .9s ease-out .35s both}
.poem,.collection,.prose{animation:fade .9s ease-out .6s both}
@media(prefers-reduced-motion:reduce){.hero-copy .overline,.hero-copy h1,.hero-copy .hero-fragment,.entrance h1,.page-prose h1,.poem,.collection,.prose{animation:none}}

/* Copy deterrent for visitors (not for logged-in editors). Form fields stay usable. */
body.wn-guard{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.wn-guard input,body.wn-guard textarea,body.wn-guard select{-webkit-user-select:text;user-select:text}
body.wn-guard img{-webkit-user-drag:none}