/* LAR site, Phase 2 look (2026-10-23). Palette from the proposal: navy and steel from the logo,
   the original light grey page (his pick), sunset orange from the game art for Try.
   Layout: header bar; left menu column on desktop and sideways phones (his pick C1);
   any upright screen up to tablet size gets the Menu button and a drop-down instead (his ask).
   Old content markup (font tags, small tables) is kept and tamed here, not rewritten. */
:root {
  --navy: #13263a; --steel: #c9cdd1; --page: #bbbdbf;
  --ink: #1b2630; --muted: #3b4752; --link: #1d4f7a; --link-h: #660033; --sunset: #d9742c;
  --body: Verdana, "Segoe UI", Tahoma, Arial, sans-serif;
  --gut: 22px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0b141d; color: var(--ink); font: 15px/1.55 var(--body); }
img { max-width: 100%; height: auto; }
a { color: var(--link); font-weight: bold; }
a:hover { color: var(--link-h); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--sunset); outline-offset: 2px; }

/* header */
.top { background: var(--navy); border-bottom: 3px solid #0b141d; position: sticky; top: 0; z-index: 30; }
.top-in { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 14px;
          padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
.brand { display: block; line-height: 0; margin-right: auto; }
.brand img { height: 56px; width: auto; background: #5f6b75; border-radius: 4px; padding: 4px 10px; }
.cta { display: flex; gap: 10px; }
.btn { display: inline-block; text-decoration: none; font: bold 15px/1 var(--body); padding: 11px 18px; border-radius: 5px; white-space: nowrap; }
.btn.try { background: var(--sunset); color: #1b1206; border: 2px solid #ffd2a8; padding: 9px 16px; box-shadow: 0 3px 0 #7a3a0c; }  /* his ask 10-23: Try must look as clickable as Buy */
.btn.buy { border: 2px solid #e8eef3; color: #fff; padding: 9px 16px; }
.btn:hover { filter: brightness(1.1); }
.btn.try:hover { color: #1b1206; } .btn.buy:hover { color: #fff; }
.menu-btn { display: none; font: bold 15px/1 var(--body); color: #fff; background: transparent; border: 1px solid #8fa3b5; border-radius: 4px; padding: 10px 14px; }

/* frame: menu | content */
.frame { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 210px minmax(0, 1fr); background: var(--page); }
.side-nav { background: var(--steel); padding: 14px 14px 24px; border-right: 1px solid #9aa1a8; font-size: 13px; }
.side-nav .nav-h { margin: 14px 0 4px; font-weight: bold; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.side-nav .nav-h:first-child { margin-top: 0; }
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav li a { display: block; padding: 3px 0; color: var(--link); }
.manual-nav { background: #2a2f35; color: #e8eef3; border-radius: 4px; padding: 10px; margin-bottom: 8px; }
.manual-nav a, .manual-nav a span.f { color: #9cc8ee !important; }
.manual-nav table, .manual-nav tbody, .manual-nav tr, .manual-nav td { display: block; width: auto !important; background: none !important; padding: 0 !important; }

.content { min-width: 0; padding: 18px var(--gut) 28px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 22px; align-items: start; }
.content > .lar-main:only-child { grid-column: 1 / -1; }
/* no sidebar: the content takes the full width even when the copyright block follows it (build 2) */
.content:not(:has(> .lar-side)) > .lar-main { grid-column: 1 / -1; }
.lar-main { min-width: 0; }
.lar-main::after { content: ""; display: table; clear: both; }
/* the copyright block under each page: its text is light grey, made for the old black strip */
.lar-after { grid-column: 1 / -1; min-width: 0; font-size: 13px; background: #0b141d; color: #ccc; border-radius: 4px; padding: 10px 14px; margin-top: 8px; }
.lar-after p { margin: 4px 0; }
.lar-after a { color: #9cc8ee; }
.k-manual .lar-after { background: transparent; }
.lar-side { min-width: 0; text-align: center; font-size: 13px; }

/* old content markup, tamed */
.content p, .content td { font-size: 15px; }
.content span.fs-1 { font-size: 13px; }
.content span.fs-2 { font-size: 15px; }
.content span.fs-3 { font-size: 17px; }
.content span.fs-4 { font-size: 20px; }
.content table { max-width: 100%; }
.content td { vertical-align: top; }
.content img[align="left"] { float: left; margin: 4px 14px 8px 0; }
.content img[align="right"] { float: right; margin: 4px 0 8px 14px; }
.content table.r-data { display: block; overflow-x: auto; max-width: 100%; height: auto !important; }

/* manual pages keep their black look */
.k-manual .frame { background: #000; }
.k-manual .content { color: #f2f4f6; grid-template-columns: minmax(0, 1fr); }
.k-manual .content a { color: #9cc8ee; }

/* footer */
.foot { background: var(--navy); color: #c3cfd9; font-size: 13px; }
.foot-in { max-width: 1280px; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-right)) 22px max(16px, env(safe-area-inset-left)); }
.foot a { color: #e8eef3; }
.foot .stamp { color: #f0a066; }

/* narrower screens: the sidebar drops below the content */
@media (max-width: 1100px) {
  .content { grid-template-columns: minmax(0, 1fr); }
  .lar-side { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
}

/* phones held upright, and any upright screen up to tablet size: menu is a drop-down */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) {
  .frame { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: inline-block; }
  .side-nav { display: none; position: fixed; left: 0; right: 0; top: var(--bar-h, 72px); bottom: 0; overflow-y: auto;
              z-index: 25; border-right: 0; box-shadow: 0 6px 16px rgba(0,0,0,.5); font-size: 16px;
              padding: 14px max(18px, env(safe-area-inset-right)) 28px max(18px, env(safe-area-inset-left)); }
  .side-nav.open { display: block; }
  .side-nav li a { padding: 7px 0; }
  body.nav-open { overflow: hidden; }
  .brand img { height: 44px; padding: 3px 6px; }
  .content { --gut: 16px; padding: 14px max(var(--gut), env(safe-area-inset-right)) 22px max(var(--gut), env(safe-area-inset-left)); }
}

/* small phones: content tables stack, buttons go full width */
@media (max-width: 560px) {
  .top-in { flex-wrap: wrap; gap: 8px; }
  .brand { flex: 1 0 auto; }
  .brand img { height: 40px; }
  .cta { order: 3; width: 100%; }
  .cta .btn { flex: 1; text-align: center; padding: 10px 8px; }
  .content table, .content tbody, .content tr, .content td, .content th { display: block; width: auto !important; height: auto !important; }
  .content td, .content th { padding-left: 0 !important; padding-right: 0 !important; }
  .content td:has(> img[src$="bullet.gif"]:only-child) { display: none; }   /* stacked on phones, a bullet sat alone on its own line above its paragraph (owner, 23 Oct 5:11 PM) */
  .content table.r-data { display: block; }
  .content table.r-data tbody { display: table; width: 100%; }
  .content table.r-data tr { display: table-row; }
  .content table.r-data td, .content table.r-data th { display: table-cell; font-size: 13px; padding: 2px 4px !important; }
  .content table.r-data img { max-width: none; width: 64px; }
  .content img[align="left"], .content img[align="right"] { float: none; display: block; margin: 8px auto; }
  .content td[width="10"], .content td[width="8"] { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .btn { transition: filter .15s; } }

/* contact form (customer_service.html#contact) carries its own light inline box from Phase 1;
   in the Night colours it becomes a navy panel so its heading and labels stay readable */
html.theme-night #contact { background: #142638 !important; border-color: #26394d !important; color: #e3eaf1; border-radius: 6px; }
html.theme-night #contact b, html.theme-night #contact span.f, html.theme-night #contact label { color: #e3eaf1; }
html.theme-night #contact input[type="text"], html.theme-night #contact input[type="email"],
html.theme-night #contact select, html.theme-night #contact textarea { background: #f4f6f8; color: #0e1a26; border: 1px solid #5b6f83; border-radius: 3px; padding: 5px; }

/* ---------- Phase 2, build 2 (2026-10-23) ---------- */
/* step bar on the walkthrough and description pages: numbered; wraps on wide screens, one sideways-scrolling row on phones */
.p2-steps { margin: 4px 0 18px; }
.p2-steps-h { margin: 0 0 6px !important; font-size: 12px !important; font-weight: bold; text-transform: uppercase; letter-spacing: .05em; color: var(--t-muted, var(--muted)); }
.p2-steps ol { list-style: none; margin: 0; padding: 2px 2px 8px; display: flex; flex-wrap: wrap; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
               -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.p2-steps li { flex: 0 0 auto; scroll-snap-align: start; }
.p2-steps li > a, .p2-steps li > span { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 22px;
               font: bold 14px/1.2 var(--body); white-space: nowrap; text-decoration: none;
               background: var(--t-menu, var(--steel)); border: 1px solid var(--t-menurule, #9aa1a8); }
.p2-steps li > a { color: var(--t-menulink, var(--link)) !important; }
.p2-steps li > a:hover { border-color: var(--t-linkh, var(--link-h)); }
.p2-steps li[aria-current] > span { background: var(--sunset); border-color: var(--sunset); color: #1b1206; }
.p2-steps .n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
               background: rgba(0,0,0,.28); color: #fff; font-size: 13px; }
.p2-steps li[aria-current] .n { background: #1b1206; color: #fff; }
/* big Previous / Next at the bottom */
.p2-pager { clear: both; display: flex; gap: 12px; margin: 26px 0 18px; }
.p2-pager a { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; max-width: 360px;
              padding: 10px 18px; border-radius: 8px; text-decoration: none; font: bold 17px/1.25 var(--body);
              background: var(--t-strip, var(--navy)); color: var(--t-stripink, #fff) !important; border: 1px solid var(--t-menurule, #26394d); }
.p2-pager a small { font: bold 12px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--t-muted, #c3cfd9); }
.p2-pager a.next { margin-left: auto; text-align: right; align-items: flex-end; background: var(--sunset); color: #1b1206 !important; border: 2px solid #ffd2a8; box-shadow: 0 3px 0 #7a3a0c; }
.p2-pager a.prev { border: 2px solid #8fa3b5; box-shadow: 0 3px 0 #05090d; }
.p2-pager a.next small { color: #3b2410; }
.p2-pager a:hover { filter: brightness(1.12); }
.p2-pager a.prev small::before { content: "\2190\00a0"; }
.p2-pager a.next small::after { content: "\00a0\2192"; }
/* screenshots: on phones, walkthrough and description shots go full width (tap opens the full-size file) */
.content img.p2-shot { border: 1px solid #26394d; border-radius: 3px; }
@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) {
  .content img.p2-shot { float: none !important; display: block; width: 100%; height: auto; margin: 10px 0 14px !important; }
  .p2-pager a { font-size: 15px; padding: 10px 14px; }
}
/* phones: the step bar stays one row and scrolls sideways (site.js brings the current step into view) */
@media (max-width: 700px) { .p2-steps ol { flex-wrap: nowrap; } }
/* the printable charts: no menu column */
.k-print .frame { grid-template-columns: minmax(0, 1fr); }
.k-print .content { grid-template-columns: minmax(0, 1fr); }
@media print {
  .top, .foot, .side-nav, .menu-btn, .p2-steps, .p2-pager { display: none !important; }
  body, .frame, .content { background: #fff !important; color: #000 !important; }
  .frame { display: block; max-width: none; }
  .content a { color: #000 !important; }
}
/* stuff/project1/WebPlayer.html: its fixed 600px player box never pushes a phone sideways */
.lar-main div.content, .lar-main #unityPlayer { max-width: 100%; }
/* Sidebar "Get the game" box (his pick T1, 2026-10-23): the link reads as the same button as the header's. */
a.side-cta { display: inline-block; margin: 6px 0 4px; padding: 9px 16px; border-radius: 5px; background: var(--sunset); color: #1b1206 !important;
             border: 2px solid #ffd2a8; box-shadow: 0 3px 0 #7a3a0c; font: bold 15px/1 var(--body); text-decoration: none; white-space: nowrap; }
a.side-cta:hover { filter: brightness(1.1); }

/* ---------- Phase 2, build 3 (2026-10-23) ---------- */
/* H1: home picture band -- the old banner's battleship art (images/p2/home-band.jpg, made by tools/make-band.py),
   with the welcome line on it. ~180px on an upright phone, taller on tablets and desktop, capped so the text stays high. */
.p2-band { position: relative; display: flex; align-items: flex-end; height: clamp(180px, 23vw, 290px); margin: 0 0 14px;
           border-radius: 6px; overflow: hidden; border: 1px solid #26394d;
           background: #0f1d2b url(../images/p2/home-band.jpg) right center / cover no-repeat; }
.p2-band::before { content: ""; position: absolute; inset: 0;
           background: linear-gradient(to top, rgba(6,13,20,.86) 0, rgba(6,13,20,.55) 38%, rgba(6,13,20,0) 70%),
                       linear-gradient(to right, rgba(6,13,20,.55) 0, rgba(6,13,20,0) 60%); }
.p2-band .p2-band-t { position: relative; margin: 0 !important; padding: 0 clamp(16px, 3vw, 30px) clamp(14px, 2.4vw, 26px);
           max-width: 34em; font: bold clamp(21px, 2.6vw, 32px)/1.2 var(--body) !important; letter-spacing: .01em;
           color: #fff !important; text-shadow: 0 1px 2px #000, 0 0 12px rgba(0,0,0,.7); }
.p2-band .p2-band-t * { font: inherit !important; color: inherit !important; }
@media (orientation: landscape) and (max-height: 500px) { .p2-band { height: clamp(140px, 36vh, 200px); } }
.p2-band + br, .content img.p2-band-bullet { display: none; }   /* the welcome line moved onto the band: its bullet and the gap above it go */
/* M1: phone/tablet drop-down menu = accordion of the group titles (site.js makes the buttons; desktop column unchanged) */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) {
  .side-nav .nav-gh { margin: 0; border-bottom: 1px solid var(--t-menurule, #9aa1a8); }
  .side-nav .nav-g { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 50px; padding: 10px 4px;
                     background: none; border: 0; color: var(--t-head, var(--ink)); font: bold 16px/1.2 var(--body); letter-spacing: .03em;
                     text-transform: uppercase; text-align: left; cursor: pointer; }
  .side-nav .nav-g::after { content: ""; width: 9px; height: 9px; margin: 0 6px 4px 12px; border: solid currentColor; border-width: 0 2px 2px 0;
                     transform: rotate(45deg); transition: transform .15s; flex: 0 0 auto; }
  .side-nav .nav-g[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -4px; }
  .side-nav .nav-gl { padding: 2px 0 10px 14px; border-bottom: 1px solid var(--t-menurule, #9aa1a8); }
  .side-nav .nav-gl[hidden] { display: none; }
  .side-nav li a[aria-current="page"] { color: var(--sunset) !important; }
  .side-nav .manual-nav + .nav-h { margin-bottom: 8px; }
}
/* Build 3, manual on phones: the contents box behind a fold-out "Contents" button (site.js moves it out of the menu) */
.man-toc { grid-column: 1 / -1; margin: 0 0 14px; }
.man-toc-b { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 16px; border-radius: 6px; cursor: pointer;
             background: #1f3a56; color: #fff; border: 1px solid #3d5670; font: bold 16px/1.2 var(--body); }
.man-toc-b::after { content: ""; width: 8px; height: 8px; margin: 0 2px 4px 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.man-toc-b[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -4px; }
.man-toc #mantoc { margin-top: 8px; }
.man-toc .manual-nav { margin: 0; font-size: 16px; }
.man-toc .manual-nav a { display: inline-block; padding: 5px 0; }
.man-toc .manual-nav p { margin: 6px 0; }
/* wide data tables: scroll sideways inside their own box, ship column pinned (site.js adds p2-pin when the table overflows) */
.content table.r-data.p2-pin { overscroll-behavior-x: contain; box-shadow: inset -10px 0 8px -8px rgba(255,255,255,.25); }
.content table.r-data.p2-pin td:first-child,
.content table.r-data.p2-pin2 td:nth-child(2) { position: sticky; left: 0; z-index: 1; background: var(--pin-bg, var(--t-page, #0f1d2b)); }
.content table.r-data.p2-pin2 td:nth-child(2) { left: var(--pin1w, 64px); box-shadow: 6px 0 6px -4px rgba(0,0,0,.7); }
.content table.r-data.p2-pin:not(.p2-pin2) td:first-child { box-shadow: 6px 0 6px -4px rgba(0,0,0,.7); }
.k-manual .content table.r-data, .k-print .content table.r-data { --pin-bg: #000; }
.man-toc .manual-nav > table + p { display: none; }   /* the empty spacer paragraph under the contents box */
/* Item 4: the old <font> tags are spans now (extract.py convert_fonts; selectors rewritten by tools/font-css.py).
   Plain defaults = what the font tag itself did; the content/theme rules above and in themes.css outrank these. */
span.fs-1 { font-size: x-small; } span.fs-2 { font-size: small; } span.fs-3 { font-size: medium; } span.fs-4 { font-size: large; }
span.fs-5 { font-size: x-large; } span.fs-6 { font-size: xx-large; } span.fs-7 { font-size: xxx-large; }
span.c-008000 { color: #008000; } span.c-009300 { color: #009300; } span.c-00ff00 { color: #00ff00; } span.c-800080 { color: #800080; }
span.c-ff0000 { color: #ff0000; } span.c-ffff00 { color: #ffff00; } span.c-000000 { color: #000000; } span.c-cccccc { color: #cccccc; }
span.c-c0c0c0 { color: #c0c0c0; }
span.ff-verdana-arial { font-family: Verdana, Arial, sans-serif; } span.ff-verdana { font-family: Verdana, sans-serif; }
span.ff-times-new-roman { font-family: "Times New Roman", Times, serif; } span.ff-arial { font-family: Arial, sans-serif; } span.ff-tahoma { font-family: Tahoma, sans-serif; }
/* bold title lines made real headings (tools/p2-headings.json) */
.content .p2-h { margin: 4px 0 12px; font: bold 22px/1.25 var(--body); letter-spacing: .01em; color: var(--t-head, inherit); }
.content h3.p2-h { margin: 18px 0 8px; font-size: 18px; }
.content .p2-h span.f { font-size: inherit !important; }   /* the heading sets the size; the old font size no longer does */
.content .p2-h-center { text-align: center; }
.k-manual .content .p2-h { color: #f3eee8; }
@media (max-width: 560px) { .content .p2-h { font-size: 20px; } .content h3.p2-h { font-size: 17px; } }
/* Item 4 spacing: on small phones the old cellpadding is dropped (tables stack); text inside a coloured strip or a
   bordered box would then touch its edge, so the innermost such cells keep a small inner margin. Long link
   addresses (mediakits) may break so they never push the page sideways. */
@media (max-width: 560px) {
  .content table:not(.r-data)[bgcolor] td:not(:has(table)), .content table:not(.r-data) td[bgcolor]:not(:has(table)),
  .content table:not(.r-data):not([border="0"])[border] td:not(:has(table)) { padding: 6px 10px !important; }
}
@media (max-width: 700px), (orientation: portrait) and (max-width: 1024px) { .content a { overflow-wrap: anywhere; } }

/* ---------- Polish round 1 (2026-10-23, docs/POLISH-NOTES.md) ---------- */
/* Touch screens (phones, tablets, iPad): buttons, the Menu button, the drop-down menu's links and the form
   controls are at least 44px tall, so a finger can hit them. Mouse screens are unchanged. */
@media (pointer: coarse) {
  .btn, a.side-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .menu-btn { min-height: 44px; }   /* shown only where the drop-down is used (its display stays with the rules above) */
  .content input[type="text"], .content input[type="email"], .content input:not([type]), .content select { min-height: 44px; font-size: 16px; padding: 6px 8px; }
  .content input[type="submit"], .content input[type="button"], .content button:not(:has(img)) { min-height: 44px; padding: 8px 14px; }
  .content a.p2-lone { display: inline-block; padding: 12px 0; }   /* a text link standing alone on its line (site.js marks it) */
}
@media (pointer: coarse) and (max-width: 700px), (pointer: coarse) and (orientation: portrait) and (max-width: 1024px) {
  .side-nav li a, .side-nav .nav-h > a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; }
  .man-toc .manual-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 2px 0; }
}
/* phones held sideways keep the menu column: its links get finger height and 14px type there too */
@media (orientation: landscape) and (max-height: 500px) {
  .side-nav, .side-nav .nav-h, .manual-nav, .side-nav span.fs-1, .side-nav span.fs-2 { font-size: 14px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .side-nav li a, .side-nav .nav-h > a { display: flex; align-items: center; min-height: 44px; padding: 2px 0; }
  .side-nav .manual-nav a { display: inline-block; max-width: 100%; padding: 12px 0; }   /* long manual titles wrap inside the column */
  .side-nav .manual-nav a { min-width: 44px; }   /* PL3 (owner, 23 Oct 4:14 PM): the short "2 3 4" tutorial links get a full finger width; long titles are wider anyway */
}
/* phones (upright or sideways): no text under 14px */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {
  .lar-after, .foot, .lar-side, .side-nav .nav-h, .content span.fs-1, .content h5 { font-size: 14px; }
  .content table.r-data td, .content table.r-data th { font-size: 14px; }
  .p2-steps-h, .p2-steps .n, .p2-pager a small { font-size: 14px !important; }
  .content [style*="font-size: 10"], .content [style*="font-size:10"], .content [style*="font-size:11px"],
  .content [style*="font-size:12px"], .content [style*="font-size:13px"] { font-size: 14px !important; }
}
/* pictures with the old hspace="5" side margin: 100% wide plus 10px of margin stuck out of their box on phones */
.content img[hspace="5"] { max-width: calc(100% - 10px); }

/* testimonial quotes and the 1992 award line (owner, 23 Oct 5:04 PM): a thin outline so they stand apart from the text */
.lar-quote { border: 1px solid rgba(232, 238, 243, .55); border-radius: 6px; padding: 10px 12px; margin: 12px 0; }
/* a square bullet beside a page's top heading looked broken (owner, 23 Oct 5:06 PM): hide that one cell */
.lar-main td:has(+ td > h1:first-child, + td > h2:first-child) > img[src$="bullet.gif"] { visibility: hidden; }   /* keep the cell: hiding it shifted the table columns */

/* the page's menu name, small, top-left and at the end (owner, 23 Oct 5:19 PM): matches the step pages' label */
.page-tag { grid-column: 1 / -1; margin: 0 0 -10px; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: .05em; color: var(--t-muted, var(--muted)); }
.page-tag-end { margin: 0; order: 1; }
.content > .lar-after { order: 2; }   /* the end tag sits above the copyright strip, not under it */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) { .page-tag { font-size: 14px; } }
/* the old site's square bullets: the pages read as paragraphs now, not lists (owner, 23 Oct 5:20 PM). The image goes;
   its table cell stays (hiding cells shifted columns on desktop), so it collapses to the cell padding. */
.content img[src$="bullet.gif"] { display: none; }