/* about-journal-door.css — 📔 the closed diary under จุดแข็ง · จุดอ่อน (Audi 2026-10-17:
   "เอาไว้ใต้ 🔍 จุดแข็ง · จุดอ่อน ของผม … ทำออกมาเป็นเหมือนสมุดก็ได้แล้วกดไปหน้า journal").
   Object: oxblood leather notebook with gold foil, elastic band and ribbon; the whole thing opens journal.html. */
.jdoor-section{max-width:1200px;margin:0 auto 112px;padding:0 24px}
.jdoor-header{text-align:center;margin-bottom:34px}
.jdoor-header h2{display:inline-flex;align-items:center;gap:12px;margin:0;font-family:var(--font-heading);font-size:clamp(28px,4vw,36px);font-weight:600;line-height:1.35;color:var(--ink)}
.jdoor-header h2 .jr-px{width:48px;height:48px;flex:none}
.jdoor-header::after{content:"";display:block;width:64px;height:3px;margin:14px auto 0;border-radius:3px;background:linear-gradient(90deg,#c59738,#e2c98f)}

.jdoor{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,64px);max-width:900px;margin:0 auto;color:inherit;text-decoration:none;border-radius:20px;padding:12px}
.jdoor:focus-visible{outline:3px solid #2546ec;outline-offset:6px}
html[data-theme="dark"] .jdoor:focus-visible{outline-color:#e2c98f}

/* the notebook */
.jdoor-book{position:relative;width:216px;height:288px;perspective:900px;rotate:-3deg;transition:rotate .5s var(--ease),translate .5s var(--ease)}
.jdoor-pages{position:absolute;inset:6px -7px 6px 14px;border-radius:4px 10px 10px 4px;background:linear-gradient(90deg,#e9e2cf,#d8cfb8);box-shadow:inset -1px 0 0 #bdb29a,inset -3px 0 0 #efe9da,inset -5px 0 0 #c9bfa6,0 14px 26px -14px rgba(0,0,0,.6)}
.jdoor-pages::after{content:"✍️ วันนี้…";position:absolute;left:36px;top:46px;font:500 15px/1.4 var(--font-heading);color:#5a4a33;opacity:0;transition:opacity .4s ease}
.jdoor-cover{position:absolute;inset:0;border-radius:6px 14px 14px 6px;transform-origin:left center;transition:transform .55s var(--ease);
  background:radial-gradient(120% 70% at 22% 8%,rgba(255,214,190,.20),transparent 55%),linear-gradient(160deg,#7a2e3e,#3e1520);
  box-shadow:inset 7px 0 0 rgba(0,0,0,.28),inset 9px 0 0 rgba(255,255,255,.06),0 26px 40px -22px rgba(0,0,0,.8)}
.jdoor-cover::before{content:"";position:absolute;inset:12px 14px 12px 22px;border:1.5px dashed rgba(229,197,134,.55);border-radius:8px}
.jdoor-label{position:absolute;left:34px;right:26px;top:70px;padding:16px 10px 14px;text-align:center;border-radius:6px;
  background:linear-gradient(180deg,#f2e1b4,#c9ab6c);box-shadow:0 2px 0 #8f6d2e,inset 0 1px 0 rgba(255,255,255,.6)}
.jdoor-label b{display:block;font:700 26px/1.2 var(--font-heading);color:#2b2212}
.jdoor-label small{display:block;margin-top:4px;font:500 14px/1.3 var(--font-heading);color:#4a3a1c}
.jdoor-year{position:absolute;left:0;right:0;bottom:30px;text-align:center;font:600 13px/1 var(--font-num);letter-spacing:.2em;color:rgba(242,225,180,.8)}
.jdoor-band{position:absolute;top:-2px;bottom:-2px;right:30px;width:11px;border-radius:3px;background:linear-gradient(90deg,#141018,#2c2230 50%,#141018);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.jdoor-ribbon{position:absolute;bottom:-22px;left:62px;width:14px;height:34px;background:linear-gradient(180deg,#8e2c3d,#c9435a);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}

/* copy */
.jdoor-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.jdoor-line{margin:0;font:400 clamp(18px,2.2vw,21px)/1.7 var(--font-body);color:var(--ink-secondary)}
.jdoor-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 20px;border-radius:10px;background:#E5C586;color:#111620;font:600 17px/1.3 var(--font-heading);box-shadow:0 3px 0 #9c7d3e;transition:translate .16s var(--ease),background .16s ease}
.jdoor-cta i{font-style:normal;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#111620;color:#E5C586;transition:translate .25s var(--ease)}

/* hover / focus: the book straightens, lifts and the cover opens a little */
.jdoor:hover .jdoor-book,.jdoor:focus-visible .jdoor-book{rotate:0deg;translate:0 -6px}
.jdoor:hover .jdoor-cover,.jdoor:focus-visible .jdoor-cover{transform:rotateY(-24deg)}
.jdoor:hover .jdoor-pages::after,.jdoor:focus-visible .jdoor-pages::after{opacity:1}
.jdoor:hover .jdoor-cta{background:#f0d8a2}
.jdoor:hover .jdoor-cta i{translate:4px 0}
.jdoor:active .jdoor-cta{translate:0 2px}

@media (max-width:640px){
  .jdoor-section{padding:0 16px;margin-bottom:80px}
  .jdoor{grid-template-columns:1fr;justify-items:center;text-align:center}
  .jdoor-copy{align-items:center;margin-top:14px}
  .jdoor-book{width:184px;height:246px}
  .jdoor-label{left:30px;right:22px;top:58px}
  .jdoor-label b{font-size:22px}
}
/* big monitors: grow the object instead of leaving a small island */
@media (min-width:1800px){.jdoor{zoom:1.35}}
@media (min-width:2300px){.jdoor{zoom:1.75}}
@media (prefers-reduced-motion:reduce){.jdoor-book,.jdoor-cover,.jdoor-cta,.jdoor-cta i,.jdoor-pages::after{transition:none}}
html[data-motion=paused] :is(.jdoor-book,.jdoor-cover,.jdoor-cta,.jdoor-cta i,.jdoor-pages::after){transition:none}
html[data-motion=paused] .jdoor-header .jr-px,html[data-motion=paused] .jdoor-header .jr-px *{animation:none!important}
.jdoor-header .jr-px{image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25));overflow:visible}
.jdoor-header .jr-px.bob{animation:jrBob 1.1s steps(2) infinite}
.jdoor-header .jr-px .tw{animation:jrTw 1.6s steps(1) infinite}
@keyframes jrBob{0%,100%{translate:0 0}50%{translate:0 -1.5px}}
@keyframes jrTw{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.jdoor-header .jr-px,.jdoor-header .jr-px *{animation:none!important}}