:root{--wine:#260708;--wine2:#3b0d0e;--wood:#1c0d08;--bone:#e7d5ad;--gold:#b58a46;--muted:#aa8b62;--line:rgba(181,138,70,.55)}
*{box-sizing:border-box}html{background:#120504}body{margin:0;color:var(--bone);font-family:Georgia,'Times New Roman',serif;background:radial-gradient(circle at 50% 22%,#531314 0,#31090a 32%,#190606 70%,#100403 100%);min-height:100vh}.topbar{height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4.5vw;border-bottom:1px solid var(--line);background:rgba(22,4,4,.78);position:relative}.back,.catalogue{font-size:11px;letter-spacing:.23em;color:#c6a977;text-decoration:none}.catalogue{text-align:right}.logo{width:72px;max-height:68px;object-fit:contain;filter:sepia(1) saturate(.7) brightness(1.6)}.masthead{min-height:275px;display:grid;grid-template-columns:1fr minmax(420px,680px) 1fr;align-items:end;padding:34px 4vw 26px;border-bottom:9px solid #2a140d;box-shadow:0 7px 0 #0e0503,0 12px 28px #0008;position:relative;overflow:hidden}.masthead:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#fff1 1px,transparent 1px);background-size:4px 4px;opacity:.08}.titleblock{text-align:center;z-index:1}.eyebrow{font-size:10px;letter-spacing:.32em;color:#a98556;margin:0 0 14px}.titleblock h1{font-weight:500;font-size:clamp(46px,5vw,78px);letter-spacing:.04em;margin:0;text-shadow:0 3px 12px #000}.plate{display:inline-block;margin:14px 0 15px;padding:9px 34px;border:2px solid #8c6a37;outline:1px solid #2a1409;background:linear-gradient(#d4b777,#9a733b);color:#261209;box-shadow:inset 0 0 0 3px #b99457,0 4px 12px #0008;font-weight:bold;letter-spacing:.16em}.tagline{font-size:13px;letter-spacing:.34em;color:#d0b481;margin:0}.prop{height:150px;opacity:.68;display:flex;align-items:flex-end;gap:12px}.prop.right{justify-content:flex-end}.books{display:block;width:150px;height:94px;background:repeating-linear-gradient(90deg,#170d08 0 18px,#6e4b25 19px 21px,#25150c 22px 38px);border-bottom:6px solid #6e4b25;box-shadow:0 8px 15px #000}.books.small{width:110px;height:75px}.lamp{width:75px;height:115px;border-left:8px solid #a27732;border-radius:50%;box-shadow:-18px -34px 20px #d9a83b44}.globe{width:95px;height:95px;border:5px double #8e672e;border-radius:50%;box-shadow:inset 0 0 25px #000,0 0 18px #b0782940}.shelf{padding:28px 2vw 38px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;background:linear-gradient(#281109,#160906 7%,#251109 94%,#0c0403);border-bottom:10px solid #32170d;box-shadow:inset 0 12px 24px #0008,inset 0 -10px 18px #0008}.work{text-align:center;min-width:0}.cover{height:clamp(240px,31vw,480px);display:flex;align-items:flex-end;justify-content:center;padding:4px;border-bottom:3px solid #6c3f20}.cover img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 10px 18px #000b;border:1px solid #6e4e32}.work h2{font-size:clamp(13px,1.25vw,19px);letter-spacing:.08em;font-weight:500;color:#d7b46e;margin:14px 0 7px}.work p{font-family:Arial,sans-serif;font-size:9px;letter-spacing:.2em;color:#9f805b;margin:0}footer{min-height:76px;padding:20px 4vw;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;border-top:1px solid var(--line);background:#140504;color:#a98a61;font-size:9px;letter-spacing:.2em}footer span:nth-child(2){text-align:center}footer span:last-child{text-align:right}
@media(max-width:900px){.topbar{height:72px;padding:0 18px}.logo{width:58px}.catalogue{display:none}.topbar{grid-template-columns:1fr auto}.back{font-size:9px}.masthead{min-height:235px;grid-template-columns:1fr;padding:32px 20px 25px}.prop{display:none}.titleblock h1{font-size:48px}.tagline{font-size:10px;letter-spacing:.22em}.shelf{grid-template-columns:1fr;padding:28px 8vw;gap:30px}.cover{height:auto;max-height:none;padding:0;border:0}.cover img{width:min(78vw,430px);max-height:none}.work h2{font-size:20px;margin-top:14px}.work p{font-size:9px}footer{grid-template-columns:1fr;text-align:center;gap:10px;padding:24px 18px}footer span:last-child,footer span:nth-child(2){text-align:center}}
@media(min-width:901px) and (max-width:1300px){.shelf{gap:9px;padding-left:1vw;padding-right:1vw}.cover{height:33vw}.work h2{font-size:13px}.work p{font-size:8px;letter-spacing:.12em}}

/* Prototype 02 — desktop shelf refinement */
@media(min-width:901px){
  .masthead{min-height:205px;padding-top:22px;padding-bottom:20px;align-items:end}
  .prop{height:105px;opacity:.62;gap:8px}
  .bookstack{display:block;position:relative;border:1px solid #7b572c;background:linear-gradient(90deg,#24130c,#68441f 8%,#2a170d 13%,#17100b 88%,#79542b 94%,#24130c);box-shadow:0 7px 13px #0009,inset 0 1px #c69a5144}
  .bookstack:before,.bookstack:after{content:"";position:absolute;left:-5px;right:-5px;height:16px;border:1px solid #72502a;background:linear-gradient(90deg,#1c100b,#68451f 8%,#21130c 90%,#78552c);box-shadow:0 5px 9px #0008}
  .bookstack:before{bottom:28px}.bookstack:after{bottom:55px}
  .stack-a{width:94px;height:83px}.stack-b{width:62px;height:68px}.stack-c{width:68px;height:76px}.stack-d{width:102px;height:88px}
  .shelf-wrap{position:relative;background:linear-gradient(#281109,#160906 7%,#251109 94%,#0c0403);border-bottom:10px solid #32170d;box-shadow:inset 0 12px 24px #0008,inset 0 -10px 18px #0008;padding:20px 54px 30px}
  .shelf{padding:8px 0 10px;display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:none;border:0;box-shadow:none}
  .shelf::-webkit-scrollbar{display:none}
  .work{flex:0 0 clamp(250px,21.5vw,330px);scroll-snap-align:start}
  .cover{height:clamp(350px,36vw,510px)}
  .work h2{font-size:clamp(15px,1.35vw,20px)}
  .shelf-arrow{position:absolute;z-index:5;top:43%;transform:translateY(-50%);width:34px;height:66px;border:1px solid rgba(181,138,70,.58);background:rgba(20,5,4,.82);color:#d7b46e;font:38px/1 Georgia,serif;cursor:pointer;box-shadow:0 4px 15px #0008;transition:.18s ease}
  .shelf-arrow:hover{background:#3b0d0e;color:#f0d7a2;border-color:#c79a50}
  .shelf-arrow.prev{left:10px}.shelf-arrow.next{right:10px}
}
@media(max-width:900px){.shelf-wrap{padding:0;background:none}.shelf-arrow{display:none}}

/* Prototype 03 — approved Library identity, no decorative side symbols */
.library-seal{display:none}
@media(min-width:901px){
  .masthead{min-height:190px;grid-template-columns:150px minmax(420px,680px) 150px;justify-content:center;align-items:center;padding:18px 4vw 16px;column-gap:24px}
  .library-seal{display:block;width:132px;height:132px;object-fit:cover;border-radius:50%;justify-self:center;box-shadow:0 9px 24px #0009;border:1px solid rgba(181,138,70,.55)}
  .titleblock{grid-column:2}
  .eyebrow{margin-bottom:8px}
  .titleblock h1{font-size:clamp(42px,4.4vw,68px)}
  .plate{margin:9px 0 10px;padding:7px 29px}
  .tagline{font-size:12px}
  .shelf-wrap{padding-top:12px}
}
@media(min-width:901px) and (max-width:1100px){
  .masthead{grid-template-columns:120px minmax(400px,620px) 80px;column-gap:14px}
  .library-seal{width:108px;height:108px}
}

.puteri-link{cursor:pointer}.puteri-link:focus{outline:1px solid #b99855;outline-offset:5px}