/* =====================================================================
   The DopaFix Journal (/blog/) — editorial pages.
   The reading area is always warm ivory paper (like the guides), whatever the site theme: long reads are easier
   on paper. Palette: ivory, graphite, coral pink, amber; type: Newsreader (reading) + Inter (labels).
   ===================================================================== */
.page-journal main{
  --j-paper:#F7F1E6; --j-paper-2:#EFE6D4; --j-card:#FBF7EF; --j-ink:#22201E; --j-ink-2:#4A4540; --j-muted:#6E675E;
  --j-rule:#DCD0BA; --j-coral:#D9534A; --j-coral-ink:#A93A33; --j-pink:#C7356D; --j-amber:#C9780F; --j-amber-soft:#F3D9A6;
  --j-measure:40rem;
  background:var(--j-paper);color:var(--j-ink);padding-bottom:clamp(3rem,8vw,6rem)
}
.page-journal main ::selection{background:var(--j-amber-soft);color:var(--j-ink)}
.page-journal main :focus-visible{outline-color:var(--j-coral-ink)}
.page-journal main a{color:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.jr-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* category colours (the eight sections) */
[data-cat="understanding-adhd"]{--c:#C7356D}
[data-cat="practical-adhd-life"]{--c:#D9534A}
[data-cat="work-and-productivity"]{--c:#C9780F}
[data-cat="adhd-and-money"]{--c:#2F7A5B}
[data-cat="home-and-organisation"]{--c:#B4582A}
[data-cat="tools-and-technology"]{--c:#3D63A8}
[data-cat="relationships-and-self-esteem"]{--c:#8A3FA0}
[data-cat="dopafix-stories"]{--c:#6B4FB8}

/* ---------- masthead ---------- */
.jr-masthead{padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(1.5rem,4vw,2.5rem);border-bottom:1px solid var(--j-rule)}
.jr-masthead .eyebrow{color:var(--j-coral-ink);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem}
.jr-masthead .h1{margin-top:.8rem;max-width:15ch;color:var(--j-ink);font-size:clamp(2.6rem,7vw,5.6rem);line-height:.98}
.jr-masthead .h1 em{background:linear-gradient(120deg,#C9780F 0%,#D9534A 45%,#C7356D 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.jr-masthead--small .h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:22ch}
.jr-masthead__intro{margin-top:1.2rem;max-width:56ch;font:400 1.25rem/1.5 var(--serif);color:var(--j-ink-2)}
.jr-masthead__role{margin-top:.6rem;color:var(--j-muted);font-weight:600}
.jr-searchbox{display:flex;gap:.5rem;margin-top:1.8rem;max-width:32rem}
.jr-searchbox input{flex:1;min-width:0;min-height:48px;padding:.6rem 1rem;border-radius:999px;border:1.5px solid var(--j-rule);background:var(--j-card);color:var(--j-ink)}
.jr-searchbox input:focus{border-color:var(--j-coral);outline:none;box-shadow:0 0 0 3px #d9534a33}
.page-journal .btn--quiet{color:var(--j-ink);border-color:var(--j-ink-2)}
.page-journal .btn--quiet:hover{border-color:var(--j-coral);color:var(--j-coral-ink)}
.jr-cats ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0}
.jr-cats a,.jr-cats span{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;border:1px solid var(--j-rule);font:600 .82rem/1.2 var(--sans);text-decoration:none;color:var(--j-ink-2);background:var(--j-card);transition:border-color .2s,color .2s,transform .2s var(--ease)}
.jr-cats a::before,.jr-cats span::before{content:"";width:.55rem;height:.55rem;border-radius:70% 0 70% 0;transform:rotate(45deg);background:var(--c)}
.jr-cats a:hover{border-color:var(--c);color:var(--j-ink);transform:translateY(-1px)}
.jr-cats span{opacity:.55}

/* ---------- sections and cards ---------- */
.jr-section{padding-top:clamp(2rem,5vw,3.5rem)}
.jr-section__title{font:600 .78rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--j-muted);padding-bottom:.9rem;margin-bottom:1.6rem;border-bottom:2px solid var(--j-ink)}
.jr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18.5rem),1fr));gap:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem)}
.jr-card__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.jr-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-sm);background:var(--j-paper-2)}
.jr-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.jr-card__link:hover .jr-card__media img{transform:scale(1.035)}
.jr-card__type{position:absolute;inset:0;display:grid;place-items:center;font:italic 300 clamp(3rem,7vw,5rem)/1 var(--serif);letter-spacing:-.04em;color:#fff8;
  background:radial-gradient(120% 90% at 15% 10%,color-mix(in srgb,var(--c,#D9534A) 75%,#fff) 0%,var(--c,#D9534A) 55%,color-mix(in srgb,var(--c,#D9534A) 70%,#000) 100%)}
.jr-card__text{padding-top:1rem}
.jr-card__cat{font:700 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--c,var(--j-coral-ink))}
.jr-card__title{margin-top:.5rem;font:400 clamp(1.35rem,2.2vw,1.65rem)/1.15 var(--serif);letter-spacing:-.015em;color:var(--j-ink)}
.jr-card__title em{font-style:italic;background:none;color:inherit}
.jr-card__link:hover .jr-card__title{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.15em;text-decoration-color:var(--c,var(--j-coral))}
.jr-card__excerpt{margin-top:.6rem;color:var(--j-ink-2);font-size:.98rem;line-height:1.55}
.jr-card__meta{margin-top:auto;padding-top:.8rem;font-size:.82rem;color:var(--j-muted)}
.jr-card--lead .jr-card__link{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.jr-card--lead .jr-card__media{aspect-ratio:4/3;border-radius:var(--r)}
.jr-card--lead .jr-card__title{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.02;letter-spacing:-.025em}
.jr-card--lead .jr-card__excerpt{font:400 1.2rem/1.5 var(--serif)}
.jr-empty p{max-width:56ch;font:400 1.2rem/1.55 var(--serif);color:var(--j-ink-2)}
.jr-empty a,.jr-guides a.link{color:var(--j-coral-ink)}
.jr-guides ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1px;background:var(--j-rule);border:1px solid var(--j-rule);border-radius:var(--r-sm);overflow:hidden}
.jr-guides li a{display:block;height:100%;padding:1.1rem 1.2rem;background:var(--j-card);text-decoration:none;transition:background-color .2s}
.jr-guides li a:hover{background:#fff}
.jr-guides b{display:block;font:400 1.2rem/1.2 var(--serif)}
.jr-guides span{display:block;margin-top:.4rem;font-size:.9rem;color:var(--j-muted)}
.jr-guides p{margin-top:1rem}
.jr-rss{margin-top:2.5rem;font-size:.85rem;color:var(--j-muted)}

/* ---------- article ---------- */
.jr-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:1.4rem 0 0;font-size:.82rem;color:var(--j-muted)}
.jr-crumbs li+li::before{content:"/";margin-inline-end:.35rem;color:var(--j-rule)}
.jr-crumbs a{text-decoration:none}
.jr-crumbs a:hover{color:var(--j-coral-ink);text-decoration:underline}
.jr-head{max-width:52rem;margin:0 auto;padding:clamp(2rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.2rem);text-align:center}
.jr-kicker a{font:700 .76rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--j-coral-ink);text-decoration:none}
.jr-kicker a:hover{text-decoration:underline}
.jr-title{margin-top:1rem;font-size:clamp(2.4rem,6.2vw,4.6rem);line-height:1;letter-spacing:-.03em;color:var(--j-ink)}
.jr-title em{font-style:italic;background:linear-gradient(120deg,#C9780F 0%,#D9534A 45%,#C7356D 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.jr-dek{margin:1.3rem auto 0;max-width:38rem;font:italic 300 clamp(1.25rem,2.3vw,1.55rem)/1.4 var(--serif);color:var(--j-ink-2)}
.jr-byline{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.1rem;margin-top:1.5rem;font-size:.88rem;color:var(--j-muted)}
.jr-byline a{font-weight:600;color:var(--j-ink);text-decoration:none;border-bottom:1px solid var(--j-rule)}
.jr-byline a:hover{border-color:var(--j-coral)}
.jr-hero{max-width:68rem;margin:0 auto;border-radius:var(--r);overflow:hidden;background:var(--j-paper-2)}
.jr-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.jr-hero--type{aspect-ratio:21/7;display:grid;place-items:center;font:italic 300 clamp(4rem,12vw,9rem)/1 var(--serif);color:#fff9;letter-spacing:-.05em;
  background:radial-gradient(120% 120% at 10% 0%,color-mix(in srgb,var(--c,#D9534A) 60%,#fff) 0%,var(--c,#D9534A) 50%,color-mix(in srgb,var(--c,#D9534A) 60%,#000) 100%)}
.jr-layout{display:grid;grid-template-columns:minmax(0,1fr);justify-content:center;gap:2rem;margin-top:clamp(2rem,5vw,3.5rem)}
.jr-body{max-width:var(--j-measure);margin:0 auto;width:100%;font:400 clamp(1.15rem,1.6vw,1.27rem)/1.75 var(--serif);color:#2A2723;font-feature-settings:"onum" 1,"kern" 1}
.jr-body>p:first-child::first-letter{float:inline-start;margin:.08em .1em 0 0;font:400 4.6em/.8 var(--serif);color:var(--j-coral-ink)}
.jr-body>*+*{margin-top:1.15em}
.jr-body h2{margin-top:2.4em;font:400 clamp(1.7rem,3vw,2.15rem)/1.15 var(--serif);letter-spacing:-.02em;color:var(--j-ink);scroll-margin-top:calc(var(--top-h) + 1.5rem)}
.jr-body h2::before{content:"";display:block;width:2.5rem;height:3px;margin-bottom:1rem;border-radius:3px;background:linear-gradient(90deg,#C9780F,#D9534A,#C7356D)}
.jr-body h3{margin-top:1.8em;font:600 1.12rem/1.35 var(--sans);letter-spacing:-.005em;color:var(--j-ink)}
.jr-body h2+*,.jr-body h3+*{margin-top:.6em}
.jr-body a{color:var(--j-coral-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.jr-body a:hover{text-decoration-thickness:2px}
.jr-body strong{font-weight:600;color:var(--j-ink)}
.jr-body ul,.jr-body ol{padding-inline-start:1.3em}
.jr-body li+li{margin-top:.45em}
.jr-body ul li::marker{color:var(--j-coral)}
.jr-body ol li::marker{font:600 .9em var(--sans);color:var(--j-coral-ink)}
.jr-body blockquote{margin:1.8em 0;padding:.2em 0 .2em 1.3em;border-inline-start:3px solid var(--j-coral);font:italic 400 1.35em/1.45 var(--serif);color:var(--j-ink)}
.jr-body hr{border:0;margin:2.6em auto;text-align:center;height:1em}
.jr-body hr::after{content:"✿  ✿  ✿";color:var(--j-amber);letter-spacing:.4em;font-size:.8em}
.jr-figure{margin:2em calc(-1 * min(6vw,4rem))}
.jr-figure img{border-radius:var(--r-sm);width:100%}
.jr-figure figcaption{margin-top:.6rem;font:400 .88rem/1.45 var(--sans);color:var(--j-muted);text-align:center}
.jr-box{margin:2em 0;padding:1.4rem 1.6rem;border-radius:var(--r);background:var(--j-card);border:1px solid var(--j-rule);font-size:.95em}
.jr-box>*+*{margin-top:.8em}
.jr-box h3{margin:.3em 0 0;font:400 1.4rem/1.2 var(--serif)}
.jr-box__label{font:700 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--j-coral-ink)}
.jr-box--try{background:#F9E9D2;border-color:#EBCB9A}
.jr-box--step{background:var(--j-ink);color:#F3ECDF;border:0}
.jr-box--step .jr-box__label{color:#F3B35C}
.jr-box--step h3,.jr-box--step strong{color:#fff}
.jr-box--step a{color:#F5B98A}
.jr-toc{padding:1.1rem 1.25rem;border-radius:var(--r-sm);background:var(--j-card);border:1px solid var(--j-rule);font-size:.9rem}
.jr-toc__title{font:700 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--j-muted)}
.jr-toc ol{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.15rem;counter-reset:toc}
.jr-toc li{counter-increment:toc}
.jr-toc a{display:grid;grid-template-columns:1.6rem 1fr;padding:.3rem .2rem;border-radius:6px;text-decoration:none;color:var(--j-ink-2);line-height:1.35;transition:color .2s,background-color .2s}
.jr-toc a::before{content:counter(toc,decimal-leading-zero);font:600 .72rem/1.9 var(--sans);color:var(--j-muted)}
.jr-toc a:hover{color:var(--j-ink);background:var(--j-paper-2)}
.jr-toc a[aria-current]{color:var(--j-coral-ink);font-weight:600}
@media (min-width:1100px){
  .jr-layout:has(.jr-layout__side){grid-template-columns:15rem minmax(0,var(--j-measure)) 15rem}
  .jr-layout__side{grid-column:1}
  .jr-layout__side .jr-toc{position:sticky;top:calc(var(--top-h) + 1.5rem);max-height:calc(100vh - var(--top-h) - 3rem);overflow:auto}
  .jr-layout:has(.jr-layout__side) .jr-body{grid-column:2}
}
@media (max-width:1099.98px){.jr-layout__side{max-width:var(--j-measure);margin:0 auto;width:100%}}

.jr-foot{max-width:var(--j-measure);margin:3rem auto 0;padding-top:2rem;border-top:1px solid var(--j-rule);display:grid;gap:1.6rem}
.jr-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.jr-tags a{display:inline-block;padding:.3rem .75rem;border-radius:999px;background:var(--j-paper-2);font:600 .8rem/1.3 var(--sans);text-decoration:none;color:var(--j-ink-2)}
.jr-tags a:hover{background:var(--j-amber-soft);color:var(--j-ink)}
.jr-share__label{font:700 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--j-muted)}
.jr-share ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0;padding:0}
.jr-share__btn{display:inline-flex;align-items:center;min-height:40px;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--j-rule);background:var(--j-card);font:600 .84rem/1 var(--sans);color:var(--j-ink);text-decoration:none;cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.jr-share__btn:hover{border-color:var(--j-coral);transform:translateY(-1px)}
.jr-share__btn.is-done{border-color:#2F7A5B;color:#2F7A5B}
.jr-medium{font-size:.92rem;color:var(--j-muted)}
.jr-medium a{color:var(--j-ink)}
.jr-disclaimer{font-size:.85rem;color:var(--j-muted);font-style:italic}
.jr-author{display:grid;gap:.4rem;padding:1.2rem 1.4rem;border-radius:var(--r-sm);background:var(--j-paper-2)}
.jr-author__name a{font:400 1.3rem/1.2 var(--serif);text-decoration:none}
.jr-author__name span{display:block;margin-top:.15rem;font-size:.82rem;color:var(--j-muted)}
.jr-author p:last-child{font-size:.95rem;color:var(--j-ink-2)}

.jr-next{max-width:52rem;margin:clamp(3rem,7vw,4.5rem) auto 0;padding:clamp(1.6rem,4vw,2.6rem);border-radius:var(--r-lg);background:var(--j-ink);color:#F3ECDF}
.jr-next__eyebrow{font:700 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#F3B35C}
.jr-next h2{margin-top:.6rem;font-size:clamp(1.8rem,3.5vw,2.5rem);color:#fff}
.jr-next ul{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.8rem}
.jr-next a{display:block;height:100%;padding:1.1rem 1.2rem;border-radius:var(--r-sm);background:#2E2B28;text-decoration:none;transition:background-color .2s,transform .25s var(--ease)}
.jr-next a:hover{background:#3A3632;transform:translateY(-2px)}
.jr-next b{display:block;font:600 1rem/1.3 var(--sans);color:#fff}
.jr-next a span{display:block;margin-top:.4rem;font-size:.88rem;line-height:1.45;color:#CFC5B5}
.jr-pn{max-width:52rem;margin:2.5rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.jr-pn a{display:block;padding:1rem 0;border-top:2px solid var(--j-ink);text-decoration:none}
.jr-pn__next{text-align:end;grid-column:2}
.jr-pn span{font:700 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--j-muted)}
.jr-pn b{display:block;margin-top:.4rem;font:400 1.2rem/1.25 var(--serif)}
.jr-pn a:hover b{color:var(--j-coral-ink)}
.jr-related{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.jr-search__status{margin-top:1rem;color:var(--j-muted)}
[data-jr-results] [hidden]{display:none}

.jr-progress{position:fixed;inset-inline:0;top:0;height:3px;z-index:60;background:linear-gradient(90deg,#C9780F,#D9534A,#C7356D);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
[dir=rtl] .jr-progress{transform-origin:100% 50%}
@media (prefers-reduced-motion:no-preference){
  .jr-card,.jr-head,.jr-masthead{animation:jr-rise .7s var(--ease) both}
  .jr-grid .jr-card:nth-child(2){animation-delay:.06s}.jr-grid .jr-card:nth-child(3){animation-delay:.12s}.jr-grid .jr-card:nth-child(n+4){animation-delay:.18s}
}
@keyframes jr-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .jr-card--lead .jr-card__link{grid-template-columns:1fr}
  .jr-head{text-align:start}
  .jr-byline{justify-content:flex-start}
  .jr-figure{margin-inline:0}
  .jr-pn{grid-template-columns:1fr}
  .jr-pn__next{grid-column:1}
  .jr-hero{border-radius:var(--r-sm)}
}
@media print{
  .top,.foot,.consent,.jr-share,.jr-next,.jr-pn,.jr-related,.jr-progress,.jr-toc{display:none!important}
  .page-journal main{background:#fff}
  .jr-body{font-size:12pt}
}

/* the DopaFix flower stands in for a missing photo: white petals on the category colour, slowly turning */
.jr-mark{width:clamp(4rem,30%,9rem);height:auto;filter:drop-shadow(0 6px 18px #0002)}
.jr-hero--type .jr-mark{width:clamp(5rem,14vw,10rem)}
.jr-mark .petal{fill:#fff;fill-opacity:.82}
.jr-mark .centre{fill:color-mix(in srgb,var(--c,#D9534A) 80%,#000)}
@media (prefers-reduced-motion:no-preference){.jr-mark .petals{transform-origin:0 0;animation:jr-turn 60s linear infinite}.jr-card__link:hover .jr-mark .petals{animation-duration:12s}}
@keyframes jr-turn{to{transform:rotate(360deg)}}

/* ---------- MOBILE PASS (2026-11-12): the Journal's own controls reach 44px on touch screens; small labels stay readable ---------- */
@media (pointer:coarse),(max-width:833px){
  .jr-cats a,.jr-cats span{min-height:44px;padding:.45rem 1rem;font-size:.875rem}
  .jr-toc a{min-height:44px;align-items:center;padding:.35rem .3rem}
  .jr-toc a::before{line-height:1.35}
  .jr-tags{gap:.5rem}
  .jr-tags a{display:inline-flex;align-items:center;min-height:44px;padding:.3rem .95rem;font-size:.875rem}
  .jr-share__btn{min-height:44px;font-size:.875rem}
  .jr-crumbs ol{font-size:.875rem}
  .jr-crumbs a{padding-block:.7rem}
}
@media (max-width:560px){
  /* six categories on one swipeable line instead of four wrapped rows */
  .jr-cats ul{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
  .jr-cats ul::-webkit-scrollbar{display:none}
  .jr-cats li{flex:none;scroll-snap-align:start}
  .jr-cats a,.jr-cats span{white-space:nowrap}
}
@media (hover:none){.jr-cats a:hover,.jr-share__btn:hover{transform:none}}