/* The Dark Room (Journal): gothic index, framed post cards, related essays, home "Latest" strip. Reuses gallery-v3 frames and brick. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.jr .hang-room{padding:64px 14px 72px;overflow:hidden}
.jr-in{position:relative;z-index:2;width:min(1100px,100%);margin:0 auto}
.jr .crumbs{margin-bottom:10px}.jr .crumbs a{color:#e7d5a4}.jr .crumbs,.jr .crumbs li:not(:last-child):after{color:#cdbf9f}
.jr-head{max-width:820px;margin:0 0 26px}
.jr-head .kicker{color:#e7d5a4;text-shadow:0 1px 8px #000}
.jr-head h1{color:#f6edd8;text-shadow:0 2px 22px #000000d9;margin:0 0 18px}
.jr-head h1 .jr-h1-main{display:block}
.jr-head h1 .jr-h1-sub{display:block;font-style:italic;font-size:.52em;letter-spacing:0;color:#e7d5a4;margin-top:.18em;line-height:1.1}
.jr-intro{background:linear-gradient(180deg,#120c0bf2,#0b0807f2);border:1px solid #e8ce9647;border-radius:6px;padding:18px 20px;box-shadow:0 22px 50px #000000b3,inset 0 0 0 1px #00000080;max-width:72ch}
.jr-intro p{color:#eee3cc;font-size:17px;line-height:1.65;margin:0 0 12px}.jr-intro p:last-child{margin:0}
.jr-intro a,.jr-body a:not(.btn),.jr-note a,.jr-lede a{color:#f3d79a;text-decoration:underline;text-decoration-color:#f3d79a80;text-underline-offset:3px}
.jr-intro a:hover,.jr-body a:not(.btn):hover{color:#fff}
.jr-lede{color:#eee3cc;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.4;max-width:62ch;margin:0 0 12px;text-shadow:0 2px 12px #000}
.jr-filter{margin:0 0 30px}
.jr-filter ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.jr-filter a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #e8ce9666;background:#0e0a09e6;color:#f6edd8;text-decoration:none;font-size:14px;letter-spacing:.02em;box-shadow:0 6px 16px #0000008c}
.jr-filter a span{color:#cdbf9f;font-size:12px}
.jr-filter a:hover{border-color:#f3d79a;color:#fff}
.jr-filter a[aria-current=page]{background:linear-gradient(#3a2c1c,#24180f);border-color:#f3d79a;color:#fff}
.jr a:focus-visible{outline:2px solid #f3d79a;outline-offset:3px}
.jr-sec-h{color:#f6edd8;text-shadow:0 2px 14px #000;margin:0 0 18px!important}
.jr-ph{container-type:inline-size;display:flex;flex-direction:column;align-items:center;width:min(76%,330px);margin:0 auto}
.jr .frm{--s:calc(100cqw / 760)}
.jr .frm .mat img,.jr-mini-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.jr-body{background:linear-gradient(180deg,#130d0bf5,#0a0706f5);border:1px solid #e8ce963d;border-radius:6px;padding:16px 18px 18px;box-shadow:0 18px 40px #000000a6;position:relative}
.jr-kind{margin:0 0 6px;color:#e7d5a4;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.jr-body h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.2vw,32px);line-height:1.05;margin:0 0 8px}
.jr-body h3 a{color:#f6edd8!important;text-decoration:none!important}
.jr-body h3 a:hover{color:#fff!important;text-decoration:underline!important}
.jr-meta{margin:0 0 10px;color:#cdbf9f;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.jr-ex{margin:0 0 12px;color:#e6dcc8;font-size:16px;line-height:1.55}
.jr-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.jr-tags a{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid #e8ce9659;color:#f3e6c6!important;font-size:12.5px;text-decoration:none!important}
.jr-tags a:hover{border-color:#f3d79a;color:#fff!important}
.jr-via{margin:10px 0 0;color:#cdbf9f;font-size:14px}
.jr-feature{display:grid;gap:8px;margin:0 0 44px}
.jr-feature .jr-ph{width:min(82%,400px)}
.jr-feature .jr-body h3{font-size:clamp(30px,4.4vw,44px)}
.jr-feature .jr-ex{font-size:17px}
.jr-feature .btn{margin-top:14px}
.jr-grid{display:grid;grid-template-columns:1fr;gap:44px 30px;margin:0 0 50px;padding:0;list-style:none}
.jr-card{display:grid;gap:8px;height:100%;grid-template-rows:auto 1fr}
.jr-grid li:nth-child(odd) .jr-ph{transform:rotate(-.5deg)}.jr-grid li:nth-child(2n) .jr-ph{transform:rotate(.45deg)}
.jr-explore{margin:0 0 30px}
.jr-explore ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.jr-explore a{display:flex;flex-direction:column;justify-content:center;min-height:64px;height:100%;padding:10px 14px;background:linear-gradient(#3a2c1c,#21160e);border:1px solid #e8ce9673;color:#f6edd8;text-decoration:none;box-shadow:0 10px 22px #0000008c;font-family:var(--serif);font-size:20px;font-style:italic;line-height:1.15}
.jr-explore a small{font-family:var(--sans);font-style:normal;font-size:12px;color:#d8c9a8;margin-top:3px;letter-spacing:.02em}
.jr-explore a:hover{border-color:#f3d79a}
.jr-note{background:#0b0807e6;border-color:#e8ce9640;color:#e6dcc8}
.jr .zade-cta{background-color:#0b0807f0}
@media (min-width:760px){
 .jr .hang-room{padding:84px 28px 90px}
 .jr-grid{grid-template-columns:1fr 1fr}
 .jr-feature{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:32px}
 .jr-feature .jr-body{padding:26px 28px}
 .jr-explore ul{grid-template-columns:repeat(4,1fr)}
 .jr-intro{padding:22px 26px}
}
@media (hover:hover){.jr-ph{transition:transform .25s}.jr-card:hover .jr-ph,.jr-feature:hover .jr-ph{transform:translateY(-5px) rotate(0)}}
@media (prefers-reduced-motion:reduce){.jr-ph{transition:none}}
/* small framed cards: related essays on posts, latest on the home page */
.jr-related{margin:34px 0 10px;max-width:880px}
.jr-related h2{margin:0 0 14px}
.jr-mini{display:grid;gap:10px;margin:0 0 14px;padding:0;list-style:none}
.jr-mini a{display:flex;gap:14px;align-items:center;min-height:96px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink,#f3f7f8);border:1px solid #e8ce9638;background:linear-gradient(105deg,#1a110ee0,#0a0d0ee6 60%)}
.jr-mini a:hover{border-color:#e8ce96a6}
.jr-mini a:focus-visible{outline:2px solid #f3d79a;outline-offset:2px}
.jr-mini-frame{flex:none;overflow:hidden;width:64px;height:80px;padding:3px;border:3px solid transparent;background:linear-gradient(#0b0807,#0b0807) padding-box,linear-gradient(135deg,#f6dea0,#8a6630 35%,#f0d08c 55%,#5d4220 80%,#c9a35c) border-box;box-shadow:0 6px 14px #000000b3,inset 0 0 8px #000}
.jr-mini-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.jr-mini-txt .jr-mini-kind{color:#e7d5a4;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.jr-mini-txt strong{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.1;color:#f6edd8}
.jr-mini-txt small{color:#c9bda3;font-size:12.5px}
@media (min-width:760px){.jr-mini-grid{grid-template-columns:repeat(3,1fr)}.jr-mini-grid a{flex-direction:column;align-items:flex-start;padding:14px}.jr-mini-grid .jr-mini-frame{width:100%;height:190px}}
.jr-hubs-h{font-family:var(--serif);font-weight:500;font-size:24px;margin:18px 0 8px}
.jr-hubs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.jr-hubs a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #e8ce9666;color:#f3e6c6;text-decoration:none;font-size:14px;background:#120c0bcc}
.jr-hubs a:hover{border-color:#f3d79a;color:#fff}
.jr-latest{margin:14px 0 6px}
.jr-latest .jr-mini a{min-height:88px}
.jr-latest .jr-mini-txt strong{font-size:19px}
.jr-all{display:inline-flex;align-items:center;min-height:44px;color:#f3d79a;text-decoration:underline;text-underline-offset:3px;font-size:15px}
.response .response-title{font-family:var(--serif);margin:0 0 6px;font-size:clamp(28px,4vw,36px);font-weight:500;line-height:1;color:var(--ink)}
.response .response-title a{text-decoration:none}
@media (forced-colors:active){.jr-mini-frame{border-color:CanvasText}}
.jr .btn-teal{color:#062022!important;font-weight:750}
@media (max-width:759px){.jr-intro p{font-size:16px;line-height:1.6}}
@media (min-width:760px){.jr-grid>li:last-child:nth-child(odd){grid-column:1/-1}.jr-grid>li:last-child:nth-child(odd) .jr-card{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:none;align-items:center;gap:32px}.jr-grid>li:last-child:nth-child(odd) .jr-ph{width:min(64%,300px)}}
.jr-mini-grid>li>a{height:100%}
/* ===== v2 (13 Oct 2026): text-led Journal, no framed photos ===== */
.jr-feature-t{display:block!important;grid-template-columns:none!important;max-width:900px;margin-left:auto!important;margin-right:auto!important;position:relative;margin:0 0 40px;padding:0;background:none}
.jr-feature-t .jr-body{padding:34px 26px 30px;border:1px solid #e8ce9673;border-radius:4px;background:radial-gradient(120% 90% at 50% 0%,#2a1c12f2,#0c0807f7 70%);box-shadow:0 30px 70px #000000c7,inset 0 0 0 1px #000,inset 0 0 0 6px #0b0807,inset 0 0 0 7px #e8ce9638;text-align:center}
.jr-orn{position:relative;z-index:2;margin:0 auto -13px;width:max-content;padding:4px 16px;background:#0b0807;border:1px solid #e8ce9673;border-radius:999px;color:#f3d79a;font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.jr-feature-t .jr-kind{margin-top:6px}
.jr-feature-t .jr-body h3{font-size:clamp(34px,5.6vw,58px);line-height:1.02;letter-spacing:-.01em;margin:6px auto 14px;max-width:18ch}
.jr-feature-t .jr-ex{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,23px);line-height:1.4;color:#eee3cc;max-width:52ch;margin:0 auto 18px}
.jr-feature-t .jr-meta{margin-bottom:14px}
.jr-feature-t .jr-tags{justify-content:center}
.jr-feature-t .btn{margin-top:20px}
.jr-feature-t:after{content:"";display:block;height:1px;margin:40px auto 0;width:min(560px,80%);background:linear-gradient(90deg,transparent,#e8ce96a6,transparent)}
.jr-list{list-style:none;margin:0 0 50px;padding:0;counter-reset:jr;background:linear-gradient(180deg,#0f0a09eb,#080605f0);border:1px solid #e8ce9640;border-radius:4px;box-shadow:0 24px 60px #000000b3}
.jr-list>li+li{border-top:1px solid #e8ce962e}
.jr-row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:24px 18px 24px 14px;transition:background .25s}
.jr-row:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;background:linear-gradient(#f3d79a,#8a6630);opacity:0;transition:opacity .25s}
.jr-num{margin:4px 0 0;font-family:var(--serif);font-style:italic;font-size:26px;line-height:1;color:#8f7a55;text-align:right}
.jr-row .jr-body{background:none;border:0;box-shadow:none;padding:0}
.jr-row .jr-body h3{font-size:clamp(25px,3.4vw,34px);line-height:1.08;margin:0 0 8px}
.jr-row .jr-ex{max-width:68ch}
@media (hover:hover){.jr-row:hover{background:linear-gradient(90deg,#2a1c1259,transparent 70%)}.jr-row:hover:before{opacity:1}.jr-row:hover .jr-num{color:#f3d79a}}
@media (min-width:760px){.jr-row{grid-template-columns:70px minmax(0,1fr);padding:30px 34px 30px 20px}.jr-num{font-size:34px}.jr-feature-t .jr-body{padding:50px 56px 44px}}
.jr-mini-t{min-height:0!important;padding:14px 16px!important;border-left:2px solid #e8ce9666!important}
.jr-mini-t:hover{border-left-color:#f3d79a!important;background:linear-gradient(105deg,#2a1c12e6,#0a0d0ee6 60%)!important}
.jr-mini-grid .jr-mini-t strong{font-size:22px}
@media (prefers-reduced-motion:reduce){.jr-row,.jr-row:before{transition:none}}
/* 2026-10-13 latest essay: wide row, highlighted */
.jr-feature-t{max-width:none!important;width:100%;margin:0 0 40px!important}
.jr-feature-t .jr-orn{margin:0 0 -13px 22px}
.jr-feature-t .jr-body{text-align:left;padding:30px 22px 26px!important;border:1px solid #e8ce968c;border-left:3px solid #c0392b;background:linear-gradient(90deg,#2a1410f0,#0f0a09f2 60%,#080605f5);box-shadow:0 24px 60px #000000c7,0 0 26px #c0392b33,inset 0 0 0 1px #000}
.jr-feature-t .jr-body h3{max-width:none!important;margin:6px 0 10px!important;font-size:clamp(28px,3.9vw,40px)!important;line-height:1.08}
.jr-feature-t .jr-ex{max-width:72ch!important;margin:0 0 14px!important;font-size:clamp(17px,1.8vw,20px)!important}
.jr-feature-t .jr-tags{justify-content:flex-start!important}
.jr-feature-t:after{margin:34px auto 0}
@media (min-width:760px){.jr-feature-t .jr-body{padding:38px 40px 34px 36px!important}}
a.banner{margin-bottom:14px!important}

/* 13 Oct audit: CLS fix. The decorative spiders layer spanned the whole (7,500px) hang-room and was reported as a 0.25 layout shift
   while the page streamed in. Pin it to a fixed, contained box at the top of the room so it never moves or resizes. */
.hang-room>.spiders{inset:0 0 auto 0;height:420px;contain:strict}
.hang-room>.spiders .spider-c{inset:300px 14px auto auto}
.hang-room>.spiders .spider-b{top:180px}
/* The real CLS source: on phones the "Latest on Patreon" strip wraps to 2 lines in the fallback font and 1 line once
   the web fonts arrive, so it shrank 24px and pulled the whole room up. Reserve the taller height on narrow screens. */
@media (max-width:440px){a.banner{min-height:128px;box-sizing:border-box}}