/* CWS info site. Dense by intent: small type, tight spacing, no dead space. */
:root{
  --navy:#07042b;
  --navy-2:#120e35;
  --gold:#f9b626;
  --gold-ink:#7a5100;
  --gold-tint:#fff8e8;
  --gold-line:#f0dcae;
  --ink:#15182b;
  --muted:#5f6478;
  --faint:#70748a;
  --line:#e4e3ec;
  --line-2:#efeef4;
  --ground:#f5f4f0;
  --card:#fff;

  --closed-bg:#fdece7; --closed-fg:#a03714; --closed-dot:#e05a28;
  --limited-bg:#fff3cf; --limited-fg:#7d5200; --limited-dot:#eda100;
  --early-bg:#e8f0fa;  --early-fg:#1a4979;  --early-dot:#4a86c8;
  --wknd-bg:#eeeef3;   --wknd-fg:#7d8194;   --wknd-dot:#c6c6d2;

  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:14px; -webkit-font-smoothing:antialiased;
}
.shell{width:min(960px, calc(100% - 32px)); margin:0 auto}
a{color:inherit}
h1,h2,h3{margin:0; letter-spacing:-.015em}

/* ---------- header ---------- */
header.bar{background:var(--navy); color:#fff}
.bar-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.logo{height:38px; width:auto; display:block}
.bar nav{display:flex; align-items:center; gap:18px}
.bar nav a{
  font-size:13px; font-weight:700; color:#fff; text-decoration:none;
  opacity:.72; transition:opacity .12s ease; padding:3px 0;
  border-bottom:1.5px solid transparent;
}
.bar nav a:hover{opacity:1}
.bar nav a[aria-current="page"]{opacity:1; border-bottom-color:var(--gold)}

/* ---------- today, shown inside the hours card ---------- */
.status{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 11px; border-radius:8px; margin:0 0 11px;
  border:1px solid var(--line-2); background:var(--ground);
}
.status.open{background:#f0faf4; border-color:#cfe9da}
.status.early,.status.limited{background:var(--gold-tint); border-color:var(--gold-line)}
.status.closed{background:var(--closed-bg); border-color:#f3cec0}
.dot{width:8px; height:8px; border-radius:999px; flex:none}
.status.open .dot{background:#2f9e5f}
.status.early .dot,.status.limited .dot{background:#d99a06}
.status.closed .dot{background:#d1532a}
.status b{font-size:13px; font-weight:800; color:var(--ink)}
.status span{font-size:12.5px; color:var(--muted)}
.status .sep{color:var(--line); font-weight:400}

/* ---------- layout ---------- */
main{padding:18px 0 40px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column}
.grid2 > div > .card + .card{margin-top:12px}
.grid2 > div{display:flex; flex-direction:column}
.grid2 > div > .card:last-child{flex:1}
.chead{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); margin:0 0 10px;
}
.chead a{font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:none; color:var(--gold-ink); text-decoration:none}
.chead a:hover{text-decoration:underline}

/* label / value rows, used everywhere */
.rows{display:flex; flex-direction:column}
.rw{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--line-2); text-decoration:none;
}
.rw:first-child{padding-top:0}
.rw:last-child{border-bottom:0; padding-bottom:0}
.rw .k{font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap}
.rw .v{font-size:13px; font-weight:700; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.rw .v.off{color:var(--faint); font-weight:600}
a.rw .v{border-bottom:1px solid transparent}
a.rw:hover .v{border-bottom-color:var(--gold)}
a.rw:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:3px}

.note{margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line-2); font-size:12px; line-height:1.5; color:var(--muted)}
.rows + .note{margin-top:auto}
.note a{color:var(--ink); font-weight:700}
.note + .note{margin-top:5px; padding-top:0; border-top:0}

/* accent card */
.card.up{background:var(--gold-tint); border-color:var(--gold-line)}
.card.up .chead{color:var(--gold-ink)}
.card.up .hl{font-size:15px; font-weight:800; line-height:1.35; color:var(--ink)}
.card.up .sb{margin:4px 0 0; font-size:12.5px; line-height:1.45; color:var(--gold-ink)}

/* ---------- calendar ---------- */
.calhead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.calhead h2{font-size:15px; font-weight:800}
.nav{display:inline-flex; gap:4px}
.nav button{
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--card); border-radius:6px; cursor:pointer;
  color:var(--navy); font-size:13px; line-height:1;
}
.nav button:hover:not(:disabled){background:var(--ground)}
.nav button:disabled{opacity:.3; cursor:not-allowed}
.nav .tbtn{width:auto; padding:0 9px; font:800 11px/1 'Manrope',sans-serif}
.nav .tbtn.hidden{display:none}

.legend{display:flex; flex-wrap:wrap; gap:4px 13px; margin-bottom:10px}
.legend span{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--muted)}
.legend i{width:7px; height:7px; border-radius:2px; flex:none}
.legend i.closed{background:var(--closed-dot)}
.legend i.limited{background:var(--limited-dot)}
.legend i.early{background:var(--early-dot)}
.legend i.weekend{background:var(--wknd-bg); border:1px solid var(--wknd-dot)}

.wk{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; margin-bottom:3px}
.wk span{font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); text-align:center; padding-bottom:4px}

/* Cells are sized to their content, not padded out into empty boxes. */
.grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px}
.cell{
  min-width:0; min-height:46px; border-radius:6px; border:1px solid var(--line-2);
  background:var(--card); padding:5px 5px 4px; margin:0; width:100%;
  display:flex; flex-direction:column; gap:3px; text-align:left; font-family:inherit;
}
.cell.empty{border-color:transparent; background:transparent}
.cell.weekend{background:var(--wknd-bg); border-color:transparent}
.cell.today{border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy)}
button.cell{cursor:pointer}
button.cell:hover{border-color:var(--navy)}
button.cell:focus-visible{outline:2px solid var(--navy); outline-offset:1px}
.dnum{font-size:11.5px; font-weight:800; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums}
.cell.weekend .dnum{color:var(--wknd-fg); font-weight:700}
.bar-status{
  margin-top:auto; height:4px; border-radius:2px; width:100%;
}
.bar-status.closed{background:var(--closed-dot)}
.bar-status.limited{background:var(--limited-dot)}
.bar-status.early{background:var(--early-dot)}
.bar-status.weekend{background:var(--wknd-dot)}
.cell .mini{
  font-size:9.5px; font-weight:700; line-height:1.2; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.cell .mini.closed{color:var(--closed-fg)}
.cell .mini.limited{color:var(--limited-fg)}
.cell .mini.early{color:var(--early-fg)}
.cell .mini.weekend{color:var(--wknd-fg)}

/* the month's notable days, spelled out under the grid */
.mlist{margin-top:12px; padding-top:11px; border-top:1px solid var(--line)}
.mrow{display:grid; grid-template-columns:74px 1fr auto; gap:10px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--line-2); width:100%; text-align:left; background:none; border-left:0; border-right:0; border-top:0; font-family:inherit; cursor:pointer}
.mrow:last-child{border-bottom:0}
.mrow:hover .mname{text-decoration:underline}
.mrow:focus-visible{outline:2px solid var(--navy); outline-offset:1px; border-radius:3px}
.mdate{font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.mname{font-size:13px; font-weight:700; color:var(--ink); min-width:0}
.mtag{font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:999px; white-space:nowrap}
.mtag.closed{background:var(--closed-bg); color:var(--closed-fg)}
.mtag.limited{background:var(--limited-bg); color:var(--limited-fg)}
.mtag.early{background:var(--early-bg); color:var(--early-fg)}
.mtag.weekend{background:var(--wknd-bg); color:var(--wknd-fg)}
.mempty{font-size:12.5px; color:var(--muted); padding:4px 0}

/* ---------- modal ---------- */
.backdrop{
  position:fixed; inset:0; background:rgba(7,4,43,.5);
  display:flex; align-items:center; justify-content:center; padding:18px; z-index:50;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.backdrop.on{opacity:1; pointer-events:auto}
.modal{background:var(--card); border-radius:12px; padding:20px 22px; max-width:340px; width:100%; box-shadow:0 20px 50px -12px rgba(7,4,43,.4)}
.mhead{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.mlabel{font-size:11.5px; font-weight:700; color:var(--muted); margin:0 0 4px}
.modal h3{font-size:17px; font-weight:800; line-height:1.25; margin:0 0 10px}
.mclose{flex:none; width:26px; height:26px; margin:-3px -4px 0 0; display:flex; align-items:center; justify-content:center; border:0; background:var(--ground); border-radius:999px; color:var(--muted); cursor:pointer; font-size:16px; line-height:1}
.mclose:hover{background:var(--line); color:var(--ink)}
.modal .mtag{display:inline-block; margin-bottom:10px}
.modal p{margin:0 0 14px; font-size:13px; color:var(--muted); line-height:1.55}
.modal a.btn{display:block; text-align:center; background:var(--navy); color:#fff; text-decoration:none; font-weight:800; font-size:12.5px; padding:10px 14px; border-radius:8px}

footer{padding:14px 0 30px; font-size:11.5px; color:var(--faint)}
footer a{color:var(--muted); font-weight:600}

@media (max-width:760px){
  .grid2{grid-template-columns:1fr}
  .cell{min-height:40px; padding:4px 3px}
  .cell .mini{display:none}
  .dnum{font-size:11px; text-align:center; width:100%}
  .mrow{grid-template-columns:78px 1fr; row-gap:3px}
  .mrow .mtag{grid-column:2; justify-self:start}
  .logo{height:32px}
  .bar nav{gap:14px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

.hidden{display:none !important}