/* ── Settings you might want to tweak ───────────────────────── */
:root {
  --margin: 15px;          /* outer page margin */
  --gutter: 15px;          /* space between columns and rows */
  --font-size: 12px;
  --line-height: 15px;
  --line-width: 1px;              /* every thin line: table lines, lines between projects, sub-project line */
  --line-opacity: 30%;           /* how strong every thin line is (each keeps its own colour); lower = lighter */
  --table-line-height: var(--line-height);   /* row height in the projects table (and the experience above it) */

  --preview-width: 200px;  /* size of the cursor preview image */

  --box-bg: #171717;       /* header text boxes (project page + home bar): box */
  --image-border: #d9d9d9; /* thin border around the project images */
  --view-box-bg: #e8e8e8;   /* "View Project" box on image hover */
  --view-box-text: #626262; /* its text */
  --about-width: 360px;     /* hover info: width the longer "about" text wraps at */
  --view-box-shadow: 0 px 0 #000;  /* its hard shadow: right, down, blur (0 = sharp), colour */
  --clip-arm: 4px;           /* + marks: length of each arm (the + is 2 × arm + 1px wide), same opacity as the lines */
  --title-gap: 30px;
  --end-space: 25svh;       /* extra white space under the last project, after its title block has reached the top */
  /* tallest an image may be on desktop: the space below the pinned PROJECT block,
     so the whole picture is always visible */
  --img-max-h: calc(100svh - 2 * var(--margin) - var(--line-height) * 3 - var(--title-gap) - 1px
                    - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));         /* space line → PRJCT block and PRJCT block → images (+1px) */
  --image-marks: block;      /* + marks on the image corners: block = on, none = off */
  --image-border-width: 0px;  /* its width */
  --box-text: #b4b4b4;     /* header text boxes: text */

  --text: #929292;
  --bg: #ffffff;
  --font: "neue-haas-grotesk-text", "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: light;
  /* phones: keep text at the size set here; stops Android Chrome (and iOS in
     landscape) from enlarging it on its own */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a.underline { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible, tr:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
ul { list-style: none; }

/* ── 6 columns × 8 rows grid ────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, minmax(80px, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--gutter);
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--margin) + env(safe-area-inset-top, 0px)) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
  align-items: start;
}

/* Row 1: header */
.name {
  grid-column: 1; grid-row: 1;
  font: inherit; font-weight: 700;
}

.contact {
  grid-column: 3 / 5; grid-row: 1;   /* labels end in the middle of the page */
  display: grid;
  grid-template-columns: subgrid;
}
.contact dt { grid-column: 1; text-align: right; }
.contact dd { grid-column: 2; }

.clock {
  grid-column: 6; grid-row: 1;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Row 2: bio on the left half, experience on the right half (above the
   projects table, same columns, dates on the right margin) */
.bio { grid-column: 1 / 4; grid-row: 2; }

.experience {
  grid-column: 4 / 7; grid-row: 2;
  /* same row height as the projects table under it, with one line width
     extra after each line (like the lines between the table rows) */
  line-height: var(--table-line-height);
}
.experience li { margin-bottom: var(--line-width); }
.experience li { display: flex; justify-content: space-between; gap: var(--gutter); }
.experience li span:last-child { white-space: nowrap; }

/* Row 4: projects table */
.projects {
  grid-column: 4 / 7; grid-row: 4 / 9;
  container-type: inline-size;
}

.projects table { border-collapse: collapse; }

/* first two table columns = one grid column + gutter each,
   so Client and Date start exactly on columns 5 and 6 */
.projects th:nth-child(-n+2),
.projects td:nth-child(-n+2) { width: calc((100cqw + var(--gutter)) / 3); }
.projects th:last-child,
.projects td:last-child { padding-right: 16px; }

/* desktop: the table runs to the right margin and grows with the window.
   The Date column starts where the clock's text starts (width set by main.js),
   Projects and Client share the rest */
@media (min-width: 801px) {
  .projects table { width: 100%; table-layout: fixed; }
  .projects th:nth-child(-n+2),
  .projects td:nth-child(-n+2) { width: auto; }
  .projects th:last-child,
  .projects td:last-child { width: var(--date-width, 25%); padding-right: 0; }
  /* when it gets narrow, text wraps onto two lines instead of running into
     the next column; a gutter keeps the columns apart */
  .projects table th,
  .projects table td { white-space: normal; }
  .projects table th:nth-child(-n+2),
  .projects table td:nth-child(-n+2) { padding-right: var(--gutter); }
}

.projects th,
.projects td {
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  line-height: var(--table-line-height);
  white-space: nowrap;
}
.projects thead tr {
  --line: color-mix(in srgb, var(--text) var(--line-opacity), transparent);
  border-top: var(--line-width) solid var(--line);
  border-bottom: var(--line-width) solid var(--line);
}
/* a thin line between the projects (a project and its sub-projects stay together) */
.projects tbody tr:not(.sub):not(:first-child) {
  border-top: var(--line-width) solid color-mix(in srgb, var(--text) var(--line-opacity), transparent);
}
.projects th { padding-top: 1px; padding-bottom: 0; }

.projects tbody tr { cursor: pointer; transition: opacity 0.15s ease; }
/* a clicked project row pulses while the page gets ready to glide there */
.projects tbody tr.waiting { animation: row-wait 0.6s ease-in-out infinite alternate; }
@keyframes row-wait { from { opacity: 1; } to { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .projects tbody tr.waiting { animation: none; opacity: 0.5; } }
.projects tbody tr:hover,
.projects tbody tr:focus-visible { opacity: 0.5; }

/* ── Cursor preview ─────────────────────────────────────────── */
#preview {
  position: fixed;
  top: 0; left: 0;
  width: var(--preview-width);
  height: auto;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}
#preview.visible { opacity: 1; visibility: visible; }

/* no mouse (phones/tablets) → no preview */
@media (hover: none) { #preview { display: none; } }

/* ── Small screens: stack everything ────────────────────────── */
@media (max-width: 800px) {
  /* first column is as wide as the name; spacing matches the project page */
  .grid {
    grid-template-columns: max-content 1fr;
    grid-template-rows: none;
    row-gap: var(--line-height);
    min-height: 0;
      .projects th { padding-top: 4px; padding-bottom: 4px; }
  .projects tbody tr:first-child td { padding-top: 8px; }
      .projects tbody td { padding-bottom: 2px; }
  }
  .name    { grid-column: 1; grid-row: auto; }
  .clock   { grid-column: 2; grid-row: 1; text-align: left; }   /* starts where the details start */
  .contact { grid-column: 1 / -1; grid-row: auto; grid-template-columns: subgrid; padding-bottom: var(--line-height); }
  .contact dt { text-align: right; }   /* ends where "Akgün" ends */
  .bio, .experience, .projects { grid-column: 1 / -1; grid-row: auto; }
  .experience { padding-top: 0; line-height: var(--line-height); }
  .experience li { margin-bottom: 0; }
  /* phones: no lines between the projects (only the ones around the table header) */
  .projects tbody tr:not(.sub):not(:first-child) { border-top: 0; }
  .experience, .projects { margin-top: var(--line-height); }   /* two empty lines between blocks */
  .projects { overflow-x: auto; }
  .projects table { width: 100%; }
  .projects th:nth-child(-n+2),
  .projects td:nth-child(-n+2) { width: auto; padding-right: var(--gutter); }
  .projects th, .projects td { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .projects tbody tr { transition: none; }
}
/* ── Sticky name + clock ────────────────────────────────────── */
.name,
.clock {
  position: sticky;
  top: calc(var(--margin) + env(safe-area-inset-top, 0px));
  z-index: 6;
}

/* ── Sub-projects ───────────────────────────────────────────── */
.projects tr.sub {
  --sub-grey: #c0c0c0;
  color: var(--sub-grey);
}

/* fade only the text on hover, so the line stays */
.projects tbody tr.sub { transition: color 0.15s ease; }
.projects tbody tr.sub:hover,
.projects tbody tr.sub:focus-visible {
  opacity: 1;
  color: color-mix(in srgb, var(--sub-grey) 50%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .projects tbody tr.sub { transition: none; }
}

.projects tr.sub td:first-child {
  position: relative;
  padding-left: 26px;
}
.projects tr.sub td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--line-width);
  background: color-mix(in srgb, var(--text) var(--line-opacity), transparent);   /* same as the other lines */
}
.projects tr.sub-first td:first-child::before { top: 4px; }
.projects tr.sub-last  td:first-child::before { bottom: 4px; }

/* ── Project page (project.html) ─────────────────────────────── */
/* same grid, colours and boxes as the home page */
.project {
  --row: max(80px, calc((100svh - 2 * var(--margin) - 7 * var(--gutter)) / 8));
  --meta-top: calc(var(--margin) + env(safe-area-inset-top, 0px));
  /* where a section lands: under the PROJECT block, with its divider line
     in between (equal space above and below the line) */
  --section-top: calc(var(--meta-top) + var(--line-height) * 3 + (var(--title-gap) + 1px) * 2 + var(--line-width) - 1px);
  --project-gap: calc(var(--row) * 1.5);
}
.project .grid { grid-template-rows: var(--row); align-items: start; }

/* header: name and clock on boxes, PRJCT / CLIENT / DATE in the middle */
.project .name span,
.project .clock {
  background: var(--box-bg);
  color: var(--box-text);
  padding: 0 2px;
}
.project .name span { margin: 0 -2px; }
.project .clock { justify-self: end; margin-right: -2px; }
.project .name,
.project .clock { mix-blend-mode: difference; }

.project .meta {
  grid-column: 3 / 6; grid-row: 1;   /* labels end in the middle of the page */
  display: grid;
  grid-template-columns: subgrid;
  position: sticky;
  top: var(--meta-top);
  z-index: 6;
  text-transform: uppercase;
  mix-blend-mode: difference;
  pointer-events: none;
}
.project .meta dt { grid-column: 1; text-align: right; }
.project .meta dd { grid-column: 2 / -1; }
.project .box {
  background: var(--box-bg);
  color: var(--box-text);
  padding: 0 2px;
  margin-left: -2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.project .meta dt .box { margin-left: 0; margin-right: -2px; }
.project .crumb { grid-column: 6; grid-row: 1; margin-top: calc(var(--line-height) * 2); justify-self: end; text-transform: uppercase; }

/* one section per project, collection and work */
.psec {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: calc(var(--title-gap) + 1px);
  align-items: start;
  position: relative;               /* the divider above it */
  scroll-margin-top: var(--section-top);
}
.psec + .psec { margin-top: var(--project-gap); }

/* left half: the text, like the bio */
.ptext { grid-column: 1 / 4; }
.ptext p + p { margin-top: var(--line-height); }
.ptext .credit { margin-top: calc(var(--line-height) * 2); color: var(--sub-grey, #c0c0c0); }

/* right half: credits and collections, like the projects table */
.plists { grid-column: 4 / 7; display: grid; row-gap: calc(var(--line-height) * 2); }
.plist {
  --line: color-mix(in srgb, var(--text) var(--line-opacity), transparent);
  display: grid;
  grid-template-columns: 1fr 1fr var(--date-width, 25%);
  line-height: var(--table-line-height);
}
.plist > * { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.plist .head {
  border-top: var(--line-width) solid var(--line);
  border-bottom: var(--line-width) solid var(--line);
  padding-top: 1px;
}
.plist .row + .row { border-top: var(--line-width) solid var(--line); }
.plist .row > :first-child { grid-column: 1 / 3; padding-right: var(--gutter); }
.plist a.row { transition: opacity 0.15s ease; }
.plist a.row:hover,
.plist a.row:focus-visible { opacity: 0.5; }

/* images: same layout, borders and corner marks as on the home page */
.pgallery {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--gutter);
  align-items: start;
}

.not-found { grid-column: 1 / 4; grid-row: 2; }

@media (max-width: 800px) {
  .project {
    --meta-top: calc(var(--margin) + env(safe-area-inset-top, 0px) + var(--line-height) + 11px);
    --project-gap: calc(var(--line-height) * 5);
  }
  .project .grid { grid-template-rows: none; row-gap: var(--line-height); }
  .project .clock { justify-self: start; margin-right: 0; margin-left: -2px; }
  /* labels end where "Akgün" ends, values start where the clock starts */
  .project .meta { grid-column: 1 / -1; grid-row: 2; }
  .project .meta dd { grid-column: 2; }
  .project .crumb { grid-column: 1 / -1; grid-row: auto; margin: 0; justify-self: start; }
  .psec { grid-template-columns: 1fr; }
  .ptext, .plists, .pgallery { grid-column: 1 / -1; }
  .plist { grid-template-columns: 1fr 1fr auto; }
  .plist .row + .row { border-top: 0; }
  .pgallery { grid-template-columns: subgrid; }
}

@media (prefers-reduced-motion: reduce) {
  .plist a.row { transition: none; }
}

/* ── Header on the home page: pinned at the top ─────────────── */
/* contact block: pinned until the project info takes its place */
.home .contact { position: sticky; z-index: 6; }
.home .contact.covered { visibility: hidden; }   /* replaced by the project info */

/* name and clock (date + time) on a text box, like the PRJCT / CLIENT / DATE blocks */
.home .name span,
.home .clock {
  background: var(--box-bg);
  color: var(--box-text);
  padding: 0 2px;
}
.home .name span { margin: 0 -2px; }
/* tapping the name on phones: no grey tap flash or text selection over it */
.name { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }   /* the box sticks out 2px on both sides, like the others */

@media (max-width: 800px) {
  /* 11px between the name/clock boxes and the contact block, same as the gaps across */
  .home .contact { margin-top: calc(11px - var(--line-height)); }
}

/* contact block (PHONE / MAIL / IG) on text boxes too, same inverting effect */
.home .contact { mix-blend-mode: difference; }
.home .contact dt,
.home .contact dd a {
  background: var(--box-bg);
  color: var(--box-text);
  padding: 0 2px;
}
.home .contact dt { justify-self: end; margin-right: -2px; }   /* box only as wide as the label */
.home .contact dd a { margin-left: -2px; }
.home .clock { justify-self: end; margin-right: -2px; }   /* box only as wide as the date */

@media (max-width: 800px) {
  .home .clock { justify-self: start; margin-right: 0; margin-left: -2px; }
}

/* ── Project details on the home page ───────────────────────── */
.home {
  /* height of one header row, same as on the project page */
  --home-row: max(80px, calc((100svh - 2 * var(--margin) - 7 * var(--gutter)) / 8));
}
/* rows 1–8 stay one screen tall now that the details follow them */
.home .grid { grid-template-rows: repeat(8, minmax(var(--home-row), auto)); }

/* name + clock invert over images (white + difference looks black on the page) */
.home .name,
.home .clock { mix-blend-mode: difference; }   /* their colours come from the box settings */

.details {
  grid-column: 1 / -1;
  grid-row: 9;
  display: grid;
  grid-template-columns: subgrid;
  --project-gap: calc(var(--home-row) * 1.5);   /* space between projects (1.5 header rows) */
  row-gap: var(--project-gap);
  margin-top: var(--home-row);
}

/* where each project's info block sticks: the contact block's place */
.home { --info-top: calc(var(--margin) + env(safe-area-inset-top, 0px)); }

/* one project: its images under its info block (which sits in the same row).
   Two side by side, split exactly at the gap between PRJCT and the name:
   left image up to where the labels end, right image from where the names start */
.detail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--gutter);
  align-items: start;
  /* room for the info block: 3 lines + the space above the images
     (--title-gap; the visible gap is 1px more) */
  padding-top: calc(var(--line-height) * 3 + var(--title-gap));
  /* jumping here lands with its info block in place and the divider above it
     just past the top edge of the screen (it shows as you scroll up) */
  scroll-margin-top: min(var(--info-top), var(--title-gap));
  position: relative;
}

/* a line between two projects, halfway in the gap, from the first column to
   the last, with a + at each end; same colour and thickness as the other lines */
.divider {
  display: block;
  position: absolute;
  /* the line runs one arm past each end, so it is also the — of the two + */
  left: calc(var(--clip-arm) * -1);
  right: calc(var(--clip-arm) * -1);
  /* as far above the PRJCT block as the block is above the images */
  top: calc((var(--title-gap) + 1px + var(--line-width)) * -1);
  height: var(--line-width);
  background: color-mix(in srgb, var(--text) var(--line-opacity), transparent);
  pointer-events: none;
}
.divider .clip { top: 0; }
.divider .clip::before { display: none; }   /* the line itself is the — */
/* the | leaves out the line's pixel, so the crossing isn't darker */
.divider .clip::after {
  --c: color-mix(in srgb, var(--text) var(--line-opacity), transparent);
  background: linear-gradient(to bottom,
    var(--c) var(--clip-arm), transparent var(--clip-arm),
    transparent calc(var(--clip-arm) + var(--line-width)), var(--c) calc(var(--clip-arm) + var(--line-width)));
}
.divider .clip.dl { left: var(--clip-arm); }
.divider .clip.dr { left: calc(100% - var(--clip-arm)); }
/* the last project is always tall enough that its title block can reach the
   top and keep going: a full screen (the tallest it gets, also when a phone's
   toolbar hides) plus --end-space of white space under it */
.details > div:last-of-type {
  min-height: calc(100vh - var(--info-top) + var(--end-space));
  min-height: calc(100lvh - var(--info-top) + var(--end-space));
}

/* info block: PRJCT / CLIENT / DATE on text boxes, like the project page
   header. Asterisks until it reaches the top; then it stays there until the
   next project's block runs into it (main.js). */
.detail-info {
  grid-column: 3 / 7;   /* same place as the contact block */
  align-self: start;
  display: grid;
  grid-template-columns: subgrid;
  position: sticky;
  top: var(--info-top);
  z-index: 6;
  text-transform: uppercase;
  pointer-events: none;
  mix-blend-mode: exclusion;   /* same inverting effect as the name */
}
.detail-info.covered { visibility: hidden; }
.detail-info dt { grid-column: 1; text-align: right; }
.detail-info dd { grid-column: 2 / -1; }
.detail-info .box {
  background: var(--box-bg);
  color: var(--box-text);
  padding: 0 2px;
  margin-left: -2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.detail-info dt .box { margin-left: 0; margin-right: -2px; }

/* each image sits in a .shot with a grey border and a clipping mark (+)
   centred on every corner, like crop marks */
.shot { position: relative; }
.shot picture { display: contents; }
/* images with maxWidth in projects.js: never wider than that, on any screen */
.shot.capped { max-width: min(100%, var(--max-w)) !important; }
/* images marked desktopOnly / mobileOnly in projects.js */
.shot.mobile-only { display: none; }
@media (max-width: 800px) {
  .shot.mobile-only { display: block; }
  .shot.desktop-only { display: none; }
}   /* a phone-only version wraps the image; layout ignores it */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--image-border-width) solid var(--image-border);
}
/* the + is drawn with two thin lines whose crossing pixel sits exactly on
   the corner (whole pixels, so it stays sharp); above the image and the hover layer */
.clip {
  display: var(--image-marks, block);
  position: absolute;
  width: calc(var(--clip-arm) * 2 + 1px);
  height: calc(var(--clip-arm) * 2 + 1px);
  margin: calc(var(--clip-arm) * -1) 0 0 calc(var(--clip-arm) * -1);
  z-index: 3;
  pointer-events: none;
}
.clip::before,
.clip::after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--text) var(--line-opacity), transparent);   /* like the lines */
}
.clip::before { left: 0; right: 0; top: var(--clip-arm); height: 1px; }   /* — */
.clip::after  { top: 0; bottom: 0; left: var(--clip-arm); width: 1px; }   /* | */
.clip.tl { top: 0;    left: 0; }
.clip.tr { top: 0;    left: 100%; }
.clip.bl { top: 100%; left: 0; }
.clip.br { top: 100%; left: 100%; }

.shot.left  { grid-column: 1 / 4; }   /* margin → end of the labels */
.shot.right { grid-column: 4 / 7; }   /* start of the names → margin */
/* the text boxes stick out 2px past their text, so the images do too:
   the gap between two images is then the same as between the boxes */
.shot.left  { width: calc(100% + 2px); margin-right: -2px; }
.shot.right { width: calc(100% + 2px); margin-left: -2px; }
/* never taller than the screen allows: a tall image gets narrower, and the
   pair stays together at the middle gap (left one right-aligned, right one left-aligned) */
.shot.left,
.shot.right { max-width: calc(var(--img-max-h) * var(--ratio, 1)); }
.shot.left  { justify-self: end; }
.shot.right { justify-self: start; }
/* a single image (solo: true, or one without a partner): full width, one screen tall, centred */
.shot.solo {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
  /* the image's own shape, one screen tall, never wider than the page
     (--w and --ratio are set by main.js once the image has loaded) */
  width: min(100%, calc(var(--img-max-h) * var(--ratio, 1)));
  max-width: none;
}

@media (max-width: 800px) {
  .home {
    /* below the name, like the contact block (11px under the name's box) */
    --info-top: calc(var(--margin) + env(safe-area-inset-top, 0px) + var(--line-height) + 11px);
  }
  .home .grid { grid-template-rows: none; }
  .details { grid-row: auto; margin-top: calc(var(--line-height) * 3); --project-gap: calc(var(--line-height) * 5); }
  .detail, .detail-info { grid-column: 1 / -1; }
  /* labels end where "Akgün" ends, like the project page */
  .detail-info dd { grid-column: 2; }
  /* phones: one image per row, centred */
  .detail { grid-template-columns: subgrid; }
  .shot,
  .shot.left,
  .shot.right,
  .shot.solo {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;   /* fills the width between the margins, also small images */
    max-width: none;
    margin: 0;
  }
  .shot img { width: 100%; height: auto; }
}


/* ── Hover on project images: light grey layer + asterisk bitmap (main.js) ── */

/* with a mouse, the "View Project" box replaces the cursor over images */
@media (hover: hover) { .details .shot { cursor: none; } }
.shot .fx {
  position: absolute;
  inset: var(--image-border-width);   /* inside the border */
  pointer-events: none;
}
.shot .fx canvas { display: block; width: 100%; height: 100%; }
/* the info block that follows the cursor (meta in projects.js); laid out like
   the PROJECT / CLIENT / DATE subtitle: labels right-aligned, values left,
   same font, line height and gap between the boxes */
.shot .fx .label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);   /* centred on the cursor (main.js moves it) */
  display: grid;
  grid-template-columns: auto auto;
  column-gap: var(--gutter);
  line-height: var(--line-height);
  white-space: nowrap;
  opacity: 0;
}
.shot .fx .label dt { grid-column: 1; text-align: right; }
.shot .fx .label dd { grid-column: 2; }
.shot .fx .label .first { margin-top: var(--line-height); }   /* one empty line after the description */
.shot .fx .label .box {
  background: var(--view-box-bg);
  color: var(--view-box-text);
  box-shadow: var(--view-box-shadow);
  padding: 0 2px;
  margin-left: -2px;
}
.shot .fx .label dt .box { margin-left: 0; margin-right: -2px; }
/* a longer "about" text: wraps at this width, keeps its line breaks */
.shot .fx .label .about {
  white-space: pre-line;
  width: max-content;
  max-width: var(--about-width);
}
.shot .fx .label .about .box {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* phones: the info block is never wider than the space between the page
   margins; longer lines wrap instead of pushing the page wider
   (main.js keeps it inside the margins, as close to the tap as it fits) */
@media (max-width: 800px) {
  .shot .fx .label {
    width: max-content;
    max-width: calc(100vw - 2 * var(--margin));
    white-space: normal;
  }
  .shot .fx .label .about { width: auto; max-width: none; }
  .shot .fx .label .box {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  /* safety net: nothing can make the page scroll sideways */
  html, body { overflow-x: clip; }
}