:root {
  --brand-green: #499801; --brand-orange: #ed731c; --green-700: #356f02; --orange-700: #a84d0c;
  --ink: #1f2b1a; --muted: #5b6955; --surface: #ffffff; --leaf: #f4f7ee;
  --line: #dde4d3; --line-strong: #7d8a76; --on-green: #ffffff;
  --organic-bg: #e8f2da; --organic-ink: var(--green-700); --transition-bg: #fbf1d6; --transition-ink: #7a5c00;
  --font-display: "Huninn", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 56px; --space-8: 96px; --space-9: 140px;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px;
  --type-hero: 64px; --type-hero-mobile: 40px; --type-heading-1: 44px; --type-heading-1-mobile: 30px;
  --type-heading-3: 22px; --type-body-lg: 18px; --type-body: 16px; --type-caption: 14px; --type-eyebrow: 13px;
  --shadow-lift: 0 18px 40px -22px rgba(38, 54, 45, .45);
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--space-8); }
body { margin: 0; color: var(--ink); background: var(--surface); font: 400 var(--type-body)/1.75 var(--font-sans); }
img { max-width: 100%; }
a { color: var(--green-700); text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
:focus-visible, .xy-btn:focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--space-4), 1180px); margin-inline: auto; }
.xy-header { --xy-header-pad: var(--space-5); position: sticky; top: 0; z-index: 10; background: var(--surface); padding-block: var(--xy-header-pad); }
.xy-header.is-compact { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); min-height: var(--space-6); }
.xy-header .xy-brand { width: var(--space-6); height: var(--space-6); margin-right: auto; flex: none; }
.xy-header .xy-brand-mark { width: var(--space-6); height: var(--space-6); object-fit: contain; }
.xy-header nav { display: flex; align-items: center; gap: var(--space-6); }
.xy-header nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: var(--type-caption); white-space: nowrap; }
/* 手指點得到：連結至少 44px 高 */
.contact-details a, .footer-inner a { display: inline-flex; align-items: center; min-height: 44px; }
.xy-header nav a:hover { text-decoration: underline; }
.hero { display: grid; align-items: center; min-height: min(760px, 80svh); text-align: center; }
.hero-inner { padding-block: var(--space-8); }
.hero-logo { width: min(100%, clamp(560px, 34vw, 760px)); margin: 0 auto var(--space-7); }
h1, h2 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
h1 { font-size: var(--type-hero); line-height: 1.15; margin: 0 auto var(--space-6); }
h2 { font-size: var(--type-heading-1); line-height: 1.2; margin: 0; }
h3 { font-size: var(--type-heading-3); line-height: 1.4; margin: var(--space-5) 0 var(--space-2); }
p { margin: 0; }
.actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
.xy-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: var(--space-3) var(--space-5); border: 1px solid var(--green-700); border-radius: var(--radius-pill); font: 700 var(--type-body)/1.4 var(--font-sans); text-decoration: none; cursor: pointer; }
.xy-btn:hover { text-decoration: none; }
.primary { background: var(--green-700); color: var(--on-green); }
.secondary { --xy-btn-fill: var(--green-700); background: transparent; color: var(--ink); border-color: var(--line-strong); transition: color .2s ease, border-color .2s ease; }
@media (hover: hover) { .secondary:hover { color: var(--on-green); border-color: var(--green-700); } }
.section { padding-block: var(--space-9); scroll-margin-top: var(--space-8); }
.farm, .organic { background: var(--leaf); }
.eyebrow { color: var(--orange-700); font-size: var(--type-eyebrow); line-height: 1.4; font-weight: 700; letter-spacing: .2em; margin-bottom: var(--space-4); }
.lead { max-width: 36em; font-size: var(--type-body-lg); line-height: 1.8; margin-top: var(--space-6); }
.mosaic { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(2, 220px); gap: var(--space-5); margin-top: var(--space-7); }
.mosaic .xy-photo { border-radius: var(--radius-lg); }
.mosaic .xy-photo:first-child { grid-row: span 2; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.xy-card { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.xy-card:hover { box-shadow: var(--shadow-lift); }
.xy-card .xy-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
.xy-card p { color: var(--muted); font-size: var(--type-caption); line-height: 1.6; }
.organic-grid, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.tag { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--type-caption); font-weight: 700; }
.organic-tag { background: var(--organic-bg); color: var(--organic-ink); }
.transition-tag { background: var(--transition-bg); color: var(--transition-ink); }
.cert { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
dl div:last-child { border-bottom: 0; }
dt { color: var(--muted); } dd { margin: 0; font: 400 var(--type-caption)/1.5 var(--font-mono); text-align: right; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.steps li { display: flex; flex-direction: column; gap: var(--space-4); }
.step-illus, .not-found-illus { aspect-ratio: 1; }
.step-illus svg, .not-found-illus svg { width: 100%; height: auto; display: block; }
.step-copy { display: flex; gap: var(--space-4); align-items: baseline; }
.not-found { display: flex; flex-direction: column; align-items: center; text-align: center; }
.not-found-illus { width: 100%; max-width: 360px; margin-bottom: var(--space-6); }
.not-found-actions { justify-content: center; margin-top: var(--space-6); }
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; }
  .steps .step-illus { width: 100%; max-width: 360px; }
  .not-found-illus { max-width: 280px; }
}
.step-number { color: var(--green-700); font: 400 var(--type-caption)/1.5 var(--font-mono); }
.contact-details p + p, .contact-details button, .contact-details button + span + p { margin-top: var(--space-5); }
.detail-label { color: var(--muted); font-size: var(--type-caption); }
.copy-status { display: inline-block; margin-left: var(--space-2); color: var(--muted); font-size: var(--type-caption); }
footer { border-top: 1px solid var(--line); padding-block: var(--space-7); }
.footer-inner { display: flex; justify-content: space-between; align-items: start; gap: var(--space-6); color: var(--muted); font-size: var(--type-caption); }
.footer-inner p + a, .footer-inner a + p { display: inline-block; margin-top: var(--space-3); }
.footer-logo { width: 220px; height: auto; }
@media (max-width: 700px) {
  .xy-header nav { gap: var(--space-3); }
  .xy-header nav a { font-size: var(--type-caption); }
  .hero { min-height: 70svh; }
  .hero-inner { padding-block: var(--space-8); }
  h1 { font-size: var(--type-hero-mobile); } h2 { font-size: var(--type-heading-1-mobile); }
  .section { padding-block: var(--space-8); }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 150px; gap: var(--space-3); }
  .mosaic .xy-photo:first-child { grid-column: span 2; grid-row: auto; }
  .cards, .organic-grid, .contact-grid, .steps { grid-template-columns: 1fr; }
  .organic-grid, .contact-grid { gap: var(--space-6); }
  .footer-inner { flex-direction: column; }
}
/* 360px 以下的小手機：標題縮一級，避免「種自家也願意吃的菜。」這類句子在詞中間斷行 */
@media (max-width: 359px) {
  h1 { font-size: 34px; } h2 { font-size: 26px; }
}

/* 共用導覽與分頁 */
.xy-header.is-subpage .xy-brand { width: 220px; height: 40px; }
.xy-header.is-subpage.is-compact .xy-brand { width: var(--space-6); height: var(--space-6); }
.xy-brand-full { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.is-home .xy-brand-full { display: none; }
/* 導覽：膠囊樣式，與按鈕、標籤同一套圓角；底色畫在 ::before，點擊區仍是 44px 高 */
.xy-header nav { gap: var(--space-1); margin-right: calc(-1 * var(--space-3)); }
.xy-header nav a { position: relative; isolation: isolate; padding-inline: var(--space-3); font-size: 15px; letter-spacing: .04em; transition: color .2s ease; }
.xy-header nav a::before { content: ""; position: absolute; inset: 5px 0; z-index: -1; border-radius: var(--radius-pill); background: var(--organic-bg);
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path .45s cubic-bezier(.2, .7, .2, 1); }
/* 滑過：底色以游標為圓心擴散；site.js 先設 --x、--y、--r 再加 .is-hover，沒有 JS 時用 :hover 從中心擴散 */
:root:not(.xy-js) .xy-header nav a:hover::before, .xy-header nav a.is-hover::before, .xy-header nav a:focus-visible::before { clip-path: circle(var(--r, 75%) at var(--x, 50%) var(--y, 50%)); }
.xy-header nav a:hover { text-decoration: none; color: var(--green-700); }
.xy-header nav a[aria-current="page"] { color: var(--green-700); font-weight: 700; text-decoration: none; }
.xy-header nav a[aria-current="page"]::before { clip-path: none; transition: none; }
.xy-header nav a.is-placing::before { transition: none; }
/* 手機：間距縮到 6px，360px 以上的手機七個項目都排得下，不必滑 */
@media (max-width: 700px) { .xy-header nav { gap: 0; margin-inline: -6px; } .xy-header nav a { padding-inline: 6px; font-size: var(--type-caption); letter-spacing: 0; } }
@media (prefers-reduced-motion: reduce) { .xy-header nav a, .xy-header nav a::before { transition: none; } }
.page-intro h1 { font-size: var(--type-heading-1); line-height: 1.2; margin: 0; }
.page-intro .lead { margin-top: var(--space-6); }
.section-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-6); font-weight: 700; }
.feature-photo, .photo-grid, .area-card, .label-grid { margin-top: var(--space-7); }
.feature-photo { max-width: 760px; }
.feature-photo .xy-photo { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.photo-grid .xy-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.area-card { max-width: 36em; }
.variety-cards h3 { margin-top: var(--space-2); }
.xy-card .variety-code { font: 400 var(--type-caption)/1.5 var(--font-mono); color: var(--green-700); }
.label-grid p { margin-top: var(--space-4); }
.next-link { margin-top: var(--space-6); }
@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; }
  .xy-header.is-subpage .header-inner { justify-content: flex-start; }
  .xy-header.is-subpage nav { flex-basis: 100%; }
  .xy-header nav { max-width: 100%; overflow-x: auto; }
  .page-intro h1 { font-size: var(--type-heading-1-mobile); }
  .photo-grid { gap: var(--space-3); }
}
@media (max-width: 359px) { .page-intro h1 { font-size: 26px; } }
.xy-header .xy-brand, .xy-header.is-subpage .xy-brand, .xy-header.is-subpage.is-compact .xy-brand { min-height: 44px; }
.xy-header.is-subpage .xy-brand-full { height: 40px; position: absolute; top: 50%; translate: 0 -50%; }

/* 分頁專用格線 */
.variety-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }  /* 兩排等高 */
.variety-photo { position: relative; border-radius: var(--radius-lg); min-height: 0; }
.variety-photo > * { position: absolute; inset: 0; }  /* 照片填滿格子，高度由品種卡決定 */
.fruit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-page-grid { margin-top: var(--space-7); }
.contact-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
@media (max-width: 700px) {
  .variety-cards, .fruit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variety-photo { min-height: 160px; }
  .fruit-grid .xy-photo:first-child { grid-column: span 2; }
}

.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--muted); font-size: var(--type-caption); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green-700); }
.crop-group + .crop-group { padding-top: 0; }
.crop-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.crop-grid li { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: var(--space-2); text-align: center; font-size: var(--type-caption); }
.crop-grid img { width: 72px; height: 72px; object-fit: contain; }
.faq-list { display: grid; gap: var(--space-7); }
.faq-list h2 { font-size: var(--type-heading-3); }
.faq-list p { max-width: 36em; margin-top: var(--space-4); }
.faq-list a { display: inline-flex; align-items: center; min-height: 44px; margin-left: var(--space-2); }
.data { font-family: var(--font-mono); }
@media (max-width: 900px) { .crop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .xy-header nav { min-width: 0; flex-basis: 100%; } .crop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (max-width: 359px) { .crop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 作物頁：照片與說明並排的介紹區塊 */
.feature-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; margin-top: var(--space-7); }
.feature-split .xy-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.feature-split .lead { margin: 0 0 var(--space-5); }
@media (max-width: 700px) { .feature-split { grid-template-columns: 1fr; gap: var(--space-5); } }

/* 參訪頁與首頁區段 */
.visit { background: var(--leaf); }
#organic { background: var(--surface); }
#contact { background: var(--leaf); }
.visit-icon { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--organic-bg); border-radius: var(--radius-md); }
.visit-icon img { width: 112px; height: 112px; object-fit: contain; }
.visit-actions { justify-content: flex-start; margin-top: var(--space-6); }
/* 手機：七個項目排成一列，可左右滑；右緣漸隱提示還有項目，滑到底就取消 */
@media (max-width: 700px) {
  .xy-header nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; max-width: none; width: calc(100% + 20px);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .xy-header nav::-webkit-scrollbar { display: none; }
  .xy-header nav.is-end { -webkit-mask-image: none; mask-image: none; }
  .xy-header nav a { flex: none; }
}

/* 作物田畦與社群連結 */
.xy-field { display: flex; justify-content: center; align-items: end; gap: clamp(0px, 1vw, 12px); position: relative; width: fit-content; max-width: 100%; margin: 1.5rem auto; }
.xy-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14.6%; border-bottom: 1px solid var(--line-strong); pointer-events: none; }
.xy-plant, .xy-plant-motion, .xy-plant-pull { display: block; width: clamp(56px, 7vw, 96px); aspect-ratio: 1; transform-origin: 50% 85.4%; }
.xy-plant { flex: 0 0 auto; }
.xy-plant-pull { position: relative; }
.xy-plant svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 85.4%; }
.xy-plant svg:not([data-stage="3"]) { opacity: 0; }
@media (max-width: 600px) { .xy-plant, .xy-plant-motion, .xy-plant-pull { width: 48px; } }
@media (min-width: 360px) and (max-width: 420px) { .xy-plant:nth-child(n+7) { display: none; } }
@media (max-width: 359px) { .xy-plant:nth-child(n+6) { display: none; } }
.facebook-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; text-decoration: none; color: var(--green-700); }
.facebook-link:hover { text-decoration: underline; }
.facebook-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--green-700); transition: color .2s, background-color .2s; }
.facebook-icon svg { width: 24px; height: 24px; }
@media (hover: hover) { .facebook-link:hover .facebook-icon { background: var(--green-700); color: var(--on-green); } }

/* 作物素材（取代粉專相片）：瓜果單一圖示格、地瓜品種圖示 */
.crop-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.crop-tile { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); background: var(--organic-bg); border-radius: var(--radius-md); font-weight: 700; }
.crop-tile img { width: clamp(88px, 12vw, 128px); height: auto; aspect-ratio: 1; }
.variety-icon { display: block; width: 64px; height: 64px; margin-bottom: var(--space-3); }
.xy-photo > img[src$=".svg"] { background: var(--organic-bg); }
@media (max-width: 480px) { .crop-tiles { gap: var(--space-3); } .crop-tile { padding: var(--space-4) var(--space-2); } }

/* 參訪頁：粉專影片（直式），手機上兩欄並排，避免單支影片占滿整個畫面 */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.xy-video { margin: 0; }
.xy-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--organic-bg); border-radius: var(--radius-lg); }
.xy-video figcaption { margin-top: var(--space-3); font-size: var(--type-caption); color: var(--green-700); }
@media (max-width: 700px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }