/* journal.css — ไดอารี่ของออดี้ (2026-10-17, v3).
   Two real books, no rectangles: the diary (oxblood leather like the About door Audi loved, index tabs, band, ribbon)
   and the guestbook สมุดเยี่ยม (green cloth, brass corners). Pages are warm paper in both themes. No captain/crew theme. */
:root{
  --jr-head:'Mitr','Outfit',system-ui,sans-serif;
  --jr-body:'Sarabun','Plus Jakarta Sans',system-ui,sans-serif;
  --jr-num:'Outfit','Mitr',sans-serif;
  --jr-ease:cubic-bezier(.16,1,.3,1);
  --jr-ink:#eef2fb; --jr-ink-2:#c3cde0; --jr-ink-3:#9fadc6;
  --jr-gold:#e5c586; --jr-gold-ink:#111620; --jr-gold-line:#a58b52;
  --jr-teal:#5eead4;
  --jr-panel:linear-gradient(145deg,rgba(28,39,64,.96),rgba(10,15,30,.99));
  --jr-panel-line:rgba(255,255,255,.13);
  --jr-row-hover:rgba(229,197,134,.08);
}
html[data-theme=light]{
  --jr-ink:#1b2d44; --jr-ink-2:#3b4b63; --jr-ink-3:#55657d;
  --jr-gold-line:#8a6d2f; --jr-teal:#0f766e;
  --jr-panel:#ffffff; --jr-panel-line:#a9b8cc;
  --jr-row-hover:#f3f6fb;
}
body.jr-page-body{background:#081326;font-family:var(--jr-body);color:var(--jr-ink);overflow-x:hidden}
.jr [hidden]{display:none!important}
:is(.jr,.jr-dialog,.jr-toast,.jr-admin),:is(.jr,.jr-dialog,.jr-toast) *{box-sizing:border-box}
.jr{max-width:1120px;margin:0 auto;padding:0 20px 40px}
.jr :is(h1,h2,h3){font-family:var(--jr-head);text-wrap:balance}

/* 16-bit sprites */
.jr-px{flex:none;image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.28));overflow:visible}
.jr-px.bob{animation:jrBob 1.1s steps(2) infinite}
.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}}

/* hero */
.jr-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px)}
.jr-hero-sprite .jr-px{width:76px;height:76px}
.jr-hero h1{margin:0;font-size:clamp(2.3rem,6vw,3.6rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--jr-ink)}
.jr-lede{margin:0;max-width:34ch;font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.75;color:var(--jr-ink-2)}
.jr-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* buttons */
.jr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:10px;font:600 1rem/1.3 var(--jr-head);text-decoration:none;cursor:pointer;transition:translate 160ms var(--jr-ease),background 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
.jr-btn:active{translate:0 2px}
.jr-btn-gold{background:var(--jr-gold);color:var(--jr-gold-ink);border:1px solid var(--jr-gold);box-shadow:0 3px 0 #9c7d3e}
.jr-btn-gold:hover{background:#f0d8a2}
.jr-btn-quiet{background:transparent;color:var(--jr-ink);border:1px solid rgba(255,255,255,.32)}
.jr-btn-quiet:hover{border-color:var(--jr-gold);color:var(--jr-gold)}
html[data-theme=light] .jr-btn-quiet{border-color:#708298;color:var(--jr-ink);background:#fff}
html[data-theme=light] .jr-btn-quiet:hover{border-color:var(--jr-ink);color:var(--jr-ink)}
.jr :focus-visible,.jr-toast :focus-visible{outline:3px solid var(--jr-gold);outline-offset:3px;border-radius:8px}
html[data-theme=light] :is(.jr,.jr-toast) :focus-visible{outline-color:#2546ec}
.jr-dialog :focus-visible,.jr .jr-book :focus-visible{outline:3px solid #8e2c3d;outline-offset:3px;border-radius:8px}

/* zones */
.jr-zone{padding:clamp(40px,6vw,72px) 0 0;scroll-margin-top:84px}
.jr-zone + .jr-zone{margin-top:clamp(40px,6vw,72px);border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(229,197,134,.32) 18%,rgba(229,197,134,.32) 82%,transparent) 1}
html[data-theme=light] .jr-zone + .jr-zone{border-image:linear-gradient(90deg,transparent,#b8c6da 18%,#b8c6da 82%,transparent) 1}
.jr-zone-head{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.jr-zone-head .jr-px{width:56px;height:56px}
.jr-zone-text{flex:1;min-width:0}
.jr-zone-head h2{margin:0 0 6px;font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700;line-height:1.3;color:var(--jr-ink)}
.jr-zone-head h2::after{content:"";display:block;width:56px;height:3px;margin-top:10px;border-radius:3px;background:linear-gradient(90deg,#c59738,#e2c98f)}
.jr-zone-sub{margin:0;font-size:1rem;line-height:1.6;color:var(--jr-ink-2)}
.jr-sticker{width:clamp(76px,10vw,120px);height:auto;flex:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));animation:jrFloat 5s ease-in-out infinite}
@keyframes jrFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* 📔 books: real objects (Audi 2026-10-17: loved the About diary door; "diary เป็นสี luxury blue ไม่สวย";
   "มี theme หรือโทนที่ดีกว่ากล่องสี่เหลี่ยมไหม"). Diary = oxblood leather like the About door, warm paper pages in both themes
   (paper framed by leather is the object, not a cream box on the sky); guestbook = forest-green cloth with brass corners. */
.jr-book{position:relative;--cv-a:#7a2e3e;--cv-b:#3e1520;--cv-hi:rgba(255,214,190,.18);--stitch:rgba(229,197,134,.55)}
.jr-guestbook{--cv-a:#2f6b4f;--cv-b:#163a2a;--cv-hi:rgba(214,255,226,.14);--stitch:rgba(229,197,134,.5)}
.jr-cover{position:relative;padding:18px 20px 24px;border-radius:12px 22px 22px 12px;
  background:radial-gradient(120% 80% at 18% 0%,var(--cv-hi),transparent 55%),linear-gradient(160deg,var(--cv-a),var(--cv-b));
  box-shadow:0 44px 70px -40px rgba(0,0,0,.9),inset 8px 0 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.08),inset 0 -6px 0 rgba(0,0,0,.25)}
.jr-cover::before{content:"";position:absolute;inset:8px 9px 9px 14px;border:1.5px dashed var(--stitch);border-radius:9px 16px 16px 9px;pointer-events:none}
html[data-theme=light] .jr-cover{box-shadow:0 34px 60px -36px rgba(62,21,32,.55),inset 8px 0 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.12)}
.jr-spread{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);border-radius:6px;
  box-shadow:0 0 0 1px rgba(60,40,20,.35),3px 4px 0 -1px #e3d8bf,6px 7px 0 -2px #cdbf9f,9px 10px 0 -3px #b9a984}
.jr-leaf{position:relative;padding:clamp(26px,3.4vw,44px) clamp(22px,3.4vw,46px);color:#2a2118;
  background:radial-gradient(140% 90% at 50% 0%,#fffaf0,#f6eedb 70%,#efe4cb) #f6eedb}
.jr-spread > .jr-leaf:first-child{border-radius:6px 0 0 6px;box-shadow:inset -26px 0 30px -24px rgba(90,60,25,.55)}
.jr-spread > .jr-leaf:last-child{border-radius:0 6px 6px 0;box-shadow:inset 26px 0 30px -24px rgba(90,60,25,.55)}
.jr-spread::after{content:"";position:absolute;top:0;bottom:0;left:40%;width:2px;translate:-1px 0;background:linear-gradient(180deg,rgba(90,60,25,.15),rgba(90,60,25,.35),rgba(90,60,25,.15))}
.jr-leaf-entry::before{content:"";position:absolute;top:0;bottom:0;left:clamp(14px,2.2vw,28px);width:1.5px;background:rgba(214,74,52,.35)}
.jr-leaf-label{margin:0 0 14px;font:600 1.05rem/1.4 var(--jr-head);color:#5a4630}
.jr-ribbon{position:absolute;top:-6px;right:clamp(28px,5vw,60px);width:18px;height:92px;background:linear-gradient(180deg,#c9435a,#8e2c3d);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);box-shadow:0 2px 4px rgba(0,0,0,.3);z-index:2}
.jr-band{position:absolute;top:-3px;bottom:-3px;right:4px;width:12px;border-radius:4px;z-index:3;background:linear-gradient(90deg,#141018,#2c2230 50%,#141018);box-shadow:0 0 0 1px rgba(0,0,0,.35),2px 0 6px rgba(0,0,0,.35);pointer-events:none}

/* index tabs on the diary's edge (above the strap; hidden where the page edge would clip them) */
@media (max-width:1150px){.jr-tabs{display:none}}
.jr-tabs{position:absolute;right:-34px;top:72px;z-index:4;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.jr-tabs button{display:grid;place-items:center;width:50px;height:46px;padding:0 0 0 18px;border:0;border-radius:0 12px 12px 0;cursor:pointer;font-size:1.25rem;
  background:linear-gradient(90deg,#d9cba9,#efe4c9);box-shadow:2px 3px 6px rgba(0,0,0,.35);translate:-8px 0;transition:translate .25s var(--jr-ease),background .2s ease}
.jr-tabs button:hover{translate:-2px 0}
.jr-tabs button[aria-current=true]{background:linear-gradient(90deg,#c9a24f,#ecd7a2);translate:0 0}

.jr-index{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.jr-index li + li{border-top:1px dashed #d4c5a3}
.jr-index button{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;width:100%;padding:16px 12px;margin:0;background:none;border:0;border-radius:10px;color:#2a2118;font:inherit;text-align:left;cursor:pointer;transition:background 160ms ease}
.jr-index button:hover{background:rgba(201,162,79,.14)}
.jr-ix-icon{grid-row:span 2;font-size:1.5rem;line-height:1.3}
.jr-ix-date{font:600 .92rem/1.4 var(--jr-num);color:#6b5a43}
.jr-ix-title{font:500 1.06rem/1.5 var(--jr-head);color:#2a2118}
.jr-index button[aria-current=true]{background:linear-gradient(90deg,rgba(201,162,79,.30),rgba(201,162,79,.10));box-shadow:inset 0 0 0 1.5px #b08a3a}
.jr-index button[aria-current=true] .jr-ix-date{color:#7a5a17}
.jr-now{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;background:#8e2c3d;color:#fff4ec;font:600 .78rem/1.6 var(--jr-head);vertical-align:2px}
.jr-sign{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px dashed #d4c5a3}
.jr-sign img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center top;border:1.5px solid #b08a3a}
.jr-sign b{display:block;font:600 .98rem/1.4 var(--jr-head);color:#2a2118}
.jr-sign span{font-size:.92rem;color:#6b5a43}

.jr-entry[hidden]{display:none}
.jr-entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;padding-right:48px}
.jr-entry-meta time{font:600 .98rem/1.4 var(--jr-num);color:#7a5a17}
.jr-tag{padding:3px 12px;border-radius:999px;font:500 .9rem/1.5 var(--jr-head);color:#3d3020;background:#efe2c4;border:1px solid #d4c4a0}
.jr-edit{display:none;margin-left:auto;font:600 .9rem/1.4 var(--jr-head);color:#7a3a17;text-decoration:none}
body.jr-admin-on .jr-edit{display:inline}
.jr-entry-title{margin:0 0 20px;font-size:clamp(1.5rem,3vw,2.05rem);font-weight:700;line-height:1.4;color:#2a2118}
.jr-body{position:relative;font-size:1.06rem;line-height:1.95;color:#2f261c}
.jr-body p{margin:0 0 1.1em}
.jr-body h4{margin:1.6em 0 .6em;font:600 1.2rem/1.5 var(--jr-head);color:#2a2118}
.jr-body ul{margin:0 0 1.1em;padding-left:1.4em}
.jr-body li{margin-bottom:.4em}
.jr-body em{font-style:italic;color:#5a4630}
.jr-signoff{font:600 1.05rem/1.6 var(--jr-head);color:#8e2c3d}
.jr-body.is-clamped{max-height:24rem;overflow:hidden}
.jr-body.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7rem;background:linear-gradient(rgba(246,238,219,0),#f6eedb 85%);pointer-events:none}
.jr-more-toggle{margin-top:6px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid #b08a3a;background:#f3e3bd;color:#2a2118;font:600 .98rem/1.3 var(--jr-head);cursor:pointer}
.jr-more-toggle:hover{background:#ecd7a2}
.jr-turn{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding-top:18px;border-top:1px dashed #d4c5a3}
.jr-turn-btn{min-height:44px;padding:8px 14px;border-radius:10px;border:1px solid #c9b48a;background:transparent;color:#2a2118;font:600 .96rem/1.3 var(--jr-head);cursor:pointer;transition:background 160ms ease,border-color 160ms ease}
.jr-turn-btn:hover:not(:disabled){border-color:#8e2c3d;background:rgba(201,162,79,.14)}
.jr-turn-btn:disabled{color:#6b5a43;border-style:dashed;cursor:default}
.jr-folio{font:600 .95rem/1.4 var(--jr-num);color:#6b5a43;white-space:nowrap}
.jr-entries.turning{animation:jrTurn .42s var(--jr-ease)}
@keyframes jrTurn{from{opacity:.25;translate:14px 0}to{opacity:1;translate:0 0}}

/* ✍️ guestbook */
.jr-corner{position:absolute;z-index:2;width:30px;height:30px;pointer-events:none;background:linear-gradient(135deg,#f2e1b4,#a8853f 45%,#e9d3a0)}
.jr-corner.tl{top:-3px;left:-3px;clip-path:polygon(0 0,100% 0,100% 28%,28% 28%,28% 100%,0 100%);border-radius:10px 0 0 0}
.jr-corner.tr{top:-3px;right:-3px;clip-path:polygon(0 0,100% 0,100% 100%,72% 100%,72% 28%,0 28%);border-radius:0 18px 0 0}
.jr-corner.bl{bottom:-3px;left:-3px;clip-path:polygon(0 0,28% 0,28% 72%,100% 72%,100% 100%,0 100%);border-radius:0 0 0 10px}
.jr-corner.br{bottom:-3px;right:-3px;clip-path:polygon(72% 0,100% 0,100% 100%,0 100%,0 72%,72% 72%);border-radius:0 0 18px 0}
.jr-leaf-invite{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.jr-leaf-invite .jr-sticker{width:96px;animation:jrFloat 5s ease-in-out infinite}
.jr-invite-h{margin:0;font:700 1.45rem/1.4 var(--jr-head);color:#2a2118}
.jr-invite-p{margin:0;font-size:1.02rem;line-height:1.8;color:#4a3c2b}
.jr-tray-count{margin:0;font:500 1rem/1.5 var(--jr-head);color:#4a3c2b}
.jr-tray-count:empty{display:none}
.jr-tray-count b{font-family:var(--jr-num);color:#1f6b4b;font-size:1.15rem}
.jr-letters{list-style:none;margin:0;padding:0}
.jr-letters > li{display:flex;align-items:center;gap:8px;border-bottom:1px solid #dccfb4}
.jr-letter{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 12px;padding:14px 8px;background:none;border:0;border-radius:8px;color:#2a2118;font:inherit;text-align:left;cursor:pointer;transition:background 160ms ease}
.jr-letter:hover{background:rgba(31,107,75,.08)}
.jr-letter-ic{grid-row:span 2;font-size:1.3rem}
.jr-letter-t{font:500 1.06rem/1.5 var(--jr-head);color:#2a2118;overflow-wrap:anywhere}
.jr-letter-m{grid-column:2;font-size:.94rem;font-style:italic;color:#5e5040}
.jr-letter-go{grid-row:1 / span 2;grid-column:3;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid #c9b48a;color:#4a3c2b;transition:background 160ms ease,color 160ms ease}
.jr-letter:hover .jr-letter-go{background:#1f6b4b;color:#fff;border-color:#1f6b4b}
.jr-hide{display:none;min-height:40px;padding:6px 12px;border-radius:8px;border:1px solid #dc2626;background:transparent;color:#b91c1c;font:600 .88rem/1.2 var(--jr-head);cursor:pointer}
body.jr-admin-on .jr-hide{display:inline-flex}
.jr-letters > li.jr-empty{display:block;padding:26px 8px;border-bottom:1px dashed #d4c5a3;text-align:center;color:#6b5a43;font-size:1rem;font-style:italic;line-height:1.7}
.jr-more{display:flex;margin:18px auto 0}
.jr .jr-book .jr-btn-quiet{background:#fffaf0;border-color:#b9a984;color:#2a2118}

/* dialogs */
.jr-dialog{--jr-ink:#2a2118;--jr-ink-2:#4a3c2b;--jr-ink-3:#6b5a43;--jr-panel-line:#c9b48a;width:min(640px,calc(100vw - 32px));max-height:min(86vh,860px);padding:clamp(22px,3vw,34px);border-radius:14px;border:1px solid #c9b48a;background:radial-gradient(140% 90% at 50% 0%,#fffaf0,#f6eedb 70%,#efe4cb) #f6eedb;color:#2a2118;font-family:var(--jr-body);overflow:auto;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.jr-dialog::backdrop{background:rgba(3,7,18,.72);backdrop-filter:blur(4px)}
.jr-dialog[open]{animation:jrPop .3s var(--jr-ease)}
@keyframes jrPop{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.jr-x{float:right;width:44px;height:44px;margin:-8px -8px 0 8px;border-radius:50%;border:1px solid var(--jr-panel-line);background:transparent;color:var(--jr-ink);font-size:1.1rem;cursor:pointer}
.jr-x:hover{border-color:#8e2c3d}
.jr-dialog-meta{margin:0 0 6px;font-size:.96rem;color:var(--jr-ink-3)}
.jr-dialog-title{margin:0 0 18px;font:700 clamp(1.35rem,3vw,1.7rem)/1.4 var(--jr-head);color:var(--jr-ink)}
.jr-dialog-body{font-size:1.05rem;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
.jr-label{display:block;margin:18px 0 8px;font:600 .98rem/1.4 var(--jr-head);color:var(--jr-ink-2)}
.jr-input{width:100%;min-height:48px;padding:12px 14px;border-radius:10px;border:1px solid #b9a984;background:#fffdf7;color:#2a2118;font:400 1rem/1.5 var(--jr-body);color-scheme:light}
.jr-input::placeholder{color:#7a6a52}
.jr-input:focus{outline:none;border-color:#8e2c3d;box-shadow:0 0 0 3px rgba(142,44,61,.18)}
.jr-textarea{min-height:200px;resize:vertical;line-height:1.75}
.jr-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.jr-pills:empty{display:none}
.jr-pill{min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--jr-panel-line);background:transparent;color:var(--jr-ink);font:500 .96rem/1.3 var(--jr-head);cursor:pointer}
.jr-pill[aria-pressed=true]{background:#8e2c3d;color:#fff4ec;border-color:#8e2c3d}
.jr-note{margin:14px 0 0;font-size:.94rem;line-height:1.6;color:var(--jr-ink-3)}
.jr-submit{width:100%;margin-top:18px}
.jr-submit:disabled{cursor:wait;opacity:.75}
.jr-status{min-height:1.5em;margin:10px 0 0;font:600 .98rem/1.5 var(--jr-head)}
.jr-status.is-ok{color:#15803d}.jr-status.is-err{color:#b91c1c}

/* toast + admin */
.jr-toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:60;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:12px 14px 12px 18px;border-radius:14px;background:#1c2740;border:1px solid rgba(229,197,134,.45);color:#eef2fb;font:500 1rem/1.4 var(--jr-head);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.jr-toast[hidden]{display:none}
.jr-toast button{min-height:40px;padding:6px 14px;border-radius:8px;border:0;background:var(--jr-gold);color:var(--jr-gold-ink);font:600 .95rem/1.2 var(--jr-head);cursor:pointer}
.jr-admin{position:fixed;left:16px;bottom:16px;z-index:55;padding:8px 14px;border-radius:999px;background:#2a2410;border:1px solid var(--jr-gold-line);color:#f4dfa8;font:500 .9rem/1.4 var(--jr-head)}
.jr-admin[hidden]{display:none}

/* responsive */
@media (max-width:860px){
  .jr-spread{grid-template-columns:1fr}
  .jr-spread::after{display:none}
  .jr-spread > .jr-leaf:first-child{border-radius:6px 6px 0 0;box-shadow:inset 0 -22px 24px -22px rgba(90,60,25,.5);border-bottom:1px dashed #d4c5a3}
  .jr-spread > .jr-leaf:last-child{border-radius:0 0 6px 6px;box-shadow:none}
  .jr-sign{display:none}
  .jr-band{right:1px;width:8px}
  .jr-leaf-invite .jr-sticker{width:72px}
}
@media (max-width:560px){
  .jr{padding:0 16px 32px}
  .jr-cover{padding:10px 10px 14px 14px}
  .jr-cover::before{inset:5px 5px 6px 9px}
  .jr-zone-head{gap:12px}
  .jr-zone-head .jr-px{width:44px;height:44px}
  .jr-sticker{width:56px}
  .jr-leaf{padding:22px 18px 22px 26px}
  .jr-leaf-entry::before{left:12px}
  .jr-turn-btn{padding:8px 12px;white-space:nowrap}
  .jr-long{display:none}
  .jr-zone-head h2{font-size:1.75rem}
  .jr-zone-head{align-items:flex-start}
  .jr-zone-sub{font-size:.95rem}
  .jr-letter{padding:14px 4px;gap:4px 10px}
}
@media (max-width:380px){.jr-sticker{display:none}.jr-folio{display:none}}

/* big monitors: scale the whole page up instead of leaving a narrow column */
@media (min-width:1800px){.jr{zoom:1.32}}
@media (min-width:2300px){.jr{zoom:1.7}}
html[data-theme=light] body.jr-page-body{background:#eef2f8}

/* motion off */
@media (prefers-reduced-motion:reduce){.jr-px,.jr-px *,.jr-sticker,.jr-entries.turning,.jr-dialog[open]{animation:none!important}.jr-btn,.jr-tabs button{transition:none}}
html[data-motion=paused] :is(.jr-px,.jr-px *,.jr-sticker,.jr-entries.turning,.jr-dialog[open]){animation:none!important}
html[data-motion=paused] :is(.jr-btn,.jr-index button,.jr-letter,.jr-turn-btn,.jr-tabs button){transition:none}
@media print{.jr-hero-actions,.jr-turn,.jr-sticker,.jr-tray-top .jr-btn{display:none}.jr-body.is-clamped{max-height:none}.jr-body.is-clamped::after{display:none}}

/* ✍️ owner writing on the site (2026-10-17) */
body.jr-owner-on .jr-hero .jr-read-btn{background:transparent;color:var(--jr-ink);border:1px solid rgba(255,255,255,.32);box-shadow:none}
html[data-theme=light] body.jr-owner-on .jr-hero .jr-read-btn{background:#fff;border-color:#708298;color:var(--jr-ink)}
.jr-own-tools{display:inline-flex;gap:8px;margin-left:auto}
.jr-own-btn{min-height:40px;padding:6px 12px;border-radius:8px;border:1px solid #c9b48a;background:#fffaf0;color:#2a2118;font:600 .9rem/1.2 var(--jr-head);cursor:pointer}
.jr-own-btn:hover{border-color:#8e2c3d}
.jr-own-del{border-color:#dc2626;color:#b91c1c}
.jr-photo{margin:0 0 22px}
.jr-photo img{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:6px;border:6px solid #fffdf7;box-shadow:0 10px 20px -10px rgba(60,40,20,.45)}
.jr-compose{width:min(760px,calc(100vw - 32px))}
.jr-compose-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.jr-compose-body{min-height:300px}
.jr-icon-pill{min-width:48px;font-size:1.25rem;padding:6px 10px}
.jr-photo-row{display:flex;flex-wrap:wrap;gap:10px}
.jr-photo-prev:empty{display:none}
.jr-photo-prev img{display:block;margin-top:12px;max-width:100%;max-height:220px;border-radius:8px;border:4px solid #fffdf7;box-shadow:0 6px 14px -8px rgba(60,40,20,.5)}
.jr-dialog .jr-btn-quiet{background:#fffaf0;border:1px solid #b9a984;color:#2a2118}
@media (max-width:560px){.jr-compose-row{grid-template-columns:1fr}.jr-own-tools{margin-left:0}}
body:not(.jr-owner-on) .jr-own-tools{display:none}