@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Marcellus&display=swap');

:root{
  --bg:#f4f1ec; --card:#ffffff; --ink:#141414; --body:#4a4740;
  --muted:#8a8378; --line:#e6e0d6; --input:#dcd5c8;
  --gold:#b89150; --blue:#2196F3;
  --radius:8px; --pad:40px; --maxw:720px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'Cormorant',Georgia,serif; --serif2:'Marcellus',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--body);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.topbar{display:flex;align-items:center;gap:14px;height:64px;padding:0 32px;background:var(--ink);color:#fff}
.topbar .logo{display:inline-flex;width:30px;height:30px;color:var(--gold)}
.topbar .logo svg{width:100%;height:100%}
.topbar .brand{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:.01em}
.topbar .spacer{flex:1}
.topbar .who{font-size:13px;color:#c9c4ba}
.topbar .logout{color:#fff;font-size:13px;margin-left:18px;opacity:.85}
.topbar .logout:hover{opacity:1;text-decoration:none}

/* page */
.wrap{max-width:var(--maxw);margin:0 auto;padding:48px 24px 96px}
.page-title{font-family:var(--serif);font-size:32px;font-weight:500;color:var(--ink);margin:6px 0 4px;line-height:1.15}
.page-sub{font-size:13px;color:var(--muted);margin:0 0 28px}
.page-sub a{color:var(--blue)}

/* dashboard */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;max-width:1000px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:box-shadow .12s,transform .12s}
.card:hover{box-shadow:0 3px 16px rgba(20,20,20,.07);transform:translateY(-1px);text-decoration:none}
.card .k{font-family:var(--serif2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card .t{font-family:var(--serif);font-size:23px;color:var(--ink);margin:8px 0 6px;line-height:1.1}
.card .d{font-size:13px;color:var(--body)}

/* detail */
.card-detail{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad)}
.section{font-family:var(--serif2);font-size:14px;letter-spacing:.03em;color:var(--ink);margin:40px 0 18px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.section:first-child{margin-top:0}
.field{margin-bottom:24px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--input);border-radius:6px;padding:10px 12px;transition:border-color .15s,box-shadow .15s}
.field textarea{line-height:1.6;resize:vertical;min-height:92px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,145,80,.16)}

/* multi-input */
.multi .rows{display:flex;flex-direction:column;gap:8px}
.multi .row{display:flex;gap:8px}
.multi .row input{flex:1}
.multi .del{flex:0 0 40px;border:1px solid var(--input);background:#fff;border-radius:6px;color:var(--muted);cursor:pointer;font-size:17px;line-height:1}
.multi .del:hover{color:#8a2a2a;border-color:#e0cccc}
.multi .add{margin-top:10px;background:none;border:none;color:var(--blue);font-size:13px;cursor:pointer;padding:0}
.multi .add:hover{text-decoration:underline}

/* actions + toast */
.actions{display:flex;align-items:center;gap:14px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.btn{font-family:var(--sans);font-size:14px;font-weight:600;border-radius:4px;padding:11px 28px;cursor:pointer;border:none}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#2a2a2a}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:none;color:var(--body);padding:11px 8px}
.btn-ghost:hover{text-decoration:underline}
.toast{margin-left:auto;font-size:13px;padding:9px 15px;border-left:4px solid var(--gold);background:#fff;border-radius:4px;display:none}
.toast.show{display:block}
.toast.err{border-left-color:#8a2a2a;color:#8a2a2a}

/* honours editorial list */
.hgroup{margin-bottom:44px}
.hyear{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--gold);margin:0 0 14px}
.hrow{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin-bottom:12px;transition:box-shadow .12s}
.hrow:hover{box-shadow:0 2px 12px rgba(20,20,20,.06);text-decoration:none}
.hrow .couple{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--ink)}
.hrow .ach{font-size:13px;color:var(--muted);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hrow .edit{color:var(--blue);font-size:13px;white-space:nowrap;padding-top:3px}

/* plain list */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.list .item{display:flex;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line);color:var(--ink)}
.list .item:last-child{border-bottom:none}
.list .item:hover{background:#faf7f1;text-decoration:none}
.list .sub{color:var(--muted);font-size:13px;text-align:right}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login{background:#fff;width:400px;max-width:92vw;border-radius:10px;box-shadow:0 8px 40px rgba(20,20,20,.12);padding:40px;text-align:center}
.login .logo{display:inline-flex;width:52px;height:52px;color:var(--gold)}
.login .logo svg{width:100%;height:100%}
.login .brand{font-family:var(--serif);font-style:italic;font-size:27px;color:var(--ink);margin:14px 0 2px}
.login .sub{font-size:13px;color:var(--muted);margin-bottom:26px}
.login .field{text-align:left;margin-bottom:18px}
.login .btn-primary{width:100%;margin-top:6px}
.login .err{color:#8a2a2a;font-size:13px;margin-bottom:12px;min-height:16px}
