/* untoldseasons.com 首页（展示站）。只在首页加载，由 mu-plugin us-site.php 引入。
   页面结构在 wp/content/home.html；素材在 /brand/media/。
   字体、颜色变量、按钮、订阅表单在全站共用的 site.css 里。 */

/* Kadence 的内容区自带上下外边距和内边距；首页要整屏铺满 */
.home .content-area { margin-top: 0; margin-bottom: 0 }
.home .site-main, .home .entry-content-wrap { padding: 0 !important }
.home .entry-content { margin: 0 }

/* Kadence 的 .single-content h2/p 自带大段上下边距，权重和单个类选择器一样且后加载，
   所以下面的选择器都挂在 .us-home 下面多一层，好压过它 */

/* 透明页头压在开屏视频上：字改白（Kadence 默认深色） */
.home #masthead .site-title, .home #masthead .site-title a,
.home #masthead .header-navigation .menu > li > a,
.home #masthead button, .home #masthead .search-toggle-open { color: #fff }
.home #masthead .header-navigation .menu > li > a:hover { color: #fff; opacity: .8 }

.us-home {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--us-cream);
  color: var(--us-ink);
}
body .us-home h1, body .us-home h2 { color: inherit; font-family: var(--us-serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; text-wrap: balance }
body .us-home p { margin: 0 }
.us-home .us-kicker { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600 }

/* ── 开屏 ── */
.us-home .us-hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; background: #8a9a86 url(/brand/media/hero-poster.jpg) center/cover;
  color: #fff;
  /* 文字贴底排；上方留出页头的高度，矮屏幕上也不会钻到页头底下 */
  display: flex; align-items: flex-end; box-sizing: border-box;
  padding: 130px 6vw 10vh;
}
.us-home .us-hero__video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover }
.us-home .us-hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%);
}
.us-home .us-hero__copy { position: relative; z-index: 1; flex: 1; min-width: 0; max-width: 920px }
.us-home .us-hero h1 {
  font-size: clamp(42px, min(7vw, 11vh), 96px); line-height: 1.02;
  margin: .22em 0 .3em; text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.us-home .us-hero__lede { font-size: clamp(17px, 1.6vw, 21px); max-width: 34em; margin-bottom: 30px; opacity: .95 }

/* Kadence 给 #wrapper 写了 overflow:hidden; overflow:clip。不认识 clip 的老浏览器（Safari 16 以前、Chrome 90 以前）
   会落到 hidden，而 hidden 会让下面的 sticky 全部失效。首页改回 visible；横向溢出由 body 的 overflow-x:hidden 兜住
   （body 的 overflow 会转交给视口，不影响 sticky）。 */
.home #wrapper { overflow: visible }

/* ── 四季：每一屏 sticky 贴顶，下一季从下面盖上来 ── */
.us-home .us-season {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 520px;
  background: #ccc var(--img) center/cover no-repeat;
  display: flex; align-items: flex-end;
  color: #fff;
}
.us-home .us-season::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}
.us-home .us-season__copy { position: relative; padding: 0 6vw 9vh }
/* 季节名不许断行：Kadence 给正文开了单词内断行，大字号下「Summer」曾被拆成 Summe / r */
.us-home .us-season h2 { white-space: nowrap; overflow-wrap: normal; word-break: normal; font-size: clamp(60px, 11vw, 160px); line-height: .95; margin: .12em 0 .18em; text-shadow: 0 2px 30px rgba(0,0,0,.2) }
.us-home .us-season p:last-child { font-size: clamp(17px, 1.5vw, 20px); max-width: 30em }

/* ── 四季「穿越」过场（home.js 启用后给 .us-year 加 .is-portal）：四季收进一个 sticky 舞台，
   每一季用 clip-path 圆孔逐个展开。没启用时就是上面的 sticky 叠压。 ── */
.us-home .us-year.is-portal { position: relative }
.us-home .us-year__stage {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--us-cream);
}
.us-home .us-year.is-portal .us-season {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: auto; min-height: 0;
  background: none; overflow: hidden; isolation: isolate; visibility: hidden;
  will-change: clip-path;
}
.us-home .us-season__img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background: #ccc var(--img) center/cover no-repeat; will-change: transform;
}
.us-home .us-year.is-portal .us-season__copy { opacity: 0; will-change: opacity, transform }
.us-home .us-season__giant {
  position: absolute; top: 50%; left: 50%; z-index: 1; pointer-events: none;
  font-family: var(--us-serif); font-weight: 600; font-size: 24vw; line-height: 1; white-space: nowrap;
  color: #fff; text-shadow: 0 4px 60px rgba(0,0,0,.25); opacity: 0; will-change: transform, opacity;
}

/* ── 品牌宣言：开屏下面第一屏，大号衬线字、居中 ── */
.us-home .us-manifesto { position: relative; z-index: 1; background: var(--us-cream); padding: 16vh 6vw 14vh; text-align: center }
.us-home .us-manifesto .us-kicker { color: var(--us-muted); margin-bottom: 2.2em }
.us-home .us-manifesto__text { max-width: 880px; margin: 0 auto }
body .us-home .us-manifesto__text p { font-family: var(--us-serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.45; margin: 0 0 1.1em; text-wrap: balance }
body .us-home .us-manifesto__sign { font-family: var(--us-serif); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); margin-top: 1.6em; color: var(--us-muted) }

/* ── 四个门槛：四季之后的短文，链接到 /seasons/ ── */
.us-home .us-thresholds { position: relative; z-index: 1; padding: 14vh max(6vw, calc((100% - 760px) / 2)); text-align: center }
.us-home .us-thresholds { background: var(--us-cream) }
.us-home .us-thresholds .us-kicker { color: var(--us-muted) }
.us-home .us-thresholds h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.08; margin: .4em 0 .5em }
body .us-home .us-thresholds p:not(.us-kicker) { font-size: 19px; line-height: 1.65; margin: 0 auto 30px; max-width: 34em }

/* ── Season Letters 订阅（沿用原品牌说明的左图右文版式） ── */
.us-home .us-about { position: relative; z-index: 1; background: var(--us-cream); display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh }
.us-home .us-about__img { width: 100%; height: 100%; object-fit: cover; display: block }
.us-home .us-about__copy { align-self: center; padding: 10vh 6vw }
.us-home .us-about__copy .us-kicker { color: var(--us-muted) }
.us-home .us-about h2 { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.08; margin: .4em 0 .6em }
.us-home .us-about__copy > p { font-size: 18px; line-height: 1.65; max-width: 32em }
/* 「The window」入口：同一版式，图在右；和下面的订阅块用浅绿底隔开 */
.us-home .us-about--flip { background: #eef1e8 }
.us-home .us-about--flip .us-about__img { order: 2 }
.us-home .us-about--flip .us-about__copy > p { margin-bottom: 30px }

/* ── 游戏介绍 ── */
.us-home .us-game { position: relative; z-index: 1; background: #eef1e8; text-align: center; padding: 80px 24px }
.us-home .us-game .us-kicker { color: var(--us-muted); margin-bottom: 10px }
.us-home .us-game p:not(.us-kicker) { font-size: 18px; margin-bottom: 26px }

@media (max-width: 900px) {
  .us-home .us-season { background-image: var(--img-s) }
  .us-home .us-season__img { background-image: var(--img-s) }
  .us-home .us-about { grid-template-columns: 1fr }
  .us-home .us-about__img { height: 56vh }
  .us-home .us-about--flip .us-about__img { order: 0 }
  .us-home .us-about__copy { padding: 56px 24px 64px }
  .us-home .us-hero { padding: 110px 24px 8vh }
  .us-home .us-season__copy { padding: 0 24px 8vh }
  .us-home .us-manifesto { padding: 72px 24px 64px }
  .us-home .us-thresholds { padding: 72px 24px }
}

/* 开屏视频的播放/暂停按钮（home.js 插入）。右下角，避开左下的标题文字 */
.us-home .us-hero__toggle {
  position: absolute; z-index: 2; right: 6vw; bottom: 10vh;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(0,0,0,.35); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.us-home .us-hero__toggle:hover { background: rgba(0,0,0,.5) }
.us-home .us-hero__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px }
.us-home .us-hero__toggle svg { width: 18px; height: 18px; fill: currentColor }
@media (max-width: 900px) { .us-home .us-hero__toggle { right: 24px; bottom: auto; top: 96px } }

/* 「减少动态效果」：视频改为不自动播放（home.js）。四季的 sticky 叠压完全跟着滚动走、不会自己动，
   不算该设置要拦的动画，所以保留——学校/公司电脑常默认开着这个设置。 */
@media (prefers-reduced-motion: reduce) {
  .us-home .us-btn { transition: none }
}