:root{
  --bg:#10130f;
  --cream:#f0e8d8;
  --muted:#b9ad95;
  --wood:#5c3920;
  --wood-dark:#1b1510;
  --gold:#c6a46c;
  --shadow:rgba(0,0,0,.46);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--cream);
  overflow:hidden;
}
a{color:inherit;text-decoration:none}
.library{
  position:relative;
  width:100vw;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(11,13,10,.10),rgba(7,7,6,.46)),
    url("../img/library-interior.webp") center/cover no-repeat,
    #11150f;
}
.library::before,
.library::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:min(18vw,260px);
  z-index:-1;
  background:linear-gradient(90deg,rgba(3,5,4,.52),rgba(3,5,4,0));
  opacity:.56;
}
.library::before{left:0}
.library::after{right:0;transform:scaleX(-1)}
.grain{
  position:absolute;inset:0;z-index:20;pointer-events:none;opacity:.06;
  background-image:
    radial-gradient(circle at 10% 20%, white 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, white 0 1px, transparent 1px);
  background-size:6px 6px,8px 8px;
  mix-blend-mode:soft-light;
}
.glow{position:absolute;top:8%;width:28vw;height:68vh;filter:blur(70px);opacity:.13;pointer-events:none}
.glow--left{left:5%;background:#d7c072}
.glow--right{right:10%;background:#496a56}

.name-lockup{
  position:absolute;left:50%;top:2.2vh;transform:translateX(-50%);
  z-index:3;width:min(72vw,860px);height:126px;pointer-events:none;
  display:flex;align-items:flex-start;justify-content:center;
  user-select:none
}
.surname-engraving{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(46px,7.4vw,104px);
  line-height:.9;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:rgba(217,202,171,.12);
  text-shadow:
    0 -1px 0 rgba(255,246,214,.10),
    0 1px 0 rgba(0,0,0,.44),
    0 10px 22px rgba(0,0,0,.20);
  mix-blend-mode:screen;
  filter:contrast(1.1) saturate(.8)
}
.surname-engraving::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-48%);
  width:104%;height:72%;
  background:linear-gradient(180deg,rgba(236,221,184,.11),rgba(86,67,42,.07));
  border-top:1px solid rgba(236,221,184,.10);
  border-bottom:1px solid rgba(16,10,6,.22);
  opacity:.55;pointer-events:none
}
.name-plaque{
  position:absolute;left:50%;top:18px;transform:translateX(-50%);
  z-index:5;padding:8px 26px 9px;
  border:1px solid rgba(212,174,96,.34);
  border-radius:2px;
  background:
    linear-gradient(90deg,rgba(255,238,183,.10),rgba(255,238,183,.02) 18%,rgba(54,40,24,.14)),
    linear-gradient(180deg,rgba(93,67,36,.62),rgba(46,35,23,.68));
  box-shadow:
    0 14px 25px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,240,194,.22),
    inset 0 -1px 0 rgba(0,0,0,.26);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(12px,1.05vw,16px);letter-spacing:.16em;text-transform:uppercase;
  color:#f0e2be;white-space:nowrap;
  text-shadow:0 1px 1px rgba(0,0,0,.54)
}
.name-plaque::before,
.name-plaque::after{
  content:"";position:absolute;top:50%;width:4px;height:4px;transform:translateY(-50%);
  border-radius:50%;background:rgba(232,204,139,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 1px rgba(0,0,0,.35)
}
.name-plaque::before{left:10px}
.name-plaque::after{right:10px}
.portrait-zone{
  position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);
  width:min(34vw,460px);z-index:4;text-align:center
}
.portrait-shell{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border-radius:47% 47% 14% 14% / 28% 28% 10% 10%;
  box-shadow:0 34px 70px rgba(0,0,0,.58),0 0 0 1px rgba(230,210,170,.08);
  transform:translate3d(0,0,0);
  transition:transform .23s cubic-bezier(.2,.65,.3,1), filter .2s ease;
  will-change:transform
}
.portrait-shell img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 31%;
  user-select:none;-webkit-user-drag:none;cursor:pointer;
  filter:saturate(.82) contrast(1.03) brightness(.94);
  transform:scale(1.055)
}
.portrait-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 56%,rgba(18,11,7,.18) 72%,rgba(18,11,7,.62) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)
}
.microcopy{
  margin-top:10px;min-height:20px;color:var(--muted);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:opacity .18s ease
}
.book-layer{position:absolute;inset:0;z-index:7;pointer-events:none}
.book{
  --rotate:0deg;
  --cover:#6b2e34;
  --cover-dark:#35151a;
  --cover-light:#944350;
  --page:#eadfbd;
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  min-width:184px;height:82px;padding:0 24px 0 38px;
  border-radius:4px 12px 12px 4px;
  border:1px solid rgba(67,43,25,.42);
  perspective:420px;
  background:
    repeating-linear-gradient(90deg,rgba(95,61,31,.18) 0 1px,transparent 1px 8px),
    linear-gradient(180deg,#f2e7c9,#d1be91);
  box-shadow:
    0 18px 28px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset -8px 0 18px rgba(80,50,25,.16);
  font-size:13px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
  transform:rotate(var(--rotate));
  transform-origin:center bottom;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
  pointer-events:auto;
}
.book > span:first-child{
  position:relative;z-index:5;
  color:#f5ecd9;
  text-shadow:0 2px 2px rgba(0,0,0,.38)
}
.book::before{
  content:"";position:absolute;z-index:4;left:8px;top:7px;bottom:7px;width:23px;
  border-radius:5px 2px 2px 5px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.20),rgba(255,255,255,.02) 28%,rgba(0,0,0,.24)),
    linear-gradient(180deg,var(--cover-light),var(--cover-dark));
  box-shadow:
    inset -4px 0 7px rgba(0,0,0,.22),
    8px 0 0 rgba(255,255,255,.08)
}
.book::after{
  content:"";position:absolute;z-index:3;inset:5px 9px 7px 27px;border-radius:2px 10px 10px 2px;
  background:
    radial-gradient(circle at 22% 24%,rgba(255,255,255,.24),transparent 13%),
    linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.02) 28%,rgba(0,0,0,.24)),
    linear-gradient(135deg,var(--cover-light),var(--cover) 45%,var(--cover-dark));
  transform-origin:left center;
  transform:rotateY(0deg);
  transition:transform .24s cubic-bezier(.2,.7,.25,1),filter .24s ease;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset -8px 0 16px rgba(0,0,0,.18)
}
.book:hover,.book:focus-visible,.book.is-active{
  transform:translateY(-11px) rotate(var(--rotate)) scale(1.045);
  filter:brightness(1.13);
  box-shadow:
    0 24px 36px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset -8px 0 18px rgba(80,50,25,.16);
  outline:none
}
.book:hover::after,.book:focus-visible::after,.book.is-active::after{
  transform:rotateY(-48deg) translateX(10px);
  filter:brightness(1.12)
}
.book .book-sub{
  position:absolute;left:56%;top:calc(100% - 2px);z-index:2;
  transform:translateX(-50%) translateY(-10px) rotateX(-22deg);
  width:max-content;max-width:250px;padding:9px 14px 10px;
  border:1px solid rgba(106,76,39,.25);
  border-radius:0 0 7px 7px;
  background:
    linear-gradient(90deg,rgba(120,91,51,.12) 0 1px,transparent 1px 100%),
    linear-gradient(180deg,#f2e7ca,#d9c99e);
  background-size:12px 100%,100% 100%;
  box-shadow:0 12px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.55);
  color:#3a2c1e;font-size:10px;font-weight:750;letter-spacing:.055em;text-transform:none;
  opacity:0;pointer-events:none;transform-origin:top center;
  transition:opacity .2s ease,transform .22s cubic-bezier(.2,.7,.25,1)
}
.book:hover .book-sub,.book.is-active .book-sub{opacity:1;transform:translateX(-50%) translateY(0) rotateX(0)}
.book[data-position="top-left"]{left:20%;top:15%;--rotate:-2deg}
.book[data-position="top-center"]{left:50%;top:12%;transform:translateX(-50%) rotate(1deg)}
.book[data-position="top-center"]:hover,.book[data-position="top-center"].is-active{transform:translateX(-50%) translateY(-11px) rotate(1deg) scale(1.045)}
.book[data-position="top-right"]{right:20%;top:15%;--rotate:2deg}
.book[data-position="left"]{left:7%;top:38%;--rotate:-1deg}
.book[data-position="left-bottom"]{left:9%;top:56%;--rotate:1deg}
.book[data-position="right"]{right:6%;top:42%;min-width:190px;--rotate:1deg}
.book[data-position="desk"]{
  left:50%;bottom:8%;transform:translateX(-50%) rotate(-2deg);
  --cover:#d8c69b;--cover-dark:#ad9869;--cover-light:#f3e3b1;
  color:#34291c;min-width:184px;height:74px;
  box-shadow:0 12px 26px rgba(0,0,0,.32)
}
.book[data-position="desk"]:hover,.book[data-position="desk"].is-active{
  transform:translateX(-50%) translateY(-10px) rotate(-1deg) scale(1.04)
}
.book[data-position="desk"] > span:first-child{color:#3b2b1b;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.book[data-position="desk"] .book-sub{color:#d7c9ad}
.book[data-id="notes"]{--cover:#722e3b;--cover-dark:#37141d;--cover-light:#9a4557}
.book[data-id="lectures"]{--cover:#294d72;--cover-dark:#14283f;--cover-light:#4476a7}
.book[data-id="housing"]{--cover:#48654d;--cover-dark:#243528;--cover-light:#739475}
.book[data-id="lab"]{--cover:#755036;--cover-dark:#3a281b;--cover-light:#a1734c}
.book[data-id="texts"]{--cover:#4d5661;--cover-dark:#293038;--cover-light:#75808c}
.book[data-id="productivity"]{--cover:#806a3b;--cover-dark:#47391d;--cover-light:#b4995b}
.book[data-id="productivity"] > span:first-child{font-size:11px}
.desk{
  position:absolute;left:50%;bottom:-4vh;transform:translateX(-50%);
  width:min(78vw,1120px);height:19vh;z-index:5;
  background:linear-gradient(180deg,rgba(112,68,34,.90),rgba(47,30,19,.96) 72%,rgba(17,12,9,.98));
  border-top:8px solid rgba(139,87,45,.92);
  box-shadow:0 -15px 38px rgba(0,0,0,.46)
}
.status{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap
}
@media (max-width:900px){
  body{overflow:auto}
  .library{
    display:flex;flex-direction:column;
    height:auto;min-height:100svh;overflow:auto;padding:68px 16px 56px;
    background-position:center top
  }
  .library::before,.library::after{width:12vw;opacity:.35}
  .name-lockup{top:12px;width:96vw;height:58px}
  .surname-engraving{font-size:42px;letter-spacing:.12em}
  .name-plaque{top:18px;padding:6px 18px 7px;font-size:11px;letter-spacing:.11em}
  .portrait-zone{order:1;position:relative;left:auto;top:auto;transform:none;width:min(66vw,315px);margin:18px auto 8px}
  .book-layer{
    order:2;position:relative;inset:auto;display:grid;
    grid-template-columns:repeat(6,1fr);grid-auto-rows:60px;
    gap:8px 8px;width:min(94vw,520px);margin:6px auto 0;padding:15px 12px 21px;
    pointer-events:auto;perspective:620px;
    border-top:1px solid rgba(220,190,130,.20);
    border-bottom:8px solid rgba(98,59,31,.82);
    background:
      linear-gradient(180deg,rgba(255,238,196,.06),rgba(18,11,6,.26)),
      linear-gradient(90deg,rgba(255,255,255,.04),rgba(0,0,0,.10));
    box-shadow:0 18px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)
  }
  .book,.book[data-position]{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    min-width:0!important;width:auto;height:60px;padding:0 12px 0 31px;
    transform:translateY(var(--mobile-y,0)) rotate(var(--mobile-r,0deg))!important;
    font-size:11px;letter-spacing:.045em;
    box-shadow:0 13px 19px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.45),inset -8px 0 18px rgba(80,50,25,.16)
  }
  .book::before{left:7px;top:6px;bottom:6px;width:19px}
  .book::after{inset:5px 8px 6px 24px}
  .book > span:first-child{font-size:inherit}
  .book[data-id="notes"]{grid-column:1 / span 3;--mobile-r:-2deg;--mobile-y:2px}
  .book[data-id="lectures"]{grid-column:4 / span 3;--mobile-r:2deg;--mobile-y:-2px}
  .book[data-id="housing"]{grid-column:1 / span 3;--mobile-r:1deg;--mobile-y:-1px}
  .book[data-id="lab"]{grid-column:4 / span 3;--mobile-r:-2deg;--mobile-y:4px}
  .book[data-id="texts"]{grid-column:1 / span 2;--mobile-r:-1deg;--mobile-y:1px}
  .book[data-id="productivity"]{grid-column:3 / span 4;--mobile-r:1deg;--mobile-y:-2px}
  .book[data-id="contact"]{grid-column:1 / span 6;--mobile-r:-1deg;--mobile-y:0;height:66px;margin-top:1px}
  .book[data-id="productivity"] > span:first-child{font-size:9px}
  .book:hover,.book.is-active,.book[data-position="top-center"]:hover,.book[data-position="top-center"].is-active,.book[data-position="desk"]:hover,.book[data-position="desk"].is-active{
    transform:translateY(calc(var(--mobile-y,0) - 5px)) rotate(var(--mobile-r,0deg)) scale(1.018)!important
  }
  .book:hover::after,.book.is-active::after{transform:rotateY(-42deg) translateX(8px)}
  .book .book-sub{
    display:block;left:38px;right:10px;top:auto;bottom:5px;width:auto;max-width:none;
    transform:none!important;padding:2px 5px 3px;font-size:8px;line-height:1.05;z-index:12;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:3px;
    background:rgba(244,231,196,.84)
  }
  .book:hover .book-sub,.book.is-active .book-sub{transform:none!important}
  .desk{
    order:3;position:relative;left:auto;bottom:auto;transform:none;width:min(94vw,520px);height:50px;margin:12px auto 0;border-radius:2px;
    background:
      linear-gradient(90deg,rgba(255,255,255,.04),rgba(0,0,0,.12)),
      linear-gradient(180deg,rgba(124,75,38,.92),rgba(50,31,19,.98));
    border-top:7px solid rgba(144,88,45,.95);
    box-shadow:0 -12px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10)
  }
  .microcopy{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .portrait-shell,.book,.book .book-sub{transition:none!important}
}