/* =========================================================================
   FULLOAT Journal v2 (v9.36): Journal page, archives and single posts.
   Loaded after blog.css and refresh.css. Uses the theme tokens only.
   Signature: every guide carries a care-label style topic tag, and the
   planned guides sit on the page as "Coming soon" stamped cards.
   ====================================================================== */
.jx{
	--x-ink:var(--ink,#0e0e0e); --x-cream:var(--cream-bg,#f7f3e9); --x-soft:var(--ink-soft,#6a645b);
	--x-line:var(--line-warm,#e3dbc9); --x-flame:var(--flame,#ff4d1c); --x-deep:var(--flame-deep,#d93a0b);
	--x-sage:var(--sage,#dfe5d6); --x-gold:#f4c430;
	--x-display:'Archivo','Arial Narrow',Arial,sans-serif;
	--x-sans:var(--sans,'Archivo',-apple-system,'Segoe UI',Roboto,Arial,sans-serif);
	--x-mono:var(--mono,'Space Mono','Courier New',monospace);
	font-family:var(--x-sans); color:var(--x-ink);
}
.jx *,.jx *::before,.jx *::after{ box-sizing:border-box; }
.jx [hidden]{ display:none !important; }
.jx a{ color:inherit; }

/* ---------- shared bits ---------- */
.jx-crumbs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; font-family:var(--x-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--x-soft); }
.jx-crumbs a{ color:var(--x-ink); text-decoration:none; border-bottom:1px solid transparent; }
.jx-crumbs a:hover{ border-bottom-color:var(--x-deep); }
.jx-kicker{ display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; font-family:var(--x-mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--x-deep); }
.jx-kicker::before{ content:""; width:28px; height:2px; background:currentColor; }
.jx-h1{ margin:0; font-family:var(--x-display); font-weight:900; font-variation-settings:'wdth' 118; text-transform:uppercase; letter-spacing:-.02em; line-height:.92; font-size:clamp(36px,4.8vw,70px); text-wrap:balance; }
.jx .nw{ white-space:nowrap; }
.jx-h2{ margin:0; font-family:var(--x-display); font-weight:900; font-variation-settings:'wdth' 112; text-transform:uppercase; letter-spacing:-.015em; line-height:1; font-size:clamp(26px,3.2vw,42px); }
.jx-sub{ margin:8px 0 0; color:var(--x-soft); font-size:15px; max-width:60ch; }
.jx-link{ font-family:var(--x-mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-bottom:2px solid var(--x-deep); padding:6px 0 3px; white-space:nowrap; }
.jx-link:hover{ color:var(--x-deep); }
.jx-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; }
.jx-sec{ padding-top:clamp(36px,5vw,64px); }
.jx-sec-last{ padding-bottom:clamp(48px,6vw,88px); }
.jx :focus-visible{ outline:3px solid var(--x-deep); outline-offset:3px; }

/* topic tags: one colour per topic, like a garment care label */
.jx-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0; font-family:var(--x-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--x-soft); }
.jx-meta > span + span::before,.jx-meta > time::before{ content:"\00B7"; margin-right:12px; color:var(--x-line); }
.jx-meta > .jx-topic + span::before{ display:none; }
.jx-topic{ display:inline-block; padding:4px 8px; font-weight:700; letter-spacing:.08em; border:1.5px solid var(--x-ink); background:var(--x-ink); color:#fff; line-height:1.2; }
.jx-topic-fabric{ background:var(--x-sage); color:var(--x-ink); }
.jx-topic-style{ background:var(--x-deep); border-color:var(--x-deep); color:#fff; }
.jx-topic-care{ background:#fff; color:var(--x-ink); }
.jx-topic-drop{ background:var(--x-gold); color:var(--x-ink); }

/* ---------- Journal page hero ---------- */
.jx-hero{ padding:clamp(24px,3.6vw,48px) 0 clamp(20px,3vw,32px); border-bottom:1px solid var(--x-line); background-color:var(--x-cream); background-image:repeating-linear-gradient(90deg, transparent 0 59px, rgba(14,14,14,.035) 59px 60px); }
.jx-hero-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px clamp(24px,5vw,72px); align-items:end; }
.jx-hero-side{ display:grid; gap:18px; padding-bottom:6px; }
.jx-intro{ margin:0; font-size:clamp(15px,1.25vw,17px); line-height:1.6; color:var(--x-soft); }
.jx-intro p{ margin:0; }
.jx-stats{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; border:1.5px solid var(--x-ink); background:#fff; width:max-content; max-width:100%; }
.jx-stats li{ padding:9px 14px; font-family:var(--x-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--x-soft); border-right:1.5px dashed var(--x-line); }
.jx-stats li:last-child{ border-right:0; }
.jx-stats b{ color:var(--x-ink); font-size:14px; }
.jx-filter{ display:flex; gap:8px; margin-top:clamp(22px,3vw,34px); overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; }
.jx-filter::-webkit-scrollbar{ display:none; }
.jx-chip{ flex:none; display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border:1.5px solid var(--x-ink); border-radius:999px; background:#fff; color:var(--x-ink); font-family:var(--x-sans); font-size:14px; font-weight:700; cursor:pointer; transition:background .15s,color .15s,transform .15s; }
.jx-chip span{ font-family:var(--x-mono); font-size:12px; color:var(--x-soft); }
.jx-chip:hover{ transform:translateY(-1px); }
.jx-chip[aria-pressed="true"]{ background:var(--x-ink); color:#fff; }
.jx-chip[aria-pressed="true"] span{ color:#cfc9bf; }
.jx-hero-sm .jx-h1{ font-size:clamp(34px,4.6vw,64px); }
.jx-hero-sm .jx-intro{ margin-top:14px; max-width:60ch; }

/* ---------- cards ---------- */
.jx-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.jx-card{ position:relative; display:flex; flex-direction:column; min-width:0; background:#fff; border:1.5px solid var(--x-line); border-radius:8px; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; }
.jx-card:not(.is-soon):hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--x-ink); border-color:var(--x-ink); }
.jx-media{ position:relative; aspect-ratio:16/10; background:var(--x-ink); overflow:hidden; }
.jx-img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.jx-card:not(.is-soon):hover .jx-img{ transform:scale(1.03); }
.jx-img-empty{ display:grid; place-items:center; color:#fff; font-family:var(--x-display); font-weight:900; font-size:28px; letter-spacing:.04em; }
.jx-body{ display:flex; flex-direction:column; gap:10px; padding:18px 18px 20px; flex:1; }
.jx-title{ margin:2px 0 0; font-family:var(--x-display); font-weight:800; font-variation-settings:'wdth' 104; font-size:clamp(18px,1.5vw,21px); line-height:1.2; letter-spacing:-.01em; text-transform:none; text-wrap:balance; }
.jx-title a{ text-decoration:none; }
.jx-title a::after{ content:""; position:absolute; inset:0; z-index:1; } /* whole card is the link */
.jx-ex{ margin:0; font-size:15px; line-height:1.55; color:var(--x-soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.jx-go{ margin-top:auto; padding-top:6px; font-family:var(--x-mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--x-ink); }
.jx-go span{ display:inline-block; transition:transform .2s; color:var(--x-deep); }
.jx-card:hover .jx-go span{ transform:translateX(4px); }

/* planned guides: stamped, not clickable */
.jx-card.is-soon{ border-style:dashed; background:#fffdf8; }
.jx-card.is-soon .jx-img{ filter:saturate(.85); opacity:.92; }
.jx-soon{ position:absolute; top:12px; right:12px; z-index:2; padding:6px 10px; background:#fff; color:var(--x-ink); border:1.5px solid var(--x-ink); font-family:var(--x-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transform:rotate(3deg); box-shadow:3px 3px 0 var(--x-ink); }
.jx-card.is-soon .jx-go{ color:var(--x-soft); }

/* featured guide */
.jx-feature{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); border-color:var(--x-ink); }
.jx-feature .jx-media{ aspect-ratio:auto; min-height:100%; display:flex; align-items:center; background:#111; }
.jx-feature .jx-img{ aspect-ratio:16/10; height:auto; object-fit:contain; }
.jx-feature .jx-body{ padding:clamp(22px,3vw,44px); gap:16px; justify-content:center; }
.jx-feature .jx-title{ font-size:clamp(26px,3vw,44px); font-weight:900; font-variation-settings:'wdth' 110; text-transform:uppercase; line-height:.98; }
.jx-feature .jx-ex{ font-size:17px; -webkit-line-clamp:4; }
.jx-feature .jx-go{ align-self:flex-start; margin-top:8px; padding:14px 20px; background:var(--x-deep); color:#fff; border-radius:4px; }
.jx-feature .jx-go span{ color:#fff; }
.jx-sec-feature{ padding-top:clamp(24px,3.5vw,44px); }

/* CTA */
.jx-cta{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 32px; align-items:center; padding:clamp(24px,4vw,48px); background:var(--x-ink); color:#fff; border-radius:8px; }
.jx-cta::after{ content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; border:30px solid var(--x-flame); pointer-events:none; }
.jx-cta > *{ position:relative; z-index:1; }
.jx-cta .jx-kicker{ color:var(--x-flame); }
.jx-cta p{ margin:10px 0 0; color:#d9d3c7; max-width:52ch; }
.jx-cta-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.jx-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; background:var(--x-deep); color:#fff !important; text-decoration:none; font-family:var(--x-mono); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:4px; transition:transform .15s, box-shadow .15s; }
.jx-btn:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 #fff; }
.jx-btn-wa{ background:#25d366; color:#0b2e17 !important; }
.jx-empty{ text-align:center; padding:40px 16px 0; color:var(--x-soft); }
.jx-reset{ background:none; border:0; border-bottom:2px solid var(--x-deep); font:inherit; font-weight:700; color:var(--x-ink); cursor:pointer; padding:0; }

/* ---------- single post ---------- */
.jx-progress{ position:fixed; left:0; right:0; top:0; height:4px; z-index:9998; pointer-events:none; }
.jx-progress span{ display:block; height:100%; background:var(--flame-deep,#d93a0b); transform:scaleX(0); transform-origin:left; }
.jx-post-head{ padding:clamp(24px,3.6vw,48px) 0 clamp(20px,2.6vw,30px); }
.jx-post-head .wrap > *{ max-width:920px; }
.jx-meta-lg{ margin-bottom:18px; }
.jx-post-title{ margin:0; font-family:var(--x-display); font-weight:900; font-variation-settings:'wdth' 110; text-transform:uppercase; letter-spacing:-.02em; line-height:.96; font-size:clamp(32px,4.6vw,64px); text-wrap:balance; }
.jx-dek{ margin:18px 0 0; font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--x-soft); max-width:62ch; }
.jx-byline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:22px; font-size:14px; color:var(--x-soft); }
.jx-byline b{ color:var(--x-ink); }
.jx-avatar{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--x-ink); color:var(--x-flame); font-family:var(--x-display); font-weight:900; font-size:16px; flex:none; }
.jx-avatar-lg{ width:56px; height:56px; font-size:24px; }
.jx-post-hero{ margin:0; }
.jx-post-hero .wrap{ display:flex; flex-direction:column; align-items:center; }
.jx-post-img{ display:block; width:100%; max-width:880px; height:auto; border-radius:8px; border:1.5px solid var(--x-ink); }
.jx-post-hero figcaption{ margin-top:8px; font-size:13px; color:var(--x-soft); }

.jx-layout{ display:grid; grid-template-columns:minmax(0,720px); justify-content:center; gap:56px; padding-top:clamp(28px,4vw,52px); }
.jx-layout.has-toc{ grid-template-columns:240px minmax(0,720px); }
.jx-main{ min-width:0; }
.jx-toc{ min-width:0; }
.jx-toc-box{ position:sticky; top:96px; border:1.5px solid var(--x-ink); background:#fff; border-radius:8px; }
.jx-toc-box summary{ list-style:none; cursor:pointer; padding:14px 16px; font-family:var(--x-mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; display:flex; justify-content:space-between; align-items:center; }
.jx-toc-box summary::-webkit-details-marker{ display:none; }
.jx-toc-box summary::after{ content:"+"; font-size:18px; color:var(--x-deep); }
.jx-toc-box[open] summary::after{ content:"\2013"; }
.jx-toc-box ol{ list-style:none; counter-reset:toc; margin:0; padding:0 8px 12px; border-top:1px dashed var(--x-line); }
.jx-toc-box li{ counter-increment:toc; }
.jx-toc-box a{ display:grid; grid-template-columns:28px 1fr; gap:4px; padding:9px 8px; border-left:3px solid transparent; text-decoration:none; font-size:14px; line-height:1.35; color:var(--x-soft); border-radius:0 4px 4px 0; }
.jx-toc-box a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--x-mono); font-size:12px; color:var(--x-deep); padding-top:1px; }
.jx-toc-box a:hover{ color:var(--x-ink); background:var(--x-cream); }
.jx-toc-box a[aria-current="true"]{ color:var(--x-ink); font-weight:700; border-left-color:var(--x-deep); background:var(--x-cream); }

/* the article itself (blog.css still styles patterns: callouts, tables, buttons) */
.jx .jx-prose{ max-width:none; margin:0; font-size:18px; line-height:1.75; color:#1d1b18; }
.jx .jx-prose > * + *{ margin-top:1.2em; }
.jx .jx-prose p{ margin-bottom:0; }
.jx .jx-prose h2 + *,.jx .jx-prose h3 + *{ margin-top:.6em; }
.jx .jx-prose > p:first-child{ font-size:20px; line-height:1.6; color:var(--x-ink); }
.jx .jx-prose h2{ position:relative; margin-top:2.2em; padding-top:18px; font-family:var(--x-display); font-weight:900; font-variation-settings:'wdth' 108; text-transform:none; letter-spacing:-.015em; line-height:1.12; font-size:clamp(25px,2.6vw,32px); scroll-margin-top:96px; }
.jx .jx-prose h2::before{ content:""; position:absolute; left:0; top:0; width:44px; height:4px; background:var(--x-deep); }
.jx .jx-prose h3{ margin-top:1.8em; font-family:var(--x-display); font-weight:800; text-transform:none; letter-spacing:-.01em; line-height:1.2; font-size:clamp(19px,1.8vw,22px); scroll-margin-top:96px; }
.jx .jx-prose a{ text-decoration-color:var(--x-deep); }
.jx .jx-prose ul{ list-style:none; padding-left:0; }
.jx .jx-prose ul > li{ position:relative; padding-left:26px; }
.jx .jx-prose ul > li::before{ content:""; position:absolute; left:4px; top:.7em; width:9px; height:9px; background:var(--x-deep); transform:rotate(45deg); }
.jx .jx-prose ol{ padding-left:1.4em; }
.jx .jx-prose ol > li::marker{ font-family:var(--x-mono); font-weight:700; color:var(--x-deep); }
.jx .jx-prose blockquote{ margin:1.6em 0; padding:6px 0 6px 22px; border-left:4px solid var(--x-deep); font-size:21px; line-height:1.5; font-weight:600; color:var(--x-ink); }
.jx .jx-prose figure,.jx .jx-prose img{ border-radius:8px; }
.jx .jx-prose table{ display:block; max-width:100%; overflow-x:auto; font-size:15px; }
.jx .jx-prose .jrnl-callout{ border-radius:8px; border:1.5px solid var(--x-ink); border-left-width:6px; border-left-color:var(--x-deep); background:#fff; }

.jx-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:36px 0 0; padding:0; }
.jx-tags a{ display:inline-block; padding:6px 12px; border:1.5px solid var(--x-line); border-radius:999px; font-size:14px; text-decoration:none; }
.jx-tags a:hover{ border-color:var(--x-ink); }
.jx-share{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:28px; padding:16px 0; border-top:1px solid var(--x-line); border-bottom:1px solid var(--x-line); }
.jx-share > span{ font-family:var(--x-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-right:auto; }
.jx-share a,.jx-share button{ display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border:1.5px solid var(--x-ink); border-radius:999px; background:#fff; color:var(--x-ink); font:700 14px var(--x-sans); text-decoration:none; cursor:pointer; }
.jx-share a svg{ width:18px; height:18px; color:#1aa752; }
.jx-share a:hover,.jx-share button:hover{ background:var(--x-ink); color:#fff; }
.jx-author{ display:flex; gap:18px; align-items:flex-start; margin-top:28px; padding:22px; background:#fff; border:1.5px solid var(--x-line); border-radius:8px; }
.jx-author p{ margin:0; font-size:15px; line-height:1.6; color:var(--x-soft); }
.jx-author .jx-author-name{ margin-bottom:6px; font-family:var(--x-display); font-weight:800; font-size:17px; color:var(--x-ink); }
.jx-author a{ display:inline-block; margin-top:10px; font-family:var(--x-mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid var(--x-deep); text-decoration:none; }
.jx-shop{ margin-top:clamp(20px,3vw,40px); }
.jx-shop .fh-head h2{ font-size:clamp(26px,3.2vw,42px); }

/* ---------- responsive ---------- */
@media (max-width:1100px){
	.jx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:999px){
	.jx-layout.has-toc{ grid-template-columns:minmax(0,720px); gap:20px; }
	.jx-toc-box{ position:static; }
}
@media (max-width:860px){
	.jx-hero-grid{ grid-template-columns:minmax(0,1fr); }
	.jx-feature{ grid-template-columns:minmax(0,1fr); }
	.jx-feature .jx-media{ min-height:0; }
	.jx-cta{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
	.jx-grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
	.jx-h1{ font-size:clamp(32px,9.6vw,44px); }
	.jx-stats{ width:100%; }
	.jx-stats li{ flex:1; padding:8px 10px; text-align:center; }
	.jx-head{ flex-wrap:wrap; }
	.jx-body{ padding:16px; }
	.jx-feature .jx-go{ width:100%; justify-content:center; text-align:center; }
	.jx-cta-btns .jx-btn{ flex:1 1 100%; }
	.jx .jx-prose{ font-size:17px; }
	.jx .jx-prose > p:first-child{ font-size:18px; }
	.jx-share > span{ width:100%; }
	.jx-author{ padding:18px; gap:14px; }
	.jx-avatar-lg{ width:44px; height:44px; font-size:20px; }
}
@media (prefers-reduced-motion:reduce){
	.jx-card,.jx-img,.jx-chip,.jx-btn,.jx-go span{ transition:none !important; }
}

/* theme-added "shop" line inside posts */
.jx .jx-prose .fl-inline-cta{ padding:14px 18px; background:#fff; border:1.5px solid var(--x-ink); border-left:6px solid var(--x-deep); border-radius:8px; font-size:16px; font-weight:600; line-height:1.5; }
.jx .jx-prose .fl-inline-cta a{ color:var(--x-deep); }