/* OBSCURA OS: the landing pages.
 *
 * A locked application's page (the Engineering Suite, Foundry, the Photo
 * Editor, the Sovereign Suite) opens on its lock screen for anybody without
 * a key, and that screen is the only place a visitor can see what they
 * would be paying for. theme.css draws its top: the name, the lead, the
 * picture, the list and the way in. This draws what follows it: pictures of
 * the application at work, what it does in detail, the files it reads and
 * writes, and what it cannot do yet. The Workspace and the other suites use
 * the same sections under their grids of tiles.
 *
 * Every picture is taken twice, light and dark (media-shots.mjs), and the
 * one that matches the page's theme is shown: theme.js puts
 * data-theme="dark" on <html> for a dark page, whether the reader chose it
 * or their system did. The hidden one is loading="lazy", so it is not
 * fetched.
 */

/* The lock screen's own picture is display:block in theme.css, which would
   show both; the frame is named so the hidden one stays hidden there too. */
.ld-d, .pro-lock-shot .ld-d { display: none; }
html[data-theme="dark"] .ld-l { display: none; }
html[data-theme="dark"] .ld-d { display: block; }

/* A section below the fold of a landing page. */
.ld-sec { margin: var(--space-8) 0 0; }
.ld-sec > h2 {
  margin: 0 0 var(--space-2);
  font: 700 var(--text-xl)/1.2 var(--font-headline);
  color: var(--ink);
}
.ld-sec > p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink-soft);
}
.ld-sec a { color: var(--accent-strong); }
/* A link in the words is underlined on every landing page. Two of the four
   load tool.css, which takes the underline off every link, so a link in
   the Photo Editor's and Foundry's prose read as coloured text where the
   Engineering Suite's and the Sovereign Suite's read as links. The
   download buttons (.ld-file) are not in a paragraph and keep none. */
.ld-sec :is(p, li, figcaption) a, .ld-cta a { text-decoration: underline; text-underline-offset: 2px; }

/* Pictures of the application, two to a row where there is room. */
.ld-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--space-5);
  margin: var(--space-4) 0 0;
}
.ld-shot { margin: 0; }
.ld-shot-frame {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-inset);
}
.ld-shot-frame img { width: 100%; height: auto; vertical-align: top; }
.ld-shot figcaption {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.ld-shot figcaption b { color: var(--ink); font-weight: 600; }

/* A film of the application at work (media-videos.mjs), recorded in the
   light theme but the Photo Editor's, whose window is dark in both. It
   has its width and height, so its place is kept before it loads, and
   film.js plays it in view when motion is on. Until film.js is there to
   answer it the button is hidden and the browser's own controls show. */
.ld-film { margin: var(--space-4) 0 0; }
.ld-film-frame {
  position: relative;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-inset);
}
.ld-film video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; }
.ld-film-play {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  color: var(--ink);
  font: 600 var(--text-sm)/1 var(--font-ui);
  cursor: pointer;
}
.ld-film-play[hidden] { display: none; }
.ld-film-play:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ld-film-play svg { width: 14px; height: 14px; fill: currentColor; }
.ld-film[data-film="playing"] .ld-film-i-play,
.ld-film:not([data-film="playing"]) .ld-film-i-pause { display: none; }
.ld-film figcaption {
  margin: var(--space-2) 0 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.ld-film figcaption b { color: var(--ink); font-weight: 600; }

/* What it does: short headed paragraphs, in columns. */
.ld-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4) var(--space-6);
  margin: var(--space-4) 0 0;
}
.ld-item h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}
/* A heading that is a link (the Workspace's ten applications) is the
   thing a finger presses to open the application, so it meets the floor on
   a touch screen, without moving anything on a desktop. */
@media (pointer: coarse) {
  .ld-item h3 a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
.ld-item p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}
.ld-item code {
  font-family: var(--font-mono);
  font-size: .95em;
  color: var(--ink);
  background: var(--paper-inset);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

/* A plain list, ruled, for what it cannot do and the like. */
.ld-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; max-width: var(--measure); }
.ld-list li {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}
.ld-list li:last-child { border-bottom: 1px solid var(--rule); }
.ld-list b { color: var(--ink); font-weight: 600; }

/* Files to take away: a row of plain download links. */
.ld-files { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.ld-file {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.ld-file:hover { border-color: var(--accent-border); }
.ld-file span { margin-left: var(--space-2); font-weight: 400; color: var(--ink-soft); }

/* The closing line: back up to the plans. */
.ld-cta {
  margin: var(--space-7) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--ink);
}
.ld-cta a { color: var(--accent-strong); font-weight: 600; }

/* On a suite's page the sections sit under the grid of tiles, in its
   column, left-aligned like the rest of it. */
.boot-page .ld-sec { width: 100%; max-width: 900px; text-align: left; box-sizing: border-box; margin-top: var(--space-7); }

/* A feature group on an application's page: a small label, a heading, a
   sentence or two, a picture of the application doing it, and then what
   is in it as plain rows, each a name over a line of monospace detail.
   Groups are spaced well apart, so each reads as its own. */
.ld-feat { margin-top: var(--space-9); }
.ld-sec > .ld-label {
  margin: 0 0 var(--space-2);
  font: 600 var(--text-2xs)/1.3 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ld-feat > .ld-shot { margin: var(--space-5) 0 0; }
.ld-rows {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  column-gap: var(--space-6);
  margin: var(--space-5) 0 0;
  padding: 0;
}
.ld-rows li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.ld-rows b {
  display: block;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.ld-rows span {
  display: block;
  margin-top: var(--space-1);
  font: var(--text-xs)/1.6 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.ld-feat > .ld-sub { margin-top: var(--space-5); }
/* File formats, each a short monospace name. */
.ld-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.ld-chips li {
  padding: 5px var(--space-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-inset);
  font: 500 var(--text-xs)/1.3 var(--font-mono);
  letter-spacing: .02em;
  color: var(--ink);
}