/* =====================================================================
   TAKOMAGETHER — shared site chrome for standalone web pages
   Util bar · masthead · buttons · footer. Mirrors the homepage exactly
   so the Calendar page reads as the same publication.
   ===================================================================== */
*{box-sizing:border-box;}
html,body{margin:0;background:var(--paper-page);color:var(--text-strong);font-family:var(--font-body);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.mono{font-family:var(--font-mono);text-transform:uppercase;}

/* utility bar */
.util{background:var(--pine);color:var(--gold);}
.util .in{max-width:1200px;margin:0 auto;padding:8px 28px;display:flex;justify-content:space-between;align-items:center;}
.util .mono{font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--gold);}
.util .r{display:flex;gap:18px;align-items:center;color:rgba(242,236,224,.7);}
.util .r .d{font-size:9px;letter-spacing:.1em;}

/* masthead */
.mast{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40;}
.mast .in{max-width:1200px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:26px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{width:34px;height:34px;}
.brand .w{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.03em;color:var(--pine);line-height:1;}
.mast nav{display:flex;gap:22px;margin-left:8px;}
.mast nav a{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);padding:4px 0;border-bottom:2px solid transparent;}
.mast nav a:hover{color:var(--pine);border-color:var(--gold);}
.mast nav a.on{color:var(--pine);border-color:var(--pine);}
.actions{margin-left:auto;display:flex;gap:10px;align-items:center;}
.btn{font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:6px;}
.btn-gold{background:var(--gold);color:var(--ink-900);}
.btn-out{background:transparent;color:var(--pine);border:1px solid var(--pine);}
.btn:hover{filter:brightness(.95);}

/* footer */
footer{background:var(--surface-ink);color:rgba(242,236,224,.7);}
footer .in{max-width:1200px;margin:0 auto;padding:40px 28px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;}
footer .w{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.03em;color:var(--paper);}
footer .motto{font-style:italic;font-size:13px;color:rgba(242,236,224,.5);margin-top:6px;}
footer p{font-size:13.5px;line-height:1.6;max-width:38ch;margin:14px 0 0;}
footer h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:13.5px;}
footer ul a:hover{color:var(--paper);}
.legal{border-top:1px solid rgba(242,236,224,.14);}
.legal .in{padding:16px 28px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,236,224,.45);}

@media(max-width:760px){
  .util .r .d{display:none;}
  .mast nav{display:none;}
  .mast .in{padding:12px 18px;gap:12px;}
  .brand{min-width:0;}
  .brand img{width:30px;height:30px;}
  .brand .w{font-size:22px;}
  .actions{gap:8px;}
  .btn{padding:8px 12px;}
  footer .in{grid-template-columns:1fr;gap:24px;}
  .legal .in{flex-direction:column;gap:6px;}
}
@media(max-width:480px){
  .brand .w{font-size:20px;}
  .actions .btn-out{display:none;}
  .btn{padding:7px 11px;font-size:9px;}
}