/* Homepage only. A sparse editorial surface on Hydro's existing visual tokens. */
:root:root.page--homepage .main { padding-top: 0; }
:root:root.page--homepage .main > .row { width: min(1090px, calc(100% - 48px)); margin: 0 auto 68px; }
:root:root.page--homepage .main > .row > .columns { padding: 0 8px; }

/* Hero: deliberately one message, aligned as a single two-line lockup. */
:root:root.page--homepage .oj-home-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 460px; padding: 72px 24px; text-align: center; }
/* ── 首页 Hero 氛围层 ::after（唯一装饰层，纯 CSS，无额外 DOM）──
   目标：把 hero 从全站的柔彩极光里「托」出来，成为一处安静的焦点。
   手法：① 中央白色聚光把标题抬出底色；② 右上 Action Blue(#0066cc) 一处微光作为唯一强调；
        全部羽化，无硬边、无浓色块。（原第 3 层细圆环已移除：圆环改由 .oj-hero-badge 自身绘制，好让 logo 与圆心永远同心。）
   依据：Apple DESIGN.md —— 单一强调色 / 无装饰性硬形状 / 留白优先。 */
:root:root.page--homepage .oj-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(56% 74% at 50% 44%, rgba(255,255,255,.62), rgba(255,255,255,.30) 54%, rgba(255,255,255,0) 80%),
    radial-gradient(40% 54% at 86% 2%, rgba(0,102,204,.12), rgba(0,102,204,.028) 48%, rgba(0,102,204,0) 76%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
  /* 原第 3 层＝一圈极细轨道圆环（background-position 87% 4%，closest-side 700px），
     因「求臻右侧的圆圈」已被品牌蓝鸟徽标取代而移除。若要恢复圆环，把下面两项加回上方列表：
     radial-gradient(closest-side, rgba(0,102,204,0) 60.4%, rgba(0,102,204,.12) 61.1%, rgba(0,102,204,.12) 61.9%, rgba(0,102,204,0) 62.6%)
     + background-size 第三项 min(700px, 90vw) min(700px, 90vw) + background-position 第三项 87% 4%。 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.6) 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,.6) 86%, transparent 100%);
}
/* Kicker：金色小字上标（无徽标），与全站金饰同源 #b8892b，抬高一层留白。 */
:root:root.page--homepage .oj-home-kicker { display: inline-block; margin-bottom: 46px; color: #b8892b; font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .16em; }
/* Slogan：去掉等宽粗黑的「标语块」，换成 Apple display 观感——系统无衬线、600 字重、微负字距；
   中文由与英文同号降为小号灰色副题，形成主次层次。 */
:root:root.page--homepage .oj-slogan-grid { display: inline-grid; grid-template-columns: repeat(3, max-content); column-gap: clamp(28px, 3.4vw, 54px); row-gap: 18px; margin: 0; color: #1d1d1f; font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; font-size: clamp(38px, 4.9vw, 62px); font-weight: 600; letter-spacing: -.022em; line-height: 1.05; text-align: center; }
:root:root.page--homepage .oj-slogan-grid span, :root:root.page--homepage .oj-slogan-grid small { display: block; white-space: nowrap; }
:root:root.page--homepage .oj-slogan-grid small { color: #6e6e73; font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; letter-spacing: .16em; line-height: 1.1; margin-right: -.16em; }
:root:root.page--homepage .oj-home-geometry { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
:root:root.page--homepage .oj-home-geometry i { position: absolute; display: block; border: 1px solid rgba(0,113,227,.14); top: -122px; right: -102px; width: 288px; height: 288px; transform: rotate(31deg); }
:root:root.page--homepage .oj-home-geometry em, :root:root.page--homepage .oj-home-geometry strong { position: absolute; color: rgba(0,113,227,.22); font-family: Consolas,monospace; font-style: normal; font-weight: 400; }
:root:root.page--homepage .oj-home-geometry em { top: 74px; left: 8%; font-size: 38px; }
:root:root.page--homepage .oj-home-geometry strong { right: 9%; bottom: 60px; font-size: 18px; }

/* Hero badge：品牌蓝鸟（来自用户提供的无金框图，透明底）嵌在圆环里，整体压一档透明度。
   圆环不再由 ::after 的渐变层绘制，而是本元素的 border-radius + 1px 边框——
   这样圆与 logo 永远同心、且随 lockup 一起缩放（定位基准 .oj-slogan-grid，left:100% = lockup 右缘）。
   尺寸用 em（= 标题字号 clamp(38px,4.9vw,62px)）以跟随 slogan 缩放；透明度改 --oj-badge-opacity 即可。 */
:root:root.page--homepage .oj-slogan-grid { position: relative; }
:root:root.page--homepage .oj-hero-badge { --oj-badge-opacity: .55; position: absolute; left: 100%; top: 100%; display: grid; place-items: center; width: 3.15em; height: 3.15em; margin: 0; transform: translate(0.5em, -2em); border: 1px solid rgba(0,102,204,.16); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.5), rgba(255,255,255,0) 80%); pointer-events: none; z-index: 0; }
:root:root.page--homepage .oj-hero-badge img { display: block; width: 58%; height: auto; opacity: var(--oj-badge-opacity); }

/* Resources: product-directory rhythm, no floating-card treatment. */
:root:root.page--homepage .oj-home-resources { width: min(1034px,calc(100% - 48px)); margin: 72px auto 62px; }
:root:root.page--homepage .oj-home-resources a, :root:root.page--homepage .oj-home-resources a:hover, :root:root.page--homepage .oj-home-resources a:visited, :root:root.page--homepage .oj-home-resources a:focus { text-decoration: none !important; }
:root:root.page--homepage .oj-resource-heading { display: grid; grid-template-columns: 172px 1fr auto; gap: 25px; align-items: baseline; padding: 0 0 23px; border-bottom: 1px solid rgba(29,29,31,.16); }
:root:root.page--homepage .oj-resource-heading p { margin: 0; color: var(--ap-accent,#0071e3); font-family: Consolas,monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
:root:root.page--homepage .oj-resource-heading h2 { margin: 0; color: #1d1d1f; font-size: clamp(28px,3.2vw,42px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
:root:root.page--homepage .oj-resource-heading span { color: #77777e; font-size: 13px; }
:root:root.page--homepage .oj-resource-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 52px; padding: 36px 0 46px; }
:root:root.page--homepage .oj-resource-block h3 { margin: 0 0 18px; color: #1d1d1f; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
:root:root.page--homepage .oj-resource-block > p { display: none; }
:root:root.page--homepage .oj-downloads { border-top: 1px solid rgba(29,29,31,.14); }
:root:root.page--homepage .oj-downloads a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; min-height: 79px; padding: 17px 39px 13px 0; border-bottom: 1px solid rgba(29,29,31,.14); border-radius: 0; background: transparent; color: #1d1d1f; transition: color .2s ease, padding-left .2s ease; }
:root:root.page--homepage .oj-downloads a::before { content: "↓"; position: absolute; right: 4px; top: 23px; color: var(--ap-accent,#0071e3); font-size: 19px; transition: transform .2s ease; }
:root:root.page--homepage .oj-downloads a:hover { padding-left: 10px; border-color: var(--ap-accent,#0071e3); color: var(--ap-accent,#0071e3); }
:root:root.page--homepage .oj-downloads a:hover::before { transform: translateY(4px); }
:root:root.page--homepage .oj-downloads strong { font-size: 15px; font-weight: 700; }
:root:root.page--homepage .oj-downloads b { display: none; }
:root:root.page--homepage .oj-downloads small { grid-column: 1 / -1; color: #77777e; font-family: Consolas,monospace; font-size: 11px; }
:root:root.page--homepage .oj-syllabus-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(29,29,31,.14); }
:root:root.page--homepage .oj-syllabus-links a { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 51px; padding: 0 5px 0 0; border-bottom: 1px solid rgba(29,29,31,.14); color: #25252a; font-size: 14px; transition: color .2s ease, padding .2s ease; }
:root:root.page--homepage .oj-syllabus-links a:nth-child(odd) { margin-right: 29px; }
:root:root.page--homepage .oj-syllabus-links a:hover { padding-left: 9px; color: var(--ap-accent,#0071e3); }
:root:root.page--homepage .oj-syllabus-links span { color: #97979d; font-family: Consolas,monospace; font-size: 11px; }
:root:root.page--homepage .oj-home-bridges { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(29,29,31,.16); border-bottom: 1px solid rgba(29,29,31,.16); }
:root:root.page--homepage .oj-home-bridges a { position: relative; min-height: 136px; padding: 25px 32px; background: transparent; color: #1d1d1f; transition: background-color .2s ease, color .2s ease; }
:root:root.page--homepage .oj-home-bridges a + a { border-left: 1px solid rgba(29,29,31,.16); }
:root:root.page--homepage .oj-home-bridges a::after { content: "↗"; position: absolute; right: 27px; top: 30px; color: var(--ap-accent,#0071e3); font-size: 20px; }
:root:root.page--homepage .oj-home-bridges a:hover { background: #1d1d1f; color: #fff; }
:root:root.page--homepage .oj-home-bridges span, :root:root.page--homepage .oj-home-bridges strong, :root:root.page--homepage .oj-home-bridges small { display: block; }
:root:root.page--homepage .oj-home-bridges span { color: #6e6e73; font-family: Consolas,monospace; font-size: 11px; letter-spacing: .08em; }
:root:root.page--homepage .oj-home-bridges a:hover span, :root:root.page--homepage .oj-home-bridges a:hover small { color: rgba(255,255,255,.72); }
:root:root.page--homepage .oj-home-bridges strong { margin-top: 9px; font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
:root:root.page--homepage .oj-home-bridges strong b { display: none; }
:root:root.page--homepage .oj-home-bridges small { margin-top: 4px; color: #6e6e73; font-size: 13px; }

@media only screen and (max-width:780px) {
  :root:root.page--homepage .oj-home-hero { min-height: 390px; padding: 60px 18px; }
  /* 窄屏：徽标与圆环不再绝对定位，改为 lockup 下方居中的一行，避免溢出被 hero overflow:hidden 裁切。 */
  :root:root.page--homepage .oj-hero-badge { position: static; grid-column: 1 / -1; justify-self: center; width: 100px; height: 100px; margin: 6px 0 0; transform: none; }
  :root:root.page--homepage .oj-home-kicker { margin-bottom: 34px; font-size: 11px; letter-spacing: .13em; }
  :root:root.page--homepage .oj-slogan-grid { font-size: clamp(30px,8.4vw,52px); column-gap: clamp(18px,3vw,30px); row-gap: 14px; }
  :root:root.page--homepage .oj-home-geometry i { top: -126px; right: -142px; }
  :root:root.page--homepage .oj-home-resources, :root:root.page--homepage .main > .row { width: calc(100% - 32px); }
  :root:root.page--homepage .oj-resource-heading { grid-template-columns: 1fr; gap: 8px; }
  :root:root.page--homepage .oj-resource-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media only screen and (max-width:520px) {
  :root:root.page--homepage .oj-slogan-grid { font-size: clamp(26px,8.8vw,40px); column-gap: 13px; row-gap: 12px; }
  :root:root.page--homepage .oj-syllabus-links { grid-template-columns: 1fr; }
  :root:root.page--homepage .oj-syllabus-links a:nth-child(odd) { margin-right: 0; }
  :root:root.page--homepage .oj-home-bridges { grid-template-columns: 1fr; }
  :root:root.page--homepage .oj-home-bridges a + a { border-top: 1px solid rgba(29,29,31,.16); border-left: 0; }
}
@media (prefers-reduced-motion:reduce) { :root:root.page--homepage .oj-downloads a, :root:root.page--homepage .oj-syllabus-links a, :root:root.page--homepage .oj-home-bridges a { transition: none; } }