:root{--bg:#ffffff;--bg2:#f3f7f5;--card:#fbfdfc;--line:#e0e8e4;--ink:#1b2a2b;--mute:#5d6e6d;--accent:#1f6f6b;--accent2:#175753;--bronze:#a67c45;--deep:#16302f;--r:22px;--shadow:0 1px 2px rgba(27,42,43,.04),0 16px 36px -18px rgba(31,111,107,.28)}
*{box-sizing:border-box;margin:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:90px}
body{font:400 17px/1.7 'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:400;line-height:1.05;letter-spacing:-.02em}
.nav{position:sticky;top:12px;z-index:10;display:flex;align-items:center;justify-content:space-between;margin:12px clamp(12px,3vw,40px) 0;padding:10px 12px 10px 14px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
.logo{font:italic 400 1.5rem 'Fraunces',serif;width:44px;height:44px;display:grid;place-items:center;background:var(--deep);color:#e7ece8;border-radius:50%;text-decoration:none}
nav{display:flex;gap:30px;align-items:center}
nav a{text-decoration:none;font-weight:500;color:var(--mute);transition:color .2s}
nav a:hover{color:var(--ink)}
.btn-sm,.btn{background:var(--accent);color:#f4f8f5;padding:14px 28px;border-radius:999px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem;font-family:inherit;display:inline-block;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 8px 20px -8px rgba(31,111,107,.6)}
nav a.btn-sm{color:#f4f8f5;padding:11px 24px}
.btn-sm:hover,.btn:hover{background:var(--deep);color:#f4f8f5;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--ink)}
.burger span:first-child{top:16px}.burger span:last-child{top:25px}
.hero{position:relative;padding:clamp(72px,11vw,150px) clamp(20px,5vw,64px) clamp(60px,8vw,100px);max-width:1280px;margin:auto;isolation:isolate}
.where{display:inline-block;font-weight:600;color:var(--accent2);margin-bottom:24px;padding:7px 18px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;font-size:.95rem}
.hero h1{font-size:clamp(3.6rem,12vw,9.5rem);font-weight:300;font-variation-settings:"opsz" 144;word-break:break-word;animation:rise 1s ease-out both}
.lead{max-width:36ch;font-size:clamp(1.15rem,2vw,1.45rem);color:var(--mute);margin:30px 0 40px;line-height:1.6}
.cta{display:flex;gap:14px;flex-wrap:wrap}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.marquee{overflow:hidden;padding:24px 0;background:var(--deep);color:#dfe8e3;margin-top:10px}
.track{display:flex;gap:48px;width:max-content;animation:scroll 40s linear infinite;font:italic 300 clamp(1.5rem,3vw,2.2rem) 'Fraunces',serif;white-space:nowrap}
.track span::after{content:"\2726";margin-left:48px;color:#d4ad72;font-style:normal;font-size:.7em}
@keyframes scroll{to{transform:translateX(-50%)}}
.sec{max-width:1280px;margin:auto;padding:clamp(72px,10vw,130px) clamp(20px,5vw,64px) 0}
.sec h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:36px}
.sec h2::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--bronze);margin-top:18px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,5vw,64px)}
.two h2{margin:0}
.big{font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.75;max-width:62ch;color:#33484a}
.big a{color:var(--accent);font-weight:700;text-underline-offset:4px}
.stats{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap}
.stats>div{flex:1 1 150px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
.stats dt{font:300 clamp(2.4rem,5vw,3.4rem)/1 'Fraunces',serif;color:var(--accent)}
.stats dd{color:var(--mute);margin-top:8px;font-size:.95rem}
.skills{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start}
.skills li{padding:10px 22px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--card);font-weight:500;box-shadow:0 1px 2px rgba(27,42,43,.05)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:-12px 0 30px}
.filters button{font:600 .95rem 'Manrope';padding:9px 22px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--mute);transition:.2s}
.filters button:hover{color:var(--ink);border-color:var(--ink)}
.filters button.on{background:var(--deep);border-color:var(--deep);color:#eaf0ec}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.card.wide{grid-column:1/-1;flex-direction:row}
.card.wide .thumb{flex:1.15;aspect-ratio:auto;min-height:300px}
.card.wide .body{flex:1;justify-content:center;padding:clamp(26px,4vw,48px)}
.card[hidden]{display:none}
.thumb{aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(140deg,hsl(var(--h) 30% 62%),hsl(calc(var(--h) + 40) 34% 38%));overflow:hidden;margin:10px;border-radius:calc(var(--r) - 8px)}
.thumb b{font:italic 300 6.5rem 'Fraunces',serif;color:rgba(255,255,255,.88)}
.thumb img{width:100%;height:100%;object-fit:cover}
.body{padding:20px 28px 30px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.body h3{font-size:1.75rem}
.body p{color:var(--mute)}
.body .tech{color:var(--bronze);font-size:.92rem;font-weight:700}
.body a{font-weight:700;color:var(--accent);text-underline-offset:5px}
.empty{color:var(--mute)}
form{display:grid;gap:18px;margin-top:36px;max-width:620px}
label{display:grid;gap:7px;font-weight:600;color:#33484a;font-size:.95rem}
input,textarea{font:inherit;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);width:100%}
input:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px rgba(31,111,107,.14)}
input[type=file]{padding:11px}
.hp{position:absolute;left:-9999px}
form .btn{justify-self:start}
#status{font-weight:600;min-height:1.6em}#status.ok{color:var(--accent)}#status.err{color:#b3392f}
footer{margin-top:clamp(72px,10vw,130px);padding:38px clamp(20px,5vw,64px);background:var(--deep);color:#b9c9c3;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{margin-right:18px;text-underline-offset:4px}footer a:hover{color:#fff}
/* ---- Admin ---- */
.adm{max-width:900px;margin:auto;padding:40px 20px 80px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;margin-bottom:24px;box-shadow:var(--shadow)}
.box h2{font-size:1.7rem;margin-bottom:16px}
.box h2::after{display:none}
.box form{margin-top:0;max-width:none}
.row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.row form{display:block}
.del{background:none;border:1.5px solid #b3392f;color:#b3392f;border-radius:999px;padding:6px 16px;font-weight:700;cursor:pointer;font-family:inherit}
.del:hover{background:#b3392f;color:#fff}
.msg{padding:13px 18px;border-radius:14px;margin-bottom:22px;font-weight:600}
.msg.ok{background:rgba(31,111,107,.12);color:var(--accent2)}.msg.err{background:rgba(179,57,47,.1);color:#9c2f26}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pw{position:relative;display:block}
.pw input{padding-right:110px}
.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--accent);font:700 .85rem 'Manrope';cursor:pointer;padding:8px 10px;border-radius:8px}
.pw button:hover{background:rgba(31,111,107,.1)}
.login{max-width:430px;margin:70px auto 0}
.top{display:flex;justify-content:space-between;color:var(--mute)}
.adm small{color:var(--mute)}
@media (max-width:820px){
 .burger{display:block}
 nav{position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--card);flex-direction:column;align-items:flex-start;padding:22px;gap:18px;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);display:none}
 nav.open{display:flex}
 .two,.grid,.g2{grid-template-columns:1fr}
 .card.wide{flex-direction:column}
 .card.wide .thumb{aspect-ratio:16/9;min-height:0}
}
@media (prefers-reduced-motion:reduce){.track,.hero h1{animation:none}html{scroll-behavior:auto}}