/* ───────────────────────────────────────────────────────────── chrome.css — the one header, on every page Six pages had six different headers. This is the one, and it keeps the language the home page already spoke: raised pixel buttons with a hard offset shadow, the arcade face for anything that acts like a control. Three things it has to get right, because the first attempt got them wrong: 1. It is the same width everywhere. Pages have content columns from 860 to 1180, and an earlier version made the header follow each one — which made the header itself change between pages: one line here, two lines there, the mark landing somewhere new each time. The header is chrome, not content. One width, one shape, one place for the mark, on all six. 2. It keeps the status line. "The mine is open" is the one thing a first visitor wants to know, and it belongs beside the mark, not in a footer. 3. It has a primary. Every destination as an identical text link is a list, not navigation: THE MINE is where the game is, so it is the filled button and everything else is raised-but-quiet. Only --ember, --line, --panel, --ink and --dim exist on every page, so everything else carries a literal fallback. ───────────────────────────────────────────────────────────── */ header.sm-head{ /* Pages carry their own `header { display:flex; padding-bottom:16px }` from before this file existed, and a bare element selector still lands on this element. Those properties are reset by name rather than by deleting rules from six files, so the header is laid out by exactly one stylesheet. */ display:block;padding:0;gap:0;flex-wrap:nowrap; align-items:stretch;justify-content:flex-start; border:0;border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.022), transparent); margin:0 0 24px; } header.sm-head .sm-head-in{ max-width:1180px; margin:0 auto;padding:15px 18px 14px; display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap; } /* ── the mark ── */ header.sm-head .sm-mark{ display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto; font-family:"Press Start 2P",monospace;font-size:13px;line-height:1; color:var(--ember);white-space:nowrap; } header.sm-head .sm-mark img{ width:36px;height:36px;display:block;image-rendering:pixelated; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.6)); } header.sm-head .sm-mark:hover{color:#FFA85C} /* ── the status line: the one fact a stranger needs first ── */ header.sm-head .sm-status{ /* Basis 0, not auto. With `auto` the status claims its full text width when the browser decides what fits on the first line, so it is the item that decides whether the nav wraps — and a sixth nav button was enough to push the whole nav onto a second row and double the header. With basis 0 the status claims nothing up front, takes whatever is left, and gives way itself instead of moving anything else. */ flex:1 1 0;min-width:0; font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim); display:flex;align-items:center;gap:9px; } header.sm-head .sm-status i{ width:7px;height:7px;flex:0 0 auto;background:#5BD08A;display:block; box-shadow:0 0 9px rgba(91,208,138,.85); } header.sm-head .sm-status b{color:var(--ink);font-weight:400} /* Which chain this is matters to somebody arriving for the first time, and it is the half of this line that can go when the row is tight: "the mine is open" is the fact, and the chain is named again in every page footer. Hidden whenever the three sit on one row, not below some viewport width. The container is fixed at 1180 however wide the window is, so the row has 1144px to divide however large the screen: mark 203 + nav 698 + gaps 44 leaves 199, and the full line needs 353. A viewport-based threshold looked right and was wrong, because past 1180 the extra pixels go to the margins and never to this row. Below 1140 the status takes its own full-width row and the prefix comes back with it. */ header.sm-head .sm-status .chain{display:none} /* ── the controls ── */ header.sm-head .sm-nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:0 0 auto} /* Pages style their own `nav a` — one of them adds margin-left:14px, which silently made this header 28px wider there than here and pushed it onto a second line. Every property a page might set on a nav link is set here, so the header measures the same on all six. */ header.sm-head .sm-nav a{margin:0;letter-spacing:normal;text-decoration:none} header.sm-head .sm-btn{ display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer; font-family:"Press Start 2P",monospace;font-size:8px;text-transform:uppercase; letter-spacing:.02em;line-height:1;padding:10px 12px;margin:0; border:2px solid var(--sunk,#0A0E17); background:var(--panel);color:var(--ink); box-shadow:0 3px 0 var(--sunk,#0A0E17); transition:transform .1s ease, box-shadow .1s ease, background .15s ease, color .15s ease; } header.sm-head .sm-btn:hover{background:var(--line);color:#fff} /* Pressed, not just tinted: the shadow is the affordance, so it collapses. */ header.sm-head .sm-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sunk,#0A0E17)} header.sm-head .sm-btn.sm-primary{ background:var(--ember);color:#160A03;box-shadow:0 3px 0 #A8431A; border-color:var(--sunk,#0A0E17); } header.sm-head .sm-btn.sm-primary:hover{background:#FF9257;color:#160A03} header.sm-head .sm-btn.sm-primary:active{box-shadow:0 1px 0 #A8431A} /* A destination that is not open yet. It is still a link, because the page it goes to exists and explains itself, but the dot says the thing behind it has not started. Quieter than the word SOON, which at this size would cost more width than the whole button. */ header.sm-head .sm-btn.sm-soon::after{ content:"";width:5px;height:5px;flex:0 0 auto;display:block; background:var(--amber);box-shadow:0 0 7px rgba(255,194,74,.7); } header.sm-head .sm-btn.sm-soon{color:var(--dim)} header.sm-head .sm-btn.sm-soon:hover{color:var(--ink)} header.sm-head .sm-btn.sm-soon[aria-current="page"]{color:var(--amber);border-color:var(--amber)} /* The page you are on is a state, not a destination — it stops looking clickable and starts looking selected. */ header.sm-head .sm-btn[aria-current="page"]{ color:var(--ember);border-color:var(--ember); box-shadow:0 3px 0 rgba(255,122,52,.28); } header.sm-head .sm-btn.sm-primary[aria-current="page"]{ color:#160A03;border-color:#FFC24A;box-shadow:0 3px 0 #A8431A; } /* Off-site links are not destinations in this map, so they read as marks rather than buttons and sit behind a divider. */ header.sm-head .sm-out{ display:flex;align-items:center;gap:8px; margin-left:5px;padding-left:13px;border-left:1px solid var(--line); } header.sm-head .sm-out a{ color:var(--dim);text-decoration:none;font-size:11px;letter-spacing:.06em; text-transform:uppercase;display:inline-flex;align-items:center;gap:6px; padding:6px 4px;margin:0;transition:color .15s ease; } header.sm-head .sm-out a:hover{color:var(--ink)} header.sm-head .sm-out svg{flex:0 0 auto} /* The point where the mark, the status and the nav stop fitting on one line. 960 with five buttons, 1080 with six, 1140 with seven: the mark is 203, the nav is 698, the gaps are 44, and the shortened status still needs 161. Below this the status takes its own row and gets its full text back. */ @media(max-width:1140px){ header.sm-head .sm-status{flex:1 1 100%;order:3;font-size:11px} header.sm-head .sm-nav{flex:1 1 100%;order:2} header.sm-head .sm-status .chain{display:inline} } @media(max-width:560px){ header.sm-head{margin-bottom:18px} header.sm-head .sm-head-in{padding:12px 14px 12px;gap:11px 14px} header.sm-head .sm-mark{font-size:11px;gap:9px} header.sm-head .sm-mark img{width:30px;height:30px} /* Fingers, not cursors: the controls grow rather than shrink. A 34px button is comfortable with a mouse and a miss with a thumb, so the padding is set to clear the 44px target rather than to look tidy. */ /* Horizontal padding only. The 44px target comes from min-height below, so tightening the sides costs nothing to a thumb and buys a row back: with seven buttons at 12px the off-site marks were pushed onto a line of their own and the header stood at 240px, against 190px at 8px. */ header.sm-head .sm-btn{padding:16px 8px;font-size:7.5px;min-height:44px} /* The two off-site marks were the last controls in this header under the 44px target — 42px and 37px, the icon being the smaller. Sized by their own box rather than by padding alone, since the icon link has no text to set its height. */ header.sm-head .sm-out a{padding:12px 8px;min-height:44px;min-width:44px; justify-content:center} header.sm-head .sm-out{margin-left:0;padding-left:10px} } /* ───────────────────────────────────────────────────────────── Reading, and the pixel voice Silkscreen has no lowercase. Set as the body face it turns every paragraph into a wall of capitals, which is the one thing a reader's eye has nothing to hold on to — and this site asks people to read real explanations about money. So prose moves to a mono that was drawn to be read at small sizes, and the pixel faces keep the jobs they are good at: Press Start 2P — headings, numbers, buttons. The voice. Silkscreen — small uppercase labels. Short by nature, so the missing lowercase costs nothing and the texture stays. JetBrains Mono — anything that is a sentence. Loaded after each page's own