/* Design tokens from MasterGo DSL (comment shows token source key) */
:root {
  /* colors */
  --color-page-bg: #EBE6E0; /* paint_15:182 */
  --color-footer-bg: #361E0D; /* paint_15:432 */
  --color-white: #FFFFFF; /* paint_2:020 */
  --color-surface: #FFFFFF; /* paint_2:020 */
  --color-surface-alt: #F9FAFB; /* paint_2:107 */
  --color-text: #374151; /* paint_15:588 */
  --color-text-muted: #4B5563; /* paint_2:093 */
  --color-text-subtle: #9CA3AF; /* paint_2:318 */
  --color-primary: #8D7263; /* paint_15:301 */
  --color-accent: #6366F1; /* paint_15:313 */
  --color-divider: #1F2937; /* paint_2:311 */
  --color-search-bg: rgba(255,255,255,0.2); /* paint_15:283 */
  --hero-overlay-opacity: 0.18; /* 英雄区遮罩透明度，建议 0.10-0.30；过高会遮住底图 */

  /* radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 299px; /* 搜索框来自 DSL */
  --radius-full: 9999px;

  /* shadows */
  --shadow-card: 0px 1px 2px rgba(0,0,0,0.05); /* effect_15:200 */

  /* spacing */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* typography */
  --ff-roboto: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif; /* font_* */
  --ff-pacifico: "Pacifico", var(--ff-roboto); /* font_2:353 */
  --ff-source-han-serif-cn: "Source Han Serif CN", "Songti SC", serif; /* font_15:278 */
  --fs-16: 16px; /* font_2:085 */
  --lh-24: 24px; /* font_2:085 */
  --fs-18: 18px; /* font_15:553 uses 18 */
  --fs-20: 20px; /* font_15:207 */
  --lh-28: 28px; /* font_15:207 */
  --fs-24: 24px; /* font_2:353, 15:278 */
  --fs-30: 30px; /* font_15:272 */
  --lh-36: 36px; /* font_15:272 */

  /* featured carousel layout */
  --featured-card-width: 280px; /* 目标一屏显示 ~5 张，结合重叠 */
  --featured-overlap: 48px;     /* 卡片之间重叠量（正值），有效负距为 -overlap */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--ff-roboto); color: var(--color-text); background: var(--color-page-bg); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4); }
.section { padding: 80px 0; }

/* header / nav */
.header { position: sticky; top: 0; background: rgba(255,255,255,.75); backdrop-filter: blur(8px); border-bottom: 1px solid #e5e7eb; z-index: 10; }
.navbar { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.navbar .left { display:flex; gap: var(--space-4); align-items:center; }
.navbar .logo { font-family: var(--ff-pacifico); font-size: var(--fs-24); color: var(--color-primary); }
.navbar .links { display: flex; gap: var(--space-3); color: var(--color-text); }
.navbar .links a { padding: 8px 12px; border-radius: 4px; color: var(--color-text); }
.navbar .right { display:flex; align-items:center; gap: var(--space-3); }
.navbar .cart { display:flex; align-items:center; gap: 8px; color: var(--color-text); padding: 8px 16px; border-radius: 4px; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; padding: 8px 16px; border-radius: 4px; cursor: pointer; border: 0; font: inherit; }
.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-accent { background: var(--color-accent); color: var(--color-white); }
.btn-pill { border-radius: 9999px; padding: 8px 18px; }

/* hero */
.hero { position: relative; min-height: 520px; display: grid; align-items: center; }
.hero-carousel { position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition: opacity .7s ease; }
.hero-slide.active { opacity: 1; }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter: blur(6px); cursor:pointer; z-index:3; }
.hero-arrow.prev { left: 24px; }
.hero-arrow.next { right: 24px; }
.hero-dots { display:none; }
.hero .search { display:flex; align-items:center; gap: 12px; background: transparent; border: 2px solid rgba(255,255,255,0.65); border-radius: var(--radius-pill); height: 52px; padding: 0 16px; width: 100%; max-width: 423px; }
.hero .search input { flex:1; background: transparent; border:0; outline: none; color: var(--color-white); font-size: var(--fs-16); }
.hero .search .icon-btn { width: 32px; height: 32px; border: 2px solid rgba(255,255,255,0.85); border-radius: 50%; background: transparent; color: var(--color-white); display:inline-flex; align-items:center; justify-content:center; }
.hero .strapline { margin-top: 12px; font-family: var(--ff-source-han-serif-cn); font-size: var(--fs-24); color: var(--color-white); }

/* cards section */
.cards { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-3); }
.card { border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; background: var(--color-surface); display:flex; flex-direction:column; }
.card .media { display:none; }
.card .media-img { width: 100%; height: auto; display:block; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.card .body { padding: 24px; display:grid; gap: 12px; }
.card .title { font-size: var(--fs-20); line-height: var(--lh-28); margin: 0; color: #000; /* paint_15:209 */ }
.card .meta { color: var(--color-text-muted); font-size: var(--fs-16); line-height: var(--lh-24); }
.card .footer { display:flex; align-items:center; justify-content: space-between; }
.price { font-weight: 600; color: var(--color-primary); }
.price.accent { color: var(--color-accent); }

/* carousel (精选作品横向轮播) */
.featured-carousel .container { position: relative; }
.carousel { position: relative; }
.carousel-viewport { overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-track { display:flex; gap: 24px; padding: 8px 0; }
.carousel-track .card { flex: 0 0 auto; width: 394px; border-radius: 12px; box-shadow: var(--shadow-card); background: var(--color-surface); }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 64px; border: none; background: rgba(255,255,255,0.9); color: #6b7280; cursor: pointer; border-radius: 8px; display:flex; align-items:center; justify-content:center; z-index: 3; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.carousel-arrow.prev { left: -16px; }
.carousel-arrow.next { right: -16px; }
.carousel-arrow:disabled { opacity: .4; cursor: not-allowed; }

/* 向上弧度 + 重叠样式（启用类 carousel-arc） */
.carousel-arc .carousel { position: relative; }
.carousel-arc .carousel-track { gap: 0; padding: 32px 0 56px; }
.carousel-arc .carousel-track .card {
  width: var(--featured-card-width);
  margin-left: calc(var(--featured-overlap) * -1);
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease, z-index .25s ease;
  transform-origin: center bottom;
  --liftY: 0px; --scale: 1; --z: 1;
  transform: translateY(var(--liftY)) scale(var(--scale));
  z-index: var(--z);
}
.carousel-arc .carousel-track .card:first-child { margin-left: 0; }
.carousel-arc .carousel-track .card.is-center { box-shadow: 0 16px 32px rgba(0,0,0,0.14); }

/* 通过 nth-child 形成不完全对齐的顶部层次感（向上凸起基础上再微调） */
.carousel-arc .carousel-track .card { margin-top: 24px; }
.carousel-arc .carousel-track .card:nth-child(5n+1) { margin-top: 36px; }
.carousel-arc .carousel-track .card:nth-child(5n+2) { margin-top: 12px; }
.carousel-arc .carousel-track .card:nth-child(5n+3) { margin-top: 28px; }
.carousel-arc .carousel-track .card:nth-child(5n+4) { margin-top: 8px; }
.carousel-arc .carousel-track .card:nth-child(5n)   { margin-top: 20px; }

/* categories */
.categories { background: var(--color-surface-alt); }
.categories .intro { text-align:center; color: var(--color-text-muted); }
.categories .grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3); }
.category-card { border-radius: var(--radius-md); background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 100%); box-shadow: var(--shadow-card); overflow: hidden; }
.category-card .media { height: 192px; background-size: cover; background-position: center; }
.category-card .body { padding: 24px; }
.category-card .title { font-size: var(--fs-20); line-height: var(--lh-28); margin: 0; color: #000; }
.category-card .desc { color: var(--color-text-muted); margin: 8px 0 0; }

/* alumni */
.alumni .grid { display:grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); align-items:center; }
.alumni .avatar { width: 180px; height: 180px; border-radius: 50%; background-size: cover; background-position: center; margin: 0 auto; }
.alumni .more { width: 145px; height: 43px; border-radius: 21.5px; background: #B8A295; color: var(--color-white); display:flex; align-items:center; justify-content:center; margin-left:auto; }

/* headings */
.section h2 { font-size: var(--fs-30); line-height: var(--lh-36); text-align: center; margin: 0 0 12px; color: #000; }

/* footer */
.footer { background: var(--color-footer-bg); color: var(--color-white); }
.footer .cols { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
.footer .cols h3 { font-size: var(--fs-20); line-height: var(--lh-28); margin: 0 0 12px; }
.footer .muted { color: var(--color-text-subtle); }
.footer .bottom { border-top: 1px solid var(--color-divider); text-align:center; padding-top: 32px; color: var(--color-text-subtle); }

@media (max-width: 1280px) { .cards { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0,1fr)); } .categories .grid { grid-template-columns: repeat(2, 1fr); } .alumni .grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0,1fr)); } .navbar .links, .navbar .right { display:none; } }
@media (max-width: 520px) { .cards { grid-template-columns: 1fr; } .categories .grid { grid-template-columns: 1fr; } .alumni .grid { grid-template-columns: repeat(2,1fr); } }