:root { --paper:#f0ede6; --ink:#1b1a17; --wine:#72172a; --line:rgba(27,26,23,.15); --serif:"Italiana",serif; --sans:"Manrope",sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-height:100svh; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; display:grid; grid-template-columns:245px 1fr; }
aside { position:sticky; top:0; height:100svh; background:#20221d; color:#f7f2e7; padding:38px 28px; display:flex; flex-direction:column; }
.brand { color:inherit; font:400 31px var(--serif); text-decoration:none; }.brand span { color:#ad846f; font-size:.7em; }
nav { margin-top:80px; display:flex; flex-direction:column; gap:12px; } nav a { color:inherit; padding:13px 12px; text-decoration:none; font-size:11px; opacity:.55; border-left:1px solid transparent; transition:.2s; } nav a i { font:300 8px var(--mono); margin-right:14px; font-style:normal; } nav a:hover, nav a.active { opacity:1; border-color:#b49074; background:rgba(255,255,255,.04); }
.back { margin-top:auto; color:inherit; font:300 9px var(--mono); text-transform:uppercase; letter-spacing:.08em; text-underline-offset:5px; }
main { padding:54px 5vw 80px; overflow:hidden; } header { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:44px; border-bottom:1px solid var(--line); } header p,.section-head p { margin:0 0 11px; font:400 8px var(--mono); letter-spacing:.15em; color:var(--wine); } h1 { margin:0; font:400 clamp(42px,5vw,72px)/1 var(--serif); } .status { font:400 8px var(--mono); text-transform:uppercase; letter-spacing:.1em; border:1px solid var(--line); padding:11px 15px; }.status i { display:inline-block; width:7px; height:7px; background:#617b4d; border-radius:50%; margin-right:8px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); } .metrics article { padding:35px 2.2vw; border-right:1px solid var(--line); }.metrics article:first-child { padding-left:0; }.metrics article:last-child { border:0; }.metrics p { margin:0 0 22px; font-size:10px; }.metrics strong { display:block; font:400 52px/1 var(--serif); }.metrics span { display:block; margin-top:8px; font:300 8px var(--mono); opacity:.52; text-transform:uppercase; }.metrics .deadline strong { color:var(--wine); }
.progress-section { padding:40px 0 50px; }.progress-section > div:first-child { display:flex; justify-content:space-between; align-items:end; }.progress-section p { font-size:11px; }.progress-section strong { font:400 29px var(--serif); }.progress { height:5px; background:#d8d2c8; margin-top:10px; }.progress i { display:block; width:77%; height:100%; background:var(--wine); transition:width .6s ease; }
.guest-section { background:#faf8f3; padding:38px 3vw; }.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:35px; }.section-head h2 { margin:0; font:400 36px var(--serif); }.section-head button { border:1px solid var(--ink); background:transparent; padding:12px 17px; font:400 8px var(--mono); text-transform:uppercase; cursor:pointer; }.section-head button:hover { background:var(--ink); color:white; }
table { width:100%; border-collapse:collapse; text-align:left; } th { padding:12px 10px; border-bottom:1px solid var(--line); font:400 7px var(--mono); text-transform:uppercase; letter-spacing:.12em; opacity:.55; } td { padding:17px 10px; border-bottom:1px solid var(--line); font-size:10px; } td:first-child { font-weight:500; }.pill { display:inline-block; min-width:68px; text-align:center; border-radius:20px; padding:6px 8px; font:400 7px var(--mono); text-transform:uppercase; }.pill.yes { color:#3f5d32; background:#e1e9da; }.pill.no { color:#7b2937; background:#eee0e2; }.pill.pending { color:#786d45; background:#ede9d7; }
@media(max-width:850px){ body{grid-template-columns:1fr} aside{position:static;height:auto;padding:20px 5vw;flex-direction:row;align-items:center;justify-content:space-between}aside nav{display:none}.back{margin:0}main{padding:38px 5vw}.metrics{grid-template-columns:1fr 1fr}.metrics article:nth-child(2){border-right:0}.metrics article:nth-child(3){padding-left:0}.table-wrap{overflow:auto}table{min-width:650px} }
@media(max-width:520px){ header{gap:25px;flex-direction:column}.metrics article{padding:28px 4vw!important}.metrics strong{font-size:42px}.guest-section{padding:28px 4vw}.section-head{align-items:flex-start;gap:25px;flex-direction:column} }