/* Every Diary page, loaded AFTER the page stylesheet (as in Jim's files): top bar (jl-bar-css) and background (jl-ground). Source: Jim's uber-diary/ files (zip v5, 12 Oct 2026), copied verbatim; WordPress adaptations at the end. */
.jl-bar{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0;padding:10px 22px;background:#F3EDE0;border-bottom:1px solid #D9DCD8;font-family:'Jost','Century Gothic','Futura','Trebuchet MS',sans-serif;font-size:18px;line-height:1.2;color:#22332C;position:relative;z-index:300}
.jl-bar a{color:#22332C;text-decoration:none}
.jl-bar .jl-home{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.02em}
.jl-bar .jl-home svg{width:26px;height:26px;flex:none}
.jl-bar .jl-crumb{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.jl-bar .jl-sep{color:#8A948F}
.jl-bar .jl-here{color:#4F5E57}
.jl-bar .jl-back{font-weight:500;padding:6px 14px;border:1.5px solid #22332C;background:#FAF6EC;white-space:nowrap}
.jl-bar a:hover{text-decoration:underline}
.jl-bar .jl-back:hover{background:#EEF1EC;text-decoration:none}
.jl-bar a:focus-visible{outline:3px solid #D49A1A;outline-offset:2px}
html{background:#F3EDE0}body{min-height:100vh;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.28  0 0 0 0 0.18  0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#F6F1E6 0%,#F3EDE0 45%,#EFE8D8 100%);background-color:#F3EDE0;background-attachment:scroll,fixed}

/* ===== Added 2026-10-30: normal-size pictures, zoom Close button, phone menu ===== */

/* 1. Pictures in stories and pages: never wider than 720px or taller than 640px.
   Whole picture always shows (no cropping). Cards, hero pictures and gallery grids keep their own sizing. */
.post img:not(.card img):not(.hero2 img):not(.gal img):not(#rpb img){
  max-width:min(100%,720px)!important;max-height:640px;width:100%!important;height:auto!important;object-fit:contain}
.post figure{max-width:720px;margin-left:auto;margin-right:auto}
.post .wp-block-columns figure,.post .gal figure{max-width:none}
.post .gal img{max-height:420px;object-fit:contain}

/* 2. Zoom view: a Close button and a hint, so people know how to get back */
/* The Close button and hint are added to the page by diary.js and show only while a picture is zoomed */
.zclose,.zhint{display:none}
html.zoom-on .zclose,html.zoom-on .zhint{display:block}
.zclose{position:fixed;top:14px;right:16px;z-index:1001;font:600 18px/1 var(--display,Georgia,serif);color:#fff;background:var(--ink,#23372F);border:0;border-radius:999px;padding:12px 20px;cursor:pointer}
html.zoom-on .zhint{position:fixed;bottom:0;left:0;right:0;z-index:1001;background:rgba(250,250,248,.92);padding:8px 16px;text-align:center;color:var(--soft,#5d6b64);font-size:15px;pointer-events:none}
#zoom img{cursor:zoom-in}
/* zoomed in: the picture shows at full size and the reader drags or scrolls around it (pinch-zoom works on phones too) */
#zoom.big{display:block;overflow:auto;padding:0;cursor:default;touch-action:pan-x pan-y pinch-zoom}
#zoom.big img{max-width:none!important;max-height:none!important;width:auto!important;height:auto!important;margin:0 auto;display:block;cursor:grab;border:0;box-shadow:none}

/* 3. Phone menu: the blog menu folds into a Menu button on small screens */
.mast .menu-btn{display:none}
@media (max-width:760px){
  .mast .menu-btn{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font:500 18px/1 var(--display,Georgia,serif);color:var(--ink,#23372F);background:var(--panel,#fff);border:1.5px solid var(--ink,#23372F);border-radius:999px;padding:10px 18px;cursor:pointer}
  .mast .menu-btn .bars,.mast .menu-btn .bars::before,.mast .menu-btn .bars::after{display:block;width:20px;height:2px;background:currentColor;position:relative;content:"";transition:transform .2s}
  .mast .menu-btn .bars::before{position:absolute;top:-6px}
  .mast .menu-btn .bars::after{position:absolute;top:6px}
  .mast .menu-btn[aria-expanded="true"] .bars{background:transparent}
  .mast .menu-btn[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
  .mast .menu-btn[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}
  .mast nav.has-menu{display:none;flex-direction:column;gap:0;padding:0 0 14px}
  .mast nav.has-menu.open{display:flex}
  .mast nav.has-menu a{padding:12px 4px;border-bottom:1px solid var(--rule,#d9d2c3)}
  .mast nav.has-menu a[aria-current]{border-bottom-color:var(--rule,#d9d2c3);font-weight:600;color:var(--c,#B3261E)}
  .jl-bar .jl-crumb{display:none}
}