/* KreweHub · the door
   The Regalia band and the chapter tiles, shared by the office door (office-hub.html)
   and the lieutenant door (lt-hub.html) so the two never drift apart. */
/* KreweHub · the office door
   One calm front door for the office, the way the Rummel Staff Hub opens for school staff.
   The head is the Regalia band: aubergine, a fine inset gold frame, the krewe's crest on an ivory
   plate (their colors, legible on the dark), the greeting and the countdown. Under it, five chapters and the desk, three by two:
   every tool by its plain name, the office's own notes, no numbers, no feeds. The work lives one
   click in; every line deep-links into admin.html. Kelly chose this on 2026-09-12 (round two, 02 + 01). */
:root{
  --ink:#1A1222; --plum:#241634; --plum-2:#2F1F44;
  --cream:#F5EDDE; --ivory:#F8F2E7; --paper:#FCF8F1; --sand:#E7DAC2; --taupe:#B8A789;
  --gold:#C49B54; --gold-lt:#E3BC72; --gold-dk:#A9823F; --gold-soft:rgba(196,155,84,.14); --gold-tile:rgba(196,155,84,.17);
  --text:#2A2032; --text-soft:#6E6075; --text-dim:#998AA0;
  --paid:#6E8A5E; --past:#8E3B3F;
  --line:rgba(42,32,50,.085);
  --sh:0 1px 2px rgba(26,18,34,.04), 0 18px 38px -26px rgba(26,18,34,.3);
  --sh-up:0 2px 4px rgba(26,18,34,.05), 0 26px 46px -26px rgba(26,18,34,.36);
  --ease:cubic-bezier(.2,.7,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  min-height:100vh;background:var(--cream);
  background-image:
    radial-gradient(720px 460px at 14% 18%, rgba(196,155,84,.16), transparent 64%),
    radial-gradient(640px 460px at 94% 100%, rgba(196,155,84,.11), transparent 60%);
  color:var(--text);font-family:"DM Sans",system-ui,sans-serif;font-optical-sizing:auto;
  display:flex;flex-direction:column;
}

/* ---- the Regalia band ---- */
.band{
  position:relative;overflow:hidden;text-align:center;color:var(--ivory);
  padding:clamp(3rem,8vh,4.6rem) 1.5rem clamp(2.6rem,6vh,3.6rem);
  background:var(--plum);
  background-image:radial-gradient(120% 90% at 82% -12%, #4A2F6B 0%, #2F1F44 44%, var(--ink) 100%);
}
.band:before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:screen;pointer-events:none}
.band:after{content:"";position:absolute;inset:12px;border:1px solid rgba(196,155,84,.34);border-radius:12px;pointer-events:none}
.band .in{position:relative;max-width:60ch;margin:0 auto}
.plate{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.3rem;margin:0 auto 1.6rem;background:var(--ivory);border-radius:16px;box-shadow:0 14px 34px -16px rgba(0,0,0,.65),inset 0 0 0 1px rgba(196,155,84,.4)}
.crest{height:54px;width:auto;display:block}
/* A crest that carries its own light ground (a round badge) needs no plate: "crestPlate": false in the
   krewe's identity file drops the box and lets the mark sit bare and a little larger on the band. */
.plate.bare{background:none;box-shadow:none;padding:0;border-radius:0}
.plate.bare .crest{height:92px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
h1{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(2.1rem,5.4vw,3.3rem);line-height:1.04;letter-spacing:-.015em;color:var(--ivory);margin:0 0 .85rem}
.sub{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:1.34rem;line-height:1.5;letter-spacing:-.005em;color:rgba(248,242,231,.84);max-width:44ch;margin:0 auto}
.day{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,242,231,.56);margin-top:1.3rem}
.day b{color:var(--gold-lt);font-weight:700}
.day .sep{margin:0 .55rem;color:rgba(196,155,84,.7)}
.day .ph{display:inline-block;white-space:nowrap}
/* too narrow for one line: the date over the countdown, each whole, no dangling dot */
@media (max-width:640px){ .day .ph{display:block} .day .sep{display:none} .day .ph + .sep + .ph{margin-top:.4rem} }

/* ---- the chapters and the desk ---- */
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:2.6rem 1.5rem 2.2rem}
.chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem}
.chapter{
  display:flex;flex-direction:column;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:17px;
  padding:1.3rem 1.35rem 1rem;box-shadow:var(--sh);
}
.chapter h2{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.4rem;line-height:1.15;letter-spacing:-.005em;color:var(--plum);display:flex;align-items:center;gap:.7rem;margin:0}
.chapter h2 svg{width:21px;height:21px;flex:none;stroke:var(--gold-dk);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Magnific's Thin Rounded icons are filled outlines; the float and the beads carry their own line (2026-10-03) */
.chapter h2 svg.kh-ui{fill:currentColor;color:var(--gold-dk);stroke:currentColor;stroke-width:var(--kh-icon-weight,.45px)}
.chapter h2 .st{margin-left:auto;font-family:"DM Sans",system-ui,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.chapter .hr{height:1px;background:linear-gradient(90deg,rgba(196,155,84,.7),rgba(196,155,84,0));margin:.8rem 0 .35rem}
.chapter ul{list-style:none}
.chapter li a{
  display:flex;align-items:center;gap:.7rem;min-height:48px;
  font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1.08rem;color:var(--plum);text-decoration:none;
  padding:.4rem .2rem .4rem .25rem;border-top:1px solid var(--line);
  transition:color .18s,padding-left .22s var(--ease);
}
.chapter li:first-child a{border-top:0}
.chapter li a:hover{color:var(--ink);padding-left:.5rem}
.chapter li a .go{margin-left:auto;width:28px;height:28px;border-radius:50%;flex:none;background:var(--gold-soft);color:var(--gold-dk);display:grid;place-items:center;transition:background .22s,color .22s,transform .22s}
.chapter li a .go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chapter li a:hover .go{background:var(--gold);color:var(--ink);transform:translateX(3px)}

/* ---- the desk: notes & to-dos ---- */
.task-add{display:flex;gap:.5rem;margin:.55rem 0 .6rem}
.task-add input{flex:1;min-width:0;font:inherit;font-size:.98rem;color:var(--text);background:var(--ivory);border:1px solid var(--line);border-radius:11px;padding:.66rem .85rem;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease}
.task-add input::placeholder{color:var(--text-dim)}
.task-add input:focus{border-color:rgba(196,155,84,.42);background:#FDF9F1;box-shadow:0 8px 20px -8px rgba(196,155,84,.35);transform:translateY(-2px)}
.task-add button{font:inherit;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(180deg,#E3BC72,#B8934D);color:var(--ink);border:0;border-radius:11px;padding:.66rem 1.05rem;cursor:pointer;flex:none;min-height:44px;transition:filter .15s}
.task-add button:hover{filter:brightness(1.05)}
.task-list{list-style:none;flex:1;min-height:132px;display:flex;flex-direction:column;gap:.1rem}
.task-empty{color:var(--text-dim);font-size:.92rem;line-height:1.6;padding:.6rem .2rem}
.task{display:flex;align-items:flex-start;gap:.65rem;padding:.5rem .45rem;border-radius:10px;transition:background .14s}
.task:hover{background:var(--gold-soft)}
.chk{width:22px;height:22px;border:1.5px solid rgba(169,130,63,.45);border-radius:7px;flex:none;cursor:pointer;margin-top:2px;display:flex;align-items:center;justify-content:center;background:var(--ivory);transition:all .15s;padding:0}
.chk svg{width:12px;height:12px;stroke:var(--ivory);stroke-width:3;fill:none;opacity:0;transition:opacity .12s;stroke-linecap:round;stroke-linejoin:round}
.task.done .chk{background:var(--gold);border-color:var(--gold)}
.task.done .chk svg{opacity:1}
.t-txt{flex:1;min-width:0;font-size:.97rem;line-height:1.5;color:var(--text);overflow-wrap:anywhere;padding-top:1px}
.task.done .t-txt{text-decoration:line-through;color:var(--text-dim)}
.t-rm{background:none;border:0;cursor:pointer;color:var(--text-dim);padding:.25rem;border-radius:7px;display:flex;opacity:0;transition:opacity .14s,color .14s,background .14s;flex:none}
.task:hover .t-rm,.t-rm:focus-visible{opacity:1}
.t-rm svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.t-rm:hover{color:var(--past);background:rgba(142,59,63,.1)}
.notes-foot{margin-top:.6rem;font-size:.79rem;line-height:1.5;color:var(--text-dim)}

/* ---- who am i, footer ---- */
.whoami{text-align:center;margin-top:2.2rem;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.whoami b{color:var(--text);font-weight:600}
.whoami a{color:var(--gold-dk);text-decoration:none;border-bottom:1px solid rgba(169,130,63,.5);margin-left:.6rem;padding-bottom:1px}
footer{text-align:center;padding:.4rem 1rem 1.6rem;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
footer .wm{display:block;margin-top:.55rem;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink)}
footer .wm i{font-style:normal;color:var(--gold)}

@media (max-width:980px){ .chapters{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){
  .chapters{grid-template-columns:1fr}
  .band{padding:2.6rem 1.1rem 2.2rem} .band:after{inset:9px;border-radius:10px}
  .chapter{padding:1.15rem 1.1rem .85rem}
  .wrap{padding:1.6rem 1rem 2.4rem}
}