:root{
  --ink:#13293D; --ink-2:#1D3A54; --sea:#1F6F6B; --sea-deep:#145653;
  --mist:#F4F7F7; --paper:#FFFFFF; --line:#D3DBDE; --sand:#CDB892;
  --text:#1B2A35; --muted:#566874; --warn-bg:#FFF6DB; --warn:#7A5A00;
  --radius-s:6px; --radius-l:14px;
  --head:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-padding-top:calc(80px + env(safe-area-inset-top,0px)); }
body{ margin:0; background:var(--mist); color:var(--text); font-family:var(--body); font-size:1.0625rem; line-height:1.6; }
img,svg{ max-width:100%; }
a{ color:var(--sea-deep); text-underline-offset:3px; }
a:hover{ color:var(--ink); }
:focus-visible{ outline:3px solid var(--sea); outline-offset:2px; border-radius:2px; }
h1,h2,h3{ font-family:var(--head); color:var(--ink); line-height:1.15; letter-spacing:-0.01em; }
h1{ font-size:clamp(2rem,4.5vw,3rem); font-weight:700; margin:0 0 .5rem; }
h2{ font-size:1.5rem; font-weight:650; margin:2.5rem 0 .75rem; }
h3{ font-size:1.125rem; font-weight:650; margin:1.5rem 0 .4rem; }
p{ margin:0 0 1rem; max-width:68ch; }
.wrap{ width:min(1120px, 100% - 2.5rem); margin-inline:auto; }

/* Header */
.site-head{ position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--paper); border-bottom:1px solid var(--line); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--head); font-weight:700; font-size:1.2rem; }
.brand svg{ width:34px; height:34px; flex:none; }
.nav ul{ display:flex; gap:.25rem; list-style:none; margin:0; padding:0; }
.nav a{ display:block; padding:.5rem .8rem; border-radius:var(--radius-s); text-decoration:none; color:var(--text); font-weight:500; }
.nav a:hover{ background:var(--mist); }
.nav a[aria-current="page"]{ color:var(--sea-deep); box-shadow:inset 0 -2px 0 var(--sea); border-radius:0; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-s); padding:.45rem .7rem; font:inherit; color:var(--ink); }
@media (max-width:760px){
  .nav-toggle{ display:block; }
  .nav{ position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--line); display:none; }
  .nav.open{ display:block; }
  .nav ul{ flex-direction:column; padding:.5rem 1.25rem 1rem; }
  .nav a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--sea); }
}

/* Page heading band */
.page-head{ background:var(--paper); border-bottom:1px solid var(--line); padding:2.5rem 0 2rem; }
.page-head p{ color:var(--muted); font-size:1.125rem; }
main{ padding-bottom:4rem; }

/* Home: lobby directory board */
.lobby{ background:var(--ink); color:#E9EEF1; padding:3.5rem 0 4rem; }
.lobby-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:3rem; align-items:center; }
.lobby h1{ color:#fff; font-size:clamp(2.2rem,5vw,3.4rem); }
.lobby p{ color:#C3CFD7; font-size:1.125rem; }
.board{ background:var(--ink-2); border:1px solid #2C4C68; border-radius:var(--radius-l); padding:1.25rem 1.5rem; }
.board-title{ font-family:var(--head); color:var(--sand); font-size:.95rem; margin:0 0 .5rem; letter-spacing:.02em; }
.board ol{ list-style:none; margin:0; padding:0; }
.board li + li{ border-top:1px solid #2C4C68; }
.board a{ display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:baseline; padding:1rem .25rem; color:#fff; text-decoration:none; font-family:var(--head); font-size:1.3rem; font-weight:600; }
.board a span{ font-family:var(--body); font-size:.95rem; font-weight:400; color:#A9BAC6; }
.board a:hover{ color:var(--sand); }
.board a:hover span{ color:#E9EEF1; }
@media (max-width:860px){ .lobby-grid{ grid-template-columns:1fr; gap:2rem; } }
@media (max-width:480px){ .board a{ grid-template-columns:1fr; gap:.15rem; } }

/* Generic blocks */
.panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-l); padding:1.5rem 1.75rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } }
.note{ border-left:4px solid var(--sea); background:#E9F2F1; padding:1rem 1.25rem; border-radius:0 var(--radius-s) var(--radius-s) 0; margin:1.5rem 0; }
.note p:last-child{ margin-bottom:0; }
.tbc{ background:var(--warn-bg); color:var(--warn); padding:0 .3em; border-radius:3px; font-size:.95em; white-space:nowrap; }
a.tbc-link{ pointer-events:none; opacity:.85; }
ul.plain{ padding-left:1.2rem; margin:0 0 1rem; }
ul.plain li{ margin:.3rem 0; max-width:66ch; }
.steps{ counter-reset:s; list-style:none; padding:0; margin:0 0 1rem; }
.steps li{ counter-increment:s; position:relative; padding:0 0 1rem 2.75rem; max-width:64ch; }
.steps li::before{ content:counter(s); position:absolute; left:0; top:-.1rem; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--head); font-weight:600; font-size:.95rem; }

/* Rules page */
.rules-layout{ display:grid; grid-template-columns:240px 1fr; gap:3rem; margin-top:2rem; }
.toc{ position:sticky; top:96px; align-self:start; }
.toc p{ font-family:var(--head); font-weight:600; color:var(--ink); margin-bottom:.4rem; }
.toc ul{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line); }
.toc a{ display:block; padding:.3rem .9rem; text-decoration:none; color:var(--muted); font-size:.95rem; }
.toc a:hover{ color:var(--sea-deep); }
.rule-sec{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-l); padding:.25rem 1.75rem 1.25rem; margin-bottom:1rem; }
.rule-sec h2{ margin-top:1.25rem; font-size:1.3rem; }
@media (max-width:860px){ .rules-layout{ grid-template-columns:1fr; gap:1rem; } .toc{ position:static; } .toc ul{ columns:2; } }

/* Services */
.service{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-l); padding:1.25rem 1.75rem 1.5rem; margin-bottom:1.25rem; }
.service h2{ margin-top:.75rem; }
.service dl{ display:grid; grid-template-columns:170px 1fr; gap:.5rem 1.5rem; margin:0 0 1.25rem; }
.service dt{ font-weight:600; color:var(--ink); }
.service dd{ margin:0; }
@media (max-width:600px){ .service dl{ grid-template-columns:1fr; } .service dd{ margin-bottom:.5rem; } }
.links-table{ width:100%; border-collapse:collapse; background:var(--paper); }
.links-table th,.links-table td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.links-table th{ font-family:var(--head); color:var(--ink); background:#EDF2F3; }
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-l); }

/* Buttons & forms */
.btn{ display:inline-block; font:inherit; font-weight:600; padding:.7rem 1.2rem; border-radius:var(--radius-s); border:2px solid var(--sea); background:var(--sea); color:#fff; text-decoration:none; cursor:pointer; }
.btn:hover{ background:var(--sea-deep); border-color:var(--sea-deep); color:#fff; }
.btn.secondary{ background:transparent; color:var(--sea-deep); }
.btn.secondary:hover{ background:#E9F2F1; color:var(--ink); }
form .row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; }
@media (max-width:600px){ form .row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.field label, fieldset legend{ font-weight:600; color:var(--ink); }
.field .hint{ font-size:.9rem; color:var(--muted); }
input,select,textarea{ font:inherit; color:var(--text); padding:.65rem .75rem; border:1px solid #B9C5CA; border-radius:var(--radius-s); background:#fff; width:100%; }
textarea{ min-height:140px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:3px solid rgba(31,111,107,.35); border-color:var(--sea); }
fieldset{ border:0; padding:0; margin:0 0 1rem; }
.choice-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.choice-row label{ display:flex; align-items:center; gap:.45rem; border:1px solid #B9C5CA; border-radius:999px; padding:.4rem .9rem; font-weight:500; cursor:pointer; background:#fff; }
.choice-row input{ width:auto; accent-color:var(--sea); }
.choice-row label:has(input:checked){ border-color:var(--sea); background:#E9F2F1; color:var(--sea-deep); }
.check{ display:flex; gap:.6rem; align-items:flex-start; margin:1rem 0; }
.check input{ width:auto; margin-top:.35rem; accent-color:var(--sea); }
.form-status{ margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--radius-s); display:none; }
.form-status.ok{ display:block; background:#E5F3EC; color:#1E5B3C; }
.form-status.err{ display:block; background:#FBE9E9; color:#8A2020; }

/* Directory */
.dir{ list-style:none; margin:0; padding:0; }
.dir li{ padding:.9rem 0; border-bottom:1px solid var(--line); }
.dir li:last-child{ border-bottom:0; }
.dir strong{ display:block; color:var(--ink); }
.emerg{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.emerg div{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:.8rem 1rem; }
.emerg b{ display:block; font-family:var(--head); font-size:1.6rem; color:var(--ink); }
@media (max-width:700px){ .emerg{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Footer */
.site-foot{ background:var(--ink); color:#C3CFD7; padding:2.5rem 0; font-size:.95rem; }
.site-foot a{ color:#fff; }
.site-foot .wrap{ display:grid; grid-template-columns:2fr 1fr; gap:2rem; }
@media (max-width:700px){ .site-foot .wrap{ grid-template-columns:1fr; } }
.site-foot ul{ list-style:none; padding:0; margin:0; }
.site-foot li{ margin:.3rem 0; }
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; transition:none !important; } }
html{ scroll-behavior:smooth; }