*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:#f5f2eb;color:#292923;font-family:"Noto Sans TC",system-ui,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}a:focus-visible{outline:3px solid #b15a43;outline-offset:4px}
.gallery-skip{position:fixed;z-index:99;top:5px;left:9px;transform:translateY(-200%);background:white;padding:12px}.gallery-skip:focus{transform:none}
.gallery-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #d5d0c6;padding:22px clamp(20px,5vw,80px);font-size:12px;letter-spacing:.07em}.gallery-nav>a{font-weight:800}.gallery-nav nav{display:flex;gap:23px}.gallery-nav [aria-current]{border-bottom:2px solid #a34c38;padding-bottom:4px}
.gallery-hero{max-width:1470px;margin:auto;padding:clamp(50px,8vw,115px) clamp(20px,5vw,80px) 50px}.gallery-kicker{font:700 11px/1.6 ui-monospace,monospace;letter-spacing:.13em;color:#93503f}
.gallery-hero h1{font:500 clamp(42px,6.7vw,100px)/1.18 Georgia,"Noto Serif TC",serif;letter-spacing:-.06em;margin:23px 0 30px}.gallery-hero h1 em{font-weight:400;color:#9c5d4a}.gallery-lead{max-width:750px;font-size:17px;line-height:1.95;color:#5c5e54}.gallery-lead strong{color:#2d3028}
.gallery-summary{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid #cfc9bd;margin-top:45px;padding-top:18px;font:12px ui-monospace,monospace;color:#72736a}.gallery-summary span+span:before{content:'·';padding-right:18px}
.gallery-jump{max-width:1310px;margin:10px auto 50px;padding:0 20px;display:flex;flex-wrap:wrap;gap:10px}.gallery-jump a{border:1px solid #cec4b6;border-radius:30px;padding:10px 15px;font-size:13px}.gallery-jump a:hover{border-color:#a34c38;color:#a34c38}
.gallery-section{max-width:1470px;margin:0 auto;padding:60px clamp(20px,5vw,80px) 80px;border-top:1px solid #ccc7bd;scroll-margin-top:20px}
.gallery-section-head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:35px}.gallery-section-head h2{font:500 clamp(32px,4.2vw,58px)/1.2 Georgia,"Noto Serif TC",serif;margin:10px 0}.gallery-section-head h2 small{font:14px ui-monospace,monospace;color:#af5d45}.gallery-section-head>p{max-width:490px;font-size:14px;color:#676962;line-height:1.9}
.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.gallery-card{--card:#ece7d9;--tint:#637456;--color:#292923;min-width:0;background:var(--card);color:var(--color);border:1px solid #d0c9bc;transition:box-shadow 280ms,transform 280ms;overflow:hidden}
.gallery-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px #25282014}.gallery-card>a{display:grid;grid-template-columns:1fr 1fr;min-height:315px;height:100%}
.gallery-card-image{position:relative;overflow:hidden;min-height:270px;background:var(--tint)}.gallery-card-image img{width:100%;height:100%;min-height:315px;object-fit:cover;transition:transform 550ms}.gallery-card:hover img{transform:scale(1.04)}.gallery-card-no{position:absolute;top:15px;left:15px;background:var(--card);color:var(--tint);padding:10px;font:12px ui-monospace,monospace}.gallery-card-open{position:absolute;bottom:15px;left:15px;background:#161b1bd9;color:white;padding:8px 12px;font-size:12px}
.gallery-card-body{display:flex;flex-direction:column;padding:27px 23px 20px;min-width:0}.gallery-card-en{font:11px ui-monospace,monospace;letter-spacing:.11em;color:var(--tint);margin:0 0 10px}.gallery-card-body h3{font:500 clamp(25px,3vw,40px)/1.2 Georgia,"Noto Serif TC",serif;margin:0}.gallery-card-audience{font-size:13px;color:var(--tint);line-height:1.6;margin:11px 0 9px}.gallery-card-description{font-size:13px;line-height:1.75;margin:0 0 16px}.gallery-card-structure{border-top:1px solid currentColor;padding-top:12px;margin-top:auto;display:grid;gap:3px}.gallery-card-structure span{font-size:11px;opacity:.6}.gallery-card-structure b{font-size:13px;line-height:1.5;font-weight:600}
.gallery-card--moss{--card:#e9ebdf;--tint:#57704a}.gallery-card--ink{--card:#eee7dc;--tint:#9c5846}.gallery-card--blue{--card:#e3ebfb;--tint:#2854b4}.gallery-card--plum{--card:#eee5eb;--tint:#745573}.gallery-card--night{--card:#19242d;--tint:#73d8cb;--color:#faf6e7;border-color:#3b4b50}.gallery-card--atlas{--card:#f6e5ca;--tint:#ba452c}.gallery-card--clinical{--card:#e6eee8;--tint:#447b6b}.gallery-card--warm{--card:#f4e5dd;--tint:#a65b49}.gallery-card--earth{--card:#e5e9dd;--tint:#697d54}.gallery-card--cobalt{--card:#f2e7ce;--tint:#244bb1}.gallery-card--collective{--card:#f5e6c3;--tint:#a04e42}.gallery-card--trust{--card:#e8eee6;--tint:#4c7c6b}
.gallery-compare{display:grid;grid-template-columns:1fr 1fr;gap:65px;background:#e4e5d8;padding:90px clamp(20px,7vw,110px)}.gallery-compare h2{font:500 clamp(35px,4.5vw,65px)/1.16 Georgia,"Noto Serif TC",serif}.gallery-compare p{font-size:15px;line-height:1.9}.gallery-compare a{display:inline-block;border-bottom:1px solid;margin-top:25px;padding-bottom:6px}
.gallery-footer{display:flex;justify-content:space-between;gap:16px;padding:30px clamp(20px,5vw,80px);font:12px ui-monospace,monospace}
@media(max-width:1100px){.gallery-card>a{grid-template-columns:.85fr 1.15fr}.gallery-card-body{padding:20px}}
@media(max-width:880px){.gallery-grid{grid-template-columns:1fr}.gallery-card>a{grid-template-columns:1fr 1fr}.gallery-section-head{display:block}.gallery-section-head>p{max-width:750px}}
@media(max-width:570px){.gallery-nav{flex-wrap:wrap}.gallery-nav nav{width:100%;justify-content:space-between;gap:8px}.gallery-hero{padding-top:55px}.gallery-hero h1{font-size:clamp(40px,11vw,62px)}.gallery-summary{gap:7px}.gallery-card>a{grid-template-columns:1fr}.gallery-card-image{height:220px;min-height:220px}.gallery-card-image img{min-height:220px}.gallery-card-body{padding:22px}.gallery-card-body h3{font-size:31px}.gallery-section{padding:45px 20px}.gallery-compare{grid-template-columns:1fr;gap:18px;padding:55px 20px}.gallery-lead{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gallery-card,.gallery-card img{transition:none!important}.gallery-card:hover{transform:none}.gallery-card:hover img{transform:none}}


.gallery-recipe-entry{max-width:1310px;margin:0 auto 55px;padding:34px clamp(20px,5vw,75px);display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px 45px;background:#e6e6db;border-top:2px solid #424b43;border-bottom:1px solid #c9cabd}
.gallery-recipe-entry h2{font:500 clamp(25px,3.4vw,44px)/1.25 Georgia,"Noto Serif TC",serif;margin:9px 0}
.gallery-recipe-entry div>p:last-child{max-width:680px;font-size:14px;line-height:1.8}
.gallery-recipe-entry>a{display:inline-flex;padding:15px 20px;min-height:44px;background:#2c3f38;color:#fff;font-weight:600;font-size:13px;text-decoration:none}
.gallery-recipe-entry>a:hover{background:#5a594a}
@media(max-width:760px){.gallery-recipe-entry{grid-template-columns:1fr;padding:26px 20px}.gallery-recipe-entry>a{justify-content:center}}


/* Claude design recipe gateway — structurally distinct from layout cards. */


/* Original CSS typographic thumbnails for Claude's two newly implemented designs.
   Avoid showing unrelated Manus photographs in the layout-selection gallery. */
.gallery-card-illustration{height:100%;min-height:315px;width:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,38px);overflow:hidden;position:relative}
.gallery-card-illustration small{font:700 10px/1.5 ui-monospace,monospace;letter-spacing:.12em}
.gallery-card-illustration--almanac{background:#f3efe6;color:#1c1b18;border-block:15px solid #d9d1c3}
.gallery-card-illustration--almanac strong{font:400 clamp(66px,9vw,150px)/1 Georgia,serif;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:2px #1c1b18;transform:translateX(-.04em)}
.gallery-card-illustration--almanac span{font:14px Georgia,serif;border-top:1px solid #1c1b18;padding-top:10px}
.gallery-card-illustration--trust{background:#2c1e19;color:#f3ddd2}
.gallery-card-illustration--trust strong{font:400 clamp(38px,4.5vw,70px)/1.17 Georgia,"Noto Serif TC",serif;letter-spacing:-.03em}
.gallery-card-illustration--trust span{font-size:13px;color:#eca985;white-space:nowrap;letter-spacing:.2em}
@media(max-width:570px){.gallery-card-illustration{min-height:220px}.gallery-card-illustration--almanac strong{font-size:78px}.gallery-card-illustration--trust strong{font-size:43px}}