/* The portal, in the website's look (the tokens and fonts from website/assets/css/site.css). Plain and quick. */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2-variations"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans.woff2") format("woff2-variations"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root { --pine: #0f2a23; --night: #09140f; --mint: #3ee0b0; --green: #0b7d62; --green-soft: #e3f4ee; --amber: #ffb547; --amber-soft: #fff1d9; --amber-ink: #8a5a00; --paper: #f3f6f3; --white: #fff; --ink: #0e1a16; --muted: #56665f; --line: #dbe3df; --rose: #e0567a; --rose-soft: #fde8ee;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif; --text: "Instrument Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --radius: 14px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--text); }
a { color: var(--green); }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; font-weight: 730; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
.mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--muted); }
.site-header { background: var(--pine); color: #e9f2ee; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--display); font-weight: 740; font-size: 1.15rem; }
.brand svg { width: 28px; height: 28px; }
.site-header nav { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; font-size: .95rem; }
.site-header nav a { color: #a8bdb4; text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: #fff; }
.container { width: min(100% - 32px, 920px); margin: 0 auto; }
main { padding: clamp(28px, 5vw, 56px) 0 64px; }
.lede { color: var(--muted); font-size: 1.1rem; margin: 10px 0 0; max-width: 60ch; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); margin-top: 20px; }
.card + .card { margin-top: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.key { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.key code { font-family: var(--mono); font-size: 1.05rem; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; letter-spacing: .02em; }
.pill { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pill.green { background: var(--green-soft); color: var(--green); } .pill.amber { background: var(--amber-soft); color: var(--amber-ink); } .pill.rose { background: var(--rose-soft); color: #9f2a4a; } .pill.grey { background: #e6ebe8; color: #3d4a45; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 10px 18px; font: 600 .95rem var(--text); text-decoration: none; cursor: pointer; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.btn.primary { background: var(--mint); border-color: var(--mint); color: var(--night); }
.btn.small { padding: 6px 12px; font-size: .86rem; }
.btn:hover { filter: brightness(.97); }
form.inline { display: inline; }
label { display: block; font-weight: 600; font-size: .92rem; margin: 14px 0 6px; }
input[type=email], input[type=text], input[type=url], textarea { width: 100%; font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); }
textarea { min-height: 9rem; }
.help { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }
.error { color: #9f2a4a; font-size: .92rem; margin: 6px 0 0; }
.notice { border-radius: 10px; padding: 12px 14px; margin-top: 16px; font-size: .95rem; }
.notice.ok { background: var(--green-soft); color: var(--green); } .notice.bad { background: var(--rose-soft); color: #9f2a4a; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .95rem; }
th, td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; border-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.steps { padding-left: 1.2em; color: var(--muted); }
.steps b { color: var(--ink); }
.hp { position: absolute; left: -9999px; }
.footer { color: var(--muted); font-size: .86rem; padding: 24px 0; border-top: 1px solid var(--line); }
@media (max-width: 640px) { th, td { padding: 8px 4px; font-size: .9rem; } .site-header .container { flex-direction: column; align-items: flex-start; padding: 12px 0; } }
/* On a phone, each site is a small block rather than a squeezed row. */
@media (max-width: 640px) {
  table.sites thead { display: none; }
  table.sites tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  table.sites td { display: block; border: 0; padding: 0; font-size: .92rem; }
  table.sites td:nth-child(2), table.sites td:nth-child(3) { color: var(--muted); }
  table.sites td:last-child { grid-column: 2; grid-row: 1 / 4; align-self: center; }
}