/* after hours: the inner pages. same paper, inks and type as the room (after-hours-type.html);
   each page is a close-up of one object from it, typed. */
:root{--paper:#f3ecda; --ink:#1b1718; --chart:#f7c48e; --mag:#df6f22; --mag-text:#a84d16; --cob:#22396a; --pink:#93d2c9; --grey:#b9b4d8; --soft:#6b6062; color-scheme:light}
*{box-sizing:border-box}
html{background:#f5f3ee; overflow-x:hidden}
body{margin:0; color:var(--ink); font:16px/1.6 "Courier Prime",monospace; overflow-x:hidden;
  /* the same white painted wall as the room (after-hours-src/wall.py), the lamp's light from the upper left */
  background-color:#f5f3ee;
  background-image:radial-gradient(ellipse 70% 60% at 12% 0%, rgba(255,205,150,.18), transparent 70%), radial-gradient(ellipse 110% 95% at 50% 35%, transparent 50%, rgba(70,58,46,.10)), url(/after-hours/img/wall.webp);
  background-size:100% 100%, 100% 100%, 512px 512px; background-attachment:fixed, fixed, scroll}
::selection{background:var(--mag); color:#fffdf8}
a{color:inherit; text-decoration-color:var(--mag); text-underline-offset:3px; text-decoration-thickness:2px}
a:hover{color:var(--cob)}
:focus-visible{outline:3px dashed var(--cob); outline-offset:4px}
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(16px,3vw,40px); position:relative}

/* masthead: the room's, at a smaller size so the object leads */
.mast{position:relative; padding-top:14px; overflow-x:clip; overflow-y:visible}
.mast .name{position:relative; display:inline-block; font:400 clamp(64px,11vw,140px)/.82 "Abril Fatface",serif; letter-spacing:-.035em; margin:0; transform:scaleX(.84); transform-origin:left bottom; white-space:nowrap; text-decoration:none; color:var(--ink)}
.mast .name span{position:relative; z-index:1}
.mast .name::after{content:""; position:absolute; left:2%; bottom:6%; width:44%; height:26%; background:var(--chart); mix-blend-mode:multiply; transform:rotate(-1.2deg)}
.band{background:var(--cob) url(/after-hours/img/toner.webp) 0 0/384px; color:#f6f1e6; margin-top:12px}
.band .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1.5rem; padding-top:.6rem; padding-bottom:.6rem; font-size:.95rem}
.band a{color:#f6f1e6; text-decoration:none}
.band a:hover{color:var(--chart)}
.band a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--chart); text-decoration-thickness:3px; text-underline-offset:5px}
.band .links{display:flex; flex-wrap:wrap; gap:.2rem 1.1rem; align-items:baseline}
.band .sm{font-weight:700; margin-right:.4rem}
.band .where a{text-decoration:underline; text-decoration-color:var(--chart)}
.tear{display:none}   /* the torn strip is gone now the pages sit on the wall */

/* the sheet the object is typed on */
.sheet{position:relative; margin:34px 0 0; background:#f8f3e7 url(/after-hours/img/paper.webp) 0 0/768px; padding:clamp(22px,4vw,48px) clamp(18px,4vw,52px) clamp(26px,4vw,48px);
  transform:rotate(-.35deg); box-shadow:0 14px 30px -18px rgba(27,23,24,.7)}
.sheet .tape{position:absolute; width:clamp(70px,10vw,130px); pointer-events:none}
.sheet .t1{top:-14px; left:6%; transform:rotate(-8deg)} .sheet .t2{top:-12px; right:7%; transform:rotate(6deg); filter:hue-rotate(205deg) saturate(.55) brightness(1.25)}   /* the handoff's pink tape, re-inked aquamarine */
.title{font:400 clamp(40px,6vw,64px)/1 "Abril Fatface",serif; margin:4px 0 2px; letter-spacing:-.01em}
.sub{font:28px/1.1 "Reenie Beanie",cursive; color:var(--mag-text); margin:0 0 26px}

/* typed objects: rows of monospace with the room's inks */
pre.typed{margin:0; font:15px/1.22 "Courier Prime",monospace; white-space:pre; overflow-x:auto; text-shadow:.07em .05em 0 rgba(223,111,34,.18)}
.k-b{color:var(--cob)} .k-r{color:var(--mag-text)} .k-s{color:var(--soft)} .k-p{color:#2a8f88}
.bh{background:var(--chart)} .bc{background:var(--cob); color:#f6f1e6} .bp{background:var(--pink)} .bk{background:var(--ink); color:var(--chart)}
pre.typed span, pre.typed a{padding:.11em 0}
pre.typed a{text-decoration:none}
pre.typed a:hover, pre.typed a:focus-visible{background:var(--chart); color:var(--ink); outline:none}
pre.typed a.bp:hover{background:var(--chart)}
.hand{font:24px/1.1 "Reenie Beanie",cursive; color:var(--mag-text)}
.aside{color:var(--soft); font-size:.9rem; margin-top:22px}
.aside a{color:var(--ink)}

main.wrap{padding-bottom:72px}
.colophon{text-align:center; color:var(--soft); font-size:.8rem}

.narrow{display:none}
@media (max-width:700px){ .wide{display:none} .narrow{display:block} pre.typed{font-size:11px} .sheet{transform:none; padding:22px 14px 26px} .wrap{padding:0 12px} .band .wrap{font-size:.85rem} }

/* the things monitor: a screen-shaped window onto a list that scrolls */
.monitor{display:inline-block; max-width:100%}
.monitor pre.typed{overflow:visible}
.monitor .screen{height:calc(19 * 1.22 * 15px); overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--ink) var(--chart)}
.monitor .screen:focus-visible{outline:3px dashed var(--cob); outline-offset:2px}
.monitor .screen::-webkit-scrollbar{width:8px} .monitor .screen::-webkit-scrollbar-track{background:var(--chart)} .monitor .screen::-webkit-scrollbar-thumb{background:var(--ink)}
/* phones: each narrow drawing sizes its type so its columns always fit the screen */
.narrow{--fs:min(11px, calc((100vw - 56px) / (var(--cols, 44) * .6)))}
@media (max-width:700px){ .narrow pre.typed{font-size:var(--fs)} .narrow .monitor .screen{height:calc(16 * 1.22 * var(--fs))} }