/* ============================================================
   Digital University — shared design tokens
   Direction: a digital registrar's office. Folder-tab navigation
   like a student record binder, a rubber-stamp emblem for the
   wordmark, ledger tables for anything administrative.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:        #14213D;   /* deep navy — primary */
  --ink-70:     #14213Db3;
  --paper:      #F1F0E9;   /* ledger paper, cool-grey undertone (not warm cream) */
  --paper-raised:#FBFAF6;
  --brass:      #A9782C;   /* stamp / seal gold */
  --brass-dim:  #8a6423;
  --teal:       #1F6F65;   /* digital signal accent — links & actions */
  --teal-dim:   #17554d;
  --slate:      #545B66;   /* muted text */
  --rule:       #D8D3C4;   /* hairline rule */
  --rule-dark:  #2A3A5C;
  --danger:     #A6432E;

  --display: 'Fraunces', Georgia, serif;
  --body: 'IBM Plex Sans', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  --max: 1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-decoration-thickness:1.5px; text-underline-offset:2px;}
a:hover{color:var(--teal-dim);}
img{max-width:100%;}
:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  margin:0 0 .4em 0;
  font-weight:600;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,4vw,2.9rem); font-weight:700;}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em 0; color:var(--ink-70);}
.lede{font-size:1.1rem; color:var(--ink);}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* ---------- Masthead ---------- */
.masthead{
  background:var(--ink);
  color:var(--paper);
  border-bottom:4px solid var(--brass);
}
.masthead-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none;}
.brand:hover{color:inherit;}
.seal{
  width:52px; height:52px; border-radius:50%;
  border:2px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; color:var(--brass);
  font-size:1.1rem; letter-spacing:.02em; flex:none;
  position:relative;
}
.seal::before{
  content:"";
  position:absolute; inset:5px;
  border:1px solid var(--brass);
  border-radius:50%;
  opacity:.6;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text .name{font-family:var(--display); font-weight:700; font-size:1.25rem; color:var(--paper);}
.brand-text .tag{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass);}

.masthead-meta{
  font-family:var(--mono); font-size:.78rem; color:#C9CFDD;
  display:flex; gap:18px; flex-wrap:wrap;
}
.masthead-meta a{color:#C9CFDD;}
.masthead-meta a:hover{color:#fff;}

/* ---------- Folder-tab navigation (signature element) ---------- */
nav.tabs{
  background:var(--ink);
}
.tabs-inner{
  display:flex; gap:6px; max-width:var(--max); margin:0 auto; padding:0 24px;
  overflow-x:auto;
}
.tabs-inner a{
  position:relative;
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.03em;
  text-decoration:none;
  color:#B9C0D0;
  background:#0F1830;
  padding:12px 20px 10px;
  border-radius:8px 8px 0 0;
  border:1px solid var(--rule-dark);
  border-bottom:none;
  white-space:nowrap;
  top:1px;
  transition:transform .15s ease, color .15s ease, background .15s ease;
}
.tabs-inner a:hover{color:#fff; transform:translateY(-2px);}
.tabs-inner a.active{
  background:var(--paper);
  color:var(--ink);
  font-weight:600;
  border-color:var(--rule);
}
.tabs-inner a .idx{color:var(--brass); margin-right:8px;}
.tabs-inner a.active .idx{color:var(--brass-dim);}

/* ---------- Hero ---------- */
.hero{
  padding:56px 0 40px;
  border-bottom:1px solid var(--rule);
}
.hero .eyebrow{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-dim); margin-bottom:14px; display:inline-block;
}
.hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:end;}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr;}}

/* ---------- Stamp badge ---------- */
.stamp{
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid var(--danger);
  color:var(--danger);
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:4px;
  transform:rotate(-2deg);
  font-weight:600;
}
.stamp.gold{border-color:var(--brass); color:var(--brass-dim); transform:rotate(-1.2deg);}
.stamp.teal{border-color:var(--teal); color:var(--teal-dim); transform:rotate(1deg);}

/* ---------- Section ---------- */
section{padding:44px 0;}
section + section{border-top:1px solid var(--rule);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap;}
.section-head .idxno{font-family:var(--mono); color:var(--brass-dim); font-size:.85rem;}

/* ---------- Cards / ledger blocks ---------- */
.grid{display:grid; gap:20px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}}

.card{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:22px;
}
.card h3{margin-bottom:8px;}
.card .num{
  font-family:var(--mono); color:var(--brass); font-size:.85rem; display:block; margin-bottom:10px;
}

.tile{
  display:block;
  background:var(--ink);
  color:var(--paper);
  border-radius:10px;
  padding:24px;
  text-decoration:none;
  border:1px solid var(--rule-dark);
  transition:transform .15s ease, border-color .15s ease;
}
.tile:hover{transform:translateY(-3px); border-color:var(--brass); color:var(--paper);}
.tile .tile-idx{font-family:var(--mono); color:var(--brass); font-size:.78rem; letter-spacing:.1em;}
.tile h3{color:#fff; margin:8px 0 6px;}
.tile p{color:#C9CFDD; margin:0; font-size:.92rem;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.85rem; letter-spacing:.03em;
  padding:12px 22px;
  border-radius:7px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-dim); color:#fff;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper);}
.btn-gold{background:var(--brass); color:#241a06;}
.btn-gold:hover{background:var(--brass-dim); color:#fff;}

/* ---------- Tables (ledger) ---------- */
.ledger{width:100%; border-collapse:collapse; font-size:.94rem;}
.ledger caption{text-align:left; font-family:var(--mono); font-size:.78rem; color:var(--slate); margin-bottom:10px; letter-spacing:.04em;}
.ledger th{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  text-align:left; color:var(--paper); background:var(--ink);
  padding:12px 14px;
}
.ledger th:first-child{border-radius:8px 0 0 0;}
.ledger th:last-child{border-radius:0 8px 0 0;}
.ledger td{padding:12px 14px; border-bottom:1px solid var(--rule); vertical-align:top;}
.ledger tbody tr:nth-child(odd){background:var(--paper-raised);}
.ledger tbody tr:hover{background:#EAE6D8;}
.ledger td.mono, .ledger th.mono{font-family:var(--mono);}
.tag{
  display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  padding:3px 9px; border-radius:20px; text-transform:uppercase;
}
.tag.open{background:#DCEEE9; color:var(--teal-dim);}
.tag.closed{background:#EFE1DA; color:var(--danger);}
.tag.new{background:#F6E9D2; color:var(--brass-dim);}

.table-scroll{overflow-x:auto; border-radius:10px; border:1px solid var(--rule);}
.table-scroll .ledger{border:none;}

/* ---------- Accordion (FAQ / steps) ---------- */
details.acc{
  border:1px solid var(--rule); border-radius:10px; padding:0; margin-bottom:12px;
  background:var(--paper-raised);
}
details.acc summary{
  cursor:pointer; list-style:none; padding:18px 20px; font-family:var(--display);
  font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
details.acc summary::-webkit-details-marker{display:none;}
details.acc summary::after{
  content:"+"; font-family:var(--mono); color:var(--brass-dim); font-size:1.3rem; flex:none;
}
details.acc[open] summary::after{content:"–";}
details.acc .acc-body{padding:0 20px 20px; color:var(--slate);}

/* ---------- Steps ---------- */
.steps{list-style:none; margin:0; padding:0; counter-reset:step;}
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:44px 1fr; gap:16px;
  padding:16px 0; border-bottom:1px dashed var(--rule);
}
.steps li:last-child{border-bottom:none;}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono); color:var(--brass); font-weight:600;
  background:var(--ink); border-radius:6px; height:40px; width:40px;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}

/* ---------- Forms ---------- */
form.card label{
  display:block; font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--slate); margin:16px 0 6px;
}
form.card label:first-of-type{margin-top:0;}
input, select, textarea{
  width:100%; font-family:var(--body); font-size:.95rem; padding:11px 12px;
  border:1px solid var(--rule); border-radius:7px; background:#fff; color:var(--ink);
}
textarea{resize:vertical; min-height:110px;}
input:focus, select:focus, textarea:focus{border-color:var(--teal);}
.form-actions{margin-top:20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.form-note{font-size:.82rem; color:var(--slate); margin-top:10px;}

/* ---------- Notice list ---------- */
.notice-row{
  display:grid; grid-template-columns:100px 1fr auto; gap:18px; align-items:start;
  padding:18px 0; border-bottom:1px solid var(--rule);
}
.notice-row:first-child{padding-top:0;}
@media (max-width:700px){.notice-row{grid-template-columns:1fr; gap:8px;}}
.notice-date{font-family:var(--mono); color:var(--slate); font-size:.82rem; line-height:1.3;}
.notice-date b{display:block; color:var(--ink); font-size:1.3rem; font-family:var(--display);}
.notice-body h3{margin-bottom:6px; font-size:1.05rem;}
.notice-actions{display:flex; align-items:center;}

/* ---------- Pinned notice ---------- */
.pinned{
  background:var(--ink); color:var(--paper); border-radius:10px; padding:24px 26px;
  display:flex; gap:18px; align-items:flex-start; margin-bottom:28px;
  border-left:5px solid var(--brass);
}
.pinned h3{color:#fff;}
.pinned p{color:#C9CFDD; margin-bottom:0;}
.pin-icon{font-family:var(--mono); color:var(--brass); font-size:.8rem; letter-spacing:.1em; flex:none; padding-top:4px;}

/* ---------- Footer ---------- */
footer{
  background:var(--ink); color:#C9CFDD; margin-top:20px; border-top:4px solid var(--brass);
}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; padding:44px 0 28px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{color:#fff; font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px;}
.footer-grid a{color:#C9CFDD; display:block; margin-bottom:8px; text-decoration:none;}
.footer-grid a:hover{color:var(--brass); }
.footer-bottom{
  border-top:1px solid var(--rule-dark); padding:16px 0; font-family:var(--mono); font-size:.75rem;
  color:#8791A6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.small{font-size:.85rem; color:var(--slate);}
.center{text-align:center;}