/* The holding page (web/site/holding.html), while the site isn't ready (Allan, 28 Sep 2026), in the site's look since 10 Oct
   2026: the app's look made bolder (docs/look/website/BRIEF.md). The phone's own typeface, the app's colours by value (as
   web/site/site.css has them, light, dark and each with Increase Contrast), and the old logo as the page's title (Allan, 28
   Sep 2026: the old logo back), in Source Serif 4, the one font file it loads. No picture, no script of its own. Its words
   are as they were: only the look changed. */

/* The wordmark's face, as web/site/site.css names it (SIL OFL 1.1). */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  --page: #FFFFFF;
  --band: #F2F2F7;
  --ink: #000000;
  --muted: #48484D;
  --line: #C9C9CE;
  --link: #0A56C9;
  --logo: #1B3348;
  --brass: #A8813F;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wordmark: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root { --page: #000000; --band: #1C1C1E; --ink: #FFFFFF; --muted: #B4B4BA; --line: #48484A; --link: #5AA7FF; --logo: #A9C3DC; --brass: #C9A15C; }
}
@media (prefers-contrast: more) {
  :root { --page: #FFFFFF; --band: #EBEBF0; --ink: #000000; --muted: #2C2C30; --line: #8E8E93; --link: #0043A8; --logo: #10243A; }
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root { --page: #000000; --band: #242426; --ink: #FFFFFF; --muted: #D1D1D6; --line: #7C7C80; --link: #8AC0FF; --logo: #C9DCEE; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--page); color: var(--ink);
  font: 400 clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;   /* an email address at a large text size wraps instead of widening the page */
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.hold { flex: 1; width: 100%; max-width: 40rem; margin: 0 auto; padding: 14vh 16px 3rem; text-align: center; }
/* The title is the logo: the door mark and the wordmark, "Self" at 600 and "managed" at 300, large. A logotype, so at a
   large text size it grows only as far as the screen allows. */
.hold h1 { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin: 0 0 1.5rem;
  color: var(--logo); font: 600 min(2.75rem, 12vw)/1 var(--wordmark); letter-spacing: -0.015em; white-space: nowrap; overflow-wrap: normal; }
.hold h1 .mark { width: min(3rem, 13vw); height: min(3rem, 13vw); flex: none; }
.mark .door, .mark .ground { stroke: currentColor; }
.mark .handle { fill: var(--brass); }
.wordmark { white-space: nowrap; }
.wordmark .w-self { font-weight: 600; }
.wordmark .w-managed { font-weight: 300; }
.hold p { margin: 0 auto 1rem; max-width: 34rem; color: var(--muted); }
.hold .lede { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.875rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.hold-foot { padding: 1.5rem max(16px, calc((100% - 38rem) / 2)) 2.5rem; background: var(--band); color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.hold-foot ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.hold-foot li a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 1rem; text-decoration: none; }
.hold-foot li a:hover { text-decoration: underline; }
.hold-foot p { margin: 0 0 0.5rem; max-width: 38rem; }