/* ============================================================
   STACKALITY — design tokens
   One file. The home page, Parallax, and every future subfolder
   read their palette and type from here.

   The palette is a depth stack, carried over from Parallax:
   far planes are cool and dark, near planes lift toward violet.
   Amber is progress. Ice is knowledge. The violet/azure ramp is
   for hero plates only.
   ============================================================ */
:root{
  /* --- depth stack (surfaces, back to front) --- */
  --far:#171426;
  --mid:#1E1A31;
  --near:#26213C;
  --lift:#2E284A;
  --edge:#3B3459;
  --edge-soft:#2F2949;

  /* --- ink --- */
  --ink:#F1EDFA;
  --dim:#9E96BC;
  --dimmer:#6F6790;

  /* --- signal --- */
  --signal:#FFB020;
  --signal-deep:#C97A00;
  --know:#7DD3FF;
  --good:#63E0A6;
  --warn:#FF6E6E;

  /* --- hero ramp (plates only, never body copy) --- */
  --violet:#6C4BF6;
  --orchid:#A855F7;
  --azure:#3B82F6;
  --plate-a:#5B3BE0;
  --plate-b:#8B4BF0;
  --plate-c:#3D6FE8;

  /* --- radii: generous and consistent --- */
  --r-s:6px;
  --r-m:12px;
  --r-l:20px;
  --r-xl:28px;
  --r-plate:40px;
  --r-pill:999px;

  /* --- the window-in-window frame ---
     An outer card of radius R with padding P holds an inner card
     of radius R - P. That subtraction is what makes the two look
     concentric instead of merely stacked. --------------------- */
  --frame:10px;
  --r-inner:calc(var(--r-xl) - var(--frame));

  /* --- shells and bars --- */
  --shell:1360px;
  --stack-gap:clamp(26px,3.4vw,46px);   /* the one gap between blocks */
  --art-bleed:20px;     /* hero graphic overhang; must exceed its drift */
  --parent-h:52px;      /* height of the Stackality bar above a sub-site */

  /* --- type --- */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;

  /* --- elevation --- */
  --shadow-card:0 24px 50px -28px rgba(0,0,0,.85);
  --shadow-float:0 30px 70px -24px rgba(0,0,0,.9);
  --shadow-plate:0 40px 90px -40px rgba(53,27,120,.9);
}

/* ============================================================
   PARENT BAR — the Stackality shell that sits above any
   sub-site's own header. Shared by every subfolder.
   ============================================================ */
.sk-parent{
  position:sticky;top:0;z-index:70;
  background:rgba(15,12,26,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--edge-soft);
  height:var(--parent-h);
}
.sk-parent-in{
  max-width:var(--shell);margin:0 auto;height:100%;
  padding:0 20px;gap:16px;
  /* three tracks rather than flex, so the socials are centred on the
     bar itself and not pushed around by the wordmark or nav width */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.sk-mark{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  flex:0 0 auto;color:var(--ink);
}
.sk-mark .glyph{
  width:20px;height:20px;flex:0 0 auto;border-radius:5px;
  background:linear-gradient(140deg,var(--plate-b),var(--plate-c));
  position:relative;
}
.sk-mark .glyph::before,
.sk-mark .glyph::after{
  content:"";position:absolute;left:3px;right:3px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.85);
}
.sk-mark .glyph::before{top:6px;opacity:.55}
.sk-mark .glyph::after{top:11px}
.sk-mark b{
  font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:-.03em;
}
.sk-mark b i{font-style:normal;color:var(--signal)}
/* Direct child of .sk-parent-in ONLY. As a descendant selector
   this also matched js/menu.js's tree, which lives in a panel
   inside .sk-parent, and laid a stacked menu out as a row. */
.sk-parent-in > nav{display:flex;gap:2px;justify-self:end;align-items:center;overflow-x:auto;scrollbar-width:none}
.sk-parent-in > nav::-webkit-scrollbar{display:none}
.sk-parent-in > nav a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:7px 11px;border-radius:var(--r-s);
  white-space:nowrap;transition:color .15s,background .15s;
}
.sk-parent-in > nav a:hover{color:var(--ink);background:var(--near)}
.sk-parent-in > nav a[aria-current="page"]{color:var(--ink);background:var(--lift)}
.sk-social{display:flex;align-items:center;gap:4px;justify-self:center}
.sk-social .soc{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:var(--r-s);
  color:var(--dim);text-decoration:none;
  transition:color .16s ease,background .16s ease;
}
.sk-social .soc svg{width:17px;height:17px;display:block;fill:currentColor}
.sk-social .soc:hover{color:var(--ink);background:var(--near)}

.sk-here{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dimmer);white-space:nowrap;
}
.sk-here b{color:var(--signal);font-weight:500}
@media(max-width:720px){
  .sk-social{display:flex;align-items:center;gap:4px;justify-self:center}
.sk-social .soc{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:var(--r-s);
  color:var(--dim);text-decoration:none;
  transition:color .16s ease,background .16s ease;
}
.sk-social .soc svg{width:17px;height:17px;display:block;fill:currentColor}
.sk-social .soc:hover{color:var(--ink);background:var(--near)}

.sk-here{display:none}
  .sk-parent-in > nav a{padding:7px 8px;font-size:10px}
}

/* ============================================================
   SELECTION - CHROME ONLY, NEVER PROSE

   Stray selection on a nav item or a button looks sloppy, and
   dragging a label is never something anyone meant to do. So the
   furniture is locked.

   THE LESSONS ARE NOT, AND MUST NOT BE. This site teaches. People
   copy a term to search it, a snippet into an editor, a takeaway
   into their notes - and a great many readers select text simply
   to hold their place while reading, which matters most to the
   people who find reading hardest.

   A site-wide lock was considered and rejected. It protects
   nothing - view-source, reader mode and devtools are all still
   there - while taking something real from the readers this is
   built for. The right-click guard is already described as a
   deterrent rather than a security measure; doubling the cost
   for none of the benefit is the wrong trade.

   The one narrow exception lives in css/sketchbook.css, where a
   drag turns a page, and even there a plain scrolling reader sits
   underneath specifically so the text can still be copied.
   ============================================================ */
.sk-parent, .sk-parent *,
.sk-foot, .sk-foot *,
.sk-sub, .sk-sub *,
.sk-menu, .sk-menu *,
.sk-top,
.sk-dialog nav, .sk-dialog .eyebrow,
nav, .eyebrow, .badge, .kind, .when,
button, .btn, .go, .tag, .chip, label,
summary, .sk-where, .sk-jump{
  -webkit-user-select:none;
  user-select:none;
}

/* ...but an input is furniture you must be able to select inside. */
input, textarea, select,
input *, textarea *{
  -webkit-user-select:text;
  user-select:text;
}

/* ============================================================
   THE MENU  -  one button, one panel, every width

   Built by js/menu.js. It replaced the row of nav links AND the
   two picker dialogs; see that file's header for why.

   The button carries the word MENU on desktop and drops to the
   icon alone when the bar gets tight. The search box stays out in
   the open on desktop and moves inside the panel on narrow
   screens, because search is the one thing worth a permanent slot
   and the one thing most annoying to go hunting for.
   ============================================================ */
.sk-burger{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--near, #26213C);
  border:1px solid var(--edge, #3B3459);
  border-radius:var(--r-s, 6px);
  padding:7px 12px;cursor:pointer;
  color:var(--dim, #9E96BC);
  justify-self:end;
  transition:color .15s,border-color .15s,background .15s;
}
.sk-burger:hover{color:var(--ink, #F1EDFA);border-color:var(--signal, #FFB020)}
.sk-burger-bars{display:grid;gap:3px;width:15px}
.sk-burger-bars i{
  display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease;
}
.sk-burger-word{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;
}
.sk-parent.menu-open .sk-burger{
  color:var(--ink, #F1EDFA);border-color:var(--signal, #FFB020);
}
.sk-parent.menu-open .sk-burger-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.sk-parent.menu-open .sk-burger-bars i:nth-child(2){opacity:0}
.sk-parent.menu-open .sk-burger-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- the panel ---------- */
.sk-menu{
  position:absolute;top:100%;right:max(14px, calc((100vw - var(--shell, 1360px))/2 + 20px));
  z-index:80;width:min(340px, calc(100vw - 28px));
  background:rgba(20,17,34,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--edge, #3B3459);
  border-radius:var(--r-l, 20px);
  box-shadow:var(--shadow-float, 0 30px 70px -24px rgba(0,0,0,.9));
  padding:10px;
  max-height:calc(100vh - var(--parent-h, 52px) - 20px);
  overflow-y:auto;
}
.sk-menu[hidden]{display:none}
/* The panel's copy of the search box, hidden on desktop where the
   bar already has one.

   SCOPED TO .sk-menu ON PURPOSE. The clone carries both classes -
   "sk-find sk-menu-find" - so a bare .sk-menu-find ties on
   specificity with .sk-find{display:flex} and only source ORDER
   decides. That order is not the same on every page: workshops
   load chrome.css alone, where the hide comes later and wins;
   root pages load tokens.css then site.css, where .sk-find comes
   later and the box appeared in BOTH places at once.

   One extra class settles it everywhere, whatever loads when. */
.sk-menu .sk-menu-find{display:none}

/* ---------- rows ---------- */
.sk-tree{display:block}
.sk-row{
  display:block;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim, #9E96BC);
  padding:11px 12px;border-radius:var(--r-s, 6px);
  transition:color .14s,background .14s;
}
a.sk-row:hover{color:var(--ink, #F1EDFA);background:var(--near, #26213C)}
a.sk-row[aria-current="page"]{color:var(--ink, #F1EDFA);background:var(--lift, #2E284A)}

/* a parent is a link PLUS a chevron - two controls, because touch
   has no hover and one control cannot mean two things */
/* The parent row's layout and the chevron are defined once, below,
   under "CHEVRON FIRST". An earlier copy lived here with the arrow
   38px wide on the right and rotating 90deg - it was superseded
   rather than deleted, which left two .sk-chev rules disagreeing
   and only order deciding. Gone now; there is one of each. */
.sk-row-name{
  text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim, #9E96BC);
  padding:11px 12px;border-radius:var(--r-s, 6px);
  transition:color .14s,background .14s;
}
.sk-row-name:hover{color:var(--ink, #F1EDFA);background:var(--near, #26213C)}
.sk-chev svg{transition:transform .18s ease}
.sk-branch.is-open > .sk-parent-row .sk-row-name{color:var(--ink, #F1EDFA)}

/* ---------- the submenu ----------
   Offset, so it reads as a branch rather than a continuation. */
.sk-sub-list{
  display:block;margin:2px 0 6px 10px;padding-left:10px;
  border-left:1px solid var(--edge-soft, #2F2949);
}
.sk-sub-list[hidden]{display:none}
.sk-sub-row{
  display:block;text-decoration:none;color:inherit;
  padding:9px 10px;border-radius:var(--r-s, 6px);
  transition:background .14s;
}
.sk-sub-row:hover{background:var(--near, #26213C)}
.sk-sub-row[aria-current="page"]{background:var(--lift, #2E284A)}
.sk-sub-row b{
  display:block;font-family:var(--disp);font-weight:700;font-size:14px;
  letter-spacing:-.01em;color:var(--ink, #F1EDFA);
}
.sk-sub-cat{
  display:inline-block;margin:2px 0 0;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--know, #7DD3FF);
}
.sk-sub-row small{
  display:block;margin:2px 0 0;
  font-family:var(--serif);font-size:12.5px;line-height:1.4;
  color:var(--dim, #9E96BC);
}



/* ------------------------------------------------------------
   CHEVRON FIRST, EVERYTHING ALIGNED

   The arrow sits BEFORE the word and points left, which is the
   direction the list actually appears. It used to sit hard right
   while pointing left, which said two things at once.

   Every row is indented by the arrow's width so the words line up
   in one column whether the row has an arrow or not. --sk-arrow
   is the single number that keeps them in step.
   ------------------------------------------------------------ */
.sk-tree{--sk-arrow:26px}

/* rows with no branch: indent past where the arrow would be */
a.sk-row{padding-left:calc(12px + var(--sk-arrow))}

.sk-parent-row{display:flex;align-items:stretch;gap:0;padding:0}
.sk-chev{
  flex:0 0 var(--sk-arrow);
  width:var(--sk-arrow);
  order:-1;                       /* belt and braces if markup moves */
  display:grid;place-items:center;
  margin-left:12px;
  background:none;border:0;cursor:pointer;
  color:var(--dimmer, #6F6790);
  border-radius:var(--r-s, 6px);
  transition:color .14s,transform .18s ease;
}
.sk-chev:hover{color:var(--signal, #FFB020);background:none}
.sk-chev svg{width:14px;height:14px;display:block;transform:none}
.sk-branch.is-open .sk-chev{color:var(--signal, #FFB020)}
.sk-branch.is-open .sk-chev svg{transform:translateX(-2px)}

.sk-row-name{
  flex:1 1 auto;
  padding-left:0;                 /* the arrow already supplies it */
}

/* ------------------------------------------------------------
   THE SUBMENU IS A FLYOUT, NOT AN ACCORDION

   The first version expanded the list INLINE, inside the panel.
   That is fatal for a hover menu and the reason it was unusable:
   opening Workshops pushed Tools seven rows down the page, so
   moving the mouse toward Tools meant leaving the branch - the
   list collapsed, every row snapped back up, and the cursor was
   suddenly over empty space with the menu closing underneath it.
   The target moved out from under the pointer that was chasing
   it.

   A flyout fixes it at the root: the parent rows NEVER MOVE. The
   list appears beside them, so Workshops stays exactly where it
   was while its contents are on screen, and travelling down to
   Tools crosses nothing but stationary rows.

   IT OPENS TO THE LEFT. The panel is pinned to the right edge of
   the window; a submenu opening rightward would go off-screen.

   NO GAP. There is an 8px visual offset between panel and flyout,
   and if that gap were real the pointer would cross dead space
   and the menu would close mid-travel. The flyout carries
   transparent padding of the same width instead, so the hover
   region is continuous even though the ink is not.
   ------------------------------------------------------------ */
@media(min-width:861px){
  /* the panel must not clip its own flyout */
  .sk-menu{overflow:visible}
  .sk-branch{position:relative}

  .sk-sub-list{
    position:absolute;
    right:100%;                 /* leftward: the panel hugs the right edge */
    top:-10px;
    width:min(330px, 42vw);
    margin:0;
    padding:10px 8px 10px 0;    /* the 8px is the hover bridge, not a gap */
    border-left:0;

    background:transparent;     /* the card is the inner box, below */
  }
  /* the visible card, inset by the bridge padding */
  .sk-sub-list::before{
    content:"";position:absolute;inset:0 8px 0 0;
    background:rgba(20,17,34,.97);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid var(--edge, #3B3459);
    border-radius:var(--r-l, 20px);
    box-shadow:var(--shadow-float, 0 30px 70px -24px rgba(0,0,0,.9));
    pointer-events:none;
  }
  .sk-sub-list > *{position:relative;z-index:1}
  .sk-sub-row{margin:0 14px}

}

/* ---------- narrow ---------- */
@media(max-width:860px){
  .sk-burger-word{display:none}         /* icon alone */
  .sk-burger{padding:8px 10px}
  .sk-parent-in > [data-sk-find]{display:none}   /* moves into the panel */

  /* The bar is a three-track grid (1fr auto 1fr) and the search box
     is the middle track. Hiding it leaves two children in three
     columns, which parks the button mid-bar with dead space to its
     right. Two tracks, and it sits hard right where it belongs. */
  .sk-parent-in{grid-template-columns:1fr auto}
  .sk-menu .sk-menu-find{display:block;margin:0 0 8px}
  .sk-menu{
    right:14px;left:14px;width:auto;
  }
}
/* ============================================================
   IMAGE PROTECTION
   Pairs with the right-click lock in shell.js: blocks drag-out on
   desktop and the long-press save sheet on iOS. A deterrent, not a
   security measure.
   ============================================================ */
img{
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}

/* ============================================================
   BACK TO TOP — fixed, every page, desktop and mobile
   ============================================================ */
.sk-top{
  position:fixed;z-index:75;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  width:48px;height:48px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--lift);
  border:1px solid var(--edge);
  color:var(--ink);
  box-shadow:var(--shadow-float);
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,
             background .16s ease,border-color .16s ease;
}
.sk-top.on{opacity:1;visibility:visible;transform:none}
.sk-top:hover{background:var(--signal);border-color:var(--signal);color:#170F00}
.sk-top svg{width:20px;height:20px;display:block}
@media(max-width:640px){
  .sk-top{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .sk-top{transition:opacity .01s}
}