/* ⚠ GENERATED by .audit/build-about-rail.mjs FROM index.html — DO NOT EDIT.
   This is the About Shane rail, its panel and the decode, exactly as they
   stand on index.html, for every other page. Edit them THERE and re-run
   `node .audit/build-about-rail.mjs`; `--check` reports drift. The block
   at the foot is the handful of global components the panel stands on,
   scoped under #abpanel so a page's own .btn or .sig is never touched. */

/* ═══ THE ABOUT RAIL, AND THE PANEL IT OPENS ══════════════════════════════
   Shane, 2026-09-11: "MAyeb make an about me section ... liek myabe a rail on
   teh screen so you scroll to the left of right and it give s an about em
   section."

   ⚠ IT IS A RAIL THAT OPENS A PANEL, NOT A SECOND SCROLL AXIS. His own
   instruction two messages earlier was "i dont wnat peopel scorllign on
   mobiel elft to right it looks less proffesional" — a page you can drag
   sideways is precisely the thing he ruled out. So the panel is
   position:fixed and slides in OVER the page: the document's scrollWidth
   never changes, which is the one number .audit/probe-mobile-overflow.mjs
   asserts across five pages at three widths, and the panel is
   overflow-x:hidden so it cannot register as a sideways-draggable pane
   either — that probe checks for those separately and it is right to.

   ⚠ THERE IS ALREADY AN ABOUT SECTION AND THIS DOES NOT REPLACE IT. §07
   carries the photograph, the origin line and the signature, and the nav
   still points at it. §07 is about the PRACTICE — why it runs the way it
   does. The panel is the man: the straight answers a visitor would otherwise
   have to spend the first five minutes of a call asking for, one tap away
   from every scroll position instead of buried at position seven of twelve.
   The one link between them runs panel → §07, never the reverse.

   It was dark on a cream page, to say "this is laid over the page". Since
   the light-story brief (2026-09-11, see .abin below) the reading surface is
   off-white and dark green is only its frame: the bar, the stats band and
   the foot. The scrim and the slide say "over the page" now.

   ⚠ THE RAIL SITS IN THE PADDING, NOT ON THE WORDS. It is ~36px wide against
   .wrap's 26px gutter, so it only earns its place where there is room beside
   the column. That is why the vertical form stops at 1080px — the same
   breakpoint where .links already gives way to the burger — and becomes a
   thumb-height pill in a bottom corner below it.

   ⚠ IT IS ON THE LEFT, AND IT WAS ON THE RIGHT UNTIL 2026-09-12. Shane: "move
   the about shane tab to the left side of the screen." The right edge had
   acquired a second tenant — since "we just have the flat vectored lines all
   through the green and white part" the route runs down the RIGHT margin for
   four sections (#consider, #where, #npn, #agent, all at x 1551 at 1790px) and
   the rail sits at 1745. Two fixed things stacked in one margin.

   ⚠ AND THE PANEL CAME WITH IT, WHICH IS NOT SCOPE CREEP. #abpanel is the
   drawer this button is the handle of: a handle on the left that pulls a 520px
   sheet in from the right is not a thing a reader can read. Everything mirrored
   with it — the border, the shadow, the slide, and the lit edge where the glass
   meets the page. If the tab was meant to move alone, it is four `left`s back.

   ⚠ THE PILL AT ≤1080px STAYED BOTTOM-RIGHT, AND THAT IS ON PURPOSE. .dflag —
   the draft marker — is position:fixed left:12px bottom:12px, so a pill moved to
   the bottom-left corner would sit on top of it. The rail is not a side rail at
   that width anyway; it is a thumb target in a corner, and this is the corner
   with nothing else in it.
════════════════════════════════════════════════════════════════════════════ */
#abrail{position:fixed;left:0;top:50%;z-index:88;transform:translate(0,-50%);
  display:flex;align-items:center;gap:12px;writing-mode:vertical-rl;
  padding:22px 10px;background:rgba(28,76,54,.88);backdrop-filter:blur(12px);
  border:1px solid var(--dline);border-left:0;border-radius:0 var(--rad) var(--rad) 0;
  color:#fff;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;line-height:1;cursor:pointer;
  transition:transform .55s cubic-bezier(.16,1,.3,1),visibility 0s,
             background .25s,border-color .25s,color .25s}
/* tucked = out of the hero. Ships ON in the markup and JS takes it off, so
   the rail never flashes over the headline before the first paintHeader. */
#abrail.tucked{transform:translate(-102%,-50%);visibility:hidden;
  transition:transform .55s cubic-bezier(.16,1,.3,1),visibility 0s linear .55s}
#abrail:hover{background:rgba(31,85,60,.96);border-color:rgba(157,236,199,.42);color:var(--mint)}
#abrail:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
/* the mark has to be turned back upright inside a vertical-rl box */
#abrail .rcoin{writing-mode:horizontal-tb;width:24px;height:24px;border-radius:50%;overflow:hidden;
  flex:none;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px var(--dline)}
#abrail .rcoin img{width:118%;height:118%;object-fit:contain}
@media(max-width:1080px){
  /* left:auto undoes the side rail's `left:0` above — without it the pill would
     be pinned to BOTH edges and stretched across the foot of the screen. */
  #abrail{top:auto;bottom:20px;left:auto;right:14px;transform:translate(0,0);
    writing-mode:horizontal-tb;padding:10px 17px 10px 11px;gap:10px;
    border-left:1px solid var(--dline);border-radius:999px;
    font-size:.57rem;letter-spacing:.2em;box-shadow:0 12px 34px rgba(28,76,54,.45)}
  #abrail.tucked{transform:translate(0,200%)}
  #abrail .rcoin{width:26px;height:26px}
}

#abscrim{position:fixed;inset:0;z-index:159;background:rgba(28,76,54,.58);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;cursor:pointer;
  transition:opacity .45s,background-color .45s,backdrop-filter .45s,visibility 0s linear .45s}
#abscrim.open{opacity:1;visibility:visible;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),background-color .45s,backdrop-filter .45s,visibility 0s}
/* ⚠ A PEEK IS FROSTED GLASS, NOT A BLACKOUT. Shane, 2026-09-11: "make the
   right side rail auto open when you move your mouse over it ... slowly open it
   up and you just move your mouse off of it for it to close. Think perfect,
   clean, like smooth glass feeling." A panel that opens because a pointer
   drifted over the rail cannot slam the page 58% dark behind it, so a hover
   open (.peek, set by the script) tints the page lightly and frosts it
   instead. A click still gets the dark scrim: that reader asked for the panel. */
#abscrim.peek{background:rgba(28,76,54,.14);backdrop-filter:blur(8px) saturate(1.15)}

/* ⚠ overflow-x:hidden IS LIT, NOT DECORATIVE. A 520px column of prose at a
   320px viewport with a long unbroken phone number in it would otherwise
   become a pane you can drag sideways, which is the same complaint in a
   smaller box. visibility:hidden when closed is doing a second job: it takes
   every link in here out of the tab order, so a keyboard user does not tab
   into a dialog that is not on screen. */
#abpanel{position:fixed;top:0;left:0;bottom:0;width:min(520px,100%);z-index:160;
  background:#f5f4ef;color:var(--forest);border-right:1px solid rgba(12,69,42,.28);
  transform:translateX(-100%);visibility:hidden;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  box-shadow:40px 0 100px rgba(28,76,54,.5);
  opacity:0;
  transition:transform .5s cubic-bezier(.5,0,.3,1),opacity .45s ease-in,visibility 0s linear .5s}
/* The glass: in slowly on a long settle (.85s, most of the travel in the first
   third, then a soft landing), out quicker so moving off feels answered. The
   fade rides the slide, so the edge arrives as a sheet rather than a wall. */
#abpanel.open{transform:translateX(0);visibility:visible;opacity:1;
  transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .55s ease-out,visibility 0s}
/* the peeking panel is the same panel on a lighter shadow, with a lit RIGHT
   edge where the glass meets the page — it was the left edge until the rail
   moved sides. Keyed off the scrim, which sits immediately before the panel in
   the markup, because the script marks the scrim alone as .peek. */
#abscrim.peek+#abpanel{box-shadow:24px 0 70px rgba(12,69,42,.22),inset -1px 0 0 rgba(255,255,255,.85)}
@media(prefers-reduced-motion:reduce){
  #abpanel,#abpanel.open{transform:none;transition:opacity .3s,visibility 0s linear .3s}
  #abpanel.open{transition:opacity .3s,visibility 0s}
}

/* Shane, 2026-09-11: "make this header white" — and later the same day the
   light-story brief turned it round: "Keep the top identity/header area dark
   green ... The header should act as a dark frame around the lighter content
   below." A white bar made sense over a dark panel; over an off-white one it
   is no frame at all. So it is the panel's dark green, near-solid (prose
   scrolling under a bar at .9 shows through as smudge), with the name in
   white, the caption in mint and the mark on its own white coin. */
.abtop{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;
  padding:16px 18px 16px 24px;background:rgba(12,69,42,.98);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(157,236,199,.14)}
.abtop .coin{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;background:#fff;
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(157,236,199,.3)}
.abtop .coin img{width:118%;height:118%;object-fit:contain}
.abtop .nm{flex:1;font-family:'Archivo';font-weight:700;font-size:1.04rem;letter-spacing:.02em;
  color:#fff;line-height:1.15}
.abtop .nm small{display:block;font-family:'JetBrains Mono',monospace;font-size:.55rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mint);font-weight:400;margin-top:4px}
.abx{width:42px;height:42px;flex:none;font-size:1.15rem;line-height:1;color:#fff;background:none;
  border:1px solid rgba(157,236,199,.3);border-radius:var(--rad);cursor:pointer}
.abx:hover{border-color:var(--mint);color:var(--mint)}

/* ⚠ THE TYPE IS BIGGER, AND ONLY THE TYPE. Shane, 2026-09-11, on this panel:
   "don't change the fonts actually, I like that, leave it as is ... rather
   let's make the fonts more readable, it's way too difficult to read, so maybe
   we need to shorten it and enlarge." So the faces, weights and colours are
   exactly what they were and every size went up: prose .95rem → 1.12rem (18px),
   the rules 1.04rem, the mono kickers and captions off the .5–.6rem floor they
   sat on. The copy was cut by more than half in the same pass (see the note in
   the markup), which is what pays for the bigger type in scroll length. */
.abin{padding:32px 28px 48px}
@media(max-width:430px){.abin{padding:26px 20px 40px}}
/* ⚠ LIGHT TO READ, DARK TO FRAME. Shane, 2026-09-11: "The entire modal is
   currently dark green from top to bottom ... I want dark green to become the
   FRAME / ACCENT color, not the main reading surface." So the story sits on a
   warm off-white and exactly three things stay dark: the bar at the top, the
   stats band, and the booking area at the foot. DARK, LIGHT, DARK, LIGHT,
   DARK, and nothing else alternates. Copy, order and type sizes are his and
   untouched; only the colour, the surfaces and the air between sections moved.
   ⚠ THE EYEBROWS AND RULE NUMBERS ARE --em2, NOT THE #6F9188 IN THE BRIEF.
   #6F9188 on #F5F4EF measures 3.1:1, under AA for 12px mono, and the same
   brief says no text below accessible contrast. --em2 is the same green at
   5.7:1. The body grey #5F706B is the brief's own value and measures 4.7:1. */
#abpanel .abh{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.74rem;
  letter-spacing:.16em;line-height:1.6;text-transform:uppercase;color:var(--em2);margin:56px 0 16px}
/* the opening line of his copy. It was a .abh first — a full sentence in .6rem
   mono caps wraps to two lines at 520 and three on a phone, which is a
   kicker doing a headline's job. Set as a headline instead. */
#abpanel .ablead{font-family:'Archivo';font-weight:700;font-size:1.62rem;line-height:1.24;
  letter-spacing:-.015em;color:var(--forest);margin:6px 0 24px}
#abpanel p{color:var(--muted);font-size:1.12rem;line-height:1.7;margin-bottom:16px;max-width:34em}
#abpanel p strong{color:var(--forest);font-weight:700}
/* ⚠ .abpull, .mv AND .sysgrid HAVE NO RULES IN THIS PANEL ANY MORE, ON
   PURPOSE. All three were here on the morning of 2026-09-12 — .abpull as the
   hairline on the one software sentence he asked to stand out, and the
   panel-scoped one-column / smaller-paragraph overrides for the Mission and
   Standard cards and the three "system behind the service" cards. By the
   afternoon he had deleted every element they matched: the cards for
   repeating the four rules, the system block and its pull line because "the
   page should now feel noticeably shorter … a simple text block is enough."
   A rule that matches nothing is a rule the next person restyles by mistake,
   so they came out with the markup. The global .mv / .sysgrid rules further
   down are untouched; if a card ever comes back here it needs the container-
   versus-viewport override again (a 520px panel never fires a viewport media
   query), and the old lines are in git at 6412a72 (the commit before this
   cut). */
#abpanel .sig{font-size:1.28rem;margin:26px 0 8px}
/* the portrait. On the homepage it is column one of a two-column grid; here it
   is a full-width plate at the head of the block, and `loading="lazy"` is right
   in a panel the way it was wrong in a section that could be scrolled to — the
   panel slides in on a deliberate click, not on arrival. */
#abpanel .abpshot{margin:52px 0 8px;aspect-ratio:16/10}
/* the proof band, the one strong interruption in the story. The cells are
   >div: the number and the label are divs too, and a bare `div` rule gave each
   of them the cell's padding, which is what stood the label so far under its
   number. */
.abmini{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(157,236,199,.18);
  border-radius:8px;overflow:hidden;margin:36px 0 8px}
.abmini>div{background:var(--forest);padding:26px 10px 24px;text-align:center}
.abmini .v{font-family:'Archivo';font-weight:700;font-size:1.95rem;color:#fff;letter-spacing:-.02em;line-height:1}
.abmini .l{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mint);margin-top:12px;line-height:1.45}
.abfacts{display:grid;gap:12px;margin:0;padding:0}
.abfacts li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  border:1px solid #d8ddd8;border-radius:8px;padding:20px;
  background:#fafaf7;color:var(--muted);font-size:1.04rem;line-height:1.62}
.abfacts .n{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.12em;
  color:var(--em2);padding-top:4px}
.abfacts b{display:block;color:var(--forest);font-weight:600;font-size:1.12rem;margin-bottom:6px;line-height:1.35}
.abdraft{border:1px dashed var(--faint);border-radius:8px;padding:20px 18px;margin-top:44px;
  background:rgba(29,124,80,.04)}
.abdraft ol{margin:6px 0 0;padding-left:19px;color:var(--muted);font-size:1rem;line-height:1.6}
.abdraft li{margin-bottom:11px}
.abdraft li b{color:var(--forest);font-weight:600}
/* the foot mirrors the bar and the band: a dark booking area to the panel's
   edges and down to its bottom. The negative margins are exactly .abin's
   padding, and .ablong is the last line of the same dark area. The headline
   and the line under it are the page's own closing CTA (the last section),
   not new copy. */
.abcta{display:grid;gap:10px;margin:60px -28px 0;padding:40px 28px 6px;background:var(--forest)}
.abcta .btn{width:100%}
#abpanel .abcta h3{font-family:'Archivo';font-weight:700;font-size:1.5rem;line-height:1.25;
  letter-spacing:-.015em;color:#fff;margin:0}
#abpanel .abcta p{color:var(--mint);font-size:1.04rem;line-height:1.6;margin:0 0 16px}
#abpanel .ablong{text-align:center;margin:0 -28px -48px;padding:18px 28px 44px;background:var(--forest);max-width:none;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.ablong a{color:var(--mint);text-decoration:underline;text-underline-offset:4px}
@media(max-width:430px){
  .abcta{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  #abpanel .ablong{margin:0 -20px -40px;padding-left:20px;padding-right:20px}
}

/* the door into the panel from §07, for the reader who is already there */
/* ⚠ min-height IS THE 44px TAP TARGET AND THE AUDIT CHECKS IT. Built with
   padding alone this measured 154x39 and .audit/audit-site.mjs failed it as a
   standalone control under 44px — correctly, because a 39px button is a
   thumb-miss on a phone. */
.abmore{display:inline-flex;align-items:center;gap:10px;margin-top:26px;background:none;
  border:1px solid var(--line);border-radius:var(--rad);padding:12px 18px;min-height:44px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--em2);transition:border-color .25s,background .25s}
.abmore:hover{border-color:var(--emerald);background:rgba(41,147,98,.06)}

@media print{#abrail,#abscrim,#abpanel,.abmore{display:none!important}}

/* ── the components the panel stands on, scoped to it ─────────────────── */
#abpanel .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;font-family:'Inter';font-weight:600;font-size:.9rem;letter-spacing:.02em;
  cursor:pointer;border:1px solid transparent;border-radius:var(--rad);
  
  transition:transform .3s,box-shadow .3s,background .3s,border-color .3s;
  transition-timing-function:var(--ezu);
  min-height:52px;text-align:center}
#abpanel .btn .ar{transition:transform .3s var(--ezu);display:inline-block}
#abpanel .btn:hover .ar{transform:translateX(4px)}
#abpanel .btn-mint{background:var(--mint);color:var(--void);box-shadow:0 10px 34px rgba(157,236,199,.22)}
#abpanel .btn-mint:hover{background:#aff0d2;transform:translateY(-2px)}
#abpanel .btn-ghostd{background:transparent;color:#fff;border-color:var(--dline)}
#abpanel .btn-ghostd:hover{border-color:var(--mint);color:var(--mint)}
#abpanel .tick{position:absolute;width:16px;height:16px;border:1px solid var(--mint);opacity:.7;z-index:3}
#abpanel .tick.tl{top:10px;left:10px;border-right:0;border-bottom:0}
#abpanel .tick.tr{top:10px;right:10px;border-left:0;border-bottom:0}
#abpanel .tick.bl{bottom:10px;left:10px;border-right:0;border-top:0}
#abpanel .tick.br{bottom:10px;right:10px;border-left:0;border-top:0}
#abpanel .abtshot{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--rad);box-shadow:0 30px 64px rgba(18,38,29,.2)}
#abpanel .abtshot img{width:100%;height:100%;object-fit:cover;object-position:56% center}
#abpanel .abtshot .tick{border-color:var(--mint);opacity:.8}
#abpanel .sig{font-family:'Archivo';font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--forest);margin-top:26px}
#abpanel .sig span{display:block;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:6px}
#abpanel .mv{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
#abpanel .mv .m{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:var(--rad);padding:24px;font-size:.9rem;color:var(--muted)}
#abpanel .mv .m h3{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--em2);margin-bottom:10px}
#abpanel .sysgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
#abpanel .sysgrid .s{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:var(--rad);padding:26px}
#abpanel .sysgrid .s .k{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--em2);margin-bottom:12px}
#abpanel .sysgrid .s h4{font-family:'Archivo';font-weight:700;font-size:1.14rem;line-height:1.3;
  letter-spacing:-.015em;color:var(--forest);margin-bottom:10px}
#abpanel .sysgrid .s p{font-size:.9rem;line-height:1.68;color:var(--muted)}
#abpanel .sysnote{margin-top:24px;font-size:1rem;line-height:1.7;color:var(--muted);max-width:66ch}
#abpanel .sysnote strong{color:var(--forest);font-weight:700}
#abpanel .draftonly{display:none!important}
#abpanel .dw.dw,#abpanel .dwg.dwg{display:inline;position:relative;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;margin:0;padding:0;border:0;background:none}
#abpanel .dw[data-s]{-webkit-text-fill-color:transparent}
#abpanel .dw[data-s]::after{content:attr(data-s);position:absolute;left:0;top:50%;
  transform:translateY(-50%);white-space:pre;pointer-events:none;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.92em;
  font-weight:500;font-style:normal;letter-spacing:inherit;
  color:inherit;-webkit-text-fill-color:currentColor;opacity:.62}
@media(prefers-reduced-motion:reduce){#abpanel .dw[data-s]{-webkit-text-fill-color:currentColor}#abpanel .dw[data-s]::after{content:none}}