/*
Theme Name: Taz Modern
Theme URI: https://taz.jp/
Author: Taz
Author URI: https://taz.jp/
Description: Dark, editorial single-theme design proposal for taz.jp — DJ / Producer Nobuhiro Tazawa a.k.a "Taz". Fixed blurred nav, full-bleed hero wordmark, and tracklist-style post rows. Classic (non-FSE) theme. Set the header image, custom logo, and primary menu from the Customizer.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taz-modern
Tags: dark, one-column, custom-header, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   Design tokens (from confirmed mockup)
   ========================================================= */
:root{
  --carbon:#0b0b0d; --panel:#141418; --ink:#f2f0eb; --dim:#8d8a94;
  --gold:#d4a53c; --gold-soft:rgba(212,165,60,.14); --line:#26262b;
  --disp:'Helvetica Neue',Helvetica,'Hiragino Kaku Gothic ProN',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --body:system-ui,-apple-system,'Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--carbon);color:var(--ink);font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
img{max-width:100%;height:auto}
::selection{background:var(--gold);color:#0b0b0d}

/* Accessibility: skip link + screen-reader text */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);
  height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#0b0b0d;
  padding:10px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em}
.skip-link:focus{left:8px;top:8px;outline:2px solid var(--ink)}

/* =========================================================
   Nav (fixed, blurred)
   ========================================================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:28px;
  padding:14px 28px;background:linear-gradient(rgba(11,11,13,.92),rgba(11,11,13,.75) 70%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav .mark{width:34px;height:34px;border-radius:4px;display:block}
.nav .mark img{width:34px;height:34px;object-fit:contain;display:block}
.nav .brand{font-family:var(--disp);font-weight:900;font-size:18px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1}
.nav .menu{display:flex;gap:22px;list-style:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  margin:0;padding:0;flex-wrap:wrap;align-items:center}
.nav .menu a{color:var(--dim);text-decoration:none;transition:color .18s}
.nav .menu a:hover,.nav .menu a:focus-visible,
.nav .menu .current-menu-item>a,.nav .menu .current_page_item>a{color:var(--gold)}
.nav .menu a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.nav .menu .sub-menu{display:none} /* proposal: single-level menu */
.nav .loc{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--dim)}
.nav .loc b{color:var(--ink);font-weight:500}

/* Nav drawer: transparent wrapper on desktop, fullscreen overlay on mobile */
.nav-drawer{display:contents}
.nav-toggle{display:none;background:none;border:0;padding:10px;margin-left:auto;cursor:pointer}
.nav-toggle-box{display:block;width:22px;height:14px;position:relative}
.nav-toggle-box i{position:absolute;left:0;width:22px;height:2px;background:var(--ink);
  transition:transform .25s,top .25s,background .18s}
.nav-toggle-box i:first-child{top:0}
.nav-toggle-box i:last-child{top:12px}
.nav-toggle:hover .nav-toggle-box i{background:var(--gold)}
.nav.open .nav-toggle-box i:first-child{top:6px;transform:rotate(45deg)}
.nav.open .nav-toggle-box i:last-child{top:6px;transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav-toggle-box i{transition:none}}

/* =========================================================
   Hero (front page only)
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(.35) contrast(1.08) brightness(.72)}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,13,.55) 0%,rgba(11,11,13,.15) 40%,rgba(11,11,13,.88) 78%,var(--carbon) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 4vw 7vh}
.hero .kicker{display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:12px;letter-spacing:.22em;color:var(--gold);margin-bottom:1vh;text-transform:uppercase}
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:16px}
.eq i{width:3px;background:var(--gold);animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(1){height:35%;animation-delay:0s}.eq i:nth-child(2){height:90%;animation-delay:.15s}
.eq i:nth-child(3){height:55%;animation-delay:.32s}.eq i:nth-child(4){height:100%;animation-delay:.05s}
.eq i:nth-child(5){height:45%;animation-delay:.25s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.eq i{animation:none}}
.hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(96px,19vw,300px);
  line-height:.82;letter-spacing:-.035em;text-transform:uppercase;
  color:var(--ink);text-shadow:0 8px 60px rgba(0,0,0,.6)}
.hero .roles{margin-top:2.4vh;font-family:var(--mono);font-size:clamp(11px,1.3vw,14px);
  letter-spacing:.2em;color:var(--ink);opacity:.85}
.hero .roles span{color:var(--gold)}
.scrollcue{position:absolute;right:4vw;bottom:7vh;z-index:2;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;color:var(--dim);writing-mode:vertical-rl}

/* =========================================================
   Sections / layout
   ========================================================= */
.site-main{padding-top:70px} /* clear fixed nav on non-hero pages */
.is-front .site-main{padding-top:0}
section.tz,.tz-section{padding:110px 4vw 40px;max-width:1200px;margin:0 auto}
.sec-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:8px}
.sec-head h1,.sec-head h2{font-family:var(--disp);font-weight:900;font-size:clamp(30px,4.4vw,54px);
  letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.sec-head .idx{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.18em}
.sec-head .all{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--dim);text-decoration:none}
.sec-head .all:hover{color:var(--gold)}

/* Compact page-title band for lower pages */
.page-band{max-width:1200px;margin:0 auto;padding:96px 4vw 0}

/* =========================================================
   Schedule / post tracklist rows
   ========================================================= */
.gigs{list-style:none;margin:0;padding:0}
.gigs li{border-bottom:1px solid var(--line)}
.gigs .gig-row{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;
  padding:20px 8px;text-decoration:none;color:inherit;transition:background .18s,padding-left .18s}
.gigs .gig-row:hover,.gigs .gig-row:focus-visible{background:var(--gold-soft);padding-left:16px;outline:none}
.gigs .gig-row:focus-visible{box-shadow:inset 3px 0 0 var(--gold)}
.gigs .d{font-family:var(--mono);font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.gigs .v{font-family:var(--disp);font-weight:700;font-size:clamp(16px,2vw,21px);letter-spacing:.01em}
.gigs .v small{font-weight:400;color:var(--dim);font-size:.75em;margin-left:.6em}
.gigs .arr{color:var(--gold);font-size:20px;transition:transform .18s}
.gigs .gig-row:hover .arr{transform:translateX(4px)}
.gigs .excerpt{grid-column:2/3;color:var(--dim);font-size:13.5px;margin-top:6px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--gold);
  border:1px solid var(--gold);border-radius:2px;padding:3px 9px;white-space:nowrap}
.tag.dim{color:var(--dim);border-color:var(--line)}

.empty{max-width:1200px;margin:0 auto;padding:40px 4vw;color:var(--dim);font-family:var(--mono);
  font-size:14px;letter-spacing:.04em}

/* =========================================================
   Pagination (mono)
   ========================================================= */
.tz-pagination{max-width:1200px;margin:0 auto;padding:34px 4vw 10px}
.tz-pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em}
.tz-pagination .page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--line);
  color:var(--dim);text-decoration:none;transition:border-color .18s,color .18s}
.tz-pagination a.page-numbers:hover{border-color:var(--gold);color:var(--gold)}
.tz-pagination .page-numbers.current{border-color:var(--gold);color:var(--ink)}
.tz-pagination .page-numbers.dots{border-color:transparent}
.tz-pagination .screen-reader-text{position:absolute}

/* =========================================================
   Single post / article
   ========================================================= */
.article{max-width:1200px;margin:0 auto;padding:96px 4vw 40px}
.article .meta{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--gold);
  font-variant-numeric:tabular-nums;margin-bottom:10px}
.article .title{font-family:var(--disp);font-weight:900;font-size:clamp(30px,5vw,60px);
  line-height:1.02;letter-spacing:-.02em;padding-bottom:22px;border-bottom:1px solid var(--line)}
.entry-content{max-width:62ch;margin-top:34px;font-size:16px;color:#d8d5de}
.entry-content>*+*{margin-top:1.2em}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{
  font-family:var(--disp);color:var(--ink);letter-spacing:-.01em;line-height:1.2;margin-top:1.6em}
.entry-content h2{font-size:1.7em}.entry-content h3{font-size:1.35em}
.entry-content a{color:var(--gold);text-underline-offset:3px}
.entry-content strong,.entry-content b{color:var(--ink)}
.entry-content blockquote{border-left:2px solid var(--gold);padding-left:18px;color:var(--dim);font-style:italic}
.entry-content code,.entry-content pre{font-family:var(--mono);font-size:.9em}
.entry-content pre{background:var(--panel);border:1px solid var(--line);padding:18px;overflow:auto}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li+li{margin-top:.35em}
.entry-content hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.entry-content img{border-radius:4px}

/* Post/prev-next navigation */
.post-nav{max-width:1200px;margin:0 auto;padding:30px 4vw 10px;border-top:1px solid var(--line)}
.post-nav .nav-links{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.post-nav a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim);text-decoration:none;
  max-width:46ch}
.post-nav a:hover{color:var(--gold)}
.post-nav .nav-next{margin-left:auto;text-align:right}

/* =========================================================
   Page (static) — big heading + body container
   ========================================================= */
.page-content{max-width:62ch;margin:34px auto 0;padding:0 4vw;font-size:16px;color:#d8d5de}
.page-content.wide{max-width:1200px}

/* =========================================================
   WordPress core / block output safety
   ========================================================= */
.alignleft{float:left;margin:0 1.4em 1em 0}
.alignright{float:right;margin:0 0 1em 1.4em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption,figcaption{font-family:var(--mono);font-size:12px;color:var(--dim);
  letter-spacing:.04em;margin-top:8px}
.entry-content figure{margin-top:1.4em}
.sticky,.gallery-caption,.bypostauthor{}
/* Wide/full blocks inside constrained content */
.entry-content .alignwide,.page-content .alignwide{max-width:min(1000px,92vw);margin-left:calc(50% - min(500px,46vw));}
.entry-content .alignfull,.page-content .alignfull{max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* Embeds (Mixcloud / Beatport / oEmbed iframes) must never overflow */
.entry-content iframe,.entry-content embed,.entry-content object,
.page-content iframe,.page-content embed,.page-content object,
.wp-block-embed iframe,.wp-block-embed__wrapper iframe{max-width:100%}
.wp-block-embed__wrapper{max-width:100%}
figure.wp-block-embed{margin-top:1.4em}

/* =========================================================
   Footer (minimal)
   ========================================================= */
.site-footer{margin-top:90px;border-top:1px solid var(--line);padding:34px 4vw 46px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.site-footer .c{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:820px){
  .nav{gap:16px;padding:12px 18px}
  .nav .loc{display:none}
  .nav-toggle{display:block;position:relative;z-index:60}
  .nav-drawer{display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:55;
    background:rgba(11,11,13,.97);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .nav.open .nav-drawer{opacity:1;visibility:visible}
  .nav-drawer .menu{flex-direction:column;align-items:center;gap:clamp(22px,5vh,36px);width:auto}
  .nav-drawer .menu a{font-family:var(--disp);font-weight:800;font-size:clamp(24px,7vw,34px);
    letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
  .nav-drawer .menu a:hover,.nav-drawer .menu a:focus-visible,
  .nav-drawer .menu .current-menu-item>a,.nav-drawer .menu .current_page_item>a{color:var(--gold)}
  body.nav-open{overflow:hidden}
  @media (prefers-reduced-motion:reduce){.nav-drawer{transition:none}}
  .gigs .gig-row{grid-template-columns:110px 1fr auto;gap:12px}
  .gigs .excerpt{grid-column:1/-1}
  .site-main{padding-top:64px}
  section.tz,.tz-section{padding:80px 5vw 30px}
  .article,.post-nav,.tz-pagination,.page-band{padding-left:5vw;padding-right:5vw}
  .post-nav .nav-next{text-align:left;margin-left:0}
}

/* ---------- bundled taz logo SVGs ---------- */
.nav .brand-mark{display:block;line-height:0}
.mark-svg{height:30px;width:auto;color:var(--ink);display:block;transition:color .18s}
.nav .brand-mark:hover .mark-svg,
.nav .brand-mark:focus-visible .mark-svg{color:var(--gold)}
.hero h1{line-height:0}
.wordmark-svg{width:clamp(300px,52vw,760px);height:auto;color:var(--ink);display:block;
	filter:drop-shadow(0 8px 60px rgba(0,0,0,.55))}