/* One typeface: Pretendard, served from here (fonts/pretendard/pretendard.css, linked before this sheet). */
/* The samples letter their own artwork by what the page says on its root: the face of what is named (which they know as
   --serif: here it is the same family), its weight, and how the second voice is asked for (here, its light). */
:root { --sans: 'Pretendard Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif; --serif: var(--sans); --serif-weight: 600; --serif-slant: 300; --fg: #f1ece2; --out: cubic-bezier(0.33, 1, 0.68, 1); --in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* the two curves everything eases by: cubic out, and cubic in-out (see EASE in shelf.js) */
  /* The page's own type over the room: its colour, what backs it (a glow, and how solid a plate), and how far the corners are darkened. */
  --ink: 241, 236, 226; --halo: 0, 0, 0; --plate: 0; --veil: 1; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #0b0a09; touch-action: none; }   /* (nothing here scrolls, and two fingers are not to magnify the page: see the pinch in shelf.js) */
body { font-family: var(--sans); color: var(--fg); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

#room { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#room.is-over { cursor: pointer; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 45% 42%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, calc(0.5 * var(--veil, 1))) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 72%, rgba(8, 6, 5, calc(0.72 * var(--veil, 1))) 100%); }

/* The page's own type over the room takes its colour from the look (--ink), and is backed by --halo. */
.page { position: fixed; inset: 0; pointer-events: none; transition: opacity 0.5s var(--out); color: rgb(var(--ink, 241, 236, 226)); }

.label { position: absolute; width: min(25em, 70vw); }
.label .line { display: block; width: 1px; height: 11vh; background: rgba(var(--ink), 0.8); transform: scaleY(0); transform-origin: top; transition: transform 0.3s var(--out); }
/* Its words are one block, which a bright look backs with a plate (--plate) so they can be read over the books. */
.label .words { margin: 0.5rem 0 0 -1rem; padding: 0.6rem 1rem 0.9rem; border-radius: 6px; background: rgba(var(--halo), 0); transition: background 0.25s var(--out); }
.label.is-on .words { background: rgba(var(--halo), var(--plate, 0)); transition: background 0.5s var(--out) 0.25s; }
.label h2 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.label p { margin-top: 0.7rem; font-size: 15px; line-height: 1.5; color: rgba(var(--ink), 0.62); text-wrap: pretty; }
.label h2, .label p { opacity: 0; transform: translateY(6px); transition: opacity 0.25s var(--out), transform 0.5s var(--out); }
.label.is-on .line { transform: scaleY(1); transition: transform 0.7s var(--out); }
.label.is-on h2, .label.is-on p { opacity: 1; transform: none; transition-delay: 0.3s; }
.label.is-on p { transition-delay: 0.4s; }

.premise { position: absolute; right: 20px; bottom: 16px; width: min(24em, 40vw); box-sizing: content-box; padding: 14px 16px; border-radius: 6px; background: rgba(var(--halo), var(--plate, 0)); font-size: 14px; line-height: 1.5; }
.premise b { font-weight: 700; display: block; margin-bottom: 0.5em; font-size: 15px; }
.premise p { color: rgba(var(--ink), 0.6); text-wrap: pretty; }
.premise { transition: opacity 0.4s var(--out); }

/* The sample comes up through the notebook's cover once it fills the view. */
#tiles { position: fixed; inset: 0; pointer-events: none; }
.tile { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; }

#close { position: fixed; top: 22px; right: 28px; z-index: 5; padding: 0.6em 1.1em; border-radius: 999px; background: rgba(10, 10, 12, 0.62); color: #f4f2ec; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--out); }

body.is-leaving-shelf .page { opacity: 0; }
body.is-in #tiles { pointer-events: auto; }
body.is-in #close { opacity: 1; pointer-events: auto; }

@media (max-width: 760px) {
  .label h2 { font-size: 17px; }
  .label p { font-size: 14px; margin-top: 0.4rem; }
  .premise { left: 4px; right: 4px; bottom: 4px; width: auto; font-size: 12.5px; }
  .label.is-on ~ .premise { opacity: 0; }                /* no room for both: the notebook's own words win */
}

/* A little film grain over the room, so flat areas aren't perfectly clean. */
.grain { position: fixed; inset: -50%; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* (The vignette and grain are faded out by the script as a notebook is opened, and return when it is put back.) */
html.lite .grain { display: none; }

/* The card above a pointed notebook: the sample's own element, scaled down. Sizes are divided by the scale so they come out in screen pixels. */
.tile.is-card, .card-back { transform-origin: 0 0; border-radius: calc(var(--r, 10px) / var(--k, 0.2)); box-shadow: 0 calc(18px / var(--k, 0.2)) calc(50px / var(--k, 0.2)) rgba(0, 0, 0, calc(0.55 * var(--sh, 1))), 0 0 0 calc(1px / var(--k, 0.2)) rgba(241, 236, 226, calc(0.14 * var(--sh, 1))); }

/* Up close the words sit over the lower row of books: give them something to sit on, and never show both paragraphs at once. */
.label.is-on ~ .premise { opacity: 0; }
.label h2, .label p, .premise { text-shadow: 0 1px 14px rgba(var(--halo, 0, 0, 0), 0.9), 0 0 3px rgba(var(--halo, 0, 0, 0), 0.7); }
.label p { color: rgba(var(--ink), 0.8); }

/* The sheet a card's objects sat on, shown on its own while they are carried off it one by one. */
.card-back { position: fixed; inset: 0; pointer-events: none; visibility: hidden; }

/* The line up from a pointed notebook to its card. It grows from the notebook, as the one below does. */
.tether { position: absolute; left: 0; top: 0; width: 1px; background: rgba(var(--ink), 0.8); transform: scaleY(0); transform-origin: bottom; transition: transform 0.2s var(--out); }
.tether.is-on { transform: scaleY(1); transition: transform 0.6s var(--out); }

/* While a notebook is held open: a line under it saying what can be done next. (Not `.hint`: the samples have their own.) */
.step-hint { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 40px); border-radius: 999px; background: rgba(18, 15, 12, calc(0.62 * var(--plate, 0))); text-align: center; font: 500 11px/1.6 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 236, 226, 0.72); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8); pointer-events: none; opacity: 0; transition: opacity 0.35s var(--out); padding: 0.55em 1.5em; }   /* (in a bright look it sits on a dark pill) */
body.is-reading .step-hint { opacity: 1; transition-delay: 0.25s; }


/* Until the room is whole (see ARRIVING in the script): a dark curtain, the name, a count. Then it lifts. */
.curtain { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: #0b0a09; transition: opacity 1.3s var(--in-out); }
.curtain p { text-align: center; color: rgba(241, 236, 226, 0.86); font: 600 22px/1 var(--sans); letter-spacing: -0.02em; }
.curtain span { display: block; animation: curtain-in 0.9s ease 0.15s both; }
.curtain i { display: block; margin-top: 16px; min-height: 1em; font: 500 10.5px/1 var(--sans); font-style: normal; letter-spacing: 0.26em; color: rgba(241, 236, 226, 0.46); font-variant-numeric: tabular-nums; animation: curtain-in 0.9s ease 0.35s both; }
@keyframes curtain-in { from { opacity: 0; } to { opacity: 1; } }
body.is-ready .curtain { opacity: 0; pointer-events: none; }

/* About and Contact: two links at the top left. The thing each one stands for is on the shelf (see THINGS THAT ANSWER). */
.menu { position: fixed; left: 32px; top: 24px; z-index: 6; display: flex; gap: 1.7em; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; transition: opacity 0.45s var(--out); }
.menu button { position: relative; padding: 0.35em 0; color: rgba(var(--ink), 0.7); text-shadow: 0 1px 12px rgba(var(--halo), 0.7); transition: color 0.25s var(--out); }
.menu button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.1em; height: 1px; background: rgb(var(--ink)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--out); }
.menu button:hover, body[data-shown="about"] .menu [data-thing="about"], body[data-shown="contact"] .menu [data-thing="contact"] { color: rgb(var(--ink)); }
.menu button:hover::after, body[data-shown="about"] .menu [data-thing="about"]::after, body[data-shown="contact"] .menu [data-thing="contact"]::after { transform: scaleX(1); }
body:not(.is-ready) .menu, body.is-leaving-shelf .menu { opacity: 0; pointer-events: none; }
body.is-showing .page { opacity: 0; }
body.is-showing .step-hint { opacity: 1; transition-delay: 0.6s; }
@media (max-width: 760px) { .menu { left: 20px; top: 16px; } }

/* (Temporary: the sky tried at other hours.) */
.hours { position: fixed; left: 32px; bottom: 26px; z-index: 6; display: flex; gap: 1.4em; font: 500 10px/1.6 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; transition: opacity 0.45s var(--out); }
.hours { align-items: baseline; } .hours i { width: 5.6em; font-style: normal; color: rgba(var(--ink), 0.28); }
.hours button { padding: 0.4em 0; color: rgba(var(--ink), 0.4); text-shadow: 0 1px 10px rgba(var(--halo), 0.8); transition: color 0.25s var(--out); }
.hours button:hover, .hours button.is-on { color: rgb(var(--ink)); }
body:not(.is-ready) .hours, body.is-leaving-shelf .hours, body.is-showing .hours { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .hours { display: none; } }