/* soyoki-shared.css — extracted verbatim from soyoki-shell-03.html; byte-identical across all pages. */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#000;overflow:hidden}
body{font-family:var(--serif);color:var(--ink);-webkit-font-smoothing:antialiased}
/* MARK OVERLAY TEST — David's marks, self-drawn over the nebula. Remove #marklayer + its script + the marks_data include to revert. */
  #gl:active{cursor:grabbing}
.chrome{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity 1.45s ease}   /* motion pass x0.69 delay / x0.81 duration (operator 2026-09-21 — the research page's ratified ratios, applied family-wide; curves untouched) */
.chrome.in{opacity:1}
.chrome > *{pointer-events:auto;text-shadow:var(--shadow)}
/* LEFT RAIL — one thin vertical spine: wordmark · nav · footer, starting top-left */
  .rail{position:absolute;left:0;top:0;bottom:0;width:48px;padding:18px 0 24px 20px;display:flex;flex-direction:column;align-items:flex-start;z-index:2}
.rail .rot{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;display:inline-block}
.rail .mark{font-family:var(--grotesk);font-size:11px;letter-spacing:0.42em;font-weight:500;text-transform:uppercase;color:var(--ink);text-decoration:none;margin-bottom:12px;cursor:pointer;transition:opacity .35s ease,color .9s cubic-bezier(.4,0,.2,1)}
.rail .mark:hover{opacity:0.6}
/* THE MARK STAYS (operator spec) — one wordmark per page, seated at body level ABOVE
   the veil (z210 > #xveil's 200), so it rides every crossing instead of dying with the
   chrome. soyoki-shared.js lifts the rail's own <a class="mark"> here at DOMContentLoaded
   (after the pages' parse-time click bindings, which ride the node) and leaves an
   invisible twin in the rail so the nav spacing never shifts. It never fades except
   home's first entrance (.sy-hide, released on chrome.in). Family face baked in — the
   per-page overrides target .rail .mark and no longer reach it. */
.mark.sy-loose{position:fixed;left:20px;top:18px;z-index:210;margin:0;line-height:normal;
  font-family:'Cheee',var(--grotesk);font-size:13px;letter-spacing:.1em;
  font-weight:500;text-transform:uppercase;color:var(--ink);text-decoration:none;
  cursor:pointer;text-shadow:none;
  transition:opacity .35s ease,color .9s cubic-bezier(.4,0,.2,1)}
.mark.sy-loose:hover{opacity:0.6}
.mark.sy-loose:focus-visible .rot{outline:1px solid var(--ink-dim);outline-offset:4px}
.mark.sy-loose .rot{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;display:inline-block;transform:rotate(180deg)}
.mark.sy-loose.sy-entering{transition:opacity 1.45s ease,color .9s cubic-bezier(.4,0,.2,1)}
.mark.sy-loose.sy-hide{opacity:0;pointer-events:none}
/* THE SLOT HOLDS ITS SIZE (2026-09-14). The wordmark cycle still runs on this hidden
   anchor and swaps Cheee cuts every 28s — and it alternates which of its two
   spans is IN FLOW, so every other turn the in-flow one changes cut. The cuts
   differ in width, and in vertical writing mode width IS height: measured 70px
   for oyen down to 46px for kingstreet, which walked the util links up to 23px
   toward a mark that no longer moves with them. Pinning the FACE here rather
   than a pixel height: !important beats the cycle's inline font-family, the
   slot keeps the home cut's metrics whatever the cycle does, and nothing has to
   be re-measured if the rail's size changes. */
.rail .mark.sy-slot{visibility:hidden;display:block;height:var(--sy-slot-h,70px);overflow:hidden}
.rail .mark.sy-slot .rot{font-family:'Cheee',var(--grotesk) !important}
@media (max-width:720px){ .mark.sy-loose{top:22px;left:22px} }
/* THE MARK SENSES ITS GROUND (operator 2026-09-13) — during a warm (cream) veil or the
   loader's cream sheet the mark's ink is grey so it reads on the light ground; over the
   dark veil it is cream. soyoki-shared.js sets the html class; the .9s colour ease above
   matches the veil's own pace. Targets .mark bare so it reaches the seated mark. */
html.sy-gnd-warm .mark{color:rgb(106,101,90)}
html.sy-gnd-dark .mark{color:rgb(236,231,221)}
/* signals home/back */
  .rail .mark .rot{transform:rotate(180deg)}
/* I-K-O-Y-O-S — bottom-to-top, tops-left */
  /* equal whitespace gap between wordmark + each nav element (mark margin-bottom == util gap) */
  .rail .util{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.rail .util a{font-family:var(--grotesk);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;transition:color .3s ease}
.rail .util a:hover{color:var(--ink)}
.rail .util a.nav-on{color:var(--ink);cursor:default;font-weight:600}
/* selected section — bold + bright, stays, not re-selectable */
  .rail .util a:focus-visible .rot, .rail .mark:focus-visible .rot{outline:1px solid var(--ink-dim);outline-offset:4px}
.rail .rfoot{margin-top:auto;font-family:var(--grotesk);font-size:8.5px;letter-spacing:0.13em;color:var(--ink-faint)}
.say{position:absolute;left:34px;bottom:38px;max-width:21em}
.say .eyebrow{font-size:10px;letter-spacing:0.34em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:16px}
.say p{font-size:clamp(15px,1.55vw,21px);line-height:1.42;letter-spacing:0.005em}
.say p .o{color:var(--ink-dim)}
.index{position:absolute;right:34px;top:50%;transform:translateY(0);width:340px;       /* rest: INDEX starts ON the selection line, projects cascade below */
    transition:transform 1.6s cubic-bezier(.45,.05,.2,1)}
/* engage ride — same curve as the divider */
  .index a{display:flex;justify-content:flex-end;align-items:baseline;width:fit-content;margin-left:auto;padding:11px 0;border-top:1px solid var(--hair);text-decoration:none;color:var(--ink);
    opacity:.34;transform:scale(.92);transform-origin:100% 50%;transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.8,.2,1)}
/* SPOTLIGHT baseline: dim + receded (dimensionality) */
  .index a.sel, .index a.lit, .index a:hover{opacity:1;transform:scale(1)}
/* lit + forward: committed (.sel), load cascade (.lit), or hovered */
  .index a:first-child{border-top:none;margin-bottom:6px}
.index a:last-child{border-top:1px solid var(--hair);margin-top:6px;padding-top:13px}
.index a:focus-visible{outline:1px solid var(--ink-dim);outline-offset:4px}
/* Right-anchored: only the code shows; on hover the copy expands and pushes the code left.
     CSS-transition PLACEHOLDER for the morph - replace with the WAAPI fork from SK-04 (timing/easing). */
  .index .nm{order:1;font-family:var(--grotesk);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;flex:none;white-space:nowrap}
/* Resting (collapsed) base only. The reveal is JS-driven — a spring forked from
     SK-04 (chrome-morph.ts SPRING_CURVE + reader-tools.ts panel-morph). No CSS
     transition here, so a WAAPI cancel/re-animate on fast hover stays clean. */
  .index .st{order:2;font-size:12px;color:var(--ink-dim);letter-spacing:0.01em;line-height:1.3;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;margin-left:0}
.index .tag{order:3;font-family:var(--grotesk);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);align-self:center;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;margin-left:0}
.index .dsc{order:3;font-size:12px;color:var(--ink-dim);letter-spacing:0.01em;line-height:1.3;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;margin-left:0}
/* index descriptor: Independent Studio */
  .index a.ixrow .st{transform:rotate(180deg);align-self:center;text-transform:uppercase;letter-spacing:0.16em}
/* SOYOKI — upside-down wordmark beat, all caps */
  /* (footer now lives in .rail as .rfoot) */
  .hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:9.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink-faint)}
.fallback{position:fixed;inset:0;display:none;place-items:center;text-align:center;color:var(--ink-dim);font-size:13px;padding:40px}
/* project divider — a hairline that draws across the page when a project is selected */
  .divider{position:absolute;right:0;height:1px;background:var(--hair);z-index:2;pointer-events:none;  /* lives INSIDE .index → the block's transform rides it up for free; top/left set per selection */
    transform:scaleX(0);transform-origin:right center;transition:transform 1.6s cubic-bezier(.45,.05,.2,1);will-change:transform}
/* origin:right → extends leftward to the page edge */
  .index a.sel{border-top-color:transparent}
.index a.is-soon{ opacity:.5; }   /* Coming-Soon placeholder — dimmed; collapses at rest + opens on hover like any row; click is guarded in JS (non-linking) */
/* selected row's OWN border hidden — the divider is the ONLY hairline; never render both */
  /* ---- nav-page copy: ONE template — anchored top-left (right of the rail), 2-column body, no scroll ---- */
  .pages{position:fixed;inset:0;z-index:7;pointer-events:none}   /* 3 -> 7 (operator 2026-09-19: 'the hairlines and the disks should fall behind the left rail content, especially sound and the player' — sk-04's own plane grammar, .pages 95 under chrome 100, expressed against this ladder). Everything page-owned at z3-6 — the fmark discs, the instruments' ray hairlines, scrims, pills — now sits UNDER the panel and its wash in one move, with no re-parenting and no per-page semantics (the re-parent route broke sk-02 and is recorded at the shared mover). Chrome stays 8; #authored and .idx-scrim are raised to the chrome band below. */
.pages::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1s ease;
    background:linear-gradient(90deg,rgba(0,0,0,0.66),rgba(0,0,0,0.34) 42%,rgba(0,0,0,0) 72%)}
.pages.show::before{opacity:1}
.page{position:absolute;left:96px;top:13vh;width:min(58em,64vw);--measure:250px;
    opacity:0;visibility:hidden;transform:translateY(16px);
    transition:opacity 1.3s ease, transform 1.3s cubic-bezier(.2,.8,.2,1), visibility 0s linear 1.3s;   /* slow, gentle materialize (paired with early REVEAL_AT) — motion pass x0.81 */
    text-shadow:var(--shadow)}
.page.active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}
.pg-head{margin-bottom:26px}
.pg-body{max-width:var(--measure)}
/* single tight column ≈ em-dash measure */
  .page--legal .pg-body{max-width:calc(var(--measure)*2 + 32px);column-count:2;column-gap:32px}
/* two columns at the same measure */
  .pg-eyebrow{display:none}
/* the highlighted nav label is the section label now */
  /* THE UTIL TITLES ARE CHEEE (operator 2026-09-17, and ACCEPTED as built the same
     evening — all five panels, not only the one-word ones. Two alternatives were on
     the table and both were declined: grotesk returning to Studio / Support /
     Contact / Privacy, and those four becoming one-word designations. Settled, not
     open; do not re-propose either.) The cut is `oyen` — the one
     the shells already declare, the one the wordmark slot's metrics are pinned to
     and the one the frost mask is cut from, so the family gains no new face here.
     WEIGHT DROPS TO 400: Cheee ships one weight, and 700 makes the engine
     synthesise a bold that thickens the strokes unevenly — the display face has
     its own weight built in. Kerning slightly tighter and leading tight, as
     asked; the SIZE is untouched, because clamp(18px,1.7vw,24px) is this
     element's own and .k3h1's clamp(28px,2.8vw,44px) is a different primitive. */
  .pg-title{font-family:'Cheee',var(--grotesk);font-weight:400;font-size:clamp(18px,1.7vw,24px);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin-bottom:16px}
.pg-meta{font-family:var(--grotesk);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 22px}
/* THE STANDFIRST SETS TIGHTER THAN THE BODY (operator 2026-09-17). 1.5 was the
   body's own leading applied to type two steps larger — the lead runs to 16px
   against .page p's 13px — and leading wants to tighten as size grows, not hold.
   At three lines on a 250px measure that read loose enough to break the block
   apart. 1.35 against the body's 1.6; sk-03's own #k3 body copy sets 14px/1.45,
   so this sits a step tighter again for a step larger, which is the relation the
   family already expresses.
   One element, one treatment, all six shells — the lead is the same standfirst
   everywhere, so this is not a home-local change. Dial: --lead-lh. */
.page .lead{font-size:clamp(13.5px,1.05vw,16px);line-height:var(--lead-lh,1.35);color:var(--ink);margin-bottom:20px;max-width:var(--measure)}
.page p{font-size:13px;line-height:1.6;color:var(--ink-dim);margin-bottom:12px;break-inside:avoid}
.page a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:1px}
.page a:hover{border-color:var(--ink-dim)}
.page a:focus-visible{outline:1px solid var(--ink-dim);outline-offset:3px;border-radius:1px}
.page h2{font-family:var(--grotesk);font-weight:600;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);margin:0 0 6px}
.page .sec{margin-bottom:18px;break-inside:avoid}
.crow{display:flex;flex-direction:column;gap:3px;padding:0 0 16px;break-inside:avoid}
.crow:last-child{padding-bottom:0}
.crow .k{font-family:var(--grotesk);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint)}
.crow .v{font-size:12.5px;color:var(--ink)}
.page--legal{top:10vh}
/* longer page starts a touch higher */
  .page--legal p{font-size:12px;line-height:1.5;margin-bottom:9px}
/* legal: minimum register, fits 2 cols */
  .page--legal h2{font-size:9.5px;margin-bottom:5px}
.page--legal .sec{margin-bottom:12px}
/* 720 -> 980 (operator 2026-09-21). THE FAMILY'S MOBILE BREAKPOINT IS 980 AND THIS
   FILE WAS THE ONE PLACE STILL SAYING 720. Every shell declares its own mobile block
   at max-width:980px — the fold-dot nav, the fmark canvas rotation, #k3's mobile seat,
   every JS branch is matchMedia('(max-width:980px)'). This block alone fired at 720,
   so across 721-980 — iPad portrait 768, iPad Air portrait 820, most unfolded
   foldables — the nav went mobile while the util PANELS kept their desktop seat
   (left:96px, width:min(58em,64vw)) and the panel dim never rose.
   Checked before moving, not assumed: of the seven selectors in this block, FOUR are
   dead — .topnav, .hint, .say and .foot have zero markup and zero JS queries across
   the whole deploy. .index is re-declared by every shell's own 980 block, which is
   later in source at equal specificity (0,1,0) and therefore wins. So what actually
   changes behaviour here is .page and the body dim, which are exactly the two that
   should have been following the nav all along.
   The sibling at line 43 (.mark.sy-loose) still reads 720 — left alone deliberately:
   it is a small-phone nudge off the rail's own 20/18 seat, not part of this split. */
/* ═══ HOLD THE COPY UNTIL THE PLATE LIFTS (operator 2026-09-22: "the copy...
   shouldn't appear until after the intro plate is fading out"). The arrival
   plate has transparent windows that revealed the copy behind it mid-dissolve
   — copy appearing inside the circles. soyoki-shared.js sets html.sy-hold-copy
   at once on mobile and clears it when #fmark-load is gone (or absent), so
   every shell's copy is pinned dark through the whole arrival and then plays
   its own entrance. One mechanism, all pages. ═══ */
@media (max-width:980px){
  html.sy-hold-copy #k3,html.sy-hold-copy #stopcopy,html.sy-hold-copy #sylock,
  html.sy-hold-copy #syworks,html.sy-hold-copy .rlab,html.sy-hold-copy #skmsel{
    opacity:0!important;transition:none!important}
}
/* ═══ THE TEMPLATE'S EDGE SCRIMS (operator mock 2026-09-22): a gradient at the
   top and bottom of the phone viewport, BEHIND the copy (fixed z3 — over the
   scenes at 0-2, under every positioned block: copy z5, chrome 8, menu 102).
   They do two jobs with one mechanism: ground the top-seated title and the
   works rows, and FADE the flowing text as it passes under the bottom edge —
   the operator asked for a bottom text fade "unless there is a better
   practice"; this is the practice (the track index's own is-scrolling grammar,
   page-scale). In-flow content (the stacked call-outs) is unpositioned, so it
   passes UNDER the scrims by paint order and fades at both edges for free.
   The ink is a token: dark shells default; the cream pages (sk-02, sk-04)
   override --sy-scrim-c with their own paper. */
html::before,html::after{content:'';position:fixed;left:0;right:0;z-index:3;pointer-events:none;display:none}
@media (max-width:980px){
  html::before{display:block;top:0;height:max(16vh,150px);
    background:linear-gradient(180deg,rgba(var(--sy-scrim-c,8,9,13),.74),rgba(var(--sy-scrim-c,8,9,13),0))}
  html::after{display:block;bottom:0;height:max(20vh,180px);
    background:linear-gradient(0deg,rgba(var(--sy-scrim-c,8,9,13),.8),rgba(var(--sy-scrim-c,8,9,13),0))}
}
@media (max-width:980px){ .topnav,.hint{display:none} .mark{top:22px;left:22px} .page{left:56px;right:22px;width:auto;column-count:1}
    .say{left:22px;right:22px;bottom:auto;top:28%;max-width:none}
    .index{left:22px;right:22px;width:auto;bottom:54px} .index a{opacity:.66;text-shadow:0 1px 10px rgba(0,0,0,.6)} .foot{left:22px;bottom:20px;transform:none;white-space:normal}
    body::before{content:'';position:fixed;inset:0;z-index:1;background:rgba(0,0,0,.38);opacity:0;transition:opacity .6s ease;pointer-events:none}   /* util-page dim (mobile): darkens the bright zoomed nebula so the chrome reads; above nebula(0), below chrome(2) */
    body:has(#pages.show)::before{opacity:1} }
@media (prefers-reduced-motion: reduce){            /* no reveal slide under reduced-motion */
    .page{transition:opacity .35s ease, visibility 0s linear .35s; transform:none}
    .page.active{transform:none}
    .index, .index a{transition:none}                 /* engage snaps, no ride/fade */
  }
/* SK-00 — "Our Approach": LEFT = 5-phase map (spotlight); RIGHT = header + sliding-tab row + body */
  .page--sk00{left:96px;top:51vh;width:min(60em,64vw);transition:opacity .5s ease}
.page--sk00.active{transform:none}
.sk00-cols{display:flex;gap:36px;align-items:flex-start;position:relative}
.sk00-conn-h{position:absolute;height:1px;background:var(--hair);transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.45,.05,.2,1), left .5s cubic-bezier(.45,.05,.2,1), width .5s cubic-bezier(.45,.05,.2,1);pointer-events:none}
/* tick: vertical snaps to the row (set after layout settles); horizontal slides */
  .sk00-conn-v{position:absolute;width:1px;background:var(--hair);transform:scaleY(0);transition:transform .6s cubic-bezier(.45,.05,.2,1), height .4s ease, top .4s ease;pointer-events:none;will-change:transform}
.sk00-conn-h.in{transform:scaleX(1)}
.sk00-conn-v.in{transform:scaleY(1)}
.sk00-nav{display:flex;flex-direction:column;flex:none;align-items:flex-start}
.sk00-nav .m-item{appearance:none;-webkit-appearance:none;background:none;border:0;padding:2px 0;margin-top:10px;text-align:left;font-family:var(--grotesk);font-weight:600;font-size:13px;color:var(--ink-dim);cursor:pointer;white-space:nowrap;letter-spacing:0.05em;line-height:1.5;opacity:0;transition:opacity .6s ease, transform .35s cubic-bezier(.2,.8,.2,1), color .3s ease}
/* dimmed by default; selected + hover brighten (spotlight) */
  .sk00-nav .m-item:first-child{margin-top:0}
.sk00-nav .m-item.in{opacity:1}
.sk00-nav .m-item:hover{color:#fff;transform:translateX(3px)}
.sk00-nav .m-item.on{color:#fff;transform:translateX(5px)}
/* content panel */
  .sk00-content{flex:1;max-width:30em;opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
.sk00-content.in{opacity:1;transform:translateY(0)}
.sk00-head{font-family:var(--grotesk);font-weight:600;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.sk00-tabs{position:relative;display:flex;flex-wrap:wrap;gap:18px;padding-bottom:10px;margin:0 0 18px}
.sk00-tab{appearance:none;-webkit-appearance:none;background:none;border:0;padding:2px 0;font-family:var(--grotesk);font-size:13px;line-height:1.5;letter-spacing:0.05em;color:var(--ink-dim);cursor:pointer;white-space:nowrap;transition:color .3s ease}
/* SAME metrics as the nav items → tab row sits exactly on the selected item's line */
  .sk00-tab:hover{color:#fff}
.sk00-tab.on{color:#fff}
.sk00-tab.is-gate::before{content:'\25C7\00A0';color:var(--ink-faint)}
.sk00-tab-ul{position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--hair);opacity:0;transition:left .35s cubic-bezier(.45,.05,.2,1), width .35s cubic-bezier(.45,.05,.2,1), opacity .3s ease}
.sk00-body{opacity:0;transition:opacity .35s ease}
.sk00-body.in{opacity:1}
.sk00-body p{font-family:var(--serif);font-size:clamp(15px,1.4vw,20px);line-height:1.5;color:var(--ink);margin:0 0 14px}
#xveil{position:fixed;inset:0;z-index:200;background:#08090d;opacity:0;pointer-events:none;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
#xveil.quick{transition-duration:.4s}
/* util (site-nav) cross — quick dip, not the .9s project dive; .instant below still wins the on-load snap */
#xveil.warm{background:#e7ddc9}
/* THE CROSS-NAV VEIL MATCHES THE GROUND ON MOBILE (operator 2026-09-22: "all
   the mobile links still have the fade warm and add cream bars"). Dozens of
   navigation calls pass tone 'warm' (the desktop bloom crossing) — on a phone
   that cream veil covers the top and iOS samples it for the chrome bars. Rather
   than re-tone every call site, the WARM veil takes the page's own scrim colour
   here: #08090d on the dark shells, and each cream page's own paper via its
   --sy-scrim-c override (sk-02/sk-04). So every mobile crossing arrives on a
   veil that matches the destination ground, and the bars stay right. Desktop
   keeps the cream bloom above 980. */
@media (max-width:980px){ #xveil.warm{background:rgb(var(--sy-scrim-c,8,9,13))} }
#xveil.on{opacity:1;pointer-events:auto}
#xveil.instant{transition:none}
@media (prefers-reduced-motion:reduce){#xveil{transition:none}}

/* THE PAGE COPY INSIDE #pages (2026-09-18, sk-04's ruling family-wide — the
   mover at the end of soyoki-shared.js): z-auto so the copy cannot lift above
   its article siblings (the exact trap sk-04's discs hit), pointer-events
   restored because .pages is pointer-events:none and the copy carries links. */
#pages > #k3, #pages > #stopcopy { z-index: auto; pointer-events: auto; }


/* THE CHROME-FAMILY STRAYS RIDE ABOVE THE PANEL (2026-09-19, with the .pages 3->7
   raise): the colophon and the works-index scrim sat at z6 — page-band by number,
   chrome by nature — and the raised panel would have buried them. sk-04's grammar:
   the colophon and index stay over the frost. */
html body #authored{z-index:8}   /* html body: the per-shell inline #authored{z-index:6} ties a bare id and wins on order */