/*
Theme Name: Valore
Author: Lauris Buddrich
Description: Warm Brutalism, 2036 — custom magazine theme. Day/night cover, typographic Index, Helvetica-only editorial system. No builders, no bloat.
Version: 2.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: valore
*/

/* ============ TOKENS ============ */
:root{
  --bone:#F2F0EA; --ink:#131311; --stone:#A9A49B; --clay:#C96442;
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="light"]{
  --bg:#F2F0EA; --fg:#131311; --mut:#8D887E;
  --hair:rgba(19,19,17,.16); --hair-soft:rgba(19,19,17,.08);
  --surface:#EAE7DF; --grain-op:.035;
}
:root[data-theme="dark"]{
  --bg:#131311; --fg:#E9E6DE; --mut:#8D887E;
  --hair:rgba(233,230,222,.18); --hair-soft:rgba(233,230,222,.08);
  --surface:#1B1B18; --grain-op:.055;
}

/* ============ BASE ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased;
  transition:background .6s var(--ease), color .6s var(--ease);
  overflow-x:hidden;
}
::selection{background:var(--clay);color:var(--bone)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer}
body::after{
  content:""; position:fixed; inset:-50%; z-index:120; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:var(--grain-op);
}
.label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
/* editorial serif accent — deks only (a trace of The Rake) */
.dek,.row-dek{font-family:Georgia,"Times New Roman",serif;font-style:italic}
.mut{color:var(--mut)}
.wrap{padding:0 4vw;max-width:1560px;margin:0 auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ NAV ============ */
nav.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 4vw;
}
body:not(.home) nav.site-nav{background:var(--bg);border-bottom:1px solid var(--hair-soft);
  transition:background .6s var(--ease)}
nav .wordmark{font-weight:700;font-size:17px;letter-spacing:.32em;text-transform:uppercase}
nav .links{display:flex;gap:34px;align-items:center}
nav .links a,nav .links button{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .25s}
nav .links a:hover,nav .links button:hover{border-color:var(--clay)}
#themeToggle{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--fg);position:relative;overflow:hidden;padding:0}
#themeToggle::after{content:"";position:absolute;inset:0;left:50%;background:var(--fg);transition:.3s}
:root[data-theme="dark"] #themeToggle::after{left:0;right:50%}

/* ============ HERO — the cover (front page) ============ */
#hero{position:fixed;inset:0;z-index:0;cursor:pointer;overflow:hidden;background:#0d0f14}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 12%;
  opacity:0;transition:opacity 1.2s var(--ease)}
:root[data-theme="light"] .hero-day{opacity:1}
:root[data-theme="dark"] .hero-night{opacity:1}
/* wordmark floats in the open sky, clear of every building */
.hero-logo{position:absolute;left:55%;right:2vw;top:11.5%;transform:translateY(-50%);
  display:flex;justify-content:center;
  font-size:clamp(26px,4.6vw,84px);font-weight:700;letter-spacing:.34em;padding-left:.34em;
  text-transform:uppercase;color:#F2F0EA;mix-blend-mode:difference;
  pointer-events:none;user-select:none;transition:opacity .4s}
@media(orientation:portrait){
  .hero-img{object-position:30% 12%} /* tower to the right third */
  .hero-logo{left:2vw;right:36vw;top:14%;font-size:clamp(28px,8vw,56px)}
}
.hero-spacer{height:100vh}
.hero-ui{position:fixed;z-index:10;transition:opacity .4s;color:#F2F0EA;mix-blend-mode:difference}
#clock{left:4vw;bottom:34px;font-variant-numeric:tabular-nums}
#scrollCue{left:50%;bottom:26px;transform:translateX(-50%);text-align:center;background:none;border:none;cursor:pointer}
#scrollCue .line{width:1px;height:44px;background:#F2F0EA;margin:10px auto 0;transform-origin:top;animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ============ TOPICS ============ */
#topics{padding-bottom:12vh}
.topics{border-top:1px solid var(--hair)}
.topic{display:flex;align-items:baseline;gap:3vw;padding:34px 0;border-bottom:1px solid var(--hair)}
.topic .t-num{font-size:11px;letter-spacing:.14em;font-weight:500;color:var(--mut);min-width:3.4em;transition:color .25s}
.topic .t-name{flex:1;font-size:clamp(34px,6vw,88px);font-weight:500;letter-spacing:-.04em;line-height:1;
  transition:transform .35s var(--ease)}
.topic .t-count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--mut)}
@media(hover:hover){
  .topic:hover .t-name{transform:translateX(14px)}
  .topic:hover .t-num{color:var(--clay)}
}

/* ============ MAIN / INDEX ============ */
main.site-main{position:relative;z-index:20;background:var(--bg);transition:background .6s var(--ease)}
body:not(.home) main.site-main{min-height:70vh}
#featured{padding:15vh 0 11vh;border-bottom:1px solid var(--hair)}
#featured .label{display:block;margin-bottom:3.2em}
#featured h2{font-size:clamp(44px,8.5vw,124px);font-weight:500;letter-spacing:-.04em;line-height:.98;max-width:14ch}
#featured .dek{margin-top:34px;font-size:clamp(16px,1.6vw,20px);line-height:1.55;max-width:46ch;color:var(--mut)}
#featured .go{display:inline-block;margin-top:44px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--clay);border-bottom:1px solid var(--clay);padding-bottom:4px}

#index{position:relative;overflow:hidden}
#indexHead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:16px;padding:64px 0 10px}
#filters{display:flex;gap:22px;flex-wrap:wrap}
#filters button{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--mut);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s}
#filters button.active{color:var(--fg);border-color:var(--clay)}
.watermark{position:absolute;right:-2vw;top:6vw;font-size:34vw;font-weight:700;letter-spacing:-.06em;
  color:var(--fg);opacity:.035;line-height:1;pointer-events:none;user-select:none;z-index:0}
#rows,.rows{position:relative;z-index:1;padding-bottom:10vh}
.row{display:flex;align-items:baseline;gap:3vw;padding:30px 0;border-top:1px solid var(--hair);cursor:pointer;position:relative}
.row:last-child{border-bottom:1px solid var(--hair)}
.row .num{font-size:11px;letter-spacing:.14em;font-weight:500;color:var(--mut);min-width:3.4em;transition:color .25s}
.row .row-body{flex:1}
.row h3{font-size:clamp(26px,4.4vw,58px);font-weight:500;letter-spacing:-.035em;line-height:1.04;
  transition:transform .35s var(--ease)}
.row .row-dek{margin-top:12px;font-size:15px;line-height:1.55;color:var(--mut);max-width:58ch;
  transition:transform .35s var(--ease)}
.row .meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--mut);
  white-space:nowrap;display:flex;gap:2.4em}
@media(hover:hover){
  .row:hover h3,.row:hover .row-dek{transform:translateX(14px)}
  .row:hover .num{color:var(--clay)}
}
.row.hidden{display:none}
.rows-empty{padding:60px 0;color:var(--mut);border-top:1px solid var(--hair)}
#preview{position:fixed;z-index:60;top:0;left:0;width:min(23vw,330px);aspect-ratio:4/5;pointer-events:none;
  opacity:0;transition:opacity .3s var(--ease);overflow:hidden}
#preview img{width:100%;height:100%;object-fit:cover;display:block}
#preview.on{opacity:1}
@media(hover:none){#preview{display:none}}

/* archive header */
.arch-head{padding:19vh 0 0;position:relative}
.arch-head .label{display:block;margin-bottom:1.6em}
.arch-head h1{font-size:clamp(40px,7vw,104px);font-weight:500;letter-spacing:-.04em}

/* ============ ARTICLE ============ */
#progress{position:fixed;top:0;left:0;height:2px;background:var(--clay);width:0;z-index:110}
.art-head{padding:19vh 4vw 0;max-width:1100px;margin:0 auto}
.art-head .label{display:block;margin-bottom:2.6em}
.art-head h1{font-size:clamp(40px,7vw,104px);font-weight:500;letter-spacing:-.04em;line-height:1.0}
.art-head .dek{margin-top:30px;font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--mut);max-width:52ch}
.art-head .byline{margin-top:38px;padding-bottom:44px;border-bottom:1px solid var(--hair);display:flex;gap:3em}
.art-lede{max-width:1400px;margin:64px auto 0;padding:0 4vw}
.art-lede img{width:100%;max-height:78vh;object-fit:cover;display:block}
.entry-content{max-width:680px;margin:0 auto;padding:64px 4vw 0;font-size:18px;line-height:1.7}
.entry-content p{margin-bottom:1.7em}
.entry-content h2{font-size:26px;font-weight:500;letter-spacing:-.02em;margin:2.2em 0 1em}
.entry-content h3{font-size:21px;font-weight:500;margin:2em 0 .9em}
.entry-content a{border-bottom:1px solid var(--clay);transition:color .25s}
.entry-content a:hover{color:var(--clay)}
.entry-content blockquote{border-left:2px solid var(--clay);padding-left:1.4em;margin:2em 0;color:var(--mut)}
.entry-content ul,.entry-content ol{padding-left:1.3em;margin-bottom:1.7em}
.entry-content li{margin-bottom:.5em}
.entry-content img,.entry-content figure{margin:56px calc(50% - 46vw);max-width:92vw;width:92vw}
.entry-content figure img{margin:0;width:100%;max-height:74vh;object-fit:cover}
.entry-content figcaption{padding:14px 4vw 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.entry-content>p:first-of-type::first-letter{font-size:3.1em;font-weight:500;float:left;line-height:.82;padding:.08em .12em 0 0}
@media(max-width:900px){.entry-content img,.entry-content figure{margin:44px 0;width:100%;max-width:100%}}

#related{max-width:1100px;margin:90px auto 0;padding:0 4vw}
#related .label{display:block;padding-bottom:14px}
#related .row h3{font-size:clamp(20px,2.6vw,34px)}
.news{max-width:1100px;margin:90px auto;padding:64px 4vw;border:1px solid var(--hair);text-align:center}
.news h4{font-size:clamp(24px,3vw,40px);font-weight:500;letter-spacing:-.03em}
.news p{margin-top:14px;color:var(--mut);font-size:15px}
.news form{margin-top:34px;display:flex;justify-content:center;gap:0;flex-wrap:wrap}
.news input[type=email]{background:transparent;border:1px solid var(--hair);border-right:none;color:var(--fg);
  padding:14px 18px;font:inherit;font-size:14px;width:min(340px,70vw);outline:none}
.news input[type=email]:focus{border-color:var(--clay)}
.news button,.news input[type=submit]{border:1px solid var(--clay);background:var(--clay);color:var(--bone);
  padding:14px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:.25s;cursor:pointer}
.news button:hover,.news input[type=submit]:hover{background:transparent;color:var(--clay)}
.news .received{margin-top:34px;color:var(--clay);font-size:14px;letter-spacing:.08em}
.backlink{display:block;text-align:center;margin:0 auto 90px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--mut)}
.backlink:hover{color:var(--clay)}

/* generic page */
.page-body .art-head h1{font-size:clamp(36px,6vw,88px)}

/* ============ FOOTER ============ */
footer.site-foot{border-top:1px solid var(--hair);padding:80px 4vw 40px;position:relative;z-index:20;background:var(--bg);
  transition:background .6s var(--ease)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6vw;max-width:1560px;margin:0 auto}
footer .wordmark{font-weight:700;font-size:15px;letter-spacing:.32em;text-transform:uppercase}
footer .manifesto{margin-top:26px;font-size:15px;line-height:1.65;color:var(--mut);max-width:38ch}
footer .col .label{display:block;margin-bottom:1.6em}
footer .col a{display:block;font-size:14px;line-height:2.1;color:var(--mut);transition:color .25s}
footer .col a:hover{color:var(--clay)}
.foot-base{max-width:1560px;margin:70px auto 0;padding-top:22px;border-top:1px solid var(--hair-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}

/* 404 */
.err{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:0 4vw;max-width:1100px;margin:0 auto}
.err h1{font-size:clamp(60px,14vw,220px);font-weight:700;letter-spacing:-.05em}
.err p{margin-top:20px;color:var(--mut)}

/* ============ MOBILE ============ */
@media(max-width:760px){
  nav .links{gap:20px}
  .row{flex-wrap:wrap;gap:10px 16px;padding:24px 0}
  .row .num{min-width:auto}
  .row .meta{width:100%}
  .foot-grid{grid-template-columns:1fr;gap:44px}
  #featured{padding-top:11vh}
  .news input[type=email]{border-right:1px solid var(--hair);width:100%}
  .news button,.news input[type=submit]{width:100%;margin-top:10px}
  .hero-spacer{height:175vh}
}
@media(prefers-reduced-motion:reduce){
  #scrollCue .line,#loader .bar i{animation:none}
  html{scroll-behavior:auto}
}