/* The cloth's service notes remain readable when its interactive renderer is unavailable.
   Note typography and spacing come from the same reading styles as the hash routes. */
.service-rim,.lost-rim { position:fixed; left:0; right:0; top:0; z-index:2; height:var(--hemH); display:flex; align-items:center; justify-content:center; }
.service-word,.lost-word { position:relative; font-family:"Bodoni Moda","EB Garamond",Georgia,serif; font-size:21px; line-height:1; letter-spacing:.12em; text-indent:.12em; text-transform:lowercase; }
.service-threads,.lost-threads { position:absolute; left:50%; bottom:.48em; height:.9em; width:auto; transform:translateX(-50%); }
.service-rim:hover .service-word,.service-rim:focus-visible .service-word,.lost-rim:hover .lost-word,.lost-rim:focus-visible .lost-word { color:var(--rust); }
.service-rim:focus-visible,.lost-rim:focus-visible { outline-offset:-8px; }

/* The one page that stands alone: the cloth without its folds, the wordmark at the top, a note. */
.lost { position:relative; z-index:1; min-height:100svh; }
.lost-sheet { padding:calc(var(--hemH) + 40px) 5vw 120px; }
.lost-ways { display:flex; flex-wrap:wrap; gap:8px 28px; margin:36px 0 0; }
.lost-ways a { display:inline-flex; align-items:center; min-height:44px; border-bottom:1px solid var(--line-strong); font-size:var(--t-body); }
.lost-ways a:hover,.lost-ways a:focus-visible { color:var(--rust); }
@media (max-width:600px) {
  .lost-sheet { padding:calc(var(--hemH) + 24px) 6vw 120px; }
  .service-word,.lost-word { font-size:18px; }
}