/* cbharkiesr.com */
:root { --page: #ffffff; }   /* white page */

/* San Francisco on Apple devices (Helvetica / Arial elsewhere). Plain black
   text and classic blue links, after servinglibrary.org. */
html {
  /* a light geometric sans, close to the Serving Library's MTDBT2F */
  font-family: 'Didact Gothic', 'Century Gothic', 'Avenir Next', Futura, sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  -webkit-text-size-adjust: 100%;
}

html { overflow: hidden; height: 100%; }

body {
  margin: 0;
  background: var(--page, #ffffff);
  overflow: hidden; /* one project per screen; nothing scrolls */
}

a { color: #00e; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Viewer ---------- */

/* Every project fills the screen; only the selected one is shown,
   and within it only the current image (viewer.js sizes and centres it). */
.project {
  position: fixed;
  inset: 0;
  display: none;
  overflow: hidden;
  background: var(--page, #ffffff);
}

.project.is-active { display: block; }

.project > img,
.project > video {
  position: absolute;
  display: none;       /* one image at a time */
  object-fit: contain;
  cursor: pointer;     /* click for the next image */
}

.project > .is-current { display: block; }
/* arriving at a project: all its pictures at once, each opens on click */
.project.is-grid > img,
.project.is-grid > video { display: block; cursor: zoom-in; }


/* ---------- File-tree menu (work + CV) ---------- */

.tree {
  position: fixed;
  top: var(--unit, 2vh);    /* column 1, level with the top of the work */
  left: 2vh;
  z-index: 40; /* floats over everything */
  /* No background: the menu text floats over the work */
  max-width: calc(100vw - 4vh);
  max-height: calc(100vh - var(--unit, 2vh)); /* runs to the bottom edge */
  padding-bottom: calc(var(--base-bottom, 2vh) + 20px); /* the last line can scroll clear of the footer */
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  white-space: nowrap;
  overflow-x: hidden;
}
/* a name too long for columns 1 to 3 wraps instead of pushing the work over */
.tree li { white-space: normal; }

.tree summary,
.tree a {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.tree::-webkit-scrollbar,
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before,
.tree a::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background: center / contain no-repeat;
}

/* Little black icons, like a file browser */
.tree summary::before                  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M1.5 3.5h4.5l1.5 1.5h7v8h-13z'/%3E%3C/svg%3E"); }
.tree details[open] > summary::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M1.5 13V3.5h4.5l1.5 1.5h6v2'/%3E%3Cpath d='M1.5 13l2-6h11l-2 6z'/%3E%3C/svg%3E"); }
.tree a::before                        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Crect x='2' y='2.5' width='12' height='11'/%3E%3Ccircle cx='5.5' cy='6' r='1.2'/%3E%3Cpath d='M2 11.5l3.5-3.5 3 3 2-2 3.5 3.5'/%3E%3C/svg%3E"); }
.tree a.vid::before                    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Crect x='2' y='2.5' width='12' height='11'/%3E%3Cpath d='M6.5 5.5v5l4-2.5z'/%3E%3C/svg%3E"); }
.tree a[href="#cv"]::before,
.tree a.txt::before,
.tree a[href="#about"]::before            { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M3.5 1.5h6l3 3v10h-9z'/%3E%3Cpath d='M9.5 1.5v3h3M5.5 8h5M5.5 10.5h5'/%3E%3C/svg%3E"); }
.tree a.contact::before               { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Crect x='1.5' y='3.5' width='13' height='9'/%3E%3Cpath d='M1.5 3.5l6.5 5 6.5-5'/%3E%3C/svg%3E"); }
.tree a[target="_blank"]::before       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h4.5V7M13.5 2.5L7 9M11.5 9.5v4h-9v-9h4'/%3E%3C/svg%3E"); }

.tree ul {
  margin: 0;
  padding: 0 0 0 20px;  /* one step in per folder level */
  list-style: none;
}

/* All black; the current file and hovered rows get a grey selection, as in Finder */
.tree a { color: #000; text-decoration: none; }

.tree li > a { display: block; }

.tree summary,
.tree a { padding: 0 4px 0 2px; }

.tree a:hover,
.tree summary:hover,
.tree a[aria-current] { text-decoration: none; background: #e3e3e3; }

/* the file you're looking at, in the Serving Library's bright link blue */
.tree a[aria-current] { background: none; color: #0000ee; text-decoration: none; }

.tree summary,
.tree a { width: fit-content; max-width: 100%; box-sizing: border-box; }

/* ---------- CV and About (open in the work area) ---------- */

/* Baseline grid: every line of text is 20px, and every space between
   blocks is a whole number of lines, so all text sits on one baseline grid. */
.tree summary, .tree a, .cv-body, .path { line-height: 20px; }
.cv p { margin: 0 0 20px; }
.cv p:last-child { margin-bottom: 0; }
.cv p { break-inside: avoid; }  /* a paragraph never splits across columns */

.cv-body {
  position: absolute;
  overflow-y: auto;    /* scrolls inside the work area if it runs long */
  scrollbar-width: none;
}

.cv-cols {
  columns: 3;          /* reads down each column, then on to the next */
  column-gap: 2vh;
}

.cv-body::-webkit-scrollbar { display: none; }

.cv-block { margin-bottom: 20px; }

.cv h2 {
  margin: 0;
  font-size: inherit;
  font-weight: normal;
}

.cv ul { margin: 0; padding: 0; list-style: none; }
.cv li { margin: 0; break-inside: avoid; }
.cv h2 { break-after: avoid; break-inside: avoid; }

@media (max-width: 700px) {
  .cv-cols { columns: 1; }
}
/* year in its own narrow column, so wrapped lines stay aligned */
.cv li { position: relative; padding-left: 3.2em; }
.cv .yr { position: absolute; left: 0; }

/* ---------- Next image (bottom right) ---------- */

.path {
  position: fixed;
  right: 2vh;
  bottom: var(--base-bottom, 2vh);
  z-index: 30;
  text-align: right;
  max-width: calc(100vw - 4vh - 140px); /* clear of "All images" */
}

.path button {
  display: block;
  max-width: 100%;
  text-align: right;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #000;
  cursor: pointer;
}



/* ---------- Spinning logo (from the 2022 portfolio), top of column 12 ---------- */

.logo {
  position: fixed;
  top: 2vh;
  right: 2vh;
  z-index: 30;
  width: max(44px, calc((100vw - 26vh) / 12)); /* one grid column */
  aspect-ratio: 1;
}

.gear {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease-out;
}

/* Two rings of letters turn in opposite directions */
.gear-1 { transform: rotate(var(--spin, 0deg)); }
.gear-2 { transform: rotate(calc(var(--spin, 0deg) * -1)); }

/* ---------- Home page: every image on the site in one grid ---------- */

.index {
  display: none;
  position: fixed;
  inset: 0;   /* full screen: the images scroll under the bottom line, with no band behind it */
  z-index: 20;   /* over the work, under the menu, logo and buttons */
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--page, #ffffff);
}

.index::-webkit-scrollbar { display: none; }

.show-index .index { display: block; }
.show-index .project,
.show-index .path { visibility: hidden; }

/* One image per grid column, columns 3 to 11 (column 12 is the logo's) */
.index-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--unit, 2vh);
  margin-left: calc(var(--unit, 2vh) + 2 * (var(--col, 8vw) + var(--unit, 2vh)));
  margin-right: calc(2 * var(--unit, 2vh) + var(--col, 8vw));
  padding: var(--unit, 2vh) 0 calc(var(--base-bottom, 2vh) + 20px + var(--unit, 2vh));
}

.index-grid a { display: block; aspect-ratio: 1; }

.index-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.index-grid a:hover img { opacity: 0.6; }

@media (max-width: 700px) {
  .index-grid { grid-template-columns: repeat(3, 1fr); margin: 0 var(--unit, 2vh); padding-top: calc(var(--unit, 2vh) + 60px); }
}



/* ---------- Project description (above the images) ---------- */

.project > .desc {
  position: absolute;
  display: none;
  cursor: pointer;   /* click for the first image */
}

.project.is-active > .desc { display: block; }

.desc p { margin: 0; }

/* a long path loses its start, not its file name */
.path-text { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Sites & Apps (hidden; three clicks on the logo) ---------- */

.tree .secret[hidden] { display: none; }

.embed-view {
  display: none;
  position: fixed;
  z-index: 10;
}
.embed-view iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.show-embed .embed-view { display: block; }
.show-embed .project { visibility: hidden; }

/* Menu type at desktop file-browser size (Finder's 13px), on the same 20px rows */
.tree { font-size: 13px; }
.tree summary::before,
.tree a::before { width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; }
.tree ul { padding-left: 16px; }

/* Websites: the last slide of a website project is the live site */
.project > iframe.site { position: absolute; display: none; border: 0; background: #fff; box-shadow: 0 0 0 1px #ddd; }
.project > iframe.site.is-current { display: block; }
.project.is-grid > iframe.site { display: none; }
.index-grid a[hidden] { display: none; }

/* CV type hierarchy: tracked capitals for section heads (with a line of space
   under them), the title in black, where/what in grey, the year in grey. */
/* CV section titles: the same as ABOUT (the .cv h2 rule) */
.cv-typed .cv-block { margin-bottom: 40px; }
.cv-typed .yr { color: #888; font-variant-numeric: tabular-nums; }
.cv-typed .ttl { color: #000; }
.cv-typed .sub { color: #888; }
.cv-typed .cv-pdf { color: #000; text-decoration: none; }
.cv-typed .cv-pdf:hover { color: #0000ee; }

.cv-typed .cv-noyr li { padding-left: 0; }

/* ---------- Second version (preview2) ----------
   The picture's backdrop fills the screen behind the work; the menu, the
   descriptions and the path are drawn in difference, so they read on any colour. */
.backdrop { position: fixed; inset: 0; z-index: 0; background-repeat: no-repeat; pointer-events: none; }
body[data-v="2"] .tree, body[data-v="2"] .path, body[data-v="2"] .project > .desc {
  color: #fff; mix-blend-mode: difference;
}
/* the menu: exclusion, text only (no filled selection); the current file is
   underlined, and the underline follows the pointer while it is over the menu */
body[data-v="2"] .tree { mix-blend-mode: exclusion; }
body[data-v="2"] .tree a, body[data-v="2"] .tree summary,
body[data-v="2"] .tree a:hover, body[data-v="2"] .tree summary:hover,
body[data-v="2"] .tree a[aria-current] { background: none; color: #fff; outline: none; box-shadow: none; text-decoration: none; text-underline-offset: 3px; }
body[data-v="2"] .tree a[aria-current] { text-decoration: none; color: transparent; }   /* its name is laid over in blue (viewer.js) */
body[data-v="2"] .tree:hover a[aria-current] { text-decoration: none; }
body[data-v="2"] .tree a:hover, body[data-v="2"] .tree summary:hover,
body[data-v="2"] .tree:hover a[aria-current]:hover { text-decoration: none; }
body[data-v="2"] .tree a:focus, body[data-v="2"] .tree summary:focus { outline: none; }
body[data-v="2"] .tree summary::before, body[data-v="2"] .tree a::before { filter: invert(1); }   /* white icons, like the text */
body.has-backdrop .project.is-active { background: transparent; }
body[data-v="2"] .tree a, body[data-v="2"] .tree summary, body[data-v="2"] .path, body[data-v="2"] .path a { color: #fff; }
/* the backdrop's grain, so the grown paper has the same texture as the photo */
.backdrop::after { content: ''; position: absolute; inset: 0; background: url(../images/grain.png); mix-blend-mode: overlay; opacity: var(--grain, 0); }
body[data-v="2"] .project > .desc { z-index: 2; }

/* preview2: a photo of a place (or any photo that runs to its own edges) fills the screen */
body[data-v="2"] .project > img.full { object-fit: cover; }
/* preview2: every other picture fades into the backdrop at its edges, so there is no seam */
body[data-v="2"] .project > img.feather, body[data-v="2"] .project > video.feather {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}

/* a website shown live in a browser window (GDE_02) */
.project > iframe.site.browser, .embed-view.browser {
  box-sizing: border-box; padding-top: 30px; border-radius: 9px 9px 4px 4px; overflow: hidden;
  background: #e9e9ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='12'%3E%3Ccircle cx='6' cy='6' r='5.5' fill='%23ff5f57'/%3E%3Ccircle cx='26' cy='6' r='5.5' fill='%23febc2e'/%3E%3Ccircle cx='46' cy='6' r='5.5' fill='%2328c840'/%3E%3C/svg%3E") 12px 9px no-repeat;
  box-shadow: 0 0 0 1px rgba(0,0,0,.22);   /* a hairline round the window, like Safari on the desktop */
}

/* Nov 12: the current file in HTML blue (preview2: a blue copy of its name over the menu) */
.current-mark { position: fixed; z-index: 41; margin: 0; padding: 0; color: #0000ee; white-space: pre; pointer-events: none; transition: opacity 0.4s; }
/* all the text fades away after three seconds without the mouse moving (the logo stays) */
.tree, .path, .project > .desc, .next, .cv-body { transition: opacity 0.4s; }
body.idle .tree, body.idle .current-mark, body.idle .path, body.idle .project > .desc, body.idle .next { opacity: 0; pointer-events: none; }

.embed-view.browser { box-sizing: border-box; }
.embed-view.browser iframe { display: block; border: 0; width: 100%; height: 100%; }

/* the selected folder (its overview, or a project's grid) in blue, like the selected file; the icons blue too */
.tree summary.sel { color: #0000ee; }
.tree a[aria-current]::before, .tree summary.sel::before {
  filter: invert(9%) sepia(98%) saturate(7470%) hue-rotate(247deg) brightness(88%) contrast(146%);
}
body[data-v="2"] .tree summary.sel { color: transparent; }
body[data-v="2"] .tree a[aria-current]::before, body[data-v="2"] .tree summary.sel::before { opacity: 0; }
.current-mark .ic { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; background-size: contain; background-repeat: no-repeat; }

/* ---------- Phones: no menu; tap through the pictures; the logo still turns, top right ---------- */
@media (max-width: 700px) {
  .tree, .current-mark, .path, .sitebar { display: none !important; }
  .project > .desc { font-size: 13px; line-height: 17px; padding-right: 64px; box-sizing: border-box; }   /* clear of the logo */
  .logo { width: 48px; top: 12px; right: 12px; }
  .index-grid { padding-top: 76px; }
  .project, main { -webkit-tap-highlight-color: transparent; }
  .cv-body { -webkit-overflow-scrolling: touch; }
}

/* ---------- Editing the text (type "edit") ---------- */
body.editing [contenteditable="true"] { outline: 1px dashed #0000ee; outline-offset: 3px; cursor: text; mix-blend-mode: normal !important; color: #000 !important; background: rgba(255,255,255,.85); }
body.editing .project > .desc { z-index: 45; }
.edit-bar { position: fixed; left: 2vh; right: 2vh; bottom: 2vh; z-index: 60; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: #fff; color: #000; border: 1px solid #000; padding: 8px 10px; font: inherit; }
.edit-bar input { font: inherit; border: 1px solid #999; padding: 2px 6px; width: 12em; }
.edit-bar button { font: inherit; border: 0; background: none; color: #0000ee; padding: 0 4px; cursor: pointer; }
.edit-bar .msg { color: #0000ee; }

/* ---------- Phones: just the pictures, one after another, and the CV at the end ---------- */
.mobile-feed { display: none; }
@media (max-width: 700px) {
  .mobile-feed { display: block; position: fixed; inset: 0; z-index: 25; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #fff; padding: 76px 12px 40px; box-sizing: border-box; }
  .mobile-feed img, .mobile-feed video { display: block; width: 100%; height: auto; margin: 0 0 12px; scroll-margin-top: 76px; }
  .mobile-feed .feed-cv-link { display: block; padding: 28px 0 8px; color: #0000ee; text-decoration: none; font-size: 16px; }
  body.feed-cv .mobile-feed { display: none; }
  body:not(.feed-cv) .index { display: none !important; }
  body.feed-cv .project > .desc { display: none; }
}
/* phones: the CV link floats over the pictures, bottom left */
@media (max-width: 700px) {
  .mobile-feed .feed-cv-link { position: fixed; left: 12px; bottom: 12px; z-index: 26; padding: 0; margin: 0; background: none; }
  .mobile-feed { padding-bottom: 12px; }
}

/* phones: the "menu" button, halfway down, centred under the logo; the full-screen menu */
.menu-btn { display: none; }
@media (max-width: 700px) {
  .menu-btn { display: block; position: fixed; top: 50%; right: 36px; left: auto; transform: translate(50%, -50%); z-index: 50;   /* centre on the logo's centre (12px from the edge + half its 48px) */
    border: 0; background: none; padding: 4px; font: inherit; color: #0000ee; cursor: pointer; }
  body.menu-open .tree { display: block !important; position: fixed; inset: 0; max-width: none; max-height: none; z-index: 45;
    background: #fff; padding: 76px 12px 40px; opacity: 1 !important; pointer-events: auto !important;
    mix-blend-mode: normal !important; white-space: normal; overflow-y: auto; }
  body.menu-open .tree a, body.menu-open .tree summary { color: #000 !important; }
  body.menu-open .tree a[aria-current] { color: #0000ee !important; }
  body.menu-open .tree summary::before, body.menu-open .tree a::before { filter: none !important; opacity: 1 !important; }
  body.menu-open .logo { z-index: 46; }
  .tree .secret { display: none; }
}
@media (max-width: 700px) { .tree .no-phone { display: none !important; } }   /* live websites are not on the phone version */