:root { --ink: #173b31; --deep: #0d4d3c; --green: #75a966; --paper: #f7f6ef; --lime: #d9ef76; --line: rgba(23,59,49,.17); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Serif SC", Georgia, serif; }
a { color: inherit; text-decoration: none; }
.home, footer { width: min(1120px, calc(100% - 48px)); margin: auto; }
header { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font: 11px "DM Mono", monospace; letter-spacing: .08em; }
.logo { display: flex; align-items: center; gap: 9px; font: 600 19px "Noto Serif SC", serif; letter-spacing: .05em; }.logo i { position: relative; width: 18px; height: 23px; display: block; border-radius: 70% 0 70% 0; background: var(--deep); transform: rotate(-40deg); }.logo i::after { content: ""; position: absolute; background: var(--green); height: 17px; width: 7px; border-radius: 8px; left: 11px; top: 9px; transform: rotate(38deg); }
.hero { min-height: 555px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; padding: 58px 6.5vw; }.eyebrow { margin: 0 0 20px; font: 11px "DM Mono", monospace; letter-spacing: .1em; color: var(--green); }.hero h1 { margin: 0; font-size: clamp(46px, 5.5vw, 75px); line-height: 1.28; letter-spacing: -.08em; font-weight: 600; }.hero h1 em { color: var(--green); font-weight: 400; }.intro { font-size: 16px; line-height: 2; margin: 25px 0 29px; }.primary { display: inline-block; background: var(--deep); color: white; padding: 14px 15px 14px 20px; font: 500 14px Outfit, sans-serif; }.primary b { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-left: 16px; border-radius: 50%; color: var(--deep); background: var(--lime); font-size: 16px; }
.art { height: 340px; position: relative; overflow: hidden; background: #c5df9b; border-radius: 170px 170px 0 0; box-shadow: 14px 16px 0 rgba(23,59,49,.08); }.sun { position: absolute; top: 57px; left: 50%; width: 160px; height: 160px; border-radius: 50%; transform: translateX(-50%); background: var(--lime); }.hill { position: absolute; width: 125%; border-radius: 50%; }.hill-one { height: 230px; bottom: -118px; left: -34%; background: var(--green); }.hill-two { height: 200px; bottom: -123px; right: -32%; background: var(--deep); }.art p { position: absolute; bottom: 25px; right: 27px; color: #fffbed; margin: 0; font: 500 18px/.95 Outfit,sans-serif; letter-spacing: .06em; }.art p strong { font-size: 22px; }.spark { position: absolute; color: var(--deep); font-size: 20px; }.spark-one { top: 38px; right: 38px; }.spark-two { left: 37px; bottom: 93px; font-size: 15px; }.leaf { position: absolute; width: 35px; height: 78px; border-radius: 80% 0 80% 0; background: var(--deep); z-index: 1; }.leaf-one { left: 60px; bottom: 74px; transform: rotate(-33deg); }.leaf-two { right: 60px; bottom: 55px; transform: rotate(130deg) scale(.7); background: #416d4c; }
.hello { border-top: 1px solid var(--line); padding: 27px 0 38px; display: grid; grid-template-columns: 1fr 3fr; gap: 25px; align-items: start; }.hello span { color: var(--green); font: 12px "DM Mono", monospace; }.hello p { margin: 0; font-size: 16px; line-height: 1.9; }
footer { height: 72px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--green); font: 11px "DM Mono", monospace; }
@media (max-width: 680px) { .home, footer { width: calc(100% - 40px); } header { height: 73px; } header > span { display: none; }.hero { display: block; padding: 66px 0 58px; min-height: 0; }.hero h1 { font-size: clamp(43px, 13vw, 60px); }.intro { font-size: 15px; }.art { height: 285px; max-width: 340px; margin: 52px auto 0; }.hello { display: block; padding: 26px 0 40px; }.hello p { font-size: 15px; margin: 18px 0 0; }.spark-one { right: 27px; }.leaf-one { left: 42px; } footer { height: 65px; font-size: 10px; } }