:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #263d34; background: #f6f5f0; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
.masthead { height: 88px; margin: 0 5%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfe1d8; }
.wordmark { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 650; letter-spacing: 2px; }
.mark { color: #55735e; font-size: 33px; }
.masthead-note { font-size: 11px; color: #839085; letter-spacing: 3px; }
main { max-width: 1450px; padding: 0 5%; margin: auto; }
.intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 67px 0 49px; }
.eyebrow { font-size: 10px; letter-spacing: 2.5px; color: #7f8d7c; margin: 0 0 20px; }
h1 { font-size: clamp(32px, 3.7vw, 53px); font-weight: 550; letter-spacing: -1.5px; margin: 0 0 22px; }
h1 > span { color: #83a37c; }
.lead { color: #7b867b; font-size: 14px; line-height: 1.95; margin: 0; }
.collection-note { border-left: 1px solid #cfd8ca; padding-left: 23px; margin-bottom: 5px; min-width: 155px; }
.collection-note > span { font-size: 26px; font-weight: 300; letter-spacing: 3px; }
.collection-note p { font-size: 11px; color: #8c9687; line-height: 1.85; margin-bottom: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
h2 { font-size: 14px; letter-spacing: 1px; font-weight: 550; margin: 0; }
.section-heading > span { font-size: 11px; color: #939b8e; }
.experiments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.experiment { border: 1px solid #e0e3db; border-radius: 16px; overflow: hidden; background: #fffefa; transition: transform .2s, box-shadow .2s; --accent: #547394; }
.experiment:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #223d3010; }
.experiment:focus-visible, .wordmark:focus-visible { outline: 3px solid #608d68; outline-offset: 5px; }
.pastel { --accent: #ac7c60; }
.radial { --accent: #608552; }
.ring { --accent: #8260bc; }
.business { --accent: #177f89; }
.business .preview img { object-fit: contain; background: #fff; }
@media (min-width: 721px) and (max-width: 1200px) { .experiments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.preview { position: relative; overflow: hidden; background: #eeeee7; aspect-ratio: 1.22; }
.preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.number { position: absolute; top: 17px; left: 18px; z-index: 1; font-size: 10px; letter-spacing: 1px; padding: 6px 8px; background: #fff9; border: 1px solid #fff9; border-radius: 5px; color: #637262; }
.card-body { padding: 24px 25px 18px; }
.category { font-size: 9px; letter-spacing: 2px; color: var(--accent); margin: 0 0 12px; }
.card-title { display: flex; justify-content: space-between; align-items: center; }
h3 { font-weight: 550; font-size: 23px; letter-spacing: .5px; margin: 0; }
.card-title > span { font-size: 22px; color: var(--accent); }
.description { min-height: 42px; font-size: 12px; line-height: 1.8; color: #859081; margin: 14px 0; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 24px; }
.tags > span { background: #f3f4ef; padding: 5px 8px; border-radius: 4px; font-size: 10px; color: #8b9586; }
.enter { border-top: 1px solid #eceee6; padding-top: 16px; display: flex; justify-content: space-between; font-size: 11px; color: var(--accent); }
.preview-note { color: #939b8d; font-size: 10px; line-height: 1.8; margin: 20px 0 40px; }
footer { margin: 0 5%; border-top: 1px solid #dfe1d8; padding: 23px 0 27px; display: flex; justify-content: space-between; gap: 16px; color: #939d8d; font-size: 10px; letter-spacing: .5px; }
.footer-dot { margin: 0 7px; }
@media (min-width: 1550px) { main { padding: 0 40px; } }
@media (max-width: 1000px) { .experiments { gap: 14px; } .card-body { padding: 22px 18px 18px; } .description { min-height: 65px; } .tags { gap: 5px; } .tags > span { padding: 5px 6px; } }
@media (max-width: 720px) { .masthead { height: 70px; } .masthead-note { letter-spacing: 1px; font-size: 10px; } .intro { padding: 40px 0 34px; } .collection-note { display: none; } .eyebrow { font-size: 9px; letter-spacing: 1.6px; } .experiments { grid-template-columns: 1fr; gap: 22px; } .preview { aspect-ratio: 1.3; } .description { min-height: 0; } .card-body { padding: 24px; } .preview-note { margin-bottom: 28px; } footer { font-size: 9px; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .experiment { transition: none; } .experiment:hover { transform: none; } }