/*
Theme Name: Yufu Hetian Jade
Theme URI: https://yufu-hetian-jade.example
Author: Yufu Hetian Jade
Description: Product-led English homepage for Xinjiang nephrite bangles.
Version: 1.0.0
*/

:root {
  --ink: #17251f;
  --muted: #62716b;
  --line: #dfe8e1;
  --paper: #f7f9f5;
  --white: #ffffff;
  --jade: #2f6b57;
  --jade-deep: #1e4b3b;
  --jade-pale: #e9f1eb;
  --stone: #eef1ec;
  --accent: #bd8a4a;
  --radius: 10px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.6; }
body, button, input, textarea { font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; padding: .7rem 1rem; background: var(--white); }
.site-shell { overflow: hidden; }
.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }

.topbar { background: var(--jade-deep); color: #dceae1; font-size: 13px; }
.topbar-inner { min-height: 36px; display:flex; align-items:center; justify-content:space-between; gap: 20px; }
.topbar a { text-decoration: none; }
.topbar .contact-line { display:flex; gap: 18px; flex-wrap: wrap; }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(247,249,245,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.header-inner { min-height: 78px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap: 12px; text-decoration:none; }
.brand-mark { width: 40px; height:40px; border: 1px solid var(--jade); border-radius: 50%; display:grid; place-items:center; color: var(--jade); font-family: Georgia, serif; font-size: 20px; }
.brand-name { font-family: Georgia, "Times New Roman", serif; font-size: 21px; letter-spacing: .01em; }
.brand-name small { display:block; font: 10px/1.2 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.nav { display:flex; align-items:center; gap: 28px; font-size: 14px; }
.nav a { text-decoration: none; color: var(--ink); }
.nav a:hover, .nav a:focus-visible { color: var(--jade); }
.nav-cta { border:1px solid var(--jade); padding: 9px 16px; border-radius: 999px; color: var(--jade) !important; }
.nav-cta:hover { background: var(--jade); color: var(--white) !important; }

.hero { position: relative; padding: 84px 0 96px; background: linear-gradient(120deg, #f7f9f5 0%, #edf3ec 54%, #dce9df 100%); }
.hero::before { content:""; position:absolute; inset:0; opacity:.32; pointer-events:none; background-image: radial-gradient(circle at 15% 20%, rgba(47,107,87,.13) 0 1px, transparent 1px), radial-gradient(circle at 76% 44%, rgba(47,107,87,.1) 0 1px, transparent 1px); background-size: 26px 26px, 38px 38px; }
.hero-grid { position:relative; display:grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 70px; align-items:center; }
.eyebrow { margin:0 0 16px; color: var(--jade); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 700; }
.hero h1 { margin: 0; max-width: 640px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(42px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -.02em; }
.hero h1 em { color: var(--jade); font-style: normal; }
.hero-copy { margin: 24px 0 0; max-width: 530px; color: var(--muted); font-size: 18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; text-decoration:none; font-weight: 700; font-size: 14px; cursor:pointer; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button span[aria-hidden="true"] { font-size:0; }
.button span[aria-hidden="true"]::after { content:"\2192"; font-size:16px; }
.button-primary { background: var(--jade); color: var(--white); }
.button-primary:hover { background: var(--jade-deep); }
.button-ghost { border-color: var(--jade); color: var(--jade); background: transparent; }
.button-ghost:hover { background: var(--jade-pale); }
.hero-notes { display:flex; gap: 22px; flex-wrap: wrap; margin-top: 34px; padding-top: 20px; border-top:1px solid rgba(47,107,87,.22); color: var(--muted); font-size: 13px; }
.hero-notes span { display:inline-flex; align-items:center; gap:7px; }
.hero-notes b { color: var(--jade); font-size: 16px; }
.hero-visual { position:relative; }
.hero-image { width:100%; max-width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain; margin:0 auto; transform:translateY(-20px) !important; border-radius: var(--radius); box-shadow: 24px 28px 0 rgba(47,107,87,.12); }

.section { padding: 92px 0; }
.section-alt { background: var(--white); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap: 28px; margin-bottom: 34px; }
.section-head h2 { margin: 0; max-width: 610px; font: 400 clamp(32px, 4vw, 48px)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.015em; }
.section-head p { max-width: 420px; margin:0; color:var(--muted); }

.products-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.product-card { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(24,55,43,.1); }
.product-image { display:block; width:100%; height:280px; aspect-ratio:auto; object-fit:contain; padding:18px; background: linear-gradient(145deg, #dce9df, #b8cdbd); }
.product-body { padding: 20px; }
.product-kicker { margin:0 0 7px; color:var(--jade); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.product-title { margin:0; font: 400 24px/1.15 Georgia, "Times New Roman", serif; }
.product-description { margin:10px 0 18px; color:var(--muted); font-size:14px; line-height:1.55; }
.product-specs { margin:0 0 16px; color:var(--jade-deep); font-size:12px; line-height:1.45; font-weight:700; }
.product-link { color:var(--jade); text-decoration:none; font-size:13px; font-weight:700; }
.product-link span { display:inline-block; transition:transform .2s ease; }
.product-link:hover span { transform:translateX(4px); }
.product-card h3 a { text-decoration:none; }
.product-card > a { display:block; }

.product-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:26px; color:var(--muted); font-size:13px; }
.product-breadcrumb a { color:var(--jade); text-decoration:none; }
.product-detail { padding-top:34px; }
.product-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:70px; align-items:start; }
.product-detail-media { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.product-detail-media img { width:100%; aspect-ratio:1 / 1; object-fit:contain; background:linear-gradient(145deg,#edf3ee,#d7e5da); border-radius:6px; }
.product-detail-copy h1 { margin:0; max-width:650px; font:400 clamp(36px,4.5vw,60px)/1.08 Georgia,"Times New Roman",serif; letter-spacing:-.02em; }
.product-lead { margin:20px 0 0; color:var(--muted); font-size:18px; line-height:1.65; max-width:590px; }
.product-spec-list { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:30px 0 24px; border-top:1px solid var(--line); }
.product-spec-list div { padding:14px 0; border-bottom:1px solid var(--line); }
.product-spec-list dt { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.product-spec-list dd { margin:3px 0 0; color:var(--jade-deep); font-weight:700; }
.product-detail-note { color:var(--muted); font-size:13px; margin:0 0 24px; }
.product-content-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }
.product-content-grid h2, .product-contact h2 { margin:0; font:400 clamp(32px,4vw,48px)/1.08 Georgia,"Times New Roman",serif; }
.product-content { max-width:650px; color:var(--muted); }
.product-content p { margin:0 0 18px; }
.product-content h3 { margin:28px 0 8px; color:var(--ink); font-size:20px; }
.product-contact { background:var(--jade-deep); color:var(--white); }
.product-contact-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.product-contact h2 { max-width:650px; }
.product-contact p:not(.eyebrow) { color:#c8d9d0; max-width:560px; margin:16px 0 0; }
.product-contact .eyebrow { color:#a9c9b6; }
.product-contact .button-ghost { color:var(--white); border-color:#b9d0c2; white-space:nowrap; }

.knowledge-hero { padding-top: 72px; padding-bottom: 68px; background: var(--stone); }
.knowledge-hero-inner { max-width: 760px; }
.knowledge-hero h1 { margin:0; font:400 clamp(38px,5vw,62px)/1.08 Georgia,"Times New Roman",serif; }
.knowledge-hero p:not(.eyebrow) { margin:20px 0 0; max-width:650px; color:var(--muted); font-size:18px; }
.knowledge-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.knowledge-card { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.knowledge-card-image-link { display:block; }
.knowledge-card-image { width:100%; aspect-ratio: 4 / 3; object-fit:cover; background:var(--jade-pale); }
.knowledge-card-body { display:flex; flex:1; flex-direction:column; padding:22px; }
.knowledge-card-meta { display:flex; justify-content:space-between; gap:12px; color:var(--jade); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.knowledge-card h2 { margin:12px 0 9px; font:400 25px/1.16 Georgia,"Times New Roman",serif; }
.knowledge-card h2 a, .guide-point h3 a { text-decoration:none; }
.knowledge-card h2 a:hover, .guide-point h3 a:hover { color:var(--jade); }
.knowledge-card p { margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.6; }
.knowledge-card .product-link { margin-top:auto; }
.journal-more { margin:30px 0 0; text-align:center; }
.article-page { padding-top:54px; }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:76px; align-items:start; }
.article-main { min-width:0; max-width:780px; }
.article-header h1 { margin:0; max-width:760px; font:400 clamp(38px,5vw,64px)/1.08 Georgia,"Times New Roman",serif; }
.article-excerpt { margin:22px 0 0; max-width:700px; color:var(--muted); font-size:19px; line-height:1.6; }
.article-byline { display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; color:var(--muted); font-size:13px; }
.article-byline span:first-child { color:var(--jade-deep); font-weight:700; }
.article-byline time { white-space:nowrap; }
.article-hero-image { margin:34px 0 38px; }
.article-hero-image img { width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:var(--radius); background:var(--jade-pale); }
.article-content { max-width:700px; color:var(--muted); font-size:17px; line-height:1.75; }
.article-content .article-intro { margin-top:0; color:var(--ink); font-size:20px; line-height:1.65; }
.article-content section { margin-top:42px; }
.article-content h2 { margin:0 0 12px; color:var(--ink); font:400 31px/1.18 Georgia,"Times New Roman",serif; }
.article-content p { margin:0 0 17px; }
.article-content ul { margin:0 0 18px; padding-left:22px; }
.article-content li { margin:0 0 8px; padding-left:4px; }
.article-footer-note { margin-top:48px; padding:20px 22px; border-left:3px solid var(--jade); background:var(--jade-pale); color:var(--muted); font-size:14px; }
.article-footer-note strong { color:var(--jade-deep); }
.article-footer-note p { margin:6px 0 0; }
.article-footer-note a { color:var(--jade-deep); font-weight:700; }
.article-sidebar { display:grid; gap:20px; position:sticky; top:110px; }
.article-sidebar-block { padding:24px; border:1px solid var(--line); background:var(--white); border-radius:var(--radius); }
.article-sidebar-block h2 { margin:0; font:400 27px/1.18 Georgia,"Times New Roman",serif; }
.article-sidebar-block p:not(.eyebrow) { margin:13px 0 18px; color:var(--muted); font-size:14px; }
.article-related-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.article-related-list a { color:var(--jade-deep); font-size:14px; font-weight:700; text-decoration:none; }
.article-related-list a:hover { color:var(--jade); }
.knowledge-cta { background:var(--jade-pale); }
.knowledge-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.knowledge-cta h2 { max-width:680px; margin:0; font:400 clamp(31px,4vw,46px)/1.1 Georgia,"Times New Roman",serif; }
.knowledge-cta p:not(.eyebrow) { max-width:620px; margin:16px 0 0; color:var(--muted); }

.guide-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; }
.guide-intro h2 { margin:0; font: 400 clamp(32px,4vw,48px)/1.08 Georgia,serif; }
.guide-intro p { color:var(--muted); max-width: 480px; }
.guide-points { display:grid; gap: 0; border-top: 1px solid var(--line); }
.guide-point { display:grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-bottom:1px solid var(--line); }
.guide-number { width: 32px; height:32px; display:grid; place-items:center; border:1px solid var(--jade); border-radius:50%; color:var(--jade); font: 15px Georgia,serif; }
.guide-point h3 { margin:0 0 5px; font-size:17px; }
.guide-point p { margin:0; color:var(--muted); font-size:14px; }

.story { background: var(--jade-deep); color: var(--white); }
.story-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 68px; align-items:center; }
.story-image { width:100%; max-width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain; justify-self:start; border-radius:var(--radius); transform:translateY(-30px) !important; }
.story h2 { margin:0; font: 400 clamp(32px,4vw,50px)/1.08 Georgia,serif; }
.story p { color:#c8d9d0; max-width: 510px; }
.story .button-ghost { color:var(--white); border-color:#b9d0c2; }
.story .button-ghost:hover { background:rgba(255,255,255,.1); }

.contact { background: var(--stone); }
.contact-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items:start; }
.contact h2 { margin:0 0 14px; font:400 clamp(34px,4vw,52px)/1.05 Georgia,serif; }
.contact-copy { color:var(--muted); max-width: 420px; }
.contact-meta { display:grid; gap: 10px; margin-top: 26px; font-size:14px; }
.contact-meta strong { color:var(--jade-deep); }
.lead-form { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding: 28px; }
.honeypot-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap: 16px; }
.field { display:grid; gap:7px; }
.field-full { grid-column:1/-1; }
.field label { font-size:13px; font-weight:700; }
.field input, .field textarea, .field select { width:100%; border:1px solid #cbd8cf; border-radius: 6px; padding: 12px 13px; font:inherit; color:var(--ink); background:#fcfdfb; }
.field textarea { min-height: 130px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid rgba(47,107,87,.18); border-color:var(--jade); }
.form-note { color:var(--muted); font-size:12px; margin: 14px 0 18px; }
.form-status { margin-top: 14px; padding: 11px 13px; border-radius:6px; background:var(--jade-pale); color:var(--jade-deep); font-size:13px; }

.site-footer { background:#12231c; color:#cbdad2; padding: 38px 0 22px; }
.footer-grid { display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 35px; padding-bottom:30px; border-bottom:1px solid rgba(203,218,210,.2); }
.footer-brand { color:var(--white); font: 23px Georgia,serif; }
.site-footer h3 { margin:0 0 12px; color:var(--white); font-size:13px; text-transform:uppercase; letter-spacing:.15em; }
.site-footer p, .site-footer a { margin:0; color:#cbdad2; font-size:14px; text-decoration:none; }
.footer-links { display:grid; gap:7px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:18px; color:#8ea69a; font-size:12px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }
@media (max-width: 980px) { .hero-grid, .guide-grid, .story-grid, .contact-grid, .product-detail-grid, .product-content-grid, .article-layout { grid-template-columns:1fr; gap: 38px; } .hero { padding: 64px 0 74px; } .hero-visual { width:100%; max-width: 620px; margin:0 auto; } .story-image { max-width:100%; } .products-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .knowledge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .footer-grid { grid-template-columns:1fr 1fr; } .product-contact-inner, .knowledge-cta-inner { display:grid; grid-template-columns:1fr; gap:24px; } .product-contact .button-ghost, .knowledge-cta .button { justify-self:start; } .article-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px) { .container { width:min(var(--max), calc(100% - 32px)); } .topbar-inner { padding: 8px 0; align-items:flex-start; flex-direction:column; gap:4px; } .header-inner { min-height:68px; } .nav { gap: 14px; } .nav a:not(.nav-cta) { display:none; } .brand-name { font-size:18px; } .hero { padding: 46px 0 58px; } .hero h1 { font-size: 42px; } .hero-copy { font-size:16px; } .hero-image { width:100%; aspect-ratio:4 / 3; transform:none !important; box-shadow:12px 14px 0 rgba(47,107,87,.12); } .section { padding: 64px 0; } .section-head { display:block; } .section-head p { margin-top:14px; } .products-grid, .knowledge-grid { grid-template-columns:1fr; gap:14px; } .product-card, .knowledge-card { display:block; } .product-image { width:100%; height:clamp(220px, 72vw, 300px); aspect-ratio:auto; object-fit:contain; padding:14px; } .knowledge-card-image { width:100%; height:auto; min-height:0; aspect-ratio:4 / 3; object-fit:contain; } .product-body, .knowledge-card-body { padding:16px; } .product-title, .knowledge-card h2 { font-size:21px; } .story-image { width:100%; aspect-ratio:4 / 3; transform:none !important; } .article-header h1 { font-size:42px; } .article-excerpt { font-size:17px; } .article-content { font-size:16px; } .article-content h2 { font-size:27px; } .article-sidebar { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .field-full { grid-column:auto; } .lead-form { padding:20px; } .footer-grid { grid-template-columns:1fr; gap:25px; } .footer-bottom { display:block; } .footer-bottom span { display:block; margin-top:6px; } }