/* Daydrape Journal · Swatch Studio v2
   Loads AFTER /assets/styles.css and reuses its tokens (--paper, --ink, --terra, --plum, --serif …).
   No third-party requests: fonts are the self-hosted set in /assets/fonts. */

/* ---------- page chrome ---------- */
.j{padding-top:72px}
.nav--j{position:fixed;background:rgba(243,238,230,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.draftbar{position:relative;z-index:2;background:var(--butter);font:600 13px/1.3 var(--sans);letter-spacing:.02em;text-align:center;padding:8px var(--pad)}

.crumbs{font:500 13.5px/1.4 var(--sans);color:var(--mu);margin:0 0 var(--s5)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li:before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}

/* ---------- journal index ---------- */
.jx-hero{padding:clamp(48px,8vw,112px) 0 clamp(32px,5vw,64px)}
.jx-hero .h1{font-size:clamp(52px,8.4vw,128px);margin:var(--s4) 0 var(--s5)}
.jx-hero .lead{max-width:36em}
.jx-grid{display:grid;gap:clamp(16px,2.2vw,28px);grid-template-columns:1fr;padding-bottom:var(--s8)}
@media(min-width:760px){.jx-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.jx-grid{grid-template-columns:repeat(3,1fr)}.jx-card--lead{grid-column:span 2}}
.jx-card{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;box-shadow:var(--shadow);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.jx-card:hover{transform:translateY(-4px) rotate(-.3deg)}
.jx-card__sw{height:clamp(120px,14vw,190px);padding:0 var(--s5)}
.jx-card--lead .jx-card__sw{height:clamp(150px,18vw,240px)}
.jx-card__sw .drapes i{animation:none}
.jx-card__b{padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.jx-card__k{font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
.jx-card h2{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:500;font-size:clamp(26px,2.4vw,34px);line-height:1.04;letter-spacing:-.03em;margin:0;text-wrap:balance}
.jx-card--lead h2{font-size:clamp(30px,3.4vw,48px)}
.jx-card p{margin:0;color:#3d3039;font-size:16px}
.jx-card__m{margin-top:auto!important;font-size:13.5px!important;color:var(--mu)!important}
.jx-card__go{position:absolute;right:var(--s5);bottom:var(--s5);font:700 22px/1 var(--hand);color:var(--ultra)}
.jx-next{border-top:1px solid var(--line);padding:var(--s7) 0 var(--s9)}
.jx-next h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;margin:0 0 var(--s4)}
.jx-next ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2) var(--s6);counter-reset:n}
@media(min-width:760px){.jx-next ol{grid-template-columns:1fr 1fr}}
.jx-next li{counter-increment:n;display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px dashed var(--line);font-size:16.5px}
.jx-next li:before{content:counter(n,decimal-leading-zero);font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--terra)}
.jx-next li span{color:var(--mu);font-size:14px;margin-left:auto;white-space:nowrap}

/* ---------- article hero ---------- */
.ja-hero{padding:clamp(40px,6vw,88px) 0 0}
.ja-hero__in{max-width:980px}
.ja-hero .h1{font-size:clamp(44px,6.6vw,96px);line-height:.92;margin:var(--s4) 0 var(--s5)}
.ja-hero .lead{max-width:38em}
.ja-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s5) 0 0;font-size:14px;color:var(--mu)}
.ja-meta b{color:var(--ink);font-weight:600}
.ja-strip{height:clamp(110px,13vw,170px);margin:clamp(32px,5vw,56px) 0 0}
.ja-strip .drapes i{animation:none}

/* ---------- article body ---------- */
.ja-body{display:grid;gap:var(--s7);padding-block:clamp(40px,6vw,80px) var(--s8)}
@media(min-width:1100px){.ja-body{grid-template-columns:230px minmax(0,700px);justify-content:space-between;gap:var(--s8)}}
.toc{font-size:14.5px}
@media(min-width:1100px){.toc{position:sticky;top:100px;align-self:start}}
.toc p{font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s3);color:var(--mu)}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px;border-left:2px solid var(--line)}
.toc a{display:block;padding:6px 0 6px var(--s4);text-decoration:none;color:#3d3039;line-height:1.35;margin-left:-2px;border-left:2px solid transparent;transition:border-color .3s,color .3s}
.toc a:hover{border-left-color:var(--terra);color:var(--ink)}
@media(max-width:1099px){.toc{background:var(--card);border-radius:var(--r);padding:var(--s5)}}

.prose{font-size:clamp(17px,1.25vw,19px);line-height:1.7;color:#2a1e26;min-width:0}
.prose>*+*{margin-top:1.05em}
.prose p,.prose ul,.prose ol{margin-bottom:0}
.prose h2{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:500;font-size:clamp(30px,3vw,42px);line-height:1.04;letter-spacing:-.035em;color:var(--ink);margin:2.1em 0 .1em;scroll-margin-top:96px;text-wrap:balance}
.prose h2 em{font-style:italic;color:var(--terra);font-weight:400}
.prose h3{font-family:var(--serif);font-weight:500;font-size:clamp(21px,1.8vw,25px);margin:1.6em 0 0;color:var(--ink)}
.prose a{color:var(--ink);text-decoration-color:rgba(196,85,59,.55);text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{text-decoration-color:var(--terra)}
.prose sup a{text-decoration:none;font:700 11px/1 var(--sans);color:var(--terra);padding:0 1px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--terra)}
.prose blockquote{margin:1.6em 0;padding:0 0 0 var(--s5);border-left:3px solid var(--terra);font-family:var(--serif);font-size:1.18em;line-height:1.4;font-style:italic;color:var(--ink)}
.prose blockquote cite{display:block;margin-top:var(--s3);font:500 14px/1.4 var(--sans);font-style:normal;color:var(--mu)}
.prose hr{border:0;border-top:1px dashed var(--line);margin:2.4em 0}

.answer{position:relative;background:var(--card);border-radius:var(--r);padding:var(--s5) var(--s5) var(--s5);box-shadow:var(--shadow);margin-top:0!important}
.answer .tape{top:-12px;left:26px;transform:rotate(-4deg)}
.answer p:first-child{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin:0 0 var(--s3)}
.answer ul{margin:0}

.note{background:rgba(147,166,139,.18);border-radius:var(--r);padding:var(--s4) var(--s5);font-size:.92em}
.note strong:first-child{display:block;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s2)}

.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.tbl table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;line-height:1.45}
.tbl th,.tbl td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font:600 11.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mu);background:rgba(31,20,28,.03)}
.tbl tr:last-child td{border-bottom:0}
.tbl caption{caption-side:bottom;text-align:left;padding:10px 16px;font-size:13px;color:var(--mu)}

.timeline{list-style:none;padding:0!important;border-left:2px solid var(--line);margin-left:6px!important}
.timeline li{position:relative;padding:0 0 0 var(--s5)}
.timeline li+li{margin-top:var(--s5)}
.timeline li:before{content:"";position:absolute;left:-8px;top:.5em;width:14px;height:14px;border-radius:50%;background:var(--sw,var(--terra));box-shadow:0 0 0 4px var(--paper)}
.timeline b{display:block;font:600 13px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--terra)}

.pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:0!important;list-style:none}
.pairs li{margin:0!important;background:var(--card);border-radius:var(--r-sm);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;line-height:1.3}
.pairs .sw{display:grid;grid-template-columns:1fr 1fr;height:56px}
.pairs .sw i{background:var(--c)}
.pairs span{display:block;padding:8px 10px}

.figure{margin:1.6em 0!important}
.figure svg{width:100%;height:auto;display:block;background:var(--card);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.figure figcaption{font-size:13.5px;color:var(--mu);margin-top:var(--s2);line-height:1.45}

/* mid-article CTA */
.jcta{position:relative;margin:2.4em 0!important;background:var(--plum);color:var(--paper);border-radius:var(--r-lg);padding:var(--s6) var(--s6) var(--s6);overflow:hidden}
.jcta h2,.jcta .jcta__t{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:500;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.03em;margin:0 0 var(--s3);color:var(--paper)}
.jcta .jcta__t em{color:var(--butter);font-style:italic;font-weight:400}
.jcta p{margin:0 0 var(--s4);color:rgba(243,238,230,.82);font-size:16.5px}
.jcta .btn{--bg:var(--paper);--fg:var(--ink)}
.jcta .btn:hover{color:var(--paper)}
.jcta__sw{position:absolute;right:-10px;top:-10px;display:flex;gap:6px;transform:rotate(8deg);opacity:.9}
.jcta__sw i{width:22px;height:84px;border-radius:0 0 999px 999px;background:var(--c)}
@media(max-width:560px){.jcta{padding:var(--s5)}.jcta__sw{display:none}}

/* sources */
.sources{font-size:14.5px;line-height:1.5;color:#3d3039}
.sources ol{padding-left:1.4em}
.sources li+li{margin-top:.6em}
.sources li{scroll-margin-top:96px}
.sources li:target{background:rgba(242,207,107,.35);border-radius:6px}
.reviewed{font-size:14px;color:var(--mu);border-top:1px solid var(--line);padding-top:var(--s4)}

/* related */
.related{padding:0 0 var(--s9)}
.related h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;margin:0 0 var(--s5)}
.related .jx-grid{padding-bottom:0}

/* Stacked tables on small screens (used where a table would otherwise be cut off at the right edge) */
@media (max-width:600px){
.tbl--stack table{min-width:0}
.tbl--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbl--stack tbody,.tbl--stack tr,.tbl--stack td{display:block;width:auto}
.tbl--stack tr{padding:8px 0;border-bottom:1px solid var(--line)}
.tbl--stack tr:last-child{border-bottom:0}
.tbl--stack td{border:0;padding:6px 18px}
.tbl--stack td[data-label]::before{content:attr(data-label);display:block;font:600 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin-bottom:5px}
}

/* ---------- affiliate links (v11) ---------- */
.aff-disc{display:block;position:relative;margin:0 0 var(--s4)!important;padding:10px 14px 10px 32px;border:1px dashed var(--line);border-radius:var(--r-sm);font:500 13.5px/1.55 var(--sans);color:var(--mu)}
.aff-disc:before{content:"";position:absolute;left:14px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--butter);box-shadow:0 0 0 2px rgba(242,207,107,.35)}
.aff-disc a{color:var(--mu)}
.aff-disc+.answer{margin-top:0!important}
.aff{position:relative;margin:1.6em 0!important;padding:var(--s4) var(--s5) var(--s4) calc(var(--s5) + 6px);background:var(--card);border-radius:var(--r);box-shadow:0 1px 0 var(--line);font-size:.9em;line-height:1.6;overflow:hidden}
.aff:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(var(--terra) 0 33%,var(--butter) 33% 66%,var(--sage) 66%)}
.aff__k{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin:0 0 var(--s2)!important;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.aff__k span{font-weight:500;letter-spacing:.06em;text-transform:none;font-size:12px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.aff p{margin:0}
.aff a.aff__l{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink);text-decoration-color:rgba(196,85,59,.45)}
.aff a.aff__l:after{content:"\2197";display:inline-block;margin-left:3px;font:600 .8em/1 var(--sans);font-style:normal;color:var(--terra)}
.foot .aff-amz{font-size:13px}
.aff--img{display:grid;grid-template-columns:72px 1fr;gap:var(--s4);align-items:start}
.aff__img{display:block;width:72px;height:auto;aspect-ratio:120/168;border-radius:6px;box-shadow:0 1px 0 var(--line),0 6px 14px -8px rgba(31,20,28,.45)}
@media (max-width:600px){.aff--img{grid-template-columns:1fr;gap:var(--s3)}.aff__img{width:60px}}