html,
body {
  margin: 0;
  min-height: 100%;
  background: #1d1e26;
}

body {
  padding: 0;
}

#bookless-identity .bi-page {
  min-height: 100vh;
  min-height: 100svh;
}

#bookless-identity .bi-header,
#bookless-identity .bi-footer {
  flex-shrink: 0;
}

  #bookless-identity {
    --bi-paper: #f3ede2;
    --bi-muted: #d0c8cc;
    --bi-base: #1d1e26;
    --bi-mark-fill: linear-gradient(118deg, #e3d8c4 12%, #c3b5a7 32%, #9d8b91 59%, #605065 82%);
    --bi-mark: url('./assets/bookless-mark.webp');
    color: var(--bi-paper);
    background: var(--bi-base);
    color-scheme: dark;
    container-type: inline-size;
    font: 400 15px/1.7 'Manrope', sans-serif;
    text-align: left;
  }
  #bookless-identity * { box-sizing: border-box; }
  #bookless-identity :is(h1, p) { margin: 0; }
  #bookless-identity a { color: inherit; text-decoration: none; }
  #bookless-identity a:hover { text-decoration: underline; text-underline-offset: 5px; }
  #bookless-identity a:focus-visible { outline: 2px solid var(--bi-paper); outline-offset: 5px; }
  #bookless-identity [hidden] { display: none !important; }
  #bookless-identity .bi-page { display: flex; flex-direction: column; position: relative; isolation: isolate; overflow: clip; padding: 0 36px; }
  #bookless-identity .bi-scene {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% 50%;
    opacity: .18;
    pointer-events: none;
  }
  #bookless-identity .bi-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at 87% 44%, #65536e20, transparent 65%);
    pointer-events: none;
  }
  #bookless-identity .bi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    min-height: 99px;
    padding: 24px 0;
  }
  #bookless-identity .bi-brand { display: flex; align-items: center; gap: 8px; }
  #bookless-identity .bi-brand-mark { display: block; flex: 0 0 auto; width: 36px; height: 36px; }
  #bookless-identity .bi-brand-name {
    font: 500 27px/1 'Manrope', sans-serif;
    letter-spacing: -.06em;
  }
  #bookless-identity .bi-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  #bookless-identity .bi-main { display: flex; align-items: center; flex: 1 0 auto; position: relative; padding: 57px 0 66px; }
  #bookless-identity .bi-argument { position: relative; z-index: 1; max-width: 64%; }
  #bookless-identity h1 {
    font: 400 clamp(55px, 9.6cqw, 88px)/1.02 'DM Serif Display', Georgia, serif;
    letter-spacing: -.037em;
    max-width: 11ch;
  }
  #bookless-identity .bi-thesis { margin-top: 26px; font-size: 16px; line-height: 1.6; }
  #bookless-identity .bi-body { margin-top: 20px; color: var(--bi-muted); max-width: 36ch; font-size: 15px; line-height: 1.85; }
  #bookless-identity .bi-contact { margin-top: 29px; }
  #bookless-identity .bi-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 20px;
    color: #292530;
    background: var(--bi-paper);
    font-size: 13px;
    font-weight: 500;
  }
  #bookless-identity .bi-monument {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -76px;
    width: clamp(360px, 55cqw, 510px);
    aspect-ratio: 1;
    pointer-events: none;
    filter: drop-shadow(7px 5px 0 #14131bc0) drop-shadow(17px 13px 22px #100e1760);
  }
  #bookless-identity .bi-mark-face {
    position: absolute;
    inset: 0;
  }
  #bookless-identity :is(.bi-brand-mark, .bi-mark-face) {
    background: var(--bi-mark-fill);
    mask-image: var(--bi-mark);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--bi-mark);
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
  }
  #bookless-identity .bi-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 18px;
    padding: 14px 0;
    border-top: 1px solid #f3ede227;
    font-size: 12px;
    color: var(--bi-muted);
  }
  #bookless-identity .bi-footer-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
  @container (max-width: 580px) {
    #bookless-identity .bi-page { padding: 0 24px; }
    #bookless-identity .bi-header { min-height: 82px; padding: 17px 0; gap: 16px; }
    #bookless-identity .bi-brand { gap: 5px; }
    #bookless-identity .bi-brand-name { font-size: 25px; }
    #bookless-identity .bi-brand-mark { width: 30px; height: 34px; }
    #bookless-identity .bi-main { padding: 46px 0 54px; }
    #bookless-identity .bi-argument { max-width: 100%; }
    #bookless-identity h1 { font-size: clamp(48px, 11.7cqw, 66px); max-width: 12ch; }
    #bookless-identity .bi-thesis { font-size: 15px; }
    #bookless-identity .bi-body { max-width: 37ch; }
    #bookless-identity .bi-monument { top: auto; transform: none; bottom: 60px; right: -132px; width: 360px; opacity: .12; filter: none; }
    #bookless-identity .bi-footer { padding: 10px 0; }
  }
  @container (max-width: 350px) {
    #bookless-identity .bi-page { padding: 0 20px; }
    #bookless-identity .bi-brand-name { font-size: 22px; }
    #bookless-identity .bi-brand-mark { width: 27px; height: 32px; }
    #bookless-identity .bi-footer-links { column-gap: 16px; }
  }

.not-found {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 760px;
  margin: auto;
  padding: 32px;
  color: #f3ede2;
  font: 400 16px/1.7 system-ui, sans-serif;
}

.not-found h1 {
  font: 400 clamp(42px, 8vw, 72px)/1.1 Georgia, serif;
  margin: 16px 0;
}

.not-found a { color: inherit; text-underline-offset: 4px; }
.not-found a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }