/* Meubel Moods — theme extras: header, footer, homepage scroll-effect, editorial. */

@font-face{
  font-family:"Newsreader";
  font-style:normal;font-weight:500 700;font-display:swap;
  src:url("../fonts/newsreader-600.woff2") format("woff2");
}

:root{
  --mm-oat:#EAE4D9; --mm-surface:#F3EEE5; --mm-ink:#221D19; --mm-ink-soft:#5A5148;
  --mm-line:#D6CCBB; --mm-olive:#4F5A46; --mm-olive-ink:#3B4435; --mm-walnut:#A96B45;
  --mm-stage-bg:#1B1E18; --mm-stage-bg2:#23271F; --mm-stage-oat:#ECE5D6; --mm-stage-soft:#A9A895;
  --mm-stage-olive:#8FA079; --mm-stage-walnut:#D08A5E;
  --mm-serif:"Newsreader","Iowan Old Style",Palatino,Georgia,serif;
  --mm-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mm-maxw:1140px;
}

html{scroll-behavior:smooth}
.wp-site-blocks{overflow-x:clip}
body{background:var(--mm-oat);color:var(--mm-ink);font-family:var(--mm-sans)}
.mm-wrap{max-width:var(--mm-maxw);margin:0 auto;padding:0 clamp(16px,4vw,24px)}
.mm-eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mm-olive);font-weight:700}

/* safe side padding for core-block templates */
main.wp-block-group,section.wp-block-group{padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px)}

/* ---------- header ---------- */
.mm-header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--mm-line);
  background:color-mix(in srgb,var(--mm-oat) 86%,transparent);backdrop-filter:blur(10px)}
.mm-bar{display:flex;align-items:center;justify-content:space-between;height:66px}
.mm-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--mm-ink);font-family:var(--mm-serif);font-size:1.3rem}
.mm-brand b{color:var(--mm-olive);font-weight:600}
.mm-mark{width:26px;height:26px;stroke:var(--mm-olive);stroke-width:1.6;fill:none;flex:none}
.mm-nav{display:flex;gap:24px;font-size:.92rem}
.mm-nav a{text-decoration:none;color:var(--mm-ink-soft)}
.mm-nav a:hover{color:var(--mm-ink)}
.mm-cta{display:inline-flex;align-items:center;gap:9px;background:var(--mm-olive);color:#F6F2EA;text-decoration:none;
  padding:11px 20px;border-radius:10px;font-weight:600;font-size:.92rem;border:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease}
.mm-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(79,90,70,.7);color:#F6F2EA}

/* ---------- hero ---------- */
.mm-hero{padding:96px 0 60px;text-align:center}
.mm-h1{font-family:var(--mm-serif);font-weight:600;line-height:1.06;letter-spacing:-.015em;margin:0;
  font-size:clamp(2.6rem,6.5vw,5.2rem)}
.mm-rotator{display:inline-block;color:var(--mm-walnut);transition:opacity .3s ease,transform .3s ease}
.mm-lede{font-size:1.15rem;color:var(--mm-ink-soft);max-width:46ch;margin:26px auto 30px}
.mm-scrollhint{margin-top:52px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mm-ink-soft);opacity:.7}
.mm-scrollhint .mm-dot{display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(var(--mm-ink-soft),transparent);animation:mm-hint 1.8s ease-in-out infinite}
@keyframes mm-hint{0%,100%{transform:scaleY(.5);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- marquee ---------- */
.mm-marquee{border-block:1px solid var(--mm-line);overflow:hidden;padding:18px 0;background:var(--mm-surface)}
.mm-marquee-track{display:flex;width:max-content;animation:mm-scrollx 26s linear infinite}
.mm-marquee-track span{font-family:var(--mm-serif);font-size:clamp(1.4rem,3vw,2.4rem);padding:0 26px;color:var(--mm-ink);white-space:nowrap}
.mm-marquee-track span i{color:var(--mm-walnut);font-style:normal;padding:0 26px}
@keyframes mm-scrollx{to{transform:translateX(-50%)}}

/* ---------- pinned stats ---------- */
.mm-pin-wrap{position:relative;height:340vh}
.mm-pin-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;color:var(--mm-stage-oat);
  background:
    radial-gradient(130% 120% at 50% 130%, transparent 55%, rgba(0,0,0,.55) 100%),
    radial-gradient(120% 100% at 50% 120%, var(--mm-stage-bg2), var(--mm-stage-bg))}
.mm-pin-stage::before{content:"";position:absolute;inset:0;opacity:var(--glow,0);z-index:1;
  background:radial-gradient(48% 40% at 50% 46%, color-mix(in srgb,var(--mm-stage-walnut) 42%,transparent), transparent 70%);
  transition:opacity .2s linear;pointer-events:none}
.mm-pin-stage::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mm-cursor-glow{position:absolute;z-index:1;width:520px;height:520px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease;left:var(--mx,50%);top:var(--my,50%);
  background:radial-gradient(circle, color-mix(in srgb,var(--mm-stage-walnut) 26%,transparent), transparent 62%)}
.mm-pin-stage:hover .mm-cursor-glow{opacity:.9}
.mm-stats{position:relative;z-index:3;text-align:center;padding:0 20px}
.mm-kicker{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mm-stage-olive);font-weight:700;margin-bottom:26px}
.mm-stat-line{font-family:var(--mm-serif);font-weight:600;line-height:1;letter-spacing:-.025em;
  font-size:clamp(2.8rem,10vw,8.6rem);opacity:.24;transform:translateY(16px) scale(.97);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.mm-stat-line.on{opacity:1;transform:none}
.mm-stat-num{font-variant-numeric:tabular-nums;color:var(--mm-stage-walnut);text-shadow:0 0 40px color-mix(in srgb,var(--mm-stage-walnut) 45%,transparent)}
.mm-stat-unit{color:var(--mm-stage-oat)}
.mm-foot{margin-top:34px;color:var(--mm-stage-soft);font-size:1rem;opacity:0;transition:opacity .5s ease}
.mm-foot.on{opacity:1}
.mm-rail{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:2px;height:120px;background:rgba(236,229,214,.15);z-index:3;border-radius:2px}
.mm-rail i{position:absolute;left:0;top:0;width:100%;height:var(--rail,0%);background:var(--mm-stage-walnut);border-radius:2px}
.mm-float{position:absolute;z-index:2;border-radius:18px;background:rgba(236,229,214,.06);border:1px solid rgba(236,229,214,.12);
  backdrop-filter:blur(3px);display:grid;place-items:center;box-shadow:0 24px 60px -30px rgba(0,0,0,.8);will-change:transform}
.mm-float svg{width:46%;height:46%;stroke:var(--mm-stage-oat);stroke-width:1.6;fill:none;opacity:.9}
.mm-float.mm-sw{background:var(--sw)}
.mm-f1{width:104px;height:104px;left:8%;top:20%}.mm-f2{width:78px;height:78px;left:15%;top:64%}
.mm-f3{width:120px;height:120px;right:9%;top:26%}.mm-f4{width:70px;height:70px;right:17%;top:66%}
.mm-f5{width:64px;height:64px;left:30%;top:12%}.mm-f6{width:72px;height:72px;right:30%;top:78%}
.mm-f7{width:92px;height:92px;left:4%;top:46%}.mm-f8{width:56px;height:56px;right:5%;top:50%}

/* ---------- moods ---------- */
.mm-section{padding:88px 0}
.mm-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap}
.mm-h2{font-family:var(--mm-serif);font-weight:600;margin:0;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1}
.mm-mood-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.mm-mood{position:relative;border:1px solid var(--mm-line);border-radius:16px;overflow:hidden;background:var(--mm-surface);
  text-decoration:none;color:inherit;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.mm-mood:hover{transform:translateY(-6px) rotateX(6deg);box-shadow:0 30px 60px -30px rgba(34,29,25,.5)}
.mm-sw2{height:96px;transition:height .25s ease}
.mm-mood:hover .mm-sw2{height:112px}
.mm-lbl{padding:13px 15px;font-weight:600}
.mm-lbl span{display:block;font-weight:400;font-size:.78rem;color:var(--mm-ink-soft);margin-top:2px}
.mm-sw-ja{background:linear-gradient(135deg,#CFC2AD,#B4A588)}
.mm-sw-sc{background:linear-gradient(135deg,#E4E7E2,#C7CEC4)}
.mm-sw-in{background:linear-gradient(135deg,#7C7C7E,#525254)}
.mm-sw-la{background:linear-gradient(135deg,#CE9264,#A5683f)}
.mm-sw-mc{background:linear-gradient(135deg,#D2A63F,#AC7A32)}

/* ---------- featured ---------- */
.mm-feat{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;background:var(--mm-surface);
  border:1px solid var(--mm-line);border-radius:20px;padding:34px;box-shadow:0 30px 60px -40px rgba(34,29,25,.4);
  text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease}
.mm-feat:hover{transform:translateY(-4px);box-shadow:0 40px 70px -40px rgba(34,29,25,.5)}
.mm-feat-img{aspect-ratio:16/11;border-radius:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--mm-walnut) 24%,var(--mm-surface)),color-mix(in srgb,var(--mm-olive) 22%,var(--mm-surface)))}
.mm-feat-body h2{margin:12px 0}
.mm-feat-body p{color:var(--mm-ink-soft);margin:0 0 22px}
.mm-byline{display:flex;align-items:center;gap:13px;margin-top:22px;color:var(--mm-ink-soft);font-size:.94rem}
.mm-avatar{width:48px;height:48px;border-radius:999px;flex:none;background:radial-gradient(circle at 40% 35%,var(--mm-walnut),var(--mm-olive))}
.mm-byline b{color:var(--mm-ink)}

/* ---------- footer ---------- */
.mm-footer{border-top:1px solid var(--mm-line);background:var(--mm-surface);margin-top:40px;padding:56px 0 26px}
.mm-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
.mm-brand-text{font-family:var(--mm-serif);font-size:1.25rem}
.mm-brand-text b{color:var(--mm-olive)}
.mm-footer-brand p{color:var(--mm-ink-soft);margin:.6rem 0 0;max-width:34ch}
.mm-footer-nav{display:flex;flex-direction:column;gap:.5rem;font-size:.94rem}
.mm-footer-nav a{color:var(--mm-ink-soft);text-decoration:none}
.mm-footer-nav a:hover{color:var(--mm-ink)}
.mm-foot-h{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-ink);font-weight:700;margin-bottom:.3rem}
.mm-footer-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--mm-line);margin-top:34px;padding-top:20px;color:var(--mm-ink-soft);font-size:.84rem}

/* ---------- editorial content ---------- */
.mm-authorbox{align-items:center}
.mm-authorbox img{flex:none}
.wp-block-post-content img,.wp-block-post-featured-image img{border-radius:12px}
.wp-block-post-content blockquote{border-left:3px solid var(--mm-olive);padding-left:1.1rem;margin-left:0;font-family:var(--mm-serif);font-size:1.2rem;color:var(--mm-ink)}
figcaption{color:var(--mm-ink-soft);font-size:.85rem}

/* ---------- reveal ---------- */
.mm-rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.mm-rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .mm-nav,.mm-header-cta{display:none}
  .mm-mood-grid{grid-template-columns:repeat(2,1fr)}
  .mm-feat{grid-template-columns:1fr}
  .mm-float{display:none}
  .mm-rail{right:12px}
  .mm-footer-grid{grid-template-columns:1fr 1fr}
  .mm-footer-brand{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,.mm-marquee-track{animation:none!important}
  .mm-rv{opacity:1;transform:none}
}