/* Ethos Holdings, About: the plain page (a copy of solar.ai's text page, measured from the live site on
   2026-10-26; see ../plain/DESIGN.md) with a Home link in the top right, set exactly like the main page's About
   link in the same corner. Roboto Mono light, the name and city, the thesis in italic, a numbered list of links, the
   email, the whole block vertically centred. The page is on the main page's paper, #f6f2e7, in place of solar.ai's grey. */

@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url('../fonts/roboto-mono.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url('../fonts/roboto-mono-italic.woff2') format('woff2');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f6f2e7; /* the main page's paper (--bg for its light theme in ../styles.css) */
  color: #000;
  font:
    300 13px/1.5 'Roboto Mono',
    ui-monospace,
    Menlo,
    monospace;
  -webkit-text-size-adjust: none;
  word-wrap: break-word;
}

.inner {
  padding: 58.5px 60.6667px;
}

.block {
  margin: 13px 0;
}
.block:first-child {
  margin-top: 0;
}
.block:last-child {
  margin-bottom: 0;
}
h1 {
  font-size: inherit;
  font-weight: inherit;
}
strong {
  font-weight: 400;
}
em {
  font-style: italic;
}
.list {
  margin: 34.6667px 0;
  font-size: 10.8333px;
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.25s ease;
}
a:hover {
  color: #555;
}

/* Home, in the corner and the style of the main page's header links (.label in ../styles.css, light theme):
   24px in (18px on phones), Inter Tight 12px in spaced capitals, ink #1c2a27 with no underline, fading to 80% under the pointer. */
.nav {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  gap: 24px;
}
.nav a {
  font:
    400 12px/1.2 'Inter Tight',
    system-ui,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1c2a27;
  text-decoration: none;
  transition: none;
}
.nav a:hover {
  color: rgba(28, 42, 39, 0.8);
}

@media (max-width: 736px) {
  body {
    font-size: 14.6667px;
  }
  .inner {
    padding: 49.5px 29.3333px;
  }
  .list {
    font-size: 12.2222px;
  }
}

@media (max-width: 736px) and (max-height: 720px) {
  body {
    font-size: 12.5px;
  }
  .inner {
    padding: 24px 24px;
  }
  .list {
    margin: 20px 0;
    font-size: 10px;
  }
}

@media (max-width: 640px) {
  .nav {
    top: 18px;
    right: 18px;
  }
}

/* The phone menu (menu.js), placed exactly as on the main page, after Thrive Holdings' mobile header, measured on their site at 404px wide: three 1px
   lines 18px long and 5px apart, right-aligned in a 32 x 24 button level with the name; the links right-aligned
   under it, the first 59.5px below the button's top and each next one 28.4px lower, arriving with a 5px drop over
   a quarter second. Hidden on wider screens, where the links sit in the corner as usual. */
.menu-button {
  display: none;
}
@keyframes menu-drop {
  from {
    transform: translateY(-5px);
  }
}
@media (max-width: 640px) {
  .menu-button {
    position: absolute;
    /* centred on the main page's name: 12px is half its 24px line (20px type, --name-size in ../styles.css) */
    top: calc(18px + 12px - 12px);
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .menu-button span {
    width: 18px;
    height: 1px;
    border-radius: 2px;
    background: #1c2a27;
  }
  .nav {
    display: none;
  }
  html.menu-open .nav {
    position: absolute;
    top: calc(18px + 12px - 12px + 59.5px);
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    animation: menu-drop 0.25s ease-out;
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  html.menu-open .nav {
    animation: none;
  }
}