:root{--mf-base:#121519;--mf-panel:#0e1114;--mf-surface:#1b2026;--mf-card:#1f262d;--mf-elev:#232a31;--mf-border:#3c454d;--mf-copper:#c57b4e;--mf-copper-deep:#9a5a33;--mf-text:#e8edf0;--mf-text2:#b9c4cb;--mf-muted:#8a99a3;}
*{box-sizing:border-box}
/* `clip`, not `hidden`. overflow-x:hidden turns html/body into a scroll
   container, and position:sticky does not stick inside one — which is why the
   masthead scrolled away despite already being sticky with top:0 and z-index
   1000. `overflow:clip` prevents the same sideways overflow WITHOUT creating a
   scroll container, so the nav sticks and the guard still holds. */
html,body{overflow-x:clip}
/* Reserve the vertical scrollbar's width even on pages too short to scroll.
   Without this the short pages (/about/, /field-notes/) get 15px more viewport
   than the long ones, and every centred container — the masthead above all —
   sits 7.5px further right. Navigating between pages then nudged the wordmark
   sideways, which reads as two different designs rather than as a scrollbar. */
html{scrollbar-gutter:stable}
body{margin:0;background:var(--mf-base);color:var(--mf-text);line-height:1.65;
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3,h4{font-family:Georgia,'Times New Roman',serif;font-weight:600;line-height:1.15;color:var(--mf-text)}
a{color:var(--mf-copper)}
img{max-width:100%;height:auto}
.mf-nav{background:var(--mf-panel);border-bottom:1px solid var(--mf-border);position:sticky;top:0;z-index:1000}
/* Anything the page jumps to must clear the now-genuinely-sticky masthead,
   or #built / #latest / #story land with their headings hidden behind it.
   Measured, not guessed: the bar is 50px wide-screen and 86px once the links
   wrap under the wordmark on a phone, so the offset has to change with it. */
[id]{scroll-margin-top:66px}
@media(max-width:640px){[id]{scroll-margin-top:100px}}
.mf-nav-in{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.6em 1.3em;gap:.6em;flex-wrap:wrap}
.mf-logo{display:flex;align-items:center;gap:.55em;text-decoration:none}
.mf-logo img{height:30px;width:30px;display:block}
/* Georgia, not the UI sans. The icon beside this is a serif capital M — the
   monogram and the wordmark are the same identity and must speak one language.
   Lowercase is deliberate and stays: the wordmark reads back as the domain,
   which is the whole address of a personal hub. The monogram is capitalised
   because a monogram is an initial; that is not a conflict, it is the normal
   relationship between the two. "Moment First" as two title-case words is a
   THIRD form and does not exist anywhere. */
.mf-logo b{color:var(--mf-text);font-family:Georgia,"Times New Roman",serif;
  font-weight:700;font-size:1.16em;letter-spacing:-.005em}
.mf-logo b span{color:var(--mf-copper)}
.mf-links a{color:var(--mf-text2);text-decoration:none;font-size:.9em;margin-left:1.1em;font-weight:500}
.mf-links a:hover{color:var(--mf-copper)}
main{display:block}
.mf-foot{background:var(--mf-panel);border-top:1px solid var(--mf-border);color:var(--mf-muted);text-align:center;padding:2.4em 1.3em;margin-top:0}
.mf-foot .fb{color:var(--mf-text);font-weight:700;font-size:1.05em;margin:0 0 .1em}
.mf-foot .fb span{color:var(--mf-copper)}
.mf-foot .ft{font-style:italic;color:var(--mf-text2);margin:0 0 1.1em}
.mf-foot a{color:var(--mf-copper);text-decoration:none;margin:0 .5em;font-size:.9em}
.mf-foot .fine{font-size:.8em;margin-top:1em;color:#5c6870}
/* article (field notes posts) */
.mf-article{max-width:680px;margin:0 auto;padding:3.4em 1.4em 1em}
.mf-article .eyebrow{color:var(--mf-copper);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-size:12px;text-align:center;margin:0 0 .7em}
.mf-article h1{font-size:2.3em;line-height:1.14;text-align:center;margin:0 0 .3em}
.mf-article .date{text-align:center;color:var(--mf-muted);font-size:.86em;letter-spacing:.5px;text-transform:uppercase;margin:0 0 2em}
.mf-article p{margin:0 0 1.15em;color:var(--mf-text)}
.mf-article blockquote{border-left:3px solid var(--mf-copper);margin:1.4em 0;padding:.2em 0 .2em 1.2em;color:var(--mf-text2);font-style:italic}
.mf-back{text-align:center;margin:2.6em 0 1em}.mf-back a{color:var(--mf-copper);text-decoration:none;font-weight:600}
@media(max-width:640px){.mf-links a{margin-left:.7em;font-size:.82em}.mf-article h1{font-size:1.7em}}