:root{--green:#356e56;--dark:#294535;--cream:#f7f5ef;--border:#cbd8ce;--muted:#52695a}
*{box-sizing:border-box}
html{background:var(--cream)}
body{margin:0;font-family:'Outfit',system-ui,sans-serif;color:var(--dark);-webkit-font-smoothing:antialiased}
a{-webkit-tap-highlight-color:transparent}
.page{width:100%;max-width:480px;margin:0 auto;padding:24px 20px 0;min-height:100svh}
.hero{text-align:center;padding:0 0 18px;border-bottom:1px solid var(--border)}
/* The artwork is left-heavy inside its canvas; centre the visible mark manually. */
.brand-logo{transform:translateX(9.5%);display:block;width:min(62%,200px);height:auto;margin:0 auto 14px}
/* Centre the complete logo and caption on the page. */
.hero-caption{width:100%;margin:0;font-size:16px;font-weight:400;line-height:1.5;text-wrap:balance}
.socials{display:flex;justify-content:center;gap:10px;margin-top:22px}
.socials a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--green);transition:background .2s}
.socials a:hover{background:#e9f0e9}
.socials svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.socials svg .solid{fill:currentColor;stroke:none}
.links-section{padding:20px 0 0}
.link-list{display:grid;gap:10px}
.link-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;min-height:78px;border:1px solid var(--green);border-radius:12px;color:var(--dark);text-decoration:none;background:transparent;transition:background .2s,color .2s}
.link-card:focus-visible,.link-card:active{background:var(--green);color:#fff}
.link-card:focus-visible .link-copy small,.link-card:active .link-copy small{color:#fff}
@media(hover:hover) and (pointer:fine){
  .link-card:hover{background:var(--green);color:#fff}
  .link-card:hover .link-copy small{color:#fff}
}
.link-copy{display:flex;min-width:0;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.link-copy strong{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.link-copy small{font-size:13px;font-weight:400;line-height:1.4;color:var(--muted)}
.arrow{flex:none;font-size:23px;line-height:1}
a:focus-visible{outline:3px solid var(--dark);outline-offset:4px}
footer{text-align:center;padding:14px 0 max(24px,env(safe-area-inset-bottom));font-size:11px;line-height:1.6;color:var(--muted)}
@media(min-width:720px){.page{padding-top:40px}}
@media(max-width:350px){.page{padding:20px 16px 0}.link-card{padding:14px}.link-copy strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.socials a,.link-card{transition:none}}