:root { --ink:#20372b; --paper:#f7f2e9; --muted:#697267; --mango:#e7ad33; --plum:#4a213f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
.chooser { min-height:100vh; max-width:1320px; margin:auto; padding:32px 48px 26px; display:flex; flex-direction:column; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font:600 24px/1 "Fraunces",serif; letter-spacing:-.04em; }
.brand em { font-size:.58em; font-weight:500; letter-spacing:0; }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; border-radius:50% 50% 50% 10px; color:#fff; background:var(--ink); transform:rotate(-18deg); }
.brand-mark svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.4; transform:rotate(18deg); }
.eyebrow,.kicker,.card-topline,footer { text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:700; }
.eyebrow { color:var(--muted); }
.hero-copy { margin:clamp(60px,11vh,130px) 0 48px; max-width:820px; }
.kicker { margin:0 0 16px; color:#a76c10; }
h1,h2 { font-family:"Fraunces",serif; letter-spacing:-.055em; }
h1 { margin:0; font-size:clamp(42px,5.6vw,76px); line-height:.98; font-weight:600; }
.hero-copy > p:last-child { max-width:550px; color:var(--muted); font-size:16px; line-height:1.65; margin:24px 0 0; }
.theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.theme-card { min-height:410px; overflow:hidden; position:relative; display:flex; flex-direction:column; border-radius:20px; text-decoration:none; color:inherit; transition:transform .25s ease,box-shadow .25s ease; }
.theme-card:hover,.theme-card:focus-visible { transform:translateY(-5px); box-shadow:0 18px 32px #35201421; outline:none; }
.grove { background:#efdeae; color:#193b2b; }.bloom { background:#e5cad5; color:#441a3d; }
.card-topline { z-index:2; display:flex; justify-content:space-between; padding:24px 26px; }.open b { font-size:18px; margin-left:4px; }
.card-visual { flex:1; position:relative; overflow:hidden; }.card-copy { padding:22px 26px 27px; min-height:130px; z-index:2; }.card-copy h2 { margin:0 0 8px; font-size:30px; line-height:1; }.card-copy p { margin:0; max-width:440px; font-size:14px; line-height:1.5; opacity:.8; }
.sun { position:absolute; width:180px; height:180px; right:11%; top:4%; background:#f6c95a; border-radius:50%; }.hill { position:absolute; border-radius:50% 50% 0 0; bottom:-18px; }.hill-one { width:85%; height:54%; left:-10%; background:#294f36; }.hill-two { width:72%; height:44%; right:-13%; background:#547246; }.fruit { position:absolute; width:67px; height:88px; border-radius:54% 46% 58% 42%; background:#f3a72e; box-shadow:inset -13px -12px #d37a19; transform:rotate(35deg); }.fruit-one { left:22%; top:26%; }.fruit-two { right:29%; top:38%; transform:rotate(-24deg) scale(.72); }.leaf { position:absolute; width:60px; height:25px; border-radius:100% 0 100% 0; background:#315d3b; transform:rotate(-35deg); }.leaf-one { left:17%; top:22%; }
.arch { position:absolute; border-radius:160px 160px 0 0; bottom:0; }.arch-a { height:76%; width:43%; left:13%; background:#6d315c; }.arch-b { height:59%; width:35%; right:10%; background:#a55672; }.flower { position:absolute; color:#f3c85a; font:90px/1 Georgia,serif; }.flower-a { left:9%; top:10%; }.flower-b { right:12%; top:34%; font-size:66px; }.fruit-three { width:112px; height:112px; right:32%; top:19%; border-radius:50%; background:#e4a222; box-shadow:inset -20px -12px #c5741d; }
footer { margin-top:auto; padding-top:42px; color:var(--muted); display:flex; justify-content:space-between; }
@media (max-width:700px) { .chooser { padding:24px 20px; }.theme-grid { grid-template-columns:1fr; }.theme-card { min-height:360px; }.hero-copy { margin:72px 0 38px; } footer { padding-top:28px; font-size:9px; } }