/* thereef.ink — one stylesheet for both sites (Ghillie + TheReefink).
   Inlined and duplicated in every page until 2026-08-29; extracted here so it
   is fetched once for the whole site.
   No scripts anywhere on thereef.ink — this file is the only asset the pages load. */

/* ---- palette ---------------------------------------------------------- */

:root {
  --bg:     #fbfaf7;
  --ink:    #1c1e21;
  --dim:    #5a5f66;
  --line:   #d8d5cd;
  --accent: #0b5d52;
  --card:   #f2f0ea;
  --mono:   "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #14161a;
    --ink:    #e8e6e1;
    --dim:    #9aa0a8;
    --line:   #33373d;
    --accent: #4fb3a5;
    --card:   #1c1f24;
  }
}

/* ---- page ------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 Georgia, "Times New Roman", serif;
}

main { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }

h1 { font-size: 2.1rem; margin: 0 0 .25rem; letter-spacing: -.01em; }

h2 {
  font-size: 1.25rem;
  margin: 2.75rem 0 .75rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .35rem;
}

p            { margin: .8rem 0; }
ol li, ul li { margin: .5rem 0; }
a            { color: var(--accent); }

.sub  { color: var(--dim); margin: 0 0 2.5rem; font-style: italic; }
.who  { color: var(--dim); margin: 0 0 2.5rem; font-style: italic; font-size: .85rem; }

blockquote {
  margin: 1.2rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--line);
  color: var(--dim);
  font-style: italic;
}

footer {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: .85rem;
}

/* ---- code ------------------------------------------------------------- */

code, pre { font-family: var(--mono); font-size: .84em; }
pre code  { font-size: .88em; }

pre {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .9rem 1rem;
  overflow-x: auto;
  line-height: 1.5;
}

.hash {
  font-family: var(--mono);
  font-size: .74em;
  word-break: break-all;
  color: var(--dim);
  margin: .35rem 0;
}

/* ---- components ------------------------------------------------------- */

.dl {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
.dl code  { word-break: break-all; }
.dl .note { color: var(--dim); font-size: .9rem; margin-bottom: 0; }

.credo {
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.1rem;
  border-left: 3px solid var(--accent);
  font-size: 1.12rem;
}
.credo p { margin: .35rem 0; }

.benefit   { font-weight: bold; }
.rule-name { font-variant: small-caps; letter-spacing: .03em; }

/* Seat annotations. A distinct editorial colour, never the site accent, and
   labelled so colour is not the only cue — it must survive printing and it
   must work for a reader who cannot distinguish the hues. */
.note {
  margin: .9rem 0;
  padding: .55rem .9rem;
  border-left: 3px solid #b9a5db;
  border-radius: 0 5px 5px 0;
  background: rgba(106, 74, 156, .06);
  color: #6a4a9c;
  font-size: .93rem;
}
.note b {
  color: #6a4a9c;
  font-variant: small-caps;
  font-weight: normal;
  letter-spacing: .04em;
}

@media (prefers-color-scheme: dark) {
  .note   { color: #c3aef0; border-left-color: #7d68a8; background: rgba(160, 130, 220, .10); }
  .note b { color: #c3aef0; }
}

/* ---- the vote (causes + this week's attempt) -------------------------- */
/* A plain form and a number beside it. No script anywhere near this: the
   button posts, the server counts, the page is written again. */

.vote {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.75rem;
}
.vote button {
  padding: .5rem 1.2rem;
  font: inherit;
  font-size: .95rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.vote button:hover { filter: brightness(1.1); }
.vote .tally {
  color: var(--dim);
  font-family: var(--mono);
  font-size: .82rem;
}

/* The honeypot field: hidden from people, filled in by naive bots. Moved
   off-screen rather than display:none, which some bots check for. */
.hp { position: absolute; left: -9999px; }

/* ---- side navigation (pure CSS; the site runs no scripts) -------------- */

.sidenav {
  padding: 1.15rem 1.25rem .8rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.sidenav ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.sidenav li { margin: 0; }
.sidenav a  { display: block; padding: .17rem 0; font-size: .93rem; line-height: 1.35;
              text-decoration: none; }
.sidenav a:hover                 { text-decoration: underline; }
.sidenav a[aria-current="page"]  { font-weight: bold; color: var(--ink); }

.navbrand {
  margin: .1rem 0 .4rem;
  color: var(--dim);
  font-size: .74rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.navbrand a { display: inline; color: var(--dim); font-size: .74rem; font-weight: bold;
              letter-spacing: .1em; }

.navlangs   { margin: 0 0 .9rem; }
.navlangs a { display: block; color: var(--dim); font-size: .8rem; padding: .12rem 0; }
.navout   { margin: 0 0 .9rem; }
.navout a { display: inline; color: var(--dim); font-size: .84rem; }

.navfoot   { margin: 0; padding-top: .6rem; border-top: 1px solid var(--line); }
.navfoot a { display: inline; color: var(--dim); font-size: .8rem; }

@media (min-width: 62rem) {
  body { padding-left: 15.5rem; }
  .sidenav {
    position: fixed;
    top: 0; left: 0;
    width: 15.5rem; height: 100vh;
    overflow-y: auto;
    padding: 2.2rem 1.4rem 1.4rem;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}