/* ==========================================================
   PHFX 2026 - theme.css
   Every value the Site Editor controls: the Dark colours and sizes (:root),
   the Light colours (:root[data-theme="light"]) and one block per page
   (body[data-page="..."]). Written by the Site Editor (Update CSS) through
   /cgi-bin/siteTheme.cgi, which only accepts custom-property declarations.
   Layout rules live in site.css; the editor's own look in editor.css.
   ========================================================== */

:root {
  --rndLinks: "bg=heroDark,bodyTextColor=heroText,btnActiveBg=heroSlate,btnActiveBorder=heroSite,btnActiveText=heroText,btnBg=heroSlate,btnBorder=heroEdge,btnHoverBg=heroSlate,btnHoverBorder=heroHeat,btnHoverText=heroText,btnText=heroText,catLineColor=heroFoil,compassActive=heroSite,compassHover=heroText,compassOff=heroSite,ddBg=heroSlate,ddBorder=heroEdge,ddHoverBg=heroSlate,ddHoverBorder=heroSite,ddHoverText=heroText,ddOptHoverBg=heroSite,ddOptHoverText=heroSlate,ddText=heroText,dotColor=heroText,fmt1HoverBg=heroSlate,fmt1HoverBorder=heroSite,fmt1Text=heroSite,fmt2HoverBg=heroSlate,fmt2HoverBorder=heroFoil,fmt2Text=heroFoil,focusBg=heroDark,focusBtnActive=heroSite,focusBtnHover=heroHeat,focusBtnOff=heroFoil,gbActiveBg=heroSlate,gbActiveBorder=heroSite,gbActiveIcon=heroSite,gbBg=heroSlate,gbBorder=heroDark,gbHoverBg=heroSlate,gbHoverBorder=heroHeat,gbHoverIcon=heroText,gbIcon=heroText,hdrPhfxColor=heroSite,hdrTextColor=heroFoil,ipBg=heroSlate,ipBodyColor=heroText,ipBorder=heroSite,ipBottomColor=heroSite,ipDescColor=heroFaint,ipDescRuleColor=heroSite,ipLinkColor=heroSite,ipLinkHover=heroHeat,ipRuleColor=heroSite,ipTitleColor=heroSite,linkActive=heroFoil,linkHover=heroText,linkInactive=heroSite,match1HoverBg=heroSite,match1HoverText=heroSlate,match1Text=heroSite,match2HoverBg=heroFoil,match2HoverText=heroSlate,match2Text=heroFoil,menuActiveBg=heroSite,menuActiveText=heroFoil,menuBg=heroDark,menuBorderActive=heroSite,menuBorderColor=heroSite,menuHoverBg=heroFoil,menuHoverText=heroHeat,menuText=heroText,modeMoonColor=heroFoil,modeMoonHover=heroText,modeSunHover=heroHeat,pageTitleColor=heroText,panel=heroSlate,piBg=heroSlate,piBodyColor=heroText,piBottomColor=heroSite,piBtnColor=heroFaint,piBtnHover=heroHeat,piDescColor=heroFaint,piDescRuleColor=heroSite,piLinkColor=heroFoil,piLinkHover=heroHeat,piRuleColor=heroSite,piTitleColor=heroSite,ruleColor=heroSite,sbColor=heroSite,sbGuideColor=heroEdge,sbTriColor=heroSite,scBorder=heroSite,scFill=heroDark,scText=heroText,secTextColor=heroText,slider2Accent=heroFoil,slider2GuideBg=heroEdge,slider2GuideBorder=heroEdge,slider2Value=heroFoil,sliderAccent=heroSite,sliderGuideBg=heroEdge,sliderGuideBorder=heroEdge,sliderValue=heroText,stageFrameOne=heroSite,stageFrameTwo=heroFoil,stageText=heroDark,subBorderColor=heroSite,surface=heroSlate,surfaceBorder=heroSlate,swDivider=heroSite,swDividerActive=heroText,swDividerHover=heroText,swHandle=heroSite,swHandleActive=heroText,swHandleBorder=heroDark,swHandleBorderActive=heroDark,swHandleBorderHover=heroDark,swHandleHover=heroText,swHandleIcon=heroDark,swHandleIconActive=heroDark,swHandleIconHover=heroDark,syActiveBg=heroSlate,syActiveBorder=heroSlate,syActiveIcon=heroSite,syBg=heroSlate,syBorder=heroSlate,syHoverBg=heroSlate,syHoverBorder=heroSlate,syHoverIcon=heroHeat,syIcon=heroText,toolStageBg=heroDark";   /* written by Update CSS: which colours follow which Hero (lets the editor see links when opened from disk) */
  /* canvas */
  --contentW:      960px;  /* content column width */
  --extentsW:      32px;   /* space left and right of the content column (scroll bar gutter on the right) */
  --canvasW:       calc(var(--contentW) + 2 * var(--extentsW));
  --gutter:        var(--extentsW);
  --btnSize:       12px;   /* buttons: text size */
  --btnTracking:   5;      /* buttons: letter spacing, hundredths of an em */
  --btnPadY:       8px;    /* buttons: padding top/bottom */
  --btnPadX:       14px;   /* buttons: padding left/right */
  --btnRadius:     0px;    /* buttons: corner radius */
  --btnBorderW:    1px;    /* buttons: border thickness */
  --menuFillOpacity:      100;   /* header menu: panel fill opacity (%) */
  --menuHoverFillOpacity: 0;    /* header menu: hover / active row fill opacity (%) */
  --btnFillOpacity:      100;   /* buttons: inactive fill opacity (%) */
  --btnHoverFillOpacity: 100;   /* buttons: hover fill opacity (%) */
  --btnActiveFillOpacity: 100;  /* buttons: active (pressed) fill opacity (%) */
  --fmtFillOpacity:      100;   /* special buttons, Format boxes: inactive / hover fill opacity (%) */
  --fmtHoverFillOpacity: 100;
  --matchFillOpacity:      0;   /* special buttons, Match: inactive / hover fill opacity (%) */
  --matchHoverFillOpacity: 100;
  --fmt1Text: var(--heroSite);  --fmt1HoverBorder: var(--heroSite);  --fmt1HoverBg: var(--heroSlate);    /* special buttons: Format One */
  --fmt2Text: var(--heroFoil);  --fmt2HoverBorder: var(--heroFoil);  --fmt2HoverBg: var(--heroSlate);    /* Format Two */
  --match1Text: var(--heroSite);  --match1HoverBg: var(--heroSite);  --match1HoverText: var(--heroSlate);  /* Match One */
  --match2Text: var(--heroFoil);  --match2HoverBg: var(--heroFoil);  --match2HoverText: var(--heroSlate);  /* Match Two */
  --sliderAccent: var(--heroSite);  --sliderValue: var(--heroText);      /* control slider - primary */
  --slider2Accent: var(--heroFoil); --slider2Value: var(--heroFoil);     /* control slider - secondary */
  --sliderGuideBg: var(--heroEdge);  --sliderGuideBorder: var(--heroEdge);      /* control slider - primary: guide */
  --slider2GuideBg: var(--heroEdge); --slider2GuideBorder: var(--heroEdge);     /* control slider - secondary: guide */
  --ddBg: var(--heroSlate);  --ddBorder: var(--heroEdge);  --ddText: var(--heroText);                 /* drop down menu: inactive */
  --ddHoverBg: var(--heroSlate);  --ddHoverBorder: var(--heroSite);  --ddHoverText: var(--heroText);   /* drop down menu: hover */
  --ddOptHoverBg: var(--heroSite);   /* drop down menu: hovered / highlighted item background */
  --ddOptHoverText: var(--heroSlate);   /* drop down menu: hovered / highlighted item foreground */
  --swDivider: var(--heroSite);   /* image swipe: vertical divider */
  --swHandle: var(--heroSite);    /* image swipe: handle circle */
  --swHandleIcon: var(--heroDark);   /* image swipe: handle arrows */
  --swDividerActive: var(--heroText);
  --swDividerHover: var(--heroText);
  --swHandleActive: var(--heroText);
  --swHandleHover: var(--heroText);
  --swHandleBorder: var(--heroDark);
  --swHandleBorderActive: var(--heroDark);
  --swHandleBorderHover: var(--heroDark);
  --swHandleIconActive: var(--heroDark);
  --swHandleIconHover: var(--heroDark);
  --scFill: var(--heroDark);   /* swipe caption box fill */
  --scBorder: var(--heroSite);   /* swipe caption box border */
  --scText: var(--heroText);   /* swipe caption text */
  --ddSize:        12px;   /* drop down menu: text size */
  --ddPadY:        8px;    /* drop down menu: padding top/bottom */
  --ddPadX:        10px;   /* drop down menu: padding left/right */
  --ddRadius:      0px;    /* drop down menu: corner radius */
  --ddBorderW:     1px;    /* drop down menu: border thickness */
  --gbBg: var(--heroSlate);  --gbBorder: var(--heroDark);  --gbIcon: var(--heroText);                    /* graphic button: inactive */
  --gbHoverBg: var(--heroSlate);  --gbHoverBorder: var(--heroHeat);  --gbHoverIcon: var(--heroText);    /* graphic button: hover */
  --gbActiveBg: var(--heroSlate);  --gbActiveBorder: var(--heroSite);  --gbActiveIcon: var(--heroSite);  /* graphic button: active */
  --syBg: var(--heroSlate);  --syBorder: var(--heroSlate);  --syIcon: var(--heroText);                    /* symbol button: inactive */
  --syHoverBg: var(--heroSlate);  --syHoverBorder: var(--heroSlate);  --syHoverIcon: var(--heroHeat);    /* symbol button: hover */
  --syActiveBg: var(--heroSlate);  --syActiveBorder: var(--heroSlate);  --syActiveIcon: var(--heroSite);  /* symbol button: active */
  --gbIconSize:    23px;   /* graphic button: icon size */
  --gbPad:         7px;    /* graphic button: padding */
  --gbRadius:      0px;    /* graphic button: corner radius */
  --gbBorderW:     1px;    /* graphic button: border thickness */
  --syIconSize:    22px;   /* symbol button: icon size */
  --syPad:         0px;    /* symbol button: padding */
  --syRadius:      0px;    /* symbol button: corner radius */
  --syBorderW:     0px;    /* symbol button: border thickness */
  --menuBorderW:   1px;    /* drop down menu border width */
  --menuBorderColor: var(--heroSite);
  --menuBorderActive: var(--heroSite);   /* menu border while locked open by a click */
  --subBorderW:    1px;    /* sub-menu border width */
  --menuGapY:      0px;    /* menu panel offset from the header rule (+ = down) */
  --subGapX:       -1px;    /* sub-menu offset from the menu's right edge (- = overlap) */
  --menuGrow:      0.2;    /* seconds: menu grows down from the rule */
  --subGrow:       0.2;    /* seconds: sub-menu grows out of the menu edge */
  --menuPad:       0px;    /* menu top/bottom padding */
  --subPad:        0px;    /* sub-menu top/bottom padding */
  --menuRadius:    0px;    /* menu + sub-menu corner radius */
  --sbStyle:       line;   /* scroll bar style: stub | line | triAlign */
  --surfaceRadius:  0px;   /* surfaces: corner radius */
  --surfaceBorderW: 1px;   /* surfaces: border thickness */
  --sliderHandle: 16px;   /* control slider: handle (ball) diameter */
  --sliderGuideH: 6px;   /* control slider: guide thickness */
  --sliderGuideRadius: 6px;   /* control slider: guide corner radius */
  --sliderGuideBorderW: 1px;   /* control slider: guide border thickness */
  --swDividerW: 2px;   /* image swipe: vertical divider thickness */
  --swHandleD: 40px;   /* image swipe: handle diameter */
  --swHandleBorderW: 0px;   /* image swipe: handle border thickness */
  --scFillOpacity: 50;   /* swipe caption box: fill opacity (%) */
  --scBorderW: 1px;   /* swipe caption box: border thickness */
  --scRadius: 0px;   /* swipe caption box: corner radius */
  --scEdgeT: 8px;   /* swipe caption box: distance from the image's top edge */
  --scEdgeB: 8px;   /* swipe caption box: closest it may come to the image's bottom edge */
  --scEdgeL: 8px;   /* swipe caption box: distance from the image's left edge */
  --scEdgeR: 8px;   /* swipe caption box: distance from the image's right edge */
  --scFontSize: 12px;   /* swipe caption: font size */
  --scPadX: 8px;   /* swipe caption box: text padding, sides */
  --scPadY: 4px;   /* swipe caption box: text padding, top and bottom */
  --stageFrameW: 2px;   /* stage overlay frame line thickness */
  --surfaceInnerBorderW: 1px;   /* surfaces: interior border (divider / separator) thickness */
  --thumbW:        1px;    /* scroll bar thumb (line) width */
  --guideW:        1px;    /* scroll bar guide (rail) width */

  /* focused image (lightbox viewer) */
  --contentFadeIn:  0.6;   /* seconds: content area fades in when a page loads        */
  --contentFadeInEase:  0;   /* % ease on the fade-in: 0 = straight line, 100 = soft start + soft finish */
  --contentFadeOutEase: 0;   /* % ease on the fade-out (same scale) */
  --contentFadeOut: 0;   /* seconds: content area fades out when you follow a link  */
  --compassOff:    var(--heroSite);   /* header menu icon (Stacked Layers or compass): closed */
  --compassHover:  var(--heroText);   /* header menu icon: hover (menu shows) */
  --compassActive: var(--heroSite);   /* header menu icon: open, locked by a click */
  --compassSize:   96px;   /* flat size of the compass disc before it is tipped back */
  --compassRatio:  3;      /* ellipse ratio : 1 */
  --compassLens:   120;    /* camera distance in design units (smaller = wider angle, 0 = flat) */
  --compassSpin:   30;     /* degrees, on its own axis */
  --compassRoll:   15;     /* degrees, whole picture */
  --compassGap:    2.5;    /* ring cut, design units each side of a point */
  --compassTurn:   -90;    /* degrees it turns while the menu shows (- = counter-clockwise) */
  --compassSpeed:  0.6;    /* seconds */
  --layersSize:    48px;   /* Stacked Layers menu icon: drawing size (square) */
  --layersTiles:   4;      /* number of tiles, 3 to 5 */
  --layersLine:    2px;  /* line weight */
  --layersSpacing: 100;    /* line spacing (%): distance between the tiles, closed and open */
  --layersWidth:   120;    /* tile width (%): stretches the tiles sideways (aspect ratio) */
  --layersFade:    25;     /* tile fade: each tile below the top is this % less opaque than the one above */
  --layersSpeed:   0.2;    /* seconds to open / close */
  --layersNudge:   0px;    /* vertical nudge */
  --modeSunColor:  #a80d0d;   /* header Sun / Moon switch */
  --modeMoonColor: var(--heroFoil);
  --modeSunHover:  var(--heroHeat);   /* sun on hover */
  --modeMoonHover: var(--heroText);   /* moon on hover */
  --modeSwitch: hide;   /* header Sun / Moon switch: show | hide (hidden = the site stays Dark) */
  --modeSwSize:    32px;
  --modeSwSpeed:   0.8;    /* seconds */
  --modeBlendStart: 15;    /* % of the sun/moon trip where the colour blend starts */
  --modeBlendDur:  80;     /* % of the trip the colour blend takes */
  --modeFade:      0.4;    /* seconds: the whole site cross-fades between Dark and Light */
  --catLineColor: var(--heroFoil);   /* category underline (e.g. Motion index) */
  --catLineH:     1px;    /* underline thickness */
  --catLineRadius: 0px;   /* underline corner radius */
  --catLineGap:   8px;    /* distance below the category name */
  --catLineSpeed: 0.25;   /* seconds: slide + resize to the newly chosen category */
  --catLineEase:  60;     /* % ease on the slide: 0 = straight line, 100 = soft start + soft finish */
  --focusBg:      var(--heroDark);
  --focusBtnOff:    var(--heroFoil);   /* viewer arrows + X: inactive */
  --focusBtnHover:  var(--heroHeat);   /* hover   */
  --focusBtnActive: var(--heroSite);   /* pressed */
  --focusArrowSize: 48px;      /* previous / next arrow size */
  --focusCloseSize: 28px;      /* close (X) size             */
  --focusOpacity: 66;
  --focusPadX:    0px;    /* viewer text + controls: left/right padding */
  --focusPadY:    0px;    /* viewer text bars: top/bottom padding       */
  --focusSize:    92;    /* % of the window the picture may fill       */
  --focusFadeIn:  0.4;   /* seconds: viewer fades in on open           */
  --focusTrans:   0;   /* seconds: next / previous picture transition */
  --focusTransSplit: 50; /* % of that time the new picture spends fading in; the rest is the old one fading out */
  --focusFadeOut: 0.4;   /* seconds: viewer fades out on close         */

  /* site header:  [title row] [pad] [RULE] [pad]  then content header */
  --hdrH:          55px;   /* title row height            */
  --hdrRuleTop:    0px;    /* padding above the rule      */
  --hdrRuleH:      1px;    /* rule thickness              */
  --hdrRuleBottom: 8px;   /* padding below the rule      */
  /* Site Header Spacing */
  --hdrIconGap:   8px;    /* menu icon -> PHFX */
  --hdrDotGapL:   8px;    /* PHFX -> dot */
  --hdrDotGapR:   8px;    /* dot -> Phil Holland */
  --hdrDotScale:  100;    /* dot size, % of the header text */
  --hdrDotNudge:  0px;    /* dot vertical nudge (+ = down) */
  --secDotGapL:   3.5px;  /* content header breadcrumb: link -> dot */
  --secDotGapR:   3.5px;  /* content header breadcrumb: dot -> page */

  /* content header (section bar) */
  --secH:          48px;
  --secRuleW:      2px;    /* vertical rule (orange left bar) width */
  --secRadius:     0px;    /* content header corner radius */
  --piRuleW:       2px;    /* Page Info: left border thickness */
  --piBottomW:     0px;    /* Page Info: bottom border thickness */
  --piRadius:      0px;    /* Page Info: corner radius */
  --piPadX:        8px;   /* Page Info: side padding */
  --piPadY:        8px;   /* Page Info: top / bottom padding */
  --piTitleSize:   14px;   /* Page Info: title size */
  --piBodySize:    12px;   /* Page Info: body size */
  --piDescSize:    12px;   /* Page Info: description size */
  --piDescRuleW:   1px;    /* Page Info: description divider thickness */
  --piGap:         8px;   /* Page Info: space below the box */
  --piMinSpeed:    0.3;    /* Page Info: seconds to minimize / expand */
  /* Info Popup (Site Editor > Info Popup) */
  --ipBorderW:    1px;    /* border all the way round */
  --ipRuleW:      0px;    /* left rule thickness */
  --ipBottomW:    0px;    /* bottom rule thickness */
  --ipDescRuleW:  1px;    /* divider under the subtitle */
  --ipRadius:     0px;    /* corner radius */
  --ipTitleSize:  14px;
  --ipDescSize:   14px;
  --ipBodySize:   14px;
  --ipPadX:       32px;    /* side padding */
  --ipPadY:       24px;    /* top / bottom padding */
  --ipTitleGap:   8px;    /* space under the title */
  --piPopW:        540px;  /* Page Info pop-up (Info icon style): width */
  --piPopMaxH:     80;     /* Page Info pop-up: max height, % of the window (the body scrolls past it) */
  --ipFadeIn:     0.2;    /* Info Popup: fade-in seconds */
  --ipFadeOut:    0.2;    /* Info Popup: fade-out seconds */
  --shareHold:     0.4;    /* Copy Share URL: seconds "Copied!" stays */
  --shareFadeBack: 0.8;    /* Copy Share URL: seconds to fade back to the label */
  --secPadBottom:  8px;   /* padding below the content header (gap before the scrolling area) */

  /* text alignment + padding (left/right inset of the text entries) */
  --hdrPadX:       0px;    /* site header text edge padding      */
  --secPadX:       8px;   /* content header text edge padding   */

  /* site footer:  [pad] [RULE] [pad] [copyright row] */
  --ftrRuleTop:    0px;    /* padding above the rule      */
  --ftrRuleH:      1px;    /* rule thickness              */
  --ftrRuleBottom: 0px;    /* padding below the rule      */
  --ftrH:          47px;   /* copyright row height        */
  --ftrOpacity:    82;     /* footer: background opacity (%) over the content scrolling beneath it */
  --ftrBlur:       8px;    /* footer: blur of the content beneath the bar */
  --ftrDefocusH:   48px;   /* defocus strip above the footer: height */
  --ftrDefocusBlur: 5px;   /* defocus strip: blur */
  --ftrDefocusSolid: 25;   /* defocus strip: bottom part at full blur (%), fading out above it */

  /* colours */
  --bg:        var(--heroDark);
  --panel:     var(--heroSlate);
  --surface:       var(--heroSlate);   /* surfaces: fill */
  --surfaceBorder: var(--heroSlate);   /* surfaces: border */
  --toolStageBg:   var(--heroDark);   /* Tools page: preview stage background */
  --stageText:     var(--heroDark);   /* Tools page: stage frame tag text */
  --stageFrameOne: var(--heroSite);   /* Tools page: stage Format One frame */
  --stageFrameTwo: var(--heroFoil);   /* Tools page: stage Format Two frame */
  --heroSite:  #ebd081;   /* shared colour: Hero Foil Color */
  --heroText:  #ebebeb;   /* shared colour: Hero Text Color */
  --heroFaint: #b0b0b0;   /* shared colour: Hero Faint Color */
  --heroFoil:  #81ebeb;   /* shared colour: Hero Cold Color */
  --heroDark:  #171717;   /* shared colour: Hero Dark Color */
  --heroSlate: #1f1f1f;   /* shared colour: Hero Slate Color */
  --heroStone: #252525;   /* shared colour: Hero Stone Color */
  --heroEdge:  #2e2e2e;   /* shared colour: Hero Edge Color */
  --accent:    var(--heroSite);
  --text:      #e6e6e6;
  --hdrTextColor:  var(--heroFoil);   /* site header: Phil Holland */
  --hdrPhfxColor:  var(--heroSite);   /* site header: PHFX */
  --dotColor:      var(--heroText);   /* the "·" spacers (site header + content header) */
  --secTextColor:  var(--heroText);   /* content header text */
  --bodyTextColor: var(--heroText);   /* body text (captions) */
  --dimBody:   25;            /* dimmed body text: how far body text fades toward the background (%) */
  --textDim:   color-mix(in srgb, var(--bodyTextColor) calc((100 - var(--dimBody)) * 1%), var(--bg));   /* dimmed body text */
  --rail:      #3a3a3a;
  /* Color Scheme (Site Editor) */
  --ruleColor:     var(--heroSite);   /* header rule, footer rule, content header vertical rule, menu border */
  --sbColor:       var(--heroSite);   /* scroll bar thumb + rule stubs */
  --sbTriColor:    var(--heroSite);   /* scroll bar triangles */
  --sbGuideColor:  var(--heroEdge);   /* scroll bar guide (rail) */
  --pageTitleColor: var(--heroText);  /* 'you are here' page title in the content header */
  /* Page Info box (top of the scrolling content): colours */
  --piBg: var(--heroSlate);
  --piRuleColor: var(--heroSite);
  --piBottomColor: var(--heroSite);
  --piTitleColor: var(--heroSite);
  --piBodyColor: var(--heroText);
  --piDescColor: var(--heroFaint);   /* Page Info: description line */
  --piDescRuleColor: var(--heroSite);   /* Page Info: divider under the description */
  --piLinkColor: var(--heroFoil);
  --piLinkHover: var(--heroHeat);
  --piBtnColor: var(--heroFaint);
  --piBtnHover: var(--heroHeat);
  /* Info Popup (Site Editor > Info Popup) */
  --ipBg: var(--heroSlate);
  --ipBorder: var(--heroSite);
  --ipTitleColor: var(--heroSite);
  --ipDescColor: var(--heroFaint);
  --ipBodyColor: var(--heroText);
  --ipLinkColor: var(--heroSite);
  --ipLinkHover: var(--heroHeat);
  --ipRuleColor: var(--heroSite);
  --ipBottomColor: var(--heroSite);
  --ipDescRuleColor: var(--heroSite);
  --linkActive:    var(--heroFoil);   /* links: open / current */
  --linkHover:     var(--heroText);   /* links: on hover */
  --linkInactive:  var(--heroSite);   /* links: normal */
  --btnBg:          var(--heroSlate);   /* buttons: inactive */
  --btnBorder:      var(--heroEdge);
  --btnText:        var(--heroText);
  --btnHoverBg:     var(--heroSlate);   /* buttons: on hover */
  --btnHoverBorder: var(--heroHeat);
  --btnHoverText:   var(--heroText);
  --btnActiveBg:     var(--heroSlate);   /* buttons: active (pressed) */
  --btnActiveBorder: var(--heroSite);
  --btnActiveText:   var(--heroText);
  --thumb:     var(--heroEdge);
  --thumbHi:   #3a3a3a;
  --menuBg:    var(--heroDark);                 /* MENU dropdown background      */
  --subBorderColor: var(--heroSite);            /* MENU sub-menu border          */
  --menuText:       var(--heroText);            /* MENU items: inactive text     */
  --menuHoverBg:    var(--heroFoil);            /* MENU items: hover background  */
  --menuHoverText:  var(--heroHeat);
  --menuActiveBg:   var(--heroSite);            /* MENU items: open parent       */
  --menuActiveText: var(--heroFoil);

  --font:      "Roboto", system-ui, sans-serif;
  --hdrFontSize:  16px;        /* site header text   */
  --secFontSize:  14px;        /* content title      */
  --bodyFontSize: 12px;        /* content body (captions) */
  --ftrFontSize:  12px;        /* footer text        */
  /* Text Size - Additional */
  --menuLinkSize: 14px;   /* header menu + sub-menu link text */
  --menuArrowSize: 16px;   /* header sub-menu open arrow */
  --sliderValSize: 12px;   /* number shown beside control sliders */
  --panoLoadSize: 12px;   /* panorama viewer: loading label */
  --panoHintSize: 12px;   /* panorama viewer: drag hint */
  --panoHudSize: 12px;   /* panorama viewer: format / focal / orientation readouts, hide-info button */
  --panoMenuSize: 12px;   /* panorama viewer: context menu items */
  --fcTitleSize: 12px;   /* Frame & Focus tool: panel title */
  --fcLabelSize: 12px;   /* Frame & Focus tool: field labels */
  --fcTextSize: 12px;   /* Frame & Focus tool: sub-title, frame tags, spec rows, notes */
  --fcFocalSize: 12px;   /* Frame & Focus tool: focal-length text */
  --holdCodeSize: 64px;   /* error and hold pages: large code (403 etc.) */
  --holdTitleSize: 27px;   /* error and hold pages: title */

  /* added by the Site Editor */
  --heroHeat: #ff6a3d;

  /* Watermark (Site Editor > Watermark): the PNG logo over pictures */
  --wmScale: 16;        /* logo width, % of the picture's geometric mean sqrt(w*h) */
  --wmInset: 8px;       /* distance from the picture's edge */
  --wmOpacity: 100;     /* % */

  /* added by the Site Editor */
  --heroChill: #4a90c2;
  --heroBurn: #a80d0d;

  /* added by the Site Editor */
  --ipClose: hide;

  /* added by the Site Editor */
  --secBtnGap: 8px;
}

/* ---- Light mode: colours only (site editor: Color Scheme > Mode) ---- */
:root[data-theme="light"] {
  --rndLinks: "bg=heroDark,bodyTextColor=heroText,btnActiveBg=heroSlate,btnActiveBorder=heroSite,btnActiveText=heroText,btnBg=heroSlate,btnBorder=heroEdge,btnHoverBg=heroSlate,btnHoverBorder=heroHeat,btnHoverText=heroText,btnText=heroText,catLineColor=heroSite,compassActive=heroSite,compassHover=heroHeat,compassOff=heroText,ddBg=heroSlate,ddBorder=heroEdge,ddHoverBg=heroSlate,ddHoverBorder=heroSite,ddHoverText=heroText,ddOptHoverBg=heroSite,ddOptHoverText=heroSlate,ddText=heroText,dotColor=heroText,fmt1HoverBg=heroSlate,fmt1HoverBorder=heroSite,fmt1Text=heroSite,fmt2HoverBg=heroSlate,fmt2HoverBorder=heroFoil,fmt2Text=heroFoil,focusBg=heroDark,focusBtnActive=heroSite,focusBtnHover=heroHeat,focusBtnOff=heroFoil,gbActiveBg=heroSlate,gbActiveBorder=heroSite,gbActiveIcon=heroSite,gbBg=heroSlate,gbBorder=heroDark,gbHoverBg=heroSlate,gbHoverBorder=heroHeat,gbHoverIcon=heroText,gbIcon=heroText,hdrPhfxColor=heroSite,hdrTextColor=heroText,ipBg=heroSlate,ipBodyColor=heroText,ipBorder=heroEdge,ipBottomColor=heroSite,ipDescColor=heroFaint,ipDescRuleColor=heroEdge,ipLinkColor=heroFoil,ipLinkHover=heroHeat,ipRuleColor=heroSite,ipTitleColor=heroSite,linkActive=heroSite,linkHover=heroHeat,linkInactive=heroFoil,match1HoverBg=heroSite,match1HoverText=heroSlate,match1Text=heroSite,match2HoverBg=heroFoil,match2HoverText=heroSlate,match2Text=heroFoil,menuActiveBg=heroSite,menuActiveText=heroFoil,menuBg=heroDark,menuBorderActive=heroSite,menuBorderColor=heroHeat,menuHoverBg=heroHeat,menuHoverText=heroFoil,menuText=heroText,modeMoonColor=heroFoil,modeMoonHover=heroText,modeSunColor=heroHeat,modeSunHover=heroSite,pageTitleColor=heroText,panel=heroSlate,piBg=heroSlate,piBodyColor=heroText,piBottomColor=heroSite,piBtnColor=heroFaint,piBtnHover=heroHeat,piDescColor=heroFaint,piDescRuleColor=heroEdge,piLinkColor=heroFoil,piLinkHover=heroHeat,piRuleColor=heroSite,piTitleColor=heroSite,ruleColor=heroSite,sbColor=heroSite,sbGuideColor=heroEdge,sbTriColor=heroSite,scBorder=heroSite,scFill=heroDark,scText=heroText,secTextColor=heroText,slider2Accent=heroFoil,slider2GuideBg=heroEdge,slider2GuideBorder=heroEdge,slider2Value=heroFoil,sliderAccent=heroSite,sliderGuideBg=heroEdge,sliderGuideBorder=heroEdge,sliderValue=heroText,stageFrameOne=heroSite,stageFrameTwo=heroFoil,stageText=heroDark,subBorderColor=heroHeat,surface=heroSlate,surfaceBorder=heroSlate,swDivider=heroSite,swDividerActive=heroHeat,swDividerHover=heroHeat,swHandle=heroSite,swHandleActive=heroHeat,swHandleBorder=heroDark,swHandleBorderActive=heroDark,swHandleBorderHover=heroDark,swHandleHover=heroHeat,swHandleIcon=heroDark,swHandleIconActive=heroDark,swHandleIconHover=heroDark,syActiveBg=heroSlate,syActiveBorder=heroSlate,syActiveIcon=heroSite,syBg=heroSlate,syBorder=heroSlate,syHoverBg=heroSlate,syHoverBorder=heroSlate,syHoverIcon=heroHeat,syIcon=heroText,toolStageBg=heroDark";   /* written by Update CSS: which colours follow which Hero (lets the editor see links when opened from disk) */
  --compassOff: var(--heroText);
  --compassHover: var(--heroHeat);
  --compassActive: var(--heroSite);
  --modeSunColor: var(--heroHeat);
  --modeMoonColor: var(--heroFoil);
  --modeSunHover: var(--heroSite);
  --modeMoonHover: var(--heroText);
  --catLineColor: var(--heroSite);
  --focusBg: var(--heroDark);
  --focusBtnOff: var(--heroFoil);
  --focusBtnHover: var(--heroHeat);
  --focusBtnActive: var(--heroSite);
  --bg: var(--heroDark);
  --panel: var(--heroSlate);
  --surface: var(--heroSlate);
  --surfaceBorder: var(--heroSlate);
  --toolStageBg: var(--heroDark);   /* Tools page: preview stage background */
  --stageText: var(--heroDark);
  --stageFrameOne: var(--heroSite);
  --stageFrameTwo: var(--heroFoil);
  --heroSite:  #e2471b;
  --heroText:  #1c1c1c;
  --heroFaint: #8a8a8a;
  --heroFoil:  #1a6c8f;   /* shared colour: Hero Cold Color */
  --heroDark:  #f5f5f5;
  --heroSlate: #ebebeb;
  --heroStone: #dadada;
  --heroEdge:  #c6c6c6;
  --accent:    var(--heroSite);
  --text:      var(--heroText);
  --hdrTextColor: var(--heroText);   /* site header: Phil Holland */
  --hdrPhfxColor: var(--heroSite);   /* site header: PHFX */
  --dotColor: var(--heroText);   /* the "·" spacers */
  --secTextColor: var(--heroText);   /* content header text */
  --bodyTextColor: var(--heroText);   /* body text (captions) */
  --rail:      var(--heroEdge);
  --ruleColor: var(--heroSite);
  --sbColor: var(--heroSite);
  --sbTriColor: var(--heroSite);
  --sbGuideColor: var(--heroEdge);
  --pageTitleColor: var(--heroText);  /* 'you are here' title in the content header */
  --piBg: var(--heroSlate);
  --piRuleColor: var(--heroSite);
  --piBottomColor: var(--heroSite);
  --piTitleColor: var(--heroSite);
  --piBodyColor: var(--heroText);
  --piDescColor: var(--heroFaint);   /* Page Info: description line */
  --piDescRuleColor: var(--heroEdge);   /* Page Info: divider under the description */
  --piLinkColor: var(--heroFoil);
  --piLinkHover: var(--heroHeat);
  --piBtnColor: var(--heroFaint);
  --piBtnHover: var(--heroHeat);
  /* Info Popup (Site Editor > Info Popup) */
  --ipBg: var(--heroSlate);
  --ipBorder: var(--heroEdge);
  --ipTitleColor: var(--heroSite);
  --ipDescColor: var(--heroFaint);
  --ipBodyColor: var(--heroText);
  --ipLinkColor: var(--heroFoil);
  --ipLinkHover: var(--heroHeat);
  --ipRuleColor: var(--heroSite);
  --ipBottomColor: var(--heroSite);
  --ipDescRuleColor: var(--heroEdge);
  --linkActive: var(--heroSite);
  --linkHover: var(--heroHeat);
  --linkInactive: var(--heroFoil);
  --btnBg: var(--heroSlate);
  --btnBorder: var(--heroEdge);
  --btnText: var(--heroText);
  --btnHoverBg: var(--heroSlate);
  --btnHoverBorder: var(--heroHeat);
  --btnHoverText: var(--heroText);
  --btnActiveBg: var(--heroSlate);
  --btnActiveBorder: var(--heroSite);
  --btnActiveText: var(--heroText);
  --fmt1Text: var(--heroSite);  --fmt1HoverBorder: var(--heroSite);  --fmt1HoverBg: var(--heroSlate);
  --fmt2Text: var(--heroFoil);  --fmt2HoverBorder: var(--heroFoil);  --fmt2HoverBg: var(--heroSlate);
  --match1Text: var(--heroSite);  --match1HoverBg: var(--heroSite);  --match1HoverText: var(--heroSlate);
  --match2Text: var(--heroFoil);  --match2HoverBg: var(--heroFoil);  --match2HoverText: var(--heroSlate);
  --sliderAccent: var(--heroSite);  --sliderValue: var(--heroText);
  --slider2Accent: var(--heroFoil); --slider2Value: var(--heroFoil);
  --sliderGuideBg: var(--heroEdge);  --sliderGuideBorder: var(--heroEdge);
  --slider2GuideBg: var(--heroEdge); --slider2GuideBorder: var(--heroEdge);
  --ddBg: var(--heroSlate);  --ddBorder: var(--heroEdge);  --ddText: var(--heroText);
  --ddHoverBg: var(--heroSlate);  --ddHoverBorder: var(--heroSite);  --ddHoverText: var(--heroText);
  --ddOptHoverBg: var(--heroSite);
  --ddOptHoverText: var(--heroSlate);
  --swDivider: var(--heroSite);
  --swHandle: var(--heroSite);
  --swHandleIcon: var(--heroDark);
  --swDividerActive: var(--heroHeat);
  --swDividerHover: var(--heroHeat);
  --swHandleActive: var(--heroHeat);
  --swHandleHover: var(--heroHeat);
  --swHandleBorder: var(--heroDark);
  --swHandleBorderActive: var(--heroDark);
  --swHandleBorderHover: var(--heroDark);
  --swHandleIconActive: var(--heroDark);
  --swHandleIconHover: var(--heroDark);
  --scFill: var(--heroDark);   /* swipe caption box fill */
  --scBorder: var(--heroSite);   /* swipe caption box border */
  --scText: var(--heroText);   /* swipe caption text */
  --gbBg: var(--heroSlate);  --gbBorder: var(--heroDark);  --gbIcon: var(--heroText);
  --gbHoverBg: var(--heroSlate);  --gbHoverBorder: var(--heroHeat);  --gbHoverIcon: var(--heroText);
  --gbActiveBg: var(--heroSlate);  --gbActiveBorder: var(--heroSite);  --gbActiveIcon: var(--heroSite);
  --syBg: var(--heroSlate);  --syBorder: var(--heroSlate);  --syIcon: var(--heroText);
  --syHoverBg: var(--heroSlate);  --syHoverBorder: var(--heroSlate);  --syHoverIcon: var(--heroHeat);
  --syActiveBg: var(--heroSlate);  --syActiveBorder: var(--heroSlate);  --syActiveIcon: var(--heroSite);
  --thumb: var(--heroEdge);
  --thumbHi:   var(--heroEdge);
  --menuBg: var(--heroDark);
  --subBorderColor: var(--heroHeat);
  --menuText: var(--heroText);
  --menuHoverBg: var(--heroHeat);
  --menuHoverText: var(--heroFoil);
  --menuActiveBg: var(--heroSite);
  --menuActiveText: var(--heroFoil);
  --menuBorderColor: var(--heroHeat);
  --menuBorderActive: var(--heroSite);

  /* added by the Site Editor */
  --heroHeat: #ff6a3d;

  /* added by the Site Editor */
  --heroChill: #4a90c2;
  --heroBurn: #b8321a;
}

/* ---- page: still (written by the Site Editor, Page tab) ---- */
body[data-page="still"] {
  --thumbAspect: 1 / 1;
  --thumbsPerRow: 5;
  --gridGap: 8px;
  --thumbRadius: 0px;
  --stripGap: 0px;
  --shareButton: show;   /* show | hide  (Copy Share URL button in the content header) */

  /* added by the Site Editor */
  --rndPageLinks: "";
  --pageInfo: icon;
  --pageInfoLoad: collapsed;

  /* added by the Site Editor */
  --contentHeader: show;
}

/* ---- page: stillIndex (written by the Site Editor, Page tab) ---- */
body[data-page="stillIndex"] {
  --thumbAspect: 2 / 1;
  --thumbsPerRow: 3;
  --gridGap: 8px;
  --thumbRadius: 0px;
  --thumbSource: random;   /* random | default (galleryThumb.jpg / .avif / .png in the gallery folder) */
  --cardDim: 65;
  --cardTitleColor: #ebd081;
  --titleVisibility: hide;   /* show | hide | over  (hide = "Reveal Titles" button in the content header; over = Title Over Thumb, reveal effect always on) */
  --shareButton: show;

  /* added by the Site Editor */
  --rndPageLinks: "";
  --pageInfo: hide;
  --pageInfoLoad: open;

  /* added by the Site Editor */
  --contentHeader: show;
}

/* ---- page: panoramaIndex (written by the Site Editor, Page tab) ---- */
body[data-page="panoramaIndex"] {
  --thumbAspect: 2 / 1;
  --thumbsPerRow: 3;
  --gridGap: 8px;
  --thumbRadius: 0px;
  --cardDim: 65;
  --cardTitleColor: #ebd081;
  --titleVisibility: show;   /* show | hide | over  (hide = "Reveal Titles" button in the content header; over = Title Over Thumb, reveal effect always on) */
  --shareButton: show;
}

/* ---- page: toolPage (written by the Site Editor, Page tab) ---- */
body[data-page="toolPage"] {
  --surfaceGap: 8px;   /* space between surfaces (top, bottom, left, right) */
  --shareButton: show;

  /* added by the Site Editor */
  --rndPageLinks: "";
  --pageInfo: hide;
  --pageInfoLoad: open;
}

/* ---- page: insightsView (written by the Site Editor, Page tab) ---- */
body[data-page="insightsView"] {
  --artTitleColor: var(--heroText);
  --artSubColor: var(--heroFaint);
  --artDateColor: var(--heroFaint);
  --artHeadBg: var(--heroDark);
  --artHeadEdge: var(--heroEdge);
  --artHeadH: 41px;
  --artHeadRuleW: 0px;
  --artHeadBorderW: 0px;
  --artHeadBottomEdge: #ebd081;
  --artHeadBottomW: 1px;
  --artHeadPadX: 8px;
  --artHeadPadY: 0px;
  --artHeadGap: 0px;
  --artChapGap: 8px;
  --artBodyBg: var(--heroSlate);
  --artBodyEdge: var(--heroEdge);
  --artBodyBorderW: 0px;
  --artBodyPadX: 8px;
  --artBodyPadY: 8px;
  --shareButton: show;

  /* added by the Site Editor */
  --pageInfo: hide;
  --pageInfoLoad: open;

  /* added by the Site Editor */
  --rndPageLinks: "artTitleColor=heroText,artSubColor=heroFaint,artDateColor=heroFaint,artHeadBg=heroDark,artHeadEdge=heroEdge,artBodyBg=heroSlate,artBodyEdge=heroEdge";

  /* added by the Site Editor */
  --contentHeader: show;
}

/* ---- page: panoramaPage (written by the Site Editor, Page tab) ---- */
body[data-page="panoramaPage"] {
  --panoAspect: 3 / 2;
  --panoMetaGap: 16px;
  --thumbRadius: 0px;
  --shareButton: show;
}

/* ======================================================================
   Index / Page prototypes: Tools, Shop, Insights, Resources, Motion  (pages.js)
   ====================================================================== */

/* ---- page: toolsIndex (written by the Site Editor, Page tab) ---- */
body[data-page="toolsIndex"] {
  --toolsPerRow: 4;
  --toolGap: 8px;
  --toolMinH: 112px;
  --toolPad: 18px;
  --toolRadius: 8px;
  --toolHoverOutline: var(--heroHeat);   /* card outline on hover */
  --toolHoverOutlineW: 1px;
  --toolNameColor: var(--heroSite);
  --shareButton: show;

  /* added by the Site Editor */
  --rndPageLinks: "toolHoverOutline=heroHeat,toolNameColor=heroSite";
  --pageInfo: min;
  --pageInfoLoad: collapsed;

  /* added by the Site Editor */
  --contentHeader: show;
}

/* ---- page: shopIndex (written by the Site Editor, Page tab) ---- */
body[data-page="shopIndex"] {
  --shopPerRow: 3;
  --shopGap: 8px;
  --shopAspect: 1.6 / 1;
  --shopTitleColor: #ebd081;
  --shopAvailColor: #81ebeb;
  --shopHoverOutline: #ff6a3d;   /* card outline on hover */
  --shopHoverOutlineW: 1px;
  --shopCardRadius: 8px;   /* card corners */
  --shareButton: show;
}

/* ---- page: shopPage (written by the Site Editor, Page tab) ---- */
body[data-page="shopPage"] {
  --shopMediaPct: 54;
  --shopColGap: 28px;
  --shopThumbGap: 6px;
  --shopTitleColor: #ebd081;
  --shopAvailColor: #81ebeb;
  --shopBuyColor: #ebd081;
  --shareButton: show;
}

/* ---- page: insightsIndex (written by the Site Editor, Page tab) ---- */
body[data-page="insightsIndex"] {
  --entryPerRow: 3;
  --entryGap: 8px;
  --entryThumbAspect: 1.6 / 1;
  --entryPad: 14px;
  --entryCatColor: #81ebeb;
  --entryTitleColor: #ebd081;
  --entryHoverOutline: #ff6a3d;   /* card outline on hover */
  --entryHoverOutlineW: 1px;
  --entryCardRadius: 8px;   /* card corners */
  --shareButton: show;

  /* added by the Site Editor */
  --rndPageLinks: "";
  --pageInfo: hide;
  --pageInfoLoad: open;
}

/* ---- page: resourcesIndex (written by the Site Editor, Page tab) ---- */
body[data-page="resourcesIndex"] {
  --rsRowPadY: 10px;
  --rsRowPadX: 14px;
  --rsTitleColor: #ebd081;
  --rsPrivateColor: #eb1313;
  --shareButton: show;

  /* added by the Site Editor */
  --rsPerRow: 3;
  --rsGap: 8px;
  --rsCardPad: 18px;
  --rsTitleSize: 14px;
  --rsDescSize: 12px;
  --rsDescColor: #ebebeb;
  --rndPageLinks: "";
  --contentHeader: show;
  --pageInfo: hide;
  --pageInfoLoad: open;
}

/* ---- page: resourcesPage (written by the Site Editor, Page tab) ---- */
body[data-page="resourcesPage"] {
  --rpLinkGap: 10px;
  --rpMeasure: 544px;
  --rpPrivateColor: #eb1313;
  --shareButton: show;
}

/* ---- page: motionIndex (written by the Site Editor, Page tab) ---- */
body[data-page="motionIndex"] {
  --thumbAspect: 2 / 1;
  --thumbsPerRow: 3;
  --gridGap: 8px;
  --thumbRadius: 0px;
  --cardDim: 65;
  --cardTitleColor: #ebd081;
  --titleVisibility: hide;
  --shareButton: show;

  /* added by the Site Editor */
  --pageInfo: hide;
  --pageInfoLoad: open;

  /* added by the Site Editor */
  --rndPageLinks: "";

  /* added by the Site Editor */
  --contentHeader: show;
}

/* ---- page: motionPage (written by the Site Editor, Page tab) ---- */
body[data-page="motionPage"] {
  --mpVideoAspect: 16 / 9;
  --mpGap: 8px;
  --mpBoxPad: 8px;
  --mpLabelColor: var(--heroSite);
  --mpTitleColor: var(--heroSite);
  --shareButton: show;

  /* added by the Site Editor */
  --rndPageLinks: "mpLabelColor=heroSite,mpTitleColor=heroSite";
  --pageInfo: hide;
  --pageInfoLoad: open;
}

/* ---- page: adminAccess (written by the Site Editor, Page tab) ---- */
body[data-page="adminAccess"] {
  --shareButton: show;
  --pageInfo: hide;
  --pageInfoLoad: open;
}

/* ---- page: about (written by the Site Editor, Page tab) ---- */
body[data-page="about"] {
  --shareButton: hide;
  --pageInfo: hide;
  --pageInfoLoad: collapsed;

  /* added by the Site Editor */
  --abTopPad: 0px;
  --abGap: 8px;
  --rndPageLinks: "abTitlePhfx=heroFoil,abTitlePhil=heroText,abTitleBts=heroText,abTitleClients=heroText,abTitleCredits=heroText,abTitleOrgs=heroText,abTitleExternal=heroText";
  --contentHeader: hide;

  /* added by the Site Editor */
  --abIconScale: 135;
  --abOrgIcon: 22px;
  --abCreditIcon: 22px;
  --abBadgeIcon: 18px;

  /* added by the Site Editor */
  --abTextPct: 70.5;
  --abTitleColor: var(--heroText);

  /* added by the Site Editor */
  --abTitlePhfx: var(--heroFoil);
  --abTitlePhil: var(--heroText);
  --abTitlePhoto: #ebd081;
  --abTitleBts: var(--heroText);
  --abTitleClients: var(--heroText);
  --abTitleCredits: var(--heroText);
  --abTitleOrgs: var(--heroText);
  --abTitleExternal: var(--heroText);
}

/* ---- page: contact (written by the Site Editor, Page tab) ---- */
body[data-page="contact"] {
  --ctGraphic: var(--heroFoil);
  --ctTagColor: var(--heroFaint);
  --ctBorder: var(--heroEdge);
  --ctBg: var(--heroDark);
  --ctBorderW: 1px;
  --ctRadius: 0px;
  --ctPadY: 20px;
  --ctPad: 24px;
  --ctGlobeSize: 256px;
  --ctTagSize: 12px;
  --ctInfoSize: 12px;
  --ctSocialSize: 12px;
  --ctGap: 24px;
  --rndPageLinks: "ctGraphic=heroFoil,ctTagColor=heroFaint,ctBorder=heroEdge,ctBg=heroDark,ctHeadBg=heroEdge,ctHeadColor=heroFoil";
  --shareButton: hide;
  --pageInfo: hide;
  --pageInfoLoad: collapsed;

  /* added by the Site Editor */
  --contentHeader: hide;

  /* added by the Site Editor */
  --ctAnimSpeed: 1;
  --ctGfxPadT: 0px;
  --ctGfxPadR: 0px;
  --ctGfxPadB: 0px;
  --ctGfxPadL: 0px;

  /* added by the Site Editor */
  --ctBoxWidth: 66;
  --ctHeadH: 32px;
  --ctHeadSize: 14px;
  --ctHeadPadB: 20px;
  --ctHeadBg: var(--heroEdge);
  --ctHeadColor: var(--heroFoil);

  /* added by the Site Editor */
  --ctLineW: 1.25;
  --ctDotSize: 8;
}

/* ---- page: directoryList (written by the Site Editor, Page tab) ---- */
body[data-page="directoryList"] {
  --dlFont: mono;
  --dlDirColor: var(--heroSite);
  --dlFileColor: var(--heroText);
  --dlChevColor: var(--heroFaint);
  --dlLinkColor: var(--heroFaint);
  --dlLinkHover: var(--heroSite);
  --dlCreateColor: var(--heroFoil);
  --dlDangerColor: #eb1313;
  --dlRuleColor: var(--heroEdge);
  --dlRuleHover: var(--heroFoil);
  --dlHeadColor: var(--heroFaint);
  --dlFontSize: 12px;
  --dlLinkSize: 12px;
  --dlRowPad: 4px;
  --dlIndent: 20px;
  --dlRuleW: 1px;
  --dlLinkGap: 16px;
  --rndPageLinks: "dlDirColor=heroSite,dlFileColor=heroText,dlChevColor=heroFaint,dlLinkColor=heroFaint,dlLinkHover=heroSite,dlCreateColor=heroFoil,dlRuleColor=heroEdge,dlRuleHover=heroFoil,dlHeadColor=heroFaint";
  --shareButton: hide;

  /* added by the Site Editor */
  --contentHeader: show;
  --pageInfo: hide;
  --pageInfoLoad: open;
}

/* ---- page: login (written by the Site Editor, Page tab) ---- */
body[data-page="login"] {
  --lgGraphic: var(--heroFoil);
  --lgBorder: var(--heroEdge);
  --lgBorderW: 1px;
  --lgRadius: 0px;
  --lgLabelSize: 12px;
  --lgInputSize: 12px;
  --lgErrorSize: 12px;
  --lgBtnSize: 12px;
  --rndPageLinks: "lgGraphic=heroFoil,lgBoxBg=heroDark,lgBorder=heroEdge,lgHeadBg=heroEdge,lgHeadColor=heroFoil";
  --shareButton: show;
  --pageInfo: hide;
  --pageInfoLoad: collapsed;

  /* added by the Site Editor */
  --contentHeader: hide;

  /* added by the Site Editor */
  --lgGfxSize: 256px;
  --lgGfxPadT: 24px;
  --lgGfxPadR: 0px;
  --lgGfxPadB: 24px;
  --lgGfxPadL: 0px;

  /* added by the Site Editor */
  --lgAnimSpeed: 0.5;

  /* added by the Site Editor */
  --lgLineW: 2;
  --lgPointerSize: 6;
  --lgCenterDot: 8;

  /* added by the Site Editor */
  --lgRimOpacity: 1;
  --lgRingOpacity: 0.5;
  --lgRingLockedOpacity: 1;
  --lgDotOpacity: 1;
  --lgDotLockedOpacity: 1;

  /* added by the Site Editor */
  --lgRingGap: 3;

  /* added by the Site Editor */
  --lgBoxWidth: 33;

  /* added by the Site Editor */
  --lgFieldPadX: 24px;
  --lgBtnPadT: 24px;
  --lgBtnPadB: 24px;
  --lgBtnGap: 24px;

  /* added by the Site Editor */
  --lgHeadH: 32px;
  --lgHeadSize: 14px;
  --lgHeadPadB: 0px;
  --lgHeadBg: var(--heroEdge);
  --lgHeadColor: var(--heroFoil);

  /* added by the Site Editor */
  --lgBoxBg: var(--heroDark);
}

/* ---- page: home (written by the Site Editor, Page tab) ---- */
body[data-page="home"] {
  --contentHeader: hide;
  --shareButton: show;
  --pageInfo: show;
  --pageInfoLoad: collapsed;

  /* added by the Site Editor */
  --hmTopPad: 0px;
  --rndPageLinks: "";
}

/* ---- page: error403 ---- */
body[data-page="error403"] {
  --contentHeader: show;
  --shareButton: hide;
  --pageInfo: hide;
  --pageInfoLoad: open;
}

/* ---- page: comingSoon ---- */
body[data-page="comingSoon"] {
  --contentHeader: show;
  --shareButton: hide;
  --pageInfo: hide;
  --pageInfoLoad: open;
}

/* ---- page: underConstruction ---- */
body[data-page="underConstruction"] {
  --contentHeader: show;
  --shareButton: hide;
  --pageInfo: hide;
  --pageInfoLoad: open;
}

/* ---- page: clients (written by the Site Editor, Page tab) ---- */
body[data-page="clients"] {
  --clPerRow: 7;
  --clPad: 16px;
  --rndPageLinks: "";
  --contentHeader: show;
  --shareButton: show;
  --pageInfo: hide;
  --pageInfoLoad: open;
}