:root { color-scheme:light; --plane:#f4f7fc; --surface:#fff; --surface-2:#eaf0f9; --ink:#101a2b; --ink-2:#5d6b84; --line:#dce4f0; --accent:#0956c6; }
* { box-sizing:border-box; }
html { font-size:16px; }
body { margin:0; background:var(--plane); color:var(--ink); font:400 1rem/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { text-decoration:none; color:inherit; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; padding:12px 18px; background:var(--surface); border:2px solid var(--accent); border-radius:10px; }
.skip-link:focus { top:12px; }
.home-header { padding:22px max(32px, env(safe-area-inset-right,0px)) 22px max(32px,env(safe-area-inset-left,0px)); display:flex; align-items:center; gap:28px; border-bottom:1px solid #1e467f;background:linear-gradient(115deg,#071b3c,#0b397a 67%,#0d62cf);color:#fff; }
.home-brand { display:flex; align-items:center; gap:12px; font-size:24px; font-weight:750; letter-spacing:-.045em; }
.home-brand img { border-radius:12px; }
.header-section { padding-left:28px; border-left:1px solid rgba(255,255,255,.25); color:#d8e8ff; font-size:14px; }
main { max-width:1184px; margin:auto; padding:56px 32px 52px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; }
.page-subtitle { color:var(--ink-2);font-size:15px;margin:10px 0 0; }
.eyebrow { color:var(--ink-2); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px; }
h1 { font-size:clamp(32px,4vw,44px); line-height:1.1; font-weight:750; letter-spacing:-.04em; margin:0; }
.project-count { font-size:14px; color:var(--ink-2); padding-bottom:4px; white-space:nowrap; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.project-card { display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:24px; transition:transform .18s,border-color .18s,box-shadow .18s; }
.project-card:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 16px 36px -22px rgba(11,107,238,.45); }
.project-card:focus-visible,.home-brand:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.project-cover { height:300px; position:relative; overflow:hidden; }
.mark-cover{display:grid;place-items:center;background:radial-gradient(circle at 70% 22%,#318dff,#0d4a9d 44%,#071e47 100%)}
.mark-cover::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 7% 100%,transparent 0,transparent 25px,rgba(255,255,255,.07) 26px,transparent 27px);pointer-events:none}
.mark-cover>img{width:145px;height:145px;object-fit:contain;border-radius:28px;box-shadow:0 20px 45px rgba(0,15,50,.3);z-index:1}
.cover-placeholder{position:absolute;bottom:19px;left:24px;color:#e1eeff;font-size:12px;z-index:1}
.cover-label { position:absolute; left:24px; top:22px; z-index:1; display:inline-block; padding:6px 12px; font-size:12px; font-weight:650; background:rgba(7,24,48,.55); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:999px; }
.cover-date { position:absolute; bottom:20px; left:24px; z-index:1; color:#e5efff; font-size:12px; }
.ogni-cover { background:#075bc7; color:#fff; }
.progress-snapshot { position:absolute; top:82px; left:26px; right:26px; display:grid; gap:18px; }
.progress-row > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:14px; }
.progress-row strong { flex-shrink:0; font-size:23px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; }
.progress-row strong span { font-size:13px; padding-left:4px; opacity:.8; }
.progress-track { height:5px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.18); margin-top:7px; }
.progress-track i { display:block; height:100%; background:#a8d6ff; border-radius:99px; }
.photo-cover img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 45%; }
.photo-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,17,31,.18),transparent 35%,rgba(4,17,31,.8)); }
.portrait-cover { background:#536987; }
.portrait-cover::before { content:""; position:absolute; inset:-28px; background-image:var(--cover-image); background-position:center; background-size:cover; filter:blur(22px) brightness(.75); }
.portrait-cover img { position:relative; object-fit:contain; object-position:center; }
.project-info { padding:24px; }
.project-status { color:var(--accent); font-size:13px; font-weight:600; margin-bottom:8px; }
h2 { margin:0; font-size:29px; line-height:1.2; font-weight:720; letter-spacing:-.035em; }
.project-info p { margin:9px 0 25px; color:var(--ink-2); font-size:15px; }
.project-facts{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:10px;margin:18px 0 20px;padding:0}
.project-facts div{border-top:1px solid var(--line);padding-top:11px;min-width:0}
.project-facts dt{color:var(--ink-2);font-size:11px}
.project-facts dd{margin:5px 0 0;font-size:13px;font-weight:700;line-height:1.3}
.project-facts .term-critical{color:#bc3d36}
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:20px; }
.card-bottom > span:first-child { color:var(--ink-2); font-size:12px; }
.open-project { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 15px; color:var(--accent); background:var(--surface-2); border-radius:12px; font-size:14px; font-weight:650; white-space:nowrap; }
.home-footer { max-width:1184px; padding:0 32px 28px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--ink-2); font-size:12px; }
@media (max-width:900px) { .card-bottom { flex-direction:column; align-items:flex-start; gap:14px; } .project-cover { height:280px; } }
@media (max-width:640px) {
  .home-header { padding:18px max(20px,env(safe-area-inset-right,0px)) 18px max(20px,env(safe-area-inset-left,0px)); gap:20px; }
  .header-section { padding-left:20px; }
  main { padding:32px 20px 32px; }
  .page-heading { margin-bottom:24px; }
  .project-grid { grid-template-columns:1fr; gap:20px; }
  .project-cover { height:276px; }
  .project-info { padding:22px; }
  .project-facts{grid-template-columns:1fr 1.1fr 1fr;gap:7px}
  .project-facts dd{font-size:12px}
  .card-bottom { flex-direction:row; align-items:center; flex-wrap:wrap; }
  .home-footer { padding:0 20px 24px; }
}
@media (prefers-reduced-motion:reduce) { .project-card { transition:none; } .project-card:hover { transform:none; } }
@media print { body { background:#fff; color:#101a2b; } .project-grid { grid-template-columns:1fr 1fr; } .project-card { break-inside:avoid; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.home-logout { margin-left:auto; padding:9px 16px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:transparent; color:#d8e8ff; font:500 13.5px Inter, system-ui, sans-serif; cursor:pointer; transition:background .2s, border-color .2s; }
.home-logout:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.home-logout:focus-visible { outline:2px solid #fff; outline-offset:3px; }