/* The room of /thought/ (owner, 2026-10-15): the shelf is a brass alethiometer-cabinet in an Istanbul shop (cabinet.webp):
   three kinds (the lyre: Poems, the flame: Thoughts, the quill: Essays), twelve drawers. Hovering a drawer swings a
   needle to it and names its topic; opening it leads to its desk (desk.webp, the scribe's desk seen from above) or, for
   Thoughts, to a pile of leaves turned one by one (leaves.webp). Scrolling past the last parchment carries you back to
   the shelf. A drawer you have opened gets its paper label, like an apothecary's. Without script, the list below is
   the page. */
html.room{background:#0E0A07}
html.room body{background:#0E0A07;padding:0;overscroll-behavior-y:none}
html.room body > .top,html.room body > main,html.room body > .foot,html.room .skip{display:none}
html.room.list body > .top,html.room.list body > main,html.room.list body > .foot{display:block}
html.room.list body{background:var(--ground);padding:0 20px}
html.room.list #room{display:none}
#room{--cream:#F2E8D5;--muted:#C9B48E;--gold:#D9A441;color:var(--cream);font-family:var(--serif)}
#room[hidden]{display:none}
.rm-bar{position:fixed;z-index:30;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(14,10,7,.82),rgba(14,10,7,0));pointer-events:none}
.rm-bar > *{pointer-events:auto}
.rm-brand{font:500 12px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--cream);text-decoration:none}
.rm-brand em{font-style:normal;font-weight:400;color:var(--muted)}
.rm-links{display:flex;gap:18px;align-items:center;white-space:nowrap}
@media (max-width:560px){ .rm-links .rm-home{display:none} .rm-brand em{display:none} }
.rm-links a,.rm-links button{background:none;border:0;padding:8px 0;cursor:pointer;font:italic 400 16px/1 var(--serif);color:#E6D3AE;text-decoration:none}
.rm-links a:hover,.rm-links button:hover{color:#fff}
#room :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:50%}

/* ---- the shelf ---- */
.rm-shelf{position:fixed;inset:0;overflow:hidden;background:radial-gradient(80% 70% at 50% 45%,#2A1A0E,#0E0A07 75%)}
.rm-cab{position:absolute;background:url(/thought/room/cabinet.webp?v=2) 0 0/100% 100% no-repeat}
.rm-cab::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 40px rgba(14,10,7,.55)}
.rm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rm-wedge{fill:rgba(255,224,160,.0);stroke:rgba(255,214,140,0);stroke-width:5;mix-blend-mode:screen;transition:fill .3s,stroke .3s}
.rm-wedge.on{fill:rgba(255,236,190,.34);stroke:rgba(255,226,160,1)}
.rm-needle{transition:transform .7s cubic-bezier(.3,1.5,.5,1);opacity:0}
.rm-needle.on{opacity:1}
.rm-drawer{position:absolute;translate:-50% -50%;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.rm-ink{position:absolute;display:block;border-radius:45%;-webkit-tap-highlight-color:transparent;transition:box-shadow .4s,background .4s}
.rm-ink:hover,.rm-ink:focus-visible{background:radial-gradient(closest-side,rgba(255,226,160,.16),rgba(255,226,160,0));box-shadow:0 0 34px 6px rgba(255,214,140,.18)}
.rm-stamp{position:absolute;translate:-50% -50%;padding:.35em .6em .4em;background:#EDE2C8;box-shadow:0 2px 5px rgba(0,0,0,.45),inset 0 0 0 1px #B79A66;
  font:italic 500 max(9px,calc(var(--k) * 15px))/1 var(--serif);color:#3A2410;white-space:nowrap;pointer-events:none;opacity:.94}
.rm-tag{position:absolute;z-index:3;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,560px);
  text-align:center;pointer-events:none;text-shadow:0 1px 3px #000}
.rm-tag .k{display:block;font:500 12px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.rm-tag b{display:block;margin:8px 0 0;font:400 clamp(26px,4.4vw,38px)/1.05 var(--serif);font-weight:380;letter-spacing:-.01em}
.rm-tag span{display:block;margin:6px 0 0;font:italic 400 17px/1.35 var(--serif);color:#E6D3AE}

/* ---- the desk (Poems, Essays) and the leaves (Thoughts) ---- */
.rm-deskv{display:none}
#room.open .rm-shelf{visibility:hidden}
#room.open .rm-deskv{display:block}
.rm-track{height:calc(var(--len) * 100vh)}
.rm-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.rm-desk{position:absolute;top:50%;left:0;width:max(165vw,177.7svh);aspect-ratio:1672/941;translate:0 -50%;background:url(/thought/room/desk.webp) center/cover;will-change:transform}
.rm-desk::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 45%,transparent 40%,rgba(14,10,7,.55))}
.rm-lay{position:absolute;inset:0;z-index:2}
.rm-leaves{position:absolute;inset:0;background:url(/thought/room/leaves.webp) center/cover}
.rm-leaves::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 55% 40%,transparent 35%,rgba(14,10,7,.6))}
.rm-pile{position:absolute;left:50%;top:53%;width:min(520px,86vw);height:min(62vh,600px);transform:translate(-50%,-50%);z-index:2}
.rm-note{position:absolute;z-index:3;left:50%;top:24%;transform:translateX(-50%);width:min(90vw,520px);text-align:center;font:italic 400 19px/1.35 var(--serif);text-shadow:0 1px 4px #000}
.rm-hint{position:fixed;z-index:21;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);font:italic 400 15px/1 var(--serif);color:#E6D3AE;text-shadow:0 1px 3px #000;white-space:nowrap;transition:opacity .4s}
.rm-return{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;background:radial-gradient(80% 70% at 50% 45%,#2A1A0E,#0E0A07 75%)}
.rm-return p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font:italic 400 20px/1 var(--serif);white-space:nowrap}

/* a parchment: real text on a paper grain (an SVG image, not a filter: iOS-safe) */
.rm-parch{position:absolute;display:block;width:clamp(240px,24vw,320px);padding:28px 28px 24px;text-decoration:none;color:#14284B;border-radius:3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 40% 30%,#F7EFDD,#F2E8D2 55%,#E5D3AE);
  box-shadow:inset 0 0 40px rgba(120,80,30,.18),0 18px 30px rgba(0,0,0,.45),0 3px 6px rgba(0,0,0,.35);transform:rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.rm-lay .rm-parch:hover,.rm-lay .rm-parch:focus-visible{transform:rotate(calc(var(--r,0deg) * .3)) translateY(-14px) scale(1.04);box-shadow:inset 0 0 40px rgba(120,80,30,.18),0 40px 60px rgba(0,0,0,.55),0 8px 14px rgba(0,0,0,.35)}
#room .rm-parch:focus-visible{border-radius:3px}
.rm-parch svg{display:block;width:46px;height:46px;margin:0 0 14px}
.rm-parch h2{margin:0;font:380 clamp(24px,2.6vw,32px)/1.06 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.rm-parch .w{margin:10px 0 0;font:italic 400 15px/1.3 var(--serif);color:#4A5A78}
.rm-parch .o{margin:14px 0 0;font:400 16px/1.45 var(--serif)}
.rm-parch .r{display:inline-block;margin:16px 0 0;font:500 12px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:#74501A}   /* a darker gold: 4.9:1 on the paper's edge (#A8772A was 2.7:1) */
.rm-pile .rm-parch{inset:0;width:auto;transform-origin:10% 90%;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,54px);transition:none}
.rm-pile .rm-parch h2{font-size:clamp(28px,4.6vw,40px)}
.rm-roll{position:absolute;display:block;width:clamp(160px,14vw,210px);height:46px;border-radius:23px;transform:rotate(var(--r,0deg));
  background:linear-gradient(180deg,#B89C6E 0,#E9DCBE 22%,#F6EEDB 40%,#D9C49C 70%,#9C7F52 100%);box-shadow:0 14px 22px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4)}
.rm-roll::before,.rm-roll::after{content:'';position:absolute;top:3px;bottom:3px;width:14px;border-radius:50%;background:radial-gradient(circle,#6B5434 0 28%,#C7AE82 32% 60%,#8E7349 64%)}
.rm-roll::before{left:-2px}.rm-roll::after{right:-2px}
.rm-roll i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#A23447,#7A1E2B 55%,#4A1019);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.rm-roll i::after{content:'';position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(233,199,138,.55)}
.rm-under{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px}
.rm-under .rm-roll{position:relative;width:min(280px,60vw)}
.rm-under p{margin:0;font:italic 400 17px/1.3 var(--serif);color:#E6D3AE;text-align:center;text-shadow:0 1px 3px #000}
/* a short landscape screen: the parchment a size down (its opening two lines at most), so it stands clear of the hint */
@media (max-height:500px){
  .rm-lay .rm-parch{width:clamp(220px,30vw,270px);padding:16px 20px 14px}
  .rm-lay .rm-parch svg{width:30px;height:30px;margin:0 0 8px}
  .rm-lay .rm-parch h2{font-size:22px}
  .rm-lay .rm-parch .w{margin-top:6px;font-size:13px}
  .rm-lay .rm-parch .o{margin-top:8px;font-size:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .rm-lay .rm-parch .r{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){ .rm-needle,.rm-wedge,.rm-parch,.rm-hint{transition:none} }