/* Homepage top banner 1.1: shared charcoal, softly lit surfaces and responsive interaction. */
body.zmt-fh-preview-page .zmt-fh-top-hub > .fh-top-banner {
  grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(240px,3fr);grid-template-rows:minmax(0,1fr);gap:28px;
  height:100%;min-height:0;min-width:0;padding:24px 26px;border:1px solid #ffffff1c;border-radius:18px;position:relative;isolation:isolate;-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse at 38% 0%,#9f896128,transparent 58%),radial-gradient(ellipse at 83% 100%,#577e7226,transparent 65%),linear-gradient(125deg,#272d31 0%,#20272c 54%,#2b3439 100%);
  box-shadow:0 14px 28px -16px #0e192660,0 3px 8px #15222b24,inset 0 0 0 1px #ffffff06;color:#f6f6ef;
}
.fh-top-banner *, .fh-top-banner *::before, .fh-top-banner *::after{box-sizing:border-box}
.fh-top-banner .fh-top-carousel {display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;border:0;background:transparent;overflow:hidden}
.fh-top-banner .fh-top-carousel-track{flex:1;min-height:0;min-width:0;position:relative}
.fh-top-banner .fh-top-carousel-slide{height:100%;min-height:0;margin:0}
.fh-top-banner [hidden]{display:none!important}
.fh-top-banner .fh-top-carousel-link{display:flex;align-items:center;position:relative;width:100%;height:100%;min-height:0;color:inherit;text-decoration:none;gap:10px}
.fh-top-banner .fh-top-carousel-copy{order:0;display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;z-index:1;padding:0;gap:0}
.fh-top-banner .fh-top-carousel-copy h1{font:inherit;line-height:inherit;margin:0;padding:0}
.fh-top-banner .fh-top-carousel-copy strong{display:block;font-size:clamp(25px,1.85vw,38px);font-weight:700;line-height:1.35;letter-spacing:-.02em;white-space:normal;text-wrap:balance;color:#f6f5ee;text-shadow:0 2px 6px #00000018;margin:12px 0 10px}
.fh-top-banner .fh-top-carousel-kicker{font-size:11px;line-height:1.6;letter-spacing:.08em;color:#cbb78f}
.fh-top-banner .fh-top-carousel-copy>span:not(.fh-top-carousel-kicker){font-size:14px;line-height:1.75;color:#b6c1c5;margin:0 0 16px}
.fh-top-banner .fh-top-carousel-copy em{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:44px;font-size:14px;line-height:1.5;font-weight:600;font-style:normal;color:#fff5ed;background:linear-gradient(145deg,#ba5c47,#a24334 70%,#923a2e);border:1px solid #e8a18466;border-radius:10px;padding:10px 16px 10px 18px;box-shadow:0 6px 14px -6px #100e0caa,inset 0 0 0 1px #ffffff08;margin:0}
.fh-top-banner .fh-top-carousel-copy em::after{content:'→';font-size:23px;font-weight:400;line-height:1}
.fh-top-banner .fh-top-carousel-media{order:1;display:block;position:relative;flex:0 0 34%;min-width:0;max-width:34%;margin:0;background:transparent}
.fh-top-banner .fh-top-carousel-media img{display:block;width:100%;height:auto;max-height:220px;object-fit:contain;border:0;box-shadow:none;border-radius:0}
.fh-top-banner .fh-top-carousel-media.is-functional-art{filter:drop-shadow(0 8px 8px #131a1c26)}
.fh-top-banner .fh-top-carousel-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px;flex:none}
.fh-top-banner .fh-top-carousel-pagination{position:static;display:flex;gap:0;align-items:center;flex:none;background:none;padding:0;margin:0}
.fh-top-banner .fh-top-carousel-pagination button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;background:none;border-radius:8px;box-shadow:none}
.fh-top-banner .fh-top-carousel-pagination button::before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:#83908e}
.fh-top-banner .fh-top-carousel-pagination button.is-current::before{width:10px;height:10px;background:#dec492}
.fh-top-banner .fh-top-carousel-controls{position:static;display:flex;gap:5px;align-items:center;padding:0;margin:0}
.fh-top-banner .fh-top-carousel-controls button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #a7b1b12b;background:#ffffff04;border-radius:8px;color:#e1e8e5;font:inherit;font-size:17px;box-shadow:none}
.fh-top-banner .fh-top-carousel-controls button svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.fh-top-banner .fh-top-carousel-count{color:#bdc6c4;font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-right:6px}
.fh-top-banner .fh-top-shortcuts{display:grid;position:relative;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;min-width:0;min-height:0;height:100%;margin:0;padding:0}
/* This is a requested separator between functional areas, not an accent state. */
.fh-top-banner .fh-top-shortcuts::before{content:'';position:absolute;left:-14px;top:0;bottom:0;width:1px;background:rgba(207,207,188,.32);box-shadow:1px 0 0 #00000038;pointer-events:none}
.fh-top-banner .fh-top-entry{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:center;gap:10px;min-height:0;padding:11px 12px;border:1px solid #ffffff19;border-radius:12px;background:linear-gradient(125deg,#41504a,#343f3d 70%,#323c3c);box-shadow:inset 0 0 0 1px #ffffff03,0 5px 10px -8px #071314aa;color:#f3f5ef;text-decoration:none;transition:transform .28s cubic-bezier(.2,0,0,1),border-color .28s,box-shadow .28s;min-width:0}
.fh-top-banner .fh-top-entry-icon svg{display:block;width:44px;height:44px;max-width:none}
.fh-top-banner .fh-top-entry-copy{min-width:0}
.fh-top-banner .fh-top-entry-copy strong{display:block;font-size:clamp(16px,1vw,20px);line-height:1.4;font-weight:650;margin:0;color:#f1f3ee}
.fh-top-banner .fh-top-entry-copy>span{display:block;font-size:12px;line-height:1.6;color:#c2c9cb;margin-top:6px}
.fh-top-banner .fh-top-entry-arrow{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d6c69d12;font-size:18px;color:#d7c6a2;line-height:1}
.fh-top-banner :is(a,button):focus-visible{outline:2px solid #e3c087;outline-offset:-3px}
.fh-top-banner button{cursor:pointer}

/* Full surfaces establish hierarchy without decorative edge stripes. */
body.zmt-fh-preview-page .zmt-fh-top-hub>.fh-top-banner::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.065;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='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.fh-top-banner .fh-top-carousel-copy>span:not(.fh-top-carousel-kicker){text-wrap:pretty}
.fh-top-banner .fh-top-carousel-media{isolation:isolate}
.fh-top-banner .fh-top-carousel-media::before{content:"";position:absolute;z-index:-1;inset:8% -8%;border-radius:50%;background:radial-gradient(ellipse,#d2bb8720,transparent 67%);pointer-events:none}
.fh-top-banner .fh-top-carousel-media.is-functional-art{filter:drop-shadow(0 12px 8px #07121538)}
.fh-top-banner .fh-top-carousel-media:not(.is-functional-art) img{border-radius:10px;outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
.fh-top-banner .fh-top-entry{position:relative}
.fh-top-banner .fh-top-entry:nth-child(2){background:linear-gradient(125deg,#414e5d,#343f4c 70%,#323c45)}
.fh-top-banner .fh-top-entry:nth-child(3){background:linear-gradient(125deg,#554e40,#423f36 70%,#3d3d37)}
.fh-top-banner .fh-top-entry-icon{display:grid;place-items:center;width:44px;height:48px;border:1px solid #ffffff13;border-radius:13px;background:linear-gradient(145deg,#d6e8d514,#ffffff03);box-shadow:0 4px 7px -5px #07131380,inset 0 0 0 1px #ffffff03}
.fh-top-banner .fh-top-entry-icon svg{width:38px;height:38px;filter:drop-shadow(0 2px 2px #0a172530)}
.fh-top-banner .fh-top-entry-copy strong{letter-spacing:.025em;color:#f5f4ed}
.fh-top-banner .fh-top-entry-copy>span{color:#c2cbc9;margin-top:5px}
.fh-top-banner .fh-top-entry-arrow{background:#ffffff05;border:1px solid #ffffff12;color:#d8c6a1;transition:transform .28s cubic-bezier(.2,0,0,1),background-color .28s,border-color .28s}
.fh-top-banner .fh-top-carousel-copy em{transition:transform .2s cubic-bezier(.2,0,0,1),box-shadow .2s,border-color .2s}
.fh-top-banner .fh-top-carousel-copy em::after{transition:transform .24s cubic-bezier(.2,0,0,1)}
.fh-top-banner .fh-top-carousel-controls{gap:2px;padding:3px;border:1px solid #ffffff0d;background:#0b121a1f;border-radius:13px;box-shadow:inset 0 1px 4px #0000001a}
.fh-top-banner .fh-top-carousel-controls button{border:1px solid transparent;background:transparent;border-radius:9px;color:#c7cecd;transition:transform .18s cubic-bezier(.2,0,0,1),background-color .2s,border-color .2s,color .2s}
.fh-top-banner .fh-top-carousel-pagination button{position:relative;font-variant-numeric:tabular-nums;transition:transform .2s cubic-bezier(.2,0,0,1)}
.fh-top-banner .fh-top-carousel-pagination button::before{width:28px;height:28px;background:#ffffff03;border:1px solid #ffffff14;box-shadow:0 2px 3px #10171a16;transition:background-color .25s,border-color .25s,box-shadow .25s}
.fh-top-banner .fh-top-carousel-pagination button::after{content:attr(data-fh-page-label);position:absolute;inset:0;display:grid;place-items:center;font-size:10px;letter-spacing:.02em;color:#9ea9ac;transition:color .25s}
.fh-top-banner .fh-top-carousel-pagination button.is-current::before{width:28px;height:28px;background:linear-gradient(145deg,#e1cea6,#bba175);border-color:#f2dfb07d;box-shadow:0 3px 8px #00000024}
.fh-top-banner .fh-top-carousel-pagination button.is-current::after{color:#302e29;font-weight:700}
.fh-top-banner .fh-top-carousel-controls button[data-qykc-carousel-toggle]{position:relative;font-size:0}
.fh-top-banner [data-qykc-carousel-toggle]::before,.fh-top-banner [data-qykc-carousel-toggle]::after{content:"";position:absolute;width:16px;height:16px;background:currentColor;transition:opacity .3s cubic-bezier(.2,0,0,1),transform .3s cubic-bezier(.2,0,0,1),filter .3s cubic-bezier(.2,0,0,1)}
.fh-top-banner [data-qykc-carousel-toggle]::before{clip-path:polygon(19% 15%,36% 15%,36% 85%,19% 85%,19% 15%,64% 15%,81% 15%,81% 85%,64% 85%,64% 15%);opacity:1;transform:scale(1);filter:blur(0)}
.fh-top-banner [data-qykc-carousel-toggle]::after{clip-path:polygon(28% 12%,87% 50%,28% 88%);opacity:0;transform:scale(.25);filter:blur(4px)}
.fh-top-banner [data-qykc-carousel-toggle][aria-pressed="true"]::before{opacity:0;transform:scale(.25);filter:blur(4px)}
.fh-top-banner [data-qykc-carousel-toggle][aria-pressed="true"]::after{opacity:1;transform:scale(1);filter:blur(0)}
@media(hover:hover) and (pointer:fine){
 .fh-top-banner .fh-top-entry:hover{transform:translateY(-2px);border-color:#dbc59166;box-shadow:inset 0 0 0 1px #e0cda014,0 9px 15px -10px #050d16b0;color:#fff}
 .fh-top-banner .fh-top-entry:hover .fh-top-entry-arrow{transform:translate(2px,-2px);background:#decc9d16;border-color:#decc9d35}
 .fh-top-banner .fh-top-carousel-link:hover em{border-color:#efb69799;box-shadow:0 8px 16px -6px #120f0bad,inset 0 0 0 1px #ffffff12}
 .fh-top-banner .fh-top-carousel-link:hover em::after{transform:translateX(4px)}
 .fh-top-banner .fh-top-carousel-controls button:hover{background:#ffffff09;border-color:#dfcc9e33;color:#f4e4bf}
 .fh-top-banner .fh-top-carousel-pagination button:not(.is-current):hover::before{background:#ffffff09;border-color:#dfcc9e50}
}
.fh-top-banner .fh-top-entry:active,.fh-top-banner .fh-top-carousel-controls button:active,.fh-top-banner .fh-top-carousel-pagination button:active,.fh-top-banner .fh-top-carousel-link:active em{transform:scale(.96)}

/* Preserve the existing creator center; only the banner rearranges at narrower widths. */
@media(min-width:1200px) and (max-width:1500px){
 body.zmt-fh-preview-page .zmt-fh-top-hub>.fh-top-banner{padding:20px;gap:24px;grid-template-columns:minmax(0,1fr) 250px}
 .fh-top-banner .fh-top-shortcuts::before{left:-12px}
 .fh-top-banner .fh-top-carousel-media{flex-basis:27%;max-width:27%}
 .fh-top-banner .fh-top-carousel-copy strong{font-size:26px}
 .fh-top-banner .fh-top-carousel-kicker{font-size:10px;letter-spacing:0}
 .fh-top-banner .fh-top-carousel-count{display:none}
}
@media(min-width:768px) and (max-width:1199px){
 body.zmt-fh-preview-page .zmt-fh-top-hub>.fh-top-banner{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(215px,1fr) auto;height:auto;min-height:390px;padding:20px;gap:24px}
 body.home.zmt-fh-preview-page:has(.qykc-home-hub) .zmt-fh-top-hub.qykc-home-hub{height:auto;min-height:0}
 .fh-top-banner .fh-top-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;height:auto;gap:8px}
 .fh-top-banner .fh-top-shortcuts::before{left:0;right:0;top:-12px;bottom:auto;width:auto;height:1px}
 .fh-top-banner .fh-top-entry{grid-template-columns:1fr;gap:6px;padding:12px;position:relative}
 .fh-top-banner .fh-top-entry-copy>span{font-size:11px}
 .fh-top-banner .fh-top-entry-arrow{position:absolute;right:10px;top:12px}
 .fh-top-banner .fh-top-entry-icon svg{width:34px;height:34px}
 .fh-top-banner .fh-top-carousel-copy strong{font-size:27px}
 .fh-top-banner .fh-top-carousel-count{display:none}
}
@media(max-width:767px){
 body.home.zmt-fh-preview-page .zmt-fh-top-hub.qykc-home-hub:has(>.fh-top-banner){display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;padding:0;margin:0 0 16px;border:0;background:none;box-shadow:none;width:100%;left:auto;transform:none}
 body.zmt-fh-preview-page .zmt-fh-top-hub>#zmt-fh-creator-hub{display:none!important}

 body.zmt-fh-preview-page .zmt-fh-top-hub>.fh-top-banner{grid-column:1/-1;grid-row:auto;width:100%;height:auto;grid-template-columns:minmax(0,1fr);gap:22px;padding:18px;border-radius:17px}
 body.home.zmt-fh-preview-page:has(.qykc-home-hub) .zmt-fh-top-hub.qykc-home-hub{height:auto;min-height:0}
 .fh-top-banner .fh-top-carousel{min-height:292px;height:auto}
 .fh-top-banner .fh-top-carousel-track{min-height:218px}
 .fh-top-banner .fh-top-carousel-copy strong{font-size:26px;line-height:1.35}
 .fh-top-banner .fh-top-carousel-kicker{font-size:10px;letter-spacing:0}
 .fh-top-banner .fh-top-carousel-copy>span:not(.fh-top-carousel-kicker){font-size:13px}
 .fh-top-banner .fh-top-carousel-media{flex-basis:27%;max-width:27%}
 .fh-top-banner .fh-top-carousel-media img{max-height:125px}
 .fh-top-banner .fh-top-carousel-copy em{font-size:13px;padding:9px 14px;gap:16px}
 .fh-top-banner .fh-top-carousel-count{display:none}
 .fh-top-banner .fh-top-carousel-footer{gap:2px;justify-content:space-between}
 .fh-top-banner .fh-top-carousel-controls{gap:2px}
 .fh-top-banner .fh-top-shortcuts{grid-template-rows:repeat(3,minmax(88px,auto));height:auto;gap:8px}
 .fh-top-banner .fh-top-shortcuts::before{left:0;right:0;top:-11px;bottom:auto;width:auto;height:1px}
 .fh-top-banner .fh-top-entry{min-height:88px;grid-template-columns:44px minmax(0,1fr) 24px;padding:14px;gap:12px}
 .fh-top-banner .fh-top-entry-copy strong{font-size:17px}
}
@media(max-width:379px){
 .fh-top-banner .fh-top-carousel-media{display:none}
 .fh-top-banner .fh-top-carousel-footer{justify-content:center;column-gap:4px}
 .fh-top-banner .fh-top-carousel-copy strong{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.fh-top-banner *,.fh-top-banner *::before,.fh-top-banner *::after{transition:none!important;animation:none!important}.fh-top-banner .fh-top-entry:hover,.fh-top-banner .fh-top-entry:active,.fh-top-banner .fh-top-entry-arrow,.fh-top-banner .fh-top-carousel-link em,.fh-top-banner .fh-top-carousel-link em::after,.fh-top-banner .fh-top-carousel-controls button,.fh-top-banner .fh-top-carousel-pagination button{transform:none!important}}

/* 2026-10-19: remove only the outer top-hub surface; retain layout and inner cards. */
body.home.zmt-fh-preview-page:has(.qykc-home-hub) .zmt-fh-top-hub.qykc-home-hub {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0;
  box-shadow: none;
}

/* 2026-10-19: tighten only the space between homepage navigation and the first row. */
body.home.zmt-fh-preview-page article.page-article:has(#zmt-fh-main) {
  padding-top: 16px;
}
@media (min-width: 768px) {
  body.home.zmt-fh-preview-page .zmt-fh-top {
    padding-top: 16px !important;
  }
}
@media (max-width: 480px) {
  body.home.zmt-fh-preview-page article.page-article:has(#zmt-fh-main) {
    padding-top: 12px;
  }
}

/* 2026-10-19: reduce only the homepage gap after recent announcements. */
body.home.zmt-fh-preview-page #zmt-fh-main .zmt-fh-content > [data-zmta-recent-host] > .zmta-recent {
  margin-bottom: 10px;
}

/* 2026-10-19: balance actual visible space around the homepage announcement bar. */
@media (min-width: 768px) {
  body.home.zmt-fh-preview-page #zmt-fh-main .zmt-fh-content > [data-zmta-recent-host] > .zmta-recent {
    margin-bottom: 2px;
  }
  body.home.zmt-fh-preview-page #zmt-fh-main .zmt-fh-content > [data-zmta-recent-host] + .fh-section-heading {
    height: 40px;
    min-height: 40px;
  }
}
@media (max-width: 767px) {
  body.home.zmt-fh-preview-page #zmt-fh-main:has([data-zmta-recent-host]) .zmt-fh-top-hub.qykc-home-hub {
    margin-bottom: 0;
  }
  body.home.zmt-fh-preview-page #zmt-fh-main .zmt-fh-content:has(> [data-zmta-recent-host]) {
    padding-top: 10px !important;
  }
}
