/* =====================================================================
   THE KKD JOURNAL
   ---------------------------------------------------------------------
   The Journal is part of this website, not a blog bolted onto it, so it
   borrows the site's palette, type and spacing variables and adds only
   what a content hub genuinely needs: cards, a recipe layout and a print
   stylesheet. Nothing here restyles anything outside .jr-*.
   ===================================================================== */

/* --- hero ---------------------------------------------------------- */
.jr-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;
  padding:clamp(5rem,12vw,9rem) 0 clamp(3.5rem,8vw,6rem);
  min-height:min(70vh,560px);display:flex;align-items:flex-end}
.jr-hero-media{position:absolute;inset:0;z-index:-2}
.jr-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.jr-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(40,18,24,.42) 0%,rgba(40,18,24,.72) 65%,rgba(40,18,24,.86) 100%)}
.jr-hero-inner{max-width:44rem}
.jr-hero h1{color:#fff;margin:.2rem 0 0}
.jr-hero .lead{color:rgba(255,255,255,.95)}
.jr-hero .eyebrow{color:var(--gold-soft)}

.jr-pagehead h1{margin-top:.3rem}
.jr-pagehead .lead{max-width:46rem;margin-inline:auto}

/* --- categories and search ----------------------------------------- */
.jr-browse{padding-top:clamp(1.6rem,4vw,2.6rem)}
.jr-cats{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.2rem}
.jr-chip{
  display:inline-block;padding:.55rem 1rem;border-radius:99px;border:1px solid var(--line);
  background:var(--white);color:var(--plum-soft);font-size:.92rem;line-height:1;
  text-decoration:none;transition:background .2s,color .2s,border-color .2s;
  min-height:44px;display:inline-flex;align-items:center
}
.jr-chip:hover{border-color:var(--rose);color:var(--rose-deep)}
.jr-chip.is-on{background:var(--plum);border-color:var(--plum);color:#fff}
.jr-search{display:flex;gap:.5rem;max-width:38rem;margin:0 auto}
.jr-search input{
  flex:1;min-width:0;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:99px;
  background:var(--white);font-family:var(--sans);font-size:1rem;color:var(--ink)
}
.jr-search input:focus{outline:0;border-color:var(--rose);box-shadow:0 0 0 3px rgba(222,27,92,.14)}
.jr-search-clear{
  border:1px solid var(--line);background:var(--white);border-radius:99px;cursor:pointer;
  padding:.55rem 1rem;font-family:var(--sans);font-size:.9rem;color:var(--plum-soft);min-height:44px
}
.jr-count{text-align:center;font-size:.92rem;color:var(--muted);margin:.7rem 0 0;min-height:1.4em}

/* --- cards ---------------------------------------------------------- */
.jr-grid{display:grid;gap:clamp(1.2rem,3vw,2rem);margin-top:clamp(1.6rem,4vw,2.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.jr-card{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);
  transition:transform .25s,box-shadow .25s
}
.jr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.jr-card-media{display:block;background:var(--sand)}
.jr-card-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.jr-card-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.jr-cat{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.jr-lock{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);
  border:1px solid var(--blush);background:var(--blush-2);border-radius:99px;padding:.2rem .5rem;
  margin-left:.4rem}
.jr-card h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.25;
  color:var(--plum);margin:0}
.jr-card h3 a{color:inherit;text-decoration:none}
.jr-card h3 a:hover{color:var(--rose-deep)}
.jr-card p{margin:0;font-size:.98rem;line-height:1.6;color:var(--plum-soft)}
.jr-more{margin-top:auto;padding-top:.6rem;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rose-deep)}
.jr-empty{text-align:center;color:var(--muted);padding:2rem 0}
.jr-section .head{max-width:46rem}
.jr-section+.jr-section{padding-top:0}

/* --- the standing blocks -------------------------------------------- */
.jr-academy{background:linear-gradient(165deg,var(--blush-2),var(--cream))}
.jr-soon{margin-top:1.2rem;font-size:1rem;line-height:1.7;color:var(--plum-soft)}
.jr-soon-pill{display:inline-block;background:var(--plum);color:#fff;border-radius:99px;
  padding:.28rem .8rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  margin-right:.5rem}
.jr-soon-head{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:1.6rem 0 .6rem}
.jr-soon-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.jr-soon-list li{border:1px solid var(--gold-soft);border-radius:99px;padding:.4rem .85rem;
  font-size:.92rem;color:var(--plum-soft);background:var(--white)}
.jr-planned{margin-top:2rem;padding:clamp(1.2rem,3vw,1.8rem);border:1px solid var(--line);
  border-radius:var(--r);background:var(--white)}
.jr-planned h2,.jr-planned h3{font-family:var(--serif);font-weight:400;color:var(--plum);
  font-size:1.35rem;margin:0 0 .6rem}
.jr-planned ul{margin:.8rem 0 0;padding-left:1.1rem;display:grid;gap:.5rem}
.jr-planned li{font-size:.98rem;line-height:1.6;color:var(--plum-soft)}
.jr-planned-note{margin-top:1rem !important;font-size:.9rem;color:var(--muted)}
.jr-signup-box{padding:clamp(1.5rem,4vw,2.5rem);border:1px solid var(--gold-soft);
  border-radius:var(--r);background:var(--white);text-align:center}
.jr-signup-box h2{margin:.3rem 0 .6rem}
.jr-signup-note{font-size:.9rem;color:var(--muted);margin-top:1rem !important}
.jr-cta{background:var(--plum);color:#fff}
.jr-cta h2,.jr-cta .lead{color:#fff}
.jr-cta .eyebrow{color:var(--gold-soft)}
.jr-cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.jr-cta .btn--ghost:hover{background:rgba(255,255,255,.12)}

/* --- a recipe --------------------------------------------------------- */
.jr-article-head{padding:calc(var(--header-h) + clamp(2.5rem,6vw,4rem)) 0 clamp(1.2rem,3vw,2rem);
  background:linear-gradient(170deg,var(--blush-2),var(--cream) 80%)}
.jr-crumbs{font-size:.85rem;color:var(--muted);margin-bottom:.8rem}
.jr-crumbs a{color:var(--plum-soft)}
.jr-badge{display:inline-block;background:var(--rose);color:#fff;border-radius:99px;
  padding:.35rem .9rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.jr-badge--premium{background:var(--gold)}
.jr-article h1{margin:.7rem 0 .4rem;max-width:22ch}
.jr-article .lead{max-width:46rem}
.jr-figure{margin:clamp(1.2rem,3vw,2rem) 0 0;border-radius:var(--r);overflow:hidden}
.jr-figure img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.jr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:.9rem;margin:1.4rem 0 0;padding:1.1rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--white)}
.jr-facts div{text-align:center}
.jr-facts dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.3rem}
.jr-facts dd{margin:0;font-size:.98rem;line-height:1.45;color:var(--plum)}
.jr-tools{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 0}
.jr-tools .btn{min-height:44px}
.jr-share{margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.jr-share-label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.6rem}
.jr-share-row{display:flex;flex-wrap:wrap;gap:.5rem}
.jr-share-btn{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;
  border:1px solid var(--line);border-radius:99px;background:var(--white);cursor:pointer;
  font-family:var(--sans);font-size:.92rem;color:var(--plum-soft);text-decoration:none}
.jr-share-btn:hover{border-color:var(--rose);color:var(--rose-deep)}
.jr-share-said{font-size:.9rem;color:var(--rose-deep);margin:.6rem 0 0;min-height:1.3em}
.jr-body{margin-top:clamp(1.6rem,4vw,2.4rem)}
.jr-block{margin-top:clamp(1.8rem,4vw,2.6rem)}
.jr-block h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,1.2rem+1vw,2rem);
  color:var(--plum);margin:0 0 .8rem;line-height:1.2}
.jr-block ul,.jr-block ol{margin:0;padding-left:1.3rem;display:grid;gap:.6rem}
.jr-block li{font-size:1.02rem;line-height:1.7;color:var(--ink)}
.jr-ingredients{padding:clamp(1.2rem,3vw,1.6rem);border:1px solid var(--gold-soft);
  border-radius:var(--r);background:var(--white)}
.jr-method li{padding-left:.3rem}
.jr-method li::marker{color:var(--rose);font-weight:500}
.jr-tipbox,.jr-fixbox{padding:clamp(1.2rem,3vw,1.6rem);border-radius:var(--r)}
.jr-tipbox{background:#FDF6EC;border:1px solid #F0D2A4}
.jr-fixbox{background:var(--blush-2);border:1px solid var(--blush)}
.jr-block p{font-size:1.02rem;line-height:1.75;color:var(--ink);margin:0}
.jr-related{padding:clamp(1.2rem,3vw,1.7rem);border:1px solid var(--line);
  border-radius:var(--r);background:var(--sand)}
.jr-related ul{margin-top:.8rem;padding-left:1.1rem}
.jr-back{margin:2rem 0 0;text-align:center}

@media (max-width:620px){
  .jr-cats{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    padding-bottom:.4rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .jr-cats::-webkit-scrollbar{display:none}
  .jr-chip{flex:none}
  .jr-facts{grid-template-columns:repeat(2,1fr)}
  .jr-share-btn,.jr-tools .btn{flex:1 1 auto;justify-content:center}
}

/* --- print: the recipe, and nothing else ---------------------------- */
@media print{
  .site-header,.drawer,.site-footer,.kkd-assistant,.kkd-launcher,.jr-cta,.jr-signup,
  .jr-share,.jr-tools,.jr-cats,.jr-search,.jr-count,.jr-back,.jr-crumbs,.skip,
  .jr-hero,.jr-browse,[data-jr-sections],[data-jr-results],.jr-related{display:none !important}
  html,body{background:#fff !important;color:#000 !important;font-size:11.5pt}
  .jr-article-head{padding:0 !important;background:none !important}
  .jr-article{padding:0 !important}
  .wrap,.wrap-narrow{max-width:100% !important;padding:0 !important}
  .jr-badge{border:1px solid #000;background:none !important;color:#000 !important}
  .jr-figure{max-width:70mm;margin:0 0 6mm}
  .jr-figure img{aspect-ratio:auto}
  .jr-facts{border:1px solid #999;page-break-inside:avoid}
  .jr-block{page-break-inside:avoid;margin-top:6mm}
  .jr-block h2{font-size:14pt}
  .jr-tipbox,.jr-fixbox,.jr-ingredients{border:1px solid #999 !important;background:none !important}
  a[href]::after{content:""}
  .jr-print-foot{display:block !important;margin-top:8mm;padding-top:3mm;
    border-top:1px solid #999;font-size:9pt;color:#333}
}
.jr-print-foot{display:none}
.jr-queue{list-style:none;margin:.8rem 0 0 !important;padding:0 !important;
  display:grid;gap:.45rem;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.jr-queue li{position:relative;padding-left:1.1rem;font-size:.98rem;line-height:1.55;
  color:var(--plum-soft)}
.jr-queue li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--gold-soft)}

/* An article with no honest photograph yet. Deliberately plain and clearly
   not a food photo: better to show nothing than to show a finished cake for
   a recipe that does not make one. */
.jr-nophoto{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:clamp(2rem,6vw,3.5rem) 1.5rem;
  background:linear-gradient(160deg,var(--blush-2),var(--sand));
  border:1px dashed var(--gold-soft);border-radius:var(--r)
}
.jr-nophoto-mark{font-size:2rem;color:var(--gold-soft);line-height:1}
.jr-nophoto b{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--plum)}
.jr-nophoto p{margin:0 !important;max-width:34rem;font-size:.95rem;line-height:1.65;
  color:var(--plum-soft)}
.jr-card-nophoto{
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:4/3;padding:1rem;background:linear-gradient(160deg,var(--blush-2),var(--sand));
  border-bottom:1px dashed var(--gold-soft)
}
.jr-card-nophoto b{font-family:var(--serif);font-weight:400;font-size:1.15rem;
  color:var(--plum-soft)}

/* --- photographs as stages, not a gallery ---------------------------
   One picture leads the page, one sits with the ingredients and one with
   the cooling, and none of them is ever the same picture twice. Captions
   are small and quiet so they read as labels rather than body copy. */
.jr-leadfig,.jr-ingfig,.jr-bakedfig,.jr-stepfig{margin:0}
.jr-leadfig{margin:clamp(1.2rem,3vw,2rem) 0 0}
.jr-leadfig img,.jr-ingfig img,.jr-bakedfig img,.jr-stepfig img{
  display:block;width:100%;border-radius:var(--r)}
.jr-leadfig img{aspect-ratio:3/2;object-fit:cover}
.jr-ingfig{margin:0 0 1.1rem}
.jr-ingfig img{aspect-ratio:3/2;object-fit:cover}
.jr-bakedfig{margin:1.1rem 0 0}
.jr-bakedfig img{aspect-ratio:3/2;object-fit:cover}
/* a process shot belongs to the step above it, so it is indented with it
   and kept small enough not to break the flow of the numbered list */
.jr-stepfig{margin:.8rem 0 .2rem;max-width:520px}
.jr-stepfig img{aspect-ratio:4/3;object-fit:cover}
figure figcaption{
  margin-top:.5rem;font-family:var(--sans);font-size:.85rem;line-height:1.5;
  color:var(--muted);letter-spacing:.01em
}
.jr-ingfig figcaption,.jr-bakedfig figcaption,.jr-stepfig figcaption{font-size:.83rem}
@media print{
  .jr-leadfig{max-width:70mm}
  .jr-ingfig,.jr-bakedfig,.jr-stepfig{display:none !important}
}