/* The Journal: TimeFrame® Studios blog styles (index, archives, articles). Uses tokens from styles.css. */

/* ---------- page header (shared with standalone pages) ---------- */
.phead{position:relative;padding:clamp(130px,20vh,200px) var(--gut) clamp(40px,7vh,72px);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--hair)}
.phead .leaks,.post-head .leaks{z-index:-1;opacity:.6}
.crumbs{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;color:var(--smoke);margin-bottom:20px}
.crumbs a{color:var(--bone)}
.phead h1{font-family:var(--display);font-variation-settings:"wdth" 75,"opsz" 96;font-weight:760;text-transform:uppercase;font-size:clamp(60px,11vw,176px);line-height:.84;letter-spacing:-.02em}
.phead h1 .ln{display:block;overflow:hidden;padding-bottom:.03em}
.phead h1 .ln>span{display:inline-block;transform:translateY(108%)}
.ready .phead h1 .ln>span{animation:rise 1.1s var(--ease) forwards}
.phead h1 .plain{display:block;font-family:var(--display);font-variation-settings:"wdth" 88;font-weight:500;font-size:clamp(20px,2vw,30px);text-transform:none;letter-spacing:normal;line-height:1.3;color:var(--glow);margin-top:14px}
.phead .lede{max-width:56ch;margin-top:20px;color:#D9D2C7;font-weight:300;font-size:clamp(17px,1.4vw,20px)}
.draftbar{position:relative;z-index:70;margin:0;padding:10px var(--gut);background:#3a2410;color:var(--amber);text-align:center}
a.inl{color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,180,92,.4)}

/* ---------- index / archives ---------- */
.jbody{padding:clamp(36px,6vh,64px) var(--gut) clamp(80px,12vh,140px)}
.jcats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.jcats a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(243,238,230,.2);border-radius:999px;font-size:15px;transition:border-color .2s ease,background-color .2s ease}
.jcats a span{font:500 11px/1 var(--label);opacity:.65}
.jcats a[aria-current]{background:var(--bone);color:var(--carbon);border-color:var(--bone)}
@media (hover:hover) and (pointer:fine){.jcats a:not([aria-current]):hover{border-color:var(--bone)}}
.jfilter{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:stretch;margin-bottom:10px}
.jfilter .btn{height:56px}
@media (max-width:900px){.jfilter{grid-template-columns:1fr 1fr}.jfilter .field:first-child{grid-column:1 / -1}}
.field{position:relative}
.field input,.field select{width:100%;min-height:56px;padding:24px 16px 8px;background:var(--carbon-2);border:1px solid rgba(243,238,230,.16);border-radius:4px;color:var(--bone);font:400 16px/1.4 var(--sans);transition:border-color .2s ease;appearance:none}
.field label{position:absolute;left:16px;top:18px;color:var(--smoke);font-size:15px;pointer-events:none;transition:top .25s var(--ease),font-size .25s var(--ease)}
.field input:focus,.field select:focus{border-color:var(--amber);outline:none}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field select+label{top:7px;font-size:12px}
.jcount{color:var(--smoke);min-height:1.5em;margin:6px 0 18px}
.jh2{font-family:var(--display);font-variation-settings:"wdth" 78,"opsz" 72;font-weight:700;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);margin:clamp(40px,6vh,64px) 0 20px}
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px)}
@media (max-width:1100px){.jgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.jgrid{grid-template-columns:1fr}}
.jempty{padding:clamp(40px,8vh,90px) 0;max-width:60ch}
.jempty .big{font-family:var(--display);font-variation-settings:"wdth" 88;font-weight:500;font-size:clamp(26px,3vw,42px);line-height:1.15;margin-bottom:14px}
.jempty p{color:#D9D2C7}

/* cards */
.jcard{display:flex;flex-direction:column;gap:10px}
.jlink{display:flex;flex-direction:column;gap:12px;color:var(--bone)}
.jimg{position:relative;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;isolation:isolate;background:var(--carbon-2)}
.jimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.jimg .glint{position:absolute;left:-10%;right:-10%;top:62%;height:1px;opacity:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(90deg,transparent,rgba(255,170,100,.6) 30%,#FFF1E0 50%,rgba(255,120,70,.55) 70%,transparent);box-shadow:0 0 8px rgba(255,170,100,.7),0 0 26px rgba(255,110,60,.35);transform:translateY(40px) scaleX(.3)}
.jmeta{color:var(--smoke)}
.jmeta span{color:var(--amber)}
.jmeta b{color:var(--ember);font-weight:500}
.jcard h3{font-family:var(--display);font-variation-settings:"wdth" 85;font-weight:600;font-size:clamp(21px,1.7vw,26px);line-height:1.15;letter-spacing:-.005em;transition:color .25s ease}
.jex{color:var(--smoke);font-size:16px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jtags{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:14px}
.jtags a{color:var(--smoke);text-decoration:underline;text-decoration-color:rgba(163,156,145,.35);text-underline-offset:3px}
.jtags.big{align-items:center;gap:8px}
.jtags.big .mono{color:var(--smoke);margin-right:8px}
.jtags.big a{display:inline-flex;min-height:40px;align-items:center;padding:0 14px;border:1px solid rgba(243,238,230,.18);border-radius:999px;text-decoration:none;color:var(--bone)}
@media (hover:hover) and (pointer:fine){
  .jlink:hover .jimg img{transform:scale(1.04)}
  .jlink:hover .glint{opacity:1;transform:translateY(-60px) scaleX(1);transition:transform 1.1s var(--ease),opacity .4s ease}
  .jlink:hover h3{color:var(--glow)}
  .jtags a:hover{color:var(--bone)}
}
.jcard.big .jlink{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,48px);align-items:center}
.jcard.big .jimg{aspect-ratio:16/9;grid-row:1 / span 4}
.jcard.big h3{font-size:clamp(30px,3.4vw,54px);font-variation-settings:"wdth" 80,"opsz" 72;font-weight:680;line-height:1.02}
.jcard.big .jex{-webkit-line-clamp:5;font-size:clamp(17px,1.3vw,19px)}
@media (max-width:820px){.jcard.big .jlink{grid-template-columns:1fr}.jcard.big .jimg{grid-row:auto}}
.jfeatured{margin-top:clamp(16px,3vh,32px)}
.jpager{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(40px,6vh,64px);padding-top:20px;border-top:1px solid var(--hair);color:var(--smoke)}
.jpager a{color:var(--bone);min-height:44px;display:inline-flex;align-items:center}

/* ---------- article ---------- */
.post-head{position:relative;isolation:isolate;overflow:hidden;padding:clamp(130px,19vh,190px) max(var(--gut),calc((100% - 1180px) / 2 + var(--gut))) clamp(28px,4vh,44px)}
.post-head .kicker{display:inline-block;color:var(--amber);margin-bottom:14px}
.post-head h1{font-family:var(--display);font-variation-settings:"wdth" 82,"opsz" 96;font-weight:700;font-size:clamp(38px,5.2vw,80px);line-height:1;letter-spacing:-.015em;max-width:20ch}
.post-head .dek{margin-top:18px;max-width:58ch;color:#D9D2C7;font-weight:300;font-size:clamp(18px,1.5vw,22px)}
.pmeta{margin-top:20px;color:var(--smoke)}
.pmeta a{color:var(--bone)}
.post-hero{margin:0 auto;width:min(calc(100% - 2 * var(--gut)),152vh);border-radius:calc(var(--r) + 4px);overflow:hidden;isolation:isolate;aspect-ratio:2/1;background:var(--carbon-2)}
.post-hero img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.post-hero{aspect-ratio:4/3;width:min(calc(100% - 2 * var(--gut)),101vh)}}
.post-wrap{display:grid;grid-template-columns:minmax(0,760px);justify-content:center;gap:56px;padding:clamp(40px,7vh,72px) var(--gut) 0}
.post-wrap.has-toc{grid-template-columns:220px minmax(0,760px)}
.toc{font-size:15px}
.toc details{position:sticky;top:96px}
.toc summary{color:var(--smoke);cursor:pointer;list-style:none;margin-bottom:12px}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;counter-reset:t;border-left:1px solid var(--hair)}
.toc li{counter-increment:t}
.toc a{display:block;padding:7px 0 7px 16px;color:var(--smoke);line-height:1.35;border-left:1px solid transparent;margin-left:-1px;transition:color .2s ease,border-color .2s ease}
.toc a[aria-current="true"]{color:var(--bone);border-left-color:var(--amber)}
@media (hover:hover) and (pointer:fine){.toc a:hover{color:var(--bone)}}
@media (max-width:1000px){.post-wrap.has-toc{grid-template-columns:minmax(0,760px)}.toc details{position:static;border:1px solid var(--hair);border-radius:var(--r);padding:14px 16px}.toc summary{margin:0}.toc details[open] summary{margin-bottom:10px}}
.prose{font-size:clamp(17px,1.25vw,19px);line-height:1.75;color:#E2DCD2}
.prose>*+*{margin-top:1.1em}
.prose h2{font-family:var(--display);font-variation-settings:"wdth" 85,"opsz" 48;font-weight:650;font-size:clamp(26px,2.4vw,36px);line-height:1.12;letter-spacing:-.01em;color:var(--bone);margin-top:2.1em;scroll-margin-top:100px}
.prose h3{font-family:var(--display);font-variation-settings:"wdth" 90;font-weight:600;font-size:clamp(20px,1.7vw,24px);color:var(--bone);margin-top:1.6em;scroll-margin-top:100px}
.prose a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,180,92,.45)}
.prose strong{color:var(--bone);font-weight:600}
.prose ul,.prose ol{padding-left:0;list-style:none}
.prose ul li,.prose ol li{position:relative;padding-left:28px;margin-top:.5em}
.prose ul li::before{content:"";position:absolute;left:2px;top:.85em;width:12px;height:1px;background:var(--amber);box-shadow:0 0 6px rgba(255,170,100,.7)}
.prose ol{counter-reset:o}
.prose ol li{counter-increment:o}
.prose ol li::before{content:counter(o);position:absolute;left:0;top:0;font:600 15px/1.9 var(--label);color:var(--amber)}
.prose blockquote{border-left:2px solid var(--amber);padding:6px 0 6px 22px;font-family:var(--label);font-style:italic;font-size:1.15em;color:var(--bone)}
.prose code{font-family:ui-monospace,monospace;font-size:.9em;background:var(--carbon-2);padding:2px 6px;border-radius:4px}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.2em 0}
.pimg{margin-top:1.8em}
.pimg img{width:100%;height:auto;border-radius:var(--r);display:block}
.pimg figcaption{margin-top:10px;color:var(--smoke);font-size:14px}
@media (min-width:1000px){.pimg.wide{margin-left:-80px;margin-right:-80px}}
.pgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:1.8em}
.pgallery .pimg{margin:0}
.pgallery .pimg img{aspect-ratio:4/5;object-fit:cover;height:100%}
@media (min-width:1000px){.pgallery{margin-left:-80px;margin-right:-80px}}
@media (max-width:640px){.pgallery{grid-template-columns:1fr 1fr}.pgallery .pimg:first-child{grid-column:1 / -1}.pgallery .pimg:first-child img{aspect-ratio:3/2}}
.post-foot{max-width:760px;margin:clamp(48px,8vh,80px) auto 0;padding:0 var(--gut);box-sizing:content-box;display:flex;flex-direction:column;gap:28px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.share .mono{color:var(--smoke);margin-right:8px}
.share a,.share button{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid rgba(243,238,230,.18);border-radius:999px;font-size:14px;color:var(--bone);transition:border-color .2s ease}
@media (hover:hover) and (pointer:fine){.share a:hover,.share button:hover,.jtags.big a:hover{border-color:var(--bone)}}
.pcta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:clamp(22px,3vw,34px);border:1px solid rgba(255,180,92,.35);border-radius:calc(var(--r) + 4px);background:linear-gradient(120deg,rgba(255,106,43,.08),rgba(11,10,9,0) 60%),var(--carbon-2)}
.pcta .mono{color:var(--amber)}
.pcta-h{font-family:var(--display);font-variation-settings:"wdth" 88;font-weight:500;font-size:clamp(20px,1.8vw,26px);line-height:1.2;margin-top:6px;max-width:30ch}
.pcta .acts{display:flex;flex-wrap:wrap;gap:10px}
.pcta.slim{margin-top:clamp(40px,6vh,64px)}
.jrelated{padding:clamp(70px,11vh,120px) var(--gut) clamp(70px,10vh,110px)}
.jrelated h2{font-family:var(--display);font-variation-settings:"wdth" 78,"opsz" 72;font-weight:700;text-transform:uppercase;font-size:clamp(30px,3vw,46px);margin-bottom:24px}
@media (prefers-reduced-motion:reduce){.jimg img,.jlink h3{transition:none}}

/* the hidden attribute must win over .btn / .jgrid display rules */
.jbody [hidden]{display:none!important}