:root { --ink: #172e30; --teal: #153f43; --teal-light:#245459; --coral:#e06943; --paper:#faf7ef; --white:#fffdf8; --border:#e1ddd1; --muted:#607071; }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; line-height:1.5; }
a { color:#14656b; text-underline-offset:3px; }
a:hover { color:var(--coral); }
.top-stripe { height:10px; background:repeating-linear-gradient(90deg,var(--teal) 0,var(--teal) 28px,var(--white) 28px,var(--white) 56px); border-bottom:2px solid var(--coral); }
.site-header { background:var(--teal); color:white; }
.header-inner { max-width:1200px; margin:auto; padding:30px 28px 34px; display:flex; justify-content:space-between; align-items:center; gap:32px; }
.header-inner h1 { color:white; font-size:clamp(2rem,4.6vw,3.8rem); line-height:1.04; letter-spacing:-.05em; margin:10px 0 12px; text-transform:uppercase; max-width:750px; }
.header-inner p { margin:0; color:#d8e8e5; font-size:1.05rem; }
.header-mark { width:120px; height:120px; flex-shrink:0; border:5px solid #f2e5c9; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:2.6rem; transform:rotate(-10deg); letter-spacing:-.1em; }
.header-mark span { color:var(--coral); font-size:1rem; margin-left:-22px; }
.eyebrow { font-weight:800; font-size:.72rem; letter-spacing:.2em; color:#c2dfdc; }
.eyebrow.dark { color:#567476; }
.layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:30px; max-width:1200px; padding:36px 28px 58px; margin:auto; align-items:start; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:10px; margin-bottom:16px; }
h2 { margin:5px 0 0; font-size:1.8rem; line-height:1.1; letter-spacing:-.045em; }
h3 { margin:0 0 12px; font-size:1.3rem; line-height:1.2; }
h4 { margin:5px 0 7px; font-size:1.04rem; }
.count { background:#e6e9df; color:#4c6262; border-radius:20px; padding:5px 12px; font-weight:700; font-size:.77rem; white-space:nowrap; }
.panel { background:var(--white); border:1px solid var(--border); border-radius:7px; padding:23px; box-shadow:0 2px 0 rgba(22,45,46,.03); }
.composer { border-top:5px solid var(--coral); margin-bottom:23px; }
.composer h3 { font-size:1.45rem; }
.stacked-form { display:flex; flex-direction:column; gap:13px; }
.stacked-form label { display:flex; flex-direction:column; gap:6px; font-weight:750; font-size:.86rem; }
input,textarea { color:var(--ink); font:inherit; border:1px solid #bfcac5; background:#fff; border-radius:4px; padding:11px 12px; width:100%; outline-offset:2px; }
input:focus,textarea:focus { border-color:#2f7373; outline:2px solid #a4d7d1; }
textarea { resize:vertical; }
.post-footer { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-top:2px; }
.post-footer .math-field { max-width:230px; flex:1; }
.math-field strong { color:var(--teal); }
.button { border:0; background:var(--coral); color:white; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:4px; font:800 .86rem Arial,Helvetica,sans-serif; padding:13px 17px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.button:hover { background:#bf4e2c; color:white; }
.button.secondary { background:var(--teal-light); }
.button.ghost { background:transparent; border:1px solid #a9ceca; }
.button.danger { background:#9f433b; font-size:.79rem; padding:9px 12px; }
.form-footnote, .tiny-note { color:var(--muted); font-size:.81rem; margin:0; }
.form-footnote { margin-top:0; }
.reply-intro { background:#eaf0e9; padding:10px 12px; border-left:3px solid #43817b; font-size:.87rem; line-height:1.5; }
.reply-intro a { margin-left:8px; }
.honeypot { position:absolute; left:-99999px; height:0; overflow:hidden; }
.message-list { display:flex; flex-direction:column; gap:13px; }
.message { padding:19px 22px 17px; }
.message-top { display:flex; align-items:center; gap:11px; }
.avatar { width:40px; height:40px; border-radius:50%; background:#dce7dd; color:var(--teal); font-size:1rem; display:grid; place-items:center; font-weight:900; flex-shrink:0; }
.message-meta { display:flex; flex-direction:column; line-height:1.4; }
.message-meta strong { font-size:.95rem; }
.message-meta time,.date-note { font-size:.78rem; color:var(--muted); }
.message-body { margin:15px 0 14px; font-size:.97rem; overflow-wrap:anywhere; white-space:normal; }
.in-reply { padding:9px 12px; font-size:.83rem; color:#496060; margin:15px 0 0; background:#f1f4eb; border-left:3px solid #9fbbb0; overflow-wrap:anywhere; }
.reply-link { font-size:.83rem; font-weight:750; text-decoration:none; }
.right-column .panel { padding:26px; }
.notice-top-label { display:inline-block; color:white; background:var(--coral); font-size:.7rem; font-weight:900; letter-spacing:.13em; padding:5px 8px; margin-bottom:18px; transform:rotate(-2deg); }
.notice-content h3 { text-transform:uppercase; letter-spacing:-.035em; font-size:1.5rem; }
.event-item { padding:17px 0; border-bottom:1px solid var(--border); }
.event-date { color:#b44a29; font-size:.73rem; font-weight:900; letter-spacing:.13em; }
.event-item p { margin:0; color:#506364; font-size:.92rem; }
.notice-content hr { margin:24px 0; border:0; border-top:2px solid var(--teal); }
.notice-content img { display:block; max-width:100%; height:auto; border-radius:4px; margin:15px 0; }
.notice-content a { overflow-wrap:anywhere; }
.notice-hint { font-size:.87rem; color:var(--muted); }
.sample-code { overflow-x:auto; font-size:.76rem; background:#edf0e6; padding:9px; white-space:pre-wrap; word-break:break-word; }
.tiny-note { margin:12px 0; }
.empty-state { color:var(--muted); text-align:center; padding:25px; }
.pagination { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; padding:20px 0; font-size:.9rem; }
.pagination a { font-weight:700; }
.alert { margin-bottom:16px; }
.success-box { background:#e5f2e9; border:1px solid #92bba2; padding:13px; border-radius:4px; }
.error-box { background:#fff0ec; border:1px solid #d99581; padding:13px; border-radius:4px; }
.site-footer { background:#e6e7dc; padding:21px; text-align:center; color:#4a6360; font-size:.85rem; }
.site-footer span { font-weight:800; }
.simple-page { min-height:90vh; max-width:530px; margin:50px auto; padding:0 22px; }
.setup-panel { padding:32px; }
.simple-page h1 { font-size:2.1rem; margin:8px 0 15px; letter-spacing:-.04em; }
.simple-page p { color:#455d5e; }
.simple-page code, .admin-aside code { background:#e9eee6; padding:2px 4px; border-radius:3px; }
.back-link { margin-top:25px; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--teal); color:white; padding:26px max(28px,calc((100vw - 1200px)/2)); }
.admin-header h1 { margin:6px 0 0; font-size:2rem; }
.admin-header p { margin:3px 0 0; color:#d2e4df; font-size:.84rem; }
.admin-header-actions { display:flex; align-items:center; gap:10px; }
.admin-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:28px; max-width:1200px; margin:32px auto; padding:0 28px; align-items:start; }
.admin-aside { display:grid; gap:16px; }
.admin-aside p { margin-bottom:0; font-size:.88rem; }
.admin-message { margin-bottom:13px; }
.admin-msg-header { display:flex; align-items:start; justify-content:space-between; }
.admin-preview { margin:13px 0; white-space:normal; overflow-wrap:anywhere; }
.admin-message summary { color:#17646c; font-weight:800; cursor:pointer; margin-top:10px; font-size:.84rem; }
.admin-edit-form { padding:14px; background:#f1f2ea; margin-top:12px; }
.delete-form { border-top:1px solid var(--border); padding-top:13px; margin-top:10px; }
.muted { color:var(--muted); }
@media(max-width:850px) { .layout, .admin-layout { grid-template-columns:1fr; } .right-column { margin-top:7px; } .header-mark { width:85px; height:85px; font-size:2rem; } .admin-header { flex-direction:column; align-items:flex-start; } }
@media(max-width:500px) { .header-inner { padding:25px 18px; } .header-mark { display:none; } .layout,.admin-layout { padding:25px 14px 45px; gap:23px; } .panel { padding:17px; } .right-column .panel { padding:20px; } .post-footer { align-items:stretch; flex-direction:column; } .post-footer .math-field { max-width:none; width:100%; } .post-footer .button { width:100%; } .section-heading { align-items:center; } h2 { font-size:1.5rem; } .admin-header { padding:24px 17px; } .admin-header-actions { flex-wrap:wrap; } }


/* On-page jump menu: available as the visitor scrolls. */
.quick-nav { position:sticky; top:0; z-index:30; background:var(--white); border-bottom:1px solid var(--border); box-shadow:0 2px 9px rgba(22,45,46,.08); }
.quick-nav-inner { max-width:1200px; margin:0 auto; padding:8px 28px; display:flex; justify-content:center; gap:16px; }
.quick-nav a { display:block; color:var(--teal); text-decoration:none; border-radius:5px; padding:10px 18px; font-weight:800; font-size:.94rem; }
.quick-nav a:hover, .quick-nav a:focus-visible { background:#e8eee9; color:#bd4f31; }
/* Account for the fixed-in-view menu when following section links. */
#whats-on, #messages, #post-form { scroll-margin-top:84px; }
/* The message form sits below the conversation instead of hiding the newest replies. */
.composer { margin-top:24px; margin-bottom:0; }
@media(max-width:850px) { .right-column { order:-1; } }
@media(max-width:500px) {
  .quick-nav-inner { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:7px 10px; }
  .quick-nav a { text-align:center; padding:9px 4px; font-size:.78rem; line-height:1.25; }
  #whats-on, #messages, #post-form { scroll-margin-top:72px; }
}