/* Underside: coming-soon page. Same look as the main site: white column between 0.5px margin lines,
   Instrument Sans, black square buttons, header links whose black block fades in behind the word on hover. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #fff; color: #000; font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* same widths as the homepage: from 1024px a 64px column on the left holds the black smiley, the page sits between
   the margin lines (max 1600px) and a 24px gutter on the right */
.page { display: flex; max-width: 1688px; min-height: 100%; margin: 0 auto; }
.rail { display: none; }
.frame { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; max-width: 1600px; min-height: 100%; margin: 0 auto; background: #fff; }
.frame::after { content: ""; position: absolute; inset: 0 16px; border-left: .5px solid rgba(0, 0, 0, .24); border-right: .5px solid rgba(0, 0, 0, .24); pointer-events: none; }
@media (min-width: 1024px) {
  .page { padding-right: 24px; }
  .rail { display: block; flex: none; width: 64px; align-self: flex-start; position: sticky; top: 16px; padding-top: 200px; }
  .rail-smiley, .rail-smiley img { display: block; width: 64px; height: 64px; }
  .frame { margin: 0; }
  .frame::after { inset: 0; }
}

/* header */
.top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 40px; font-size: 18px; letter-spacing: -.02em; line-height: 1.2; }
@media (min-width: 1281px) { .top { font-size: 20px; } }
@media (min-width: 1024px) { .top { padding: 16px 24px; } }   /* homepage header inset */
.top .links { font-size: 16px; letter-spacing: -.04em; }   /* header items smaller and tighter than the name, as on the homepage */
@media (max-width: 1023.98px) { .top .links { font-size: 15px; } }
.name { text-decoration: none; }
.links { display: flex; align-items: center; gap: 20px; }
.nav-link { position: relative; display: inline-flex; text-decoration: none; white-space: nowrap; }
.nav-link-title { position: relative; z-index: 1; transition: color .15s; }
.nav-link-cover { position: absolute; z-index: 0; inset: -1px -5px -2px -5px; background: #000; opacity: 0; transition: opacity .2s ease; }
.nav-link:hover .nav-link-cover, .nav-link:focus-visible .nav-link-cover { opacity: 1; }
.nav-link:hover .nav-link-title, .nav-link:focus-visible .nav-link-title { color: #fff; }
.nav-link:focus-visible, .contact:focus-visible { outline: none; }
.contact { margin-left: 4px; padding: 1px 5px 2px; background: #000; color: #fff; text-decoration: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.contact:hover, .contact:focus-visible { background: #fff; color: #000; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .24); }   /* inverts, with a hairline outline like the page's margin lines */
@media (max-width: 479px) { .top { padding: 16px 28px; } .links .nav-link:not(.is-current) { display: none; } }

/* the embroidered cloth fills the whole page, under the header too (no seam); the text sits on it in the middle.
   No stitches under the text or the header links (js/underside.js) */
.frame { min-height: max(100%, 600px); }
.stage { position: absolute; inset: 0; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.cloth { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.label { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 64px)); padding: 24px 0; text-align: center; pointer-events: none; }
.label h1 { margin: 0; font-size: clamp(36px, 4.6vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -.04em; }
.status { margin: 0 0 6px; font-size: 14px; line-height: 1.3; }   /* in brackets, like "(Perpetually curious)" on the homepage */
.desc { margin: 16px auto 0; max-width: 56ch; font-size: 14px; line-height: 1.3; }                                   /* same small text as the homepage descriptions */
.back { margin: 24px 0 0; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; }   /* a black button, same as Contact */
.back a { pointer-events: auto; margin-left: 0; display: inline-flex; align-items: center; gap: .3em; }
.back-arrow { width: .6em; height: .5em; flex: none; }   /* a short drawn arrow (the ← glyph is long in this typeface) */
@media (min-width: 1281px) { .back { font-size: 20px; } }