:root{--bg:#F6F5F1;--surface:#fff;--ink:#18201F;--muted:#55605F;--line:#D9DCD8;--deep:#073F44;--primary:#0B5C63;--tint:#E4EFEF;--r:.75rem;--t:180ms cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;font-family:'Inter','Helvetica Neue',sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:.375rem}
.page{width:min(100% - 2.5rem,560px);margin-inline:auto;padding-block:3rem 2.5rem}
.intro{text-align:center;margin-bottom:2.25rem}
.avatar{width:112px;height:112px;margin:0 auto 1rem;border-radius:50%;object-fit:cover;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line),0 6px 18px rgba(7,63,68,.12)}
.mark{width:72px;height:72px;margin:0 auto 1rem;border-radius:50%;background:var(--deep);color:#E3F0F1;display:grid;place-items:center;font-weight:700;font-size:1.375rem;letter-spacing:.04em}
h1{font-size:clamp(1.5rem,1.2rem + 1.5vw,1.875rem);line-height:1.15;color:var(--deep)}
.role{margin-top:.375rem;font-size:.875rem;color:var(--muted)}
.tagline{margin:1rem auto 0;max-width:42ch;font-family:'Source Serif 4',Georgia,serif;font-size:1.0625rem;color:var(--ink);text-wrap:pretty}
.label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:.75rem}
.cards{list-style:none;display:grid;gap:.875rem}
.card{display:grid;grid-template-columns:88px 1fr;gap:1rem;align-items:center;padding:.875rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.card:hover{border-color:var(--primary);box-shadow:0 6px 20px rgba(7,63,68,.08)}
.card:active{transform:scale(.99)}
.card img{width:88px;border-radius:.25rem;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.body{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.kind{font-size:.75rem;font-weight:500;color:var(--muted)}
.title{font-weight:700;font-size:1.0625rem;line-height:1.25;color:var(--deep)}
.desc{font-size:.875rem;color:var(--muted);text-wrap:pretty}
.price{margin-top:.375rem;align-self:flex-start;font-size:.8125rem;font-weight:600;color:var(--primary);background:var(--tint);padding:.125rem .625rem;border-radius:999px}
.foot{margin-top:2.25rem;text-align:center;font-size:.75rem;color:var(--muted);display:grid;gap:.375rem}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}