/* Small additions to leemere.css for work.html. */
a:focus-visible, button:focus-visible { outline: 3px solid rgb(80,80,80); outline-offset: 2px; }
button.dropdown-toggle { font: inherit; color: inherit; }
.dropdown-body .dropdown-menu-item:focus { background-color: rgb(80,80,80); color: rgb(140,140,140); }

.xMainNavPic_ a { display: block; line-height: 0; }
.topic-thumb { float: right; margin: 0 0 8px 8px; }

#myDIV_ConceptMedia h1 { margin: 0 0 8px; }
#myDIV_ConceptMedia p { max-width: 42em; }
.video { position: relative; aspect-ratio: 16 / 9; max-width: 700px; margin: 12px 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Project pictures: one column, each as wide as the text column, but never
   taller than the window, so a tall cover is seen whole. */
.gallery { display: block; margin: 12px 0; }
/* Plain block layout, not flex: a flex column stretches each picture to the
   column's width, and Safari then squashes a tall one to fit the height
   limit. object-fit keeps the shape even if a browser stretches the box. */
.gallery img { display: block; width: auto; height: auto; max-width: 100%; max-height: 90vh; object-fit: contain; margin: 0 0 12px; }
.ortho-controls input { font: inherit; width: 9em; }
.ortho-controls button { font: inherit; }
.daily-line { font-size: 1.3em; }
.navUpper a.button, .navUpper .dropdown-menu-item { float: none; }
.navUpper a.button { color: rgb(0,0,0); font-family: Arial, sans-serif; font-size: 16px; text-decoration: none; padding: 5px 10px; }
.placeholder { font-style: italic; opacity: .75; }
.placeholder-image { width: 100%; max-width: 700px; height: auto; aspect-ratio: 7 / 4; object-fit: cover; margin: 12px 0; }
.label-5, .label-3, .label-2 { display: none; }
@media (max-width: 767px) { .label-full { display: none; } .label-5 { display: inline; } }
@media (max-width: 424px) { .label-5 { display: none; } .label-3 { display: inline; } }
@media (max-width: 374px) { .label-3 { display: none; } .label-2 { display: inline; } }

/* Picture grid: hover label sits inside its tile (no sideways scroll) and shows on keyboard focus too. */
#myDIV_NavMain .tooltip { position: relative; }
#myDIV_NavMain .tooltiptext { width: 100px; left: 0; bottom: 0; font-size: 13px; pointer-events: none; white-space: normal; overflow-wrap: anywhere; }
#myDIV_NavMain .tooltip:focus-within .tooltiptext { visibility: visible; }

/* Project area: same type family as the columns. */
#myDIV_ConceptMedia { font-family: Geneva, sans-serif; line-height: 1.5; }
#myDIV_ConceptMedia h1 { font-size: 28px; font-weight: normal; color: rgb(60,60,60); }
#myDIV_ConceptMedia .summary { color: rgb(100,100,100); margin-bottom: 8px; }
#myDIV_ConceptMedia p { margin-bottom: 12px; }
@media (max-width: 767px) {
	#myDIV_ConceptMedia h1 { font-size: 22px; }
	#myDIV_ConceptMedia { padding: 10px; }
}

/* Homepage work map */
.work-map { width: 100%; height: 380px; }
@media (max-width: 767px) { .work-map { height: 300px; } }
.work-map-title { font-family: Geneva, sans-serif; font-size: 18px; font-weight: normal; color: rgb(60,60,60); margin: 0 0 8px; }
#myDIV_WorkMap { float: left; }

/* offbrand ads placed on the site's own pages */
a.offbrand { text-decoration: none; }
a.offbrand:hover .offbrand-call, a.offbrand:focus .offbrand-call { text-decoration: underline; }
.site-offbrand-box { margin: 5px 0 24px; }
.site-offbrand-box .offbrand-rectangle { width: 100%; max-width: 300px; }
.site-offbrand-banner { clear: both; padding: 14px 0 0; max-width: 66%; }
@media (max-width: 1023px) { .site-offbrand-banner { max-width: none; } }


/* Long drop-downs (Projects has many items) scroll instead of running off the screen. */
#myDIV_ButtonNav .dropdown-body { max-height: 70vh; overflow-y: auto; z-index: 10; }

/* Work map toggle and visit counts */
.work-map-toggle { margin: 0 0 6px; }
.work-map-toggle .button { font: 14px Geneva, sans-serif; color: rgb(60,60,60); border: 1px solid rgb(180,180,180); cursor: pointer; }
.work-map-toggle .button[aria-pressed="true"] { background: rgb(80,80,80); color: rgb(235,235,235); }
.work-map-note { font: 13px Geneva, sans-serif; color: rgb(100,100,100); margin: 0 0 6px; min-height: 1em; }
.visit-counter { clear: both; padding: 4px 10px; font: 13px Geneva, sans-serif; color: rgb(120,120,120); }
.project-views { font-size: 13px; color: rgb(110,110,110); }

/* Layout: Ortho text | the work | the project column, with the work map
   running beneath the first two while the project column continues. */
#myDIV_AtWindowOpen > * { float: none; }
@media (min-width: 1024px) {
	#myDIV_AtWindowOpen {
		display: grid;
		grid-template-columns: 33.33% 41.67% 25%;
		grid-template-areas: "ortho middle right" "map map right";
		grid-template-rows: auto 1fr;
		align-items: start;
	}
	#myDIV_MyParagraph { grid-area: ortho; width: auto; }
	#myDIV_Middle { grid-area: middle; width: auto; }
	/* Once reached, the map stays in view while the project column keeps scrolling. */
	#myDIV_WorkMap { grid-area: map; padding: 0 15px; position: sticky; top: 8px; align-self: start; }
	#myDIV_TopicNav_1 { grid-area: right; width: auto; }
}
@media (max-width: 1023px) {
	#myDIV_AtWindowOpen { display: flex; flex-direction: column; }
	#myDIV_Middle { order: 1; }
	#myDIV_TopicNav_1 { order: 2; }
	#myDIV_MyParagraph { order: 3; }
	#myDIV_WorkMap { order: 4; padding: 0 10px; }
}
#myDIV_WorkMap { margin-top: 16px; }
#myDIV_WorkMap .work-map { height: 520px; }
.daily-text p { margin: 0 0 .8em; }

/* Banners: a wide picture, the title, and tags. */
.column-title { font: 16px Geneva, sans-serif; color: rgb(80,80,80); margin: 4px 0 10px; }
.work-banners { display: grid; gap: 14px; }
.work-banners-big { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.work-banner { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: rgb(60,60,60); }
.work-banner img { width: 100%; aspect-ratio: 231 / 100; object-fit: cover; background: #d2d2d2; }
.work-banner-title { font: 15px Geneva, sans-serif; text-indent: 0; }
.work-banner-tags { font: 12px Geneva, sans-serif; color: rgb(120,120,120); }
.work-banner:hover .work-banner-title, .work-banner:focus .work-banner-title { text-decoration: underline; }
#myDIV_TopicNav_1 .work-banner-title { font-size: 14px; }
#myDIV_WorkMap { float: none; }

.daily-text p { text-align: justify; }
/* Bottom half: the tall ad beside the map, the map, the wide ad beneath. */
.work-map-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.work-map-main { flex: 1 1 360px; min-width: 0; }
#myDIV_WorkMapAd { flex: 0 0 auto; }
/* Keep the chart inside its own space. */
.work-map-main, #myDIV_WorkMap .work-map { overflow: hidden; }
#myDIV_WorkMap { min-width: 0; }

/* Ortho's seven dials as fluorescent highlighter (stokes inks) under black text,
   shown only when a visitor turns them on. The key always shows its inks. */
body.ortho-dials-on .ow-phrases { background: #ffb300; }
body.ortho-dials-on .ow-functionWords { background: #6ce1ff; }
body.ortho-dials-on .ow-topics { background: #f9ff3f; }
body.ortho-dials-on .ow-names { background: #ff6cc4; }
body.ortho-dials-on .ow-commas { background: #ff6c6c; }
body.ortho-dials-on .ow-scareQuotes { background: #f927e1; }
body.ortho-dials-on .ow-quotation.ow-mark { background: #b3ff59; }
body.ortho-dials-on .ow.ow-quotation { text-decoration: underline 3px #b3ff59; text-underline-offset: 3px; }
body.ortho-dials-on .ow-mark { padding: 0 1px; }
body.ortho-dials-on .ow span[class^="ow-"] { color: #000; }
body.ortho-dials-on .daily-text .ow span, body.ortho-dials-on .ortho-out .ow span { border-radius: 2px; }
.ortho-key { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 10px; font: 12px Geneva, sans-serif; text-indent: 0; }
.ortho-key-ink { padding: 1px 4px; color: #000; }
.ortho-key-level { color: rgb(110,110,110); }
.ortho-key-ink.ow-quotation { background: #b3ff59; }

.ortho-key .ow-phrases { background: #ffb300; } .ortho-key .ow-functionWords { background: #6ce1ff; }
.ortho-key .ow-topics { background: #f9ff3f; } .ortho-key .ow-names { background: #ff6cc4; }
.ortho-key .ow-commas { background: #ff6c6c; } .ortho-key .ow-scareQuotes { background: #f927e1; }
.ortho-dials .ortho-key { display: none; }
body.ortho-dials-on .ortho-dials .ortho-key { display: flex; }
.ortho-dials-toggle { font: 12px Geneva, sans-serif; border: 1px solid rgb(180,180,180); cursor: pointer; margin: 2px 0 6px; }
.ortho-dials-toggle[aria-pressed="true"] { background: rgb(80,80,80); color: rgb(235,235,235); }

.copyright { font-size: 0.85em; margin-top: 1.5em; }

/* <picture> only wraps an <img> to offer WebP; it shouldn't change layout. */
picture { display: contents; }

/* Dark mode. A script in <head> sets data-theme on <html> from the visitor's
   choice, or else their system setting, before the page draws. The mid-grey
   text colours read on both backgrounds, so only the light surfaces and the
   darkest text change here. The fluorescent inks stay as they are. */
.theme-toggle { font: 14px Geneva, sans-serif; color: inherit; background: none; border: 1px solid rgb(180,180,180); cursor: pointer; padding: 2px 8px; margin: 4px 10px; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body { color: rgb(215,215,215); }
[data-theme="dark"] .backGround0, [data-theme="dark"] .backGround1, [data-theme="dark"] .boxColor1 { background-color: rgb(24,24,24); }
[data-theme="dark"] .main, [data-theme="dark"] .boxColor0 { background-color: rgb(30,30,30); }
[data-theme="dark"] .boxColor2, [data-theme="dark"] select { background-color: rgb(40,40,40); }
[data-theme="dark"] .dropdown-body { background-color: rgb(34,34,34); border-color: rgb(70,70,70); box-shadow: 1px 1px 15px 0 rgb(0,0,0); }
[data-theme="dark"] .dropdown-body .dropdown-menu-item { color: rgb(215,215,215); }
[data-theme="dark"] .navUpper a.button,
[data-theme="dark"] .navUpper a:visited,
[data-theme="dark"] .navRight a:visited,
[data-theme="dark"] p.relatedP { color: rgb(215,215,215); }
[data-theme="dark"] #myDIV_ConceptMedia h1,
[data-theme="dark"] .work-map-title,
[data-theme="dark"] .work-banner,
[data-theme="dark"] .column-title,
[data-theme="dark"] .work-map-toggle .button,
[data-theme="dark"] .ortho-dials-toggle { color: rgb(200,200,200); }
[data-theme="dark"] #myDIV_ConceptMedia .summary,
[data-theme="dark"] .work-map-note { color: rgb(160,160,160); }
[data-theme="dark"] .work-map-toggle .button, [data-theme="dark"] .ortho-dials-toggle { background: rgb(40,40,40); border-color: rgb(90,90,90); }
[data-theme="dark"] .work-map-toggle .button[aria-pressed="true"],
[data-theme="dark"] .ortho-dials-toggle[aria-pressed="true"] { background: rgb(200,200,200); color: rgb(24,24,24); }
[data-theme="dark"] .work-banner img { background: rgb(50,50,50); }
[data-theme="dark"] .shhh a { color: rgb(30,30,30); }
[data-theme="dark"] a:focus-visible, [data-theme="dark"] button:focus-visible { outline-color: rgb(200,200,200); }
[data-theme="dark"] .navUpper .button, [data-theme="dark"] .theme-toggle { color: rgb(200,200,200); }
[data-theme="dark"] .theme-toggle { border-color: rgb(110,110,110); }

/* Fluid type: sizes grow smoothly with the window between a phone and a wide
   screen, instead of jumping at breakpoints. The clock banner keeps its own
   fixed sizes, since its digits are measured to fit. */
:root {
	--text: clamp(15px, 14px + 0.25vw, 18px);
	--text-small: clamp(12px, 11.5px + 0.15vw, 14px);
	--title: clamp(22px, 17px + 1.3vw, 36px);
	--heading: clamp(16px, 14px + 0.4vw, 20px);
}
#myDIV_MyParagraph, #myDIV_ConceptMedia, #myDIV_TopicNav_1 { font-size: var(--text); }
#myDIV_ConceptMedia h1 { font-size: var(--title); }
.column-title, .work-map-title { font-size: var(--heading); }
.work-banner-tags, .work-map-note, .visit-counter, .project-views { font-size: var(--text-small); }

/* Page transitions: moving between pages cross-fades the content while the
   clock and menu stay put. Browsers without View Transitions just change
   page as before; visitors who ask for less motion get no animation. */
@view-transition { navigation: auto; }
#myDIV_Timer { view-transition-name: clock; }
#myDIV_ButtonNav { view-transition-name: menu; }
::view-transition-old(root) { animation: 160ms ease-out both vt-out; }
::view-transition-new(root) { animation: 240ms ease-out both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

/* The right column, narrowed by a click on the map. */
.column-filter { position: sticky; top: 0; z-index: 3; margin: 0 0 8px; padding: 6px 10px; font: var(--text-small) Geneva, sans-serif;
	background: rgb(235,235,235); border-bottom: 1px solid rgb(190,190,190); }
.column-filter .button { font: inherit; margin-left: 6px; border: 1px solid rgb(180,180,180); cursor: pointer; }
[data-theme="dark"] .column-filter { background: rgb(24,24,24); border-color: rgb(70,70,70); }
[data-theme="dark"] .column-filter .button { background: rgb(40,40,40); color: rgb(200,200,200); border-color: rgb(90,90,90); }

/* Motion as you scroll: pictures and entries fade up as they come into view.
   Pure CSS, in browsers that support scroll-driven animation; none at all for
   visitors who ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.work-banner, .column-entry, .xMainNavPic_, .gallery img {
			animation: scroll-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
		@keyframes scroll-in { from { opacity: 0; transform: translateY(16px); } }
	}
}

/* Readable contrast: greys that were too pale for small text, darkened in
   light mode and lightened in dark mode so text reads at 4.5:1 or better. */
.placeholder { opacity: 1; }
.navRight a:link, .navRight h2 a { color: rgb(92,92,85); }
.mainLink0 a, .work-banner-title, .work-banner-tags, .navRight .placeholder { color: rgb(92,92,92); }
[data-theme="dark"] .navRight p span, [data-theme="dark"] .navRight .placeholder,
[data-theme="dark"] .work-banner-tags, [data-theme="dark"] .mainLink0 a { color: rgb(165,165,165); }
[data-theme="dark"] .navRight a:link, [data-theme="dark"] .navRight h2 a { color: rgb(185,185,175); }

/* Text only screen readers hear, such as the home page's main heading. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A "Skip to content" link, shown only when reached with the keyboard. */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 10; padding: 8px 12px; background: rgb(40,40,40); color: rgb(245,245,245); font: 16px Geneva, sans-serif; }
.skip-link:focus { top: 8px; }
#myDIV_Middle:focus { outline: none; }
.navBottom a { color: rgb(92,92,92); }
[data-theme="dark"] .navBottom a { color: rgb(165,165,165); }
[data-theme="dark"] .work-banner-title { color: rgb(200,200,200); }
/* A banner picture of a different shape: shown whole, never cut or stretched. */
.work-banner img.fit-whole { object-fit: contain; background: rgb(210,210,210); }
[data-theme="dark"] .work-banner img.fit-whole { background: rgb(40,40,40); }

/* The day: one fluorescent ink a day, chosen by the date (see site.js). */
:root { --day-ink: #b3ff59; }
::selection { background: var(--day-ink); color: #000; }
.column-filter { border-bottom-color: var(--day-ink); }
.today { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 10px; text-decoration: none; color: inherit;
	border-left: 8px solid var(--day-ink); background: rgb(228,228,228); }
.today img { width: 40%; max-width: 220px; height: auto; display: block; }
.today-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.today-label, .today-ink { font: var(--text-small) Geneva, sans-serif; color: rgb(92,92,92); }
.today-title { font-size: var(--heading); color: rgb(40,40,40); }
.today-summary { color: rgb(70,70,70); }
.today:hover .today-title { text-decoration: underline; }
[data-theme="dark"] .today { background: rgb(34,34,34); }
[data-theme="dark"] .today-title { color: rgb(225,225,225); }
[data-theme="dark"] .today-summary { color: rgb(190,190,190); }
[data-theme="dark"] .today-label, [data-theme="dark"] .today-ink { color: rgb(165,165,165); }

/* Writing: stage directions, the reading view and printing. */
.stage { font-style: italic; color: rgb(80,80,80); }
[data-theme="dark"] .stage { color: rgb(175,175,175); }
.reading-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.reading-bar .button { font: var(--text-small) Geneva, sans-serif; border: 1px solid rgb(180,180,180); cursor: pointer; padding: 3px 10px; }
[data-theme="dark"] .reading-bar .button { background: rgb(40,40,40); color: rgb(200,200,200); border-color: rgb(90,90,90); }

/* Reading view: everything but the text steps aside. */
body.reading #myDIV_MyParagraph, body.reading #myDIV_TopicNav_1, body.reading #myDIV_WorkMap,
body.reading .column-title, body.reading .work-banners, body.reading .offbrand-unit, body.reading #myDIV_WorkMapAd,
body.reading #myDIV_NavSocial, body.reading .project-views { display: none !important; }
body.reading #myDIV_Middle { float: none !important; width: auto !important; max-width: 36em; margin: 0 auto !important; padding: 0 16px; box-sizing: content-box; }
body.reading #myDIV_AtWindowOpen { display: block !important; }
body.reading #myDIV_ConceptMedia { font-family: Georgia, "Times New Roman", serif; line-height: 1.7; }
body.reading #myDIV_ConceptMedia p { max-width: none; margin-bottom: 1em; }
body.reading .reading-bar, body.reading .summary { font-family: Geneva, sans-serif; }
body.reading-small #myDIV_ConceptMedia { font-size: 17px; }
body.reading-medium #myDIV_ConceptMedia { font-size: 20px; }
body.reading-large #myDIV_ConceptMedia { font-size: 24px; }

/* Printing: just the work, its title and the copyright line. */
@media print {
	#myDIV_Timer, #myDIV_ButtonNav, #myDIV_MyParagraph, #myDIV_TopicNav_1, #myDIV_WorkMap, .skip-link,
	.column-title, .work-banners, .offbrand-unit, .reading-bar, footer, #myDIV_NavSocial, .theme-toggle { display: none !important; }
	body, .backGround0, .main { background: #fff !important; color: #000 !important; }
	#myDIV_Middle { float: none; width: auto; margin: 0; }
	#myDIV_ConceptMedia { font: 12pt/1.6 Georgia, "Times New Roman", serif; }
	#myDIV_ConceptMedia p { max-width: none; }
	.stage { color: #000; }
	.gallery img { max-height: 60vh; break-inside: avoid; }
	.copyright { margin-top: 2em; }
}

/* The clock spans the page; its columns are measured and filled to exactly
   three rows (two on phones) by js/dateTimeFormat/myDateTimeFormat.js. */
#myDIV_Timer { float: none; width: auto; }
#myDIV_Timer > .box { float: none; width: 100%; box-sizing: border-box; }
#myDIV_Timer .dateTimeP { word-break: break-all; }

/* Drop-down menus: always in front of the page (ads, map, text) and take every
   click, on a solid block of the day's ink so they read over anything. */
#myDIV_ButtonNav { position: relative; z-index: 1000; }
.dropdown.shown { z-index: 1000; }
.dropdown-body { z-index: 1000; background-color: var(--day-ink) !important; border: 2px solid #000 !important;
	box-shadow: 3px 3px 0 #000 !important; border-radius: 0 !important; }
.dropdown-body .dropdown-menu-item, [data-theme="dark"] .dropdown-body .dropdown-menu-item { color: #000; }
.dropdown-body .dropdown-menu-item:hover, .dropdown-body .dropdown-menu-item:focus { background-color: #000; color: var(--day-ink); }
#myDIV_ButtonNav .dropdown-body a.dropdown-menu-item { color: #000; }
#myDIV_ButtonNav .dropdown-body a.dropdown-menu-item:hover, #myDIV_ButtonNav .dropdown-body a.dropdown-menu-item:focus { background: #000; color: var(--day-ink); }

/* Square thumbnails (home grid, right column): a picture of another shape is
   trimmed to the square, never squeezed into it. */
.xMainNavPic_ img, .topic-thumb img { object-fit: cover; }