/* ====================================================================
   Journella — design tokens + components
   ==================================================================== */
:root{
  --cream:#fff7e5;
  --cream-2:#fbedd2;
  --cream-gold:#ffdf9a;
  --gold:#edba4d;
  --gold-deep:#d99e2c;
  --rose:#da8a7f;
  --terracotta:#b84e40;
  --espresso:#3a0700;
  --ink-soft:#7a5a4a;
  --line:#e8d6b8;
  --green:#5b7553;

  --display:"Playfair Display", Georgia, serif;
  --ui:"Outfit", system-ui, sans-serif;
  --script:"Playfair Display", Georgia, serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-cover:0 38px 70px -28px rgba(58,7,0,.36), 0 4px 16px rgba(58,7,0,.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--espresso);
  font-family:var(--ui); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;}
::selection{background:var(--gold); color:var(--espresso);}
a{color:inherit;}

.j-wrap{max-width:1240px; margin:0 auto; padding-inline:clamp(20px,4vw,56px);}

/* kicker */
.j-kicker{display:inline-flex; align-items:center; gap:12px; font-family:var(--ui);
  font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;}
.j-kicker-line{width:30px; height:1.5px; background:currentColor; display:inline-block; opacity:.6;}

/* buttons */
.j-btn:hover{transform:translateY(-2px);}
.j-btn:active{transform:translateY(0);}
.j-btn-primary:hover{box-shadow:0 14px 30px -10px rgba(58,7,0,.5);}
.j-btn-terracotta:hover{box-shadow:0 14px 30px -10px rgba(184,78,64,.55);}
.j-btn-outline:hover{background:var(--espresso); color:var(--cream);}
.j-btn-ghost:hover{background:var(--cream-gold);}

/* marquee */
@keyframes j-march{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.j-marquee{animation:j-march linear infinite;}

/* reveal entrance (opacity stays 1 so content is never hidden, even if the
   animation is paused in a backgrounded tab; only a subtle rise animates) */
@keyframes j-rise{from{transform:translateY(20px);}to{transform:translateY(0);}}
@media(prefers-reduced-motion:no-preference){
  .j-reveal-in{animation:j-rise .6s var(--ease) both;}
}

/* ---------- header ---------- */
.j-navlink{position:relative;}
.j-navlink::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--terracotta); transition:width .3s var(--ease);}
.j-navlink:hover::after{width:100%;}
.j-iconbtn{display:grid; place-items:center; width:42px; height:42px; border-radius:999px;
  background:none; border:none; cursor:pointer; color:var(--espresso); transition:background .2s;}
.j-iconbtn:hover{background:var(--cream-2);}
.j-cart-badge{position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 4px;
  background:var(--terracotta); color:var(--cream); border-radius:999px; font-size:11px; font-weight:700;
  display:grid; place-items:center; font-family:var(--ui);}

/* ---------- journal cover (square hardcover, watermark mark) ---------- */
.j-cover-wrap{width:100%; transition:transform .4s var(--ease);}
.j-cover{position:relative; container-type:inline-size; width:100%; aspect-ratio:1/1;
  background:var(--cream); color:var(--espresso);
  border-radius:3px 10px 10px 3px; overflow:hidden;}
.j-cover-spine{position:absolute; left:0; top:0; bottom:0; width:9px; background:rgba(58,7,0,.06); z-index:2;}
.j-cover-watermark{position:absolute; height:162%; left:-16%; top:-30%; opacity:.9; z-index:0;
  pointer-events:none; user-select:none;}
.j-cover-inner{position:absolute; inset:0; z-index:1; padding:8.5% 8%;
  display:flex; flex-direction:column; justify-content:space-between;}
.j-cover-top{display:flex; align-items:flex-start; justify-content:space-between; gap:6%;}
.j-cover-word{width:32%; opacity:.9;}
.j-cover-year{font-family:var(--ui); font-size:min(3cqw,13px); letter-spacing:.18em; color:rgba(58,7,0,.5);}
.j-cover-title{display:flex; flex-direction:column;}
.j-cover-sub{font-family:var(--ui); font-size:min(2.7cqw,11px); letter-spacing:.3em;
  text-transform:uppercase; color:rgba(58,7,0,.5); margin-bottom:3%;}
.j-cover-for{font-family:var(--ui); font-size:min(2.5cqw,10px); letter-spacing:.3em;
  text-transform:uppercase; color:rgba(58,7,0,.45); min-height:1.1em;}
.j-cover-name{font-family:var(--display); font-weight:600; line-height:.98; margin-top:1%;
  word-break:break-word;}
.j-cover-et{font-family:var(--ui); font-size:min(2.6cqw,11px); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(58,7,0,.55); margin-top:5%;}

/* ---------- hero ---------- */
.j-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-block:clamp(48px,7vw,96px); position:relative;}
.j-hero-glow{position:absolute; top:-10%; right:-5%; width:60vw; height:60vw; max-width:760px; max-height:760px;
  background:radial-gradient(circle at 60% 40%, rgba(237,186,77,.34), rgba(218,138,127,.16) 42%, transparent 66%);
  filter:blur(8px); z-index:0; pointer-events:none;}
.j-hero-copy{position:relative; z-index:1;}
.j-hero-name{margin-top:28px; max-width:440px;}
.j-hero-name label{font-family:var(--ui); font-size:13px; font-weight:600; color:var(--ink-soft);
  letter-spacing:.01em; display:block; margin-bottom:10px;}
.j-hero-name-row{display:flex; gap:10px;}
.j-hero-name-row input{flex:1; min-width:0; border:1.5px solid var(--line); background:var(--cream);
  border-radius:999px; padding:14px 22px; font-family:var(--display); font-size:20px; color:var(--espresso);
  outline:none; transition:border-color .2s, box-shadow .2s;}
.j-hero-name-row input:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(237,186,77,.18);}
.j-hero-art{position:relative; z-index:1; display:grid; place-items:center; min-height:480px;}
.j-hero-cover-float{width:min(72%,380px); position:relative; z-index:2; transform:rotate(-1deg);}
.j-hero-photo{position:absolute; right:2%; bottom:4%; width:42%; height:210px; z-index:1;
  box-shadow:var(--shadow-cover); transform:rotate(3deg);}
.j-hero-chip{position:absolute; z-index:3; background:var(--cream); border:1px solid var(--line);
  border-radius:999px; padding:9px 16px; font-family:var(--ui); font-size:13px; font-weight:500;
  display:inline-flex; align-items:center; gap:8px; box-shadow:0 12px 28px -12px rgba(58,7,0,.26);}
.j-chip-1{left:2%; bottom:74px; color:var(--terracotta);}
.j-chip-2{left:2%; bottom:22px; color:var(--gold-deep);}

/* ---------- usp strip ---------- */
.j-usp-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-block:30px;}
.j-usp{display:flex; gap:14px; align-items:flex-start;}
.j-usp-ico{flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--cream);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--terracotta);}

/* ---------- showcase ---------- */
.j-show-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,90px); align-items:start;}
.j-field-list{margin-top:30px; display:flex; flex-direction:column; gap:12px;}
.j-field-card{display:flex; gap:16px; align-items:center; padding:18px 20px; background:var(--cream-2);
  border:1px solid transparent; border-radius:16px; transition:border-color .25s, transform .25s, background .25s;}
.j-field-card:hover{border-color:var(--gold); transform:translateX(4px); background:var(--cream);}
.j-field-card > div{flex:1; min-width:0;}
.j-field-ico{flex-shrink:0; width:46px; height:46px; border-radius:14px; background:var(--cream);
  display:grid; place-items:center; color:var(--terracotta); border:1px solid var(--line);}

/* ---------- steps ---------- */
.j-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:60px;}
.j-step{text-align:center; padding-inline:10px;}
.j-step-n{font-family:var(--display); font-size:54px; font-style:italic; color:var(--cream-gold); line-height:1;}

/* ---------- gallery ---------- */
.j-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px;}
.j-gal-item{margin:0;}
.j-gal-photo{display:block; width:100%; height:300px; box-shadow:0 16px 30px -18px rgba(58,7,0,.32);}
.j-gal-item figcaption{display:flex; flex-direction:column; gap:2px; margin-top:14px;}

/* ---------- reviews ---------- */
.j-reviews{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px;}
.j-review{margin:0; background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:26px;}
.j-review-ava{width:34px; height:34px; border-radius:50%; background:var(--terracotta); color:var(--cream);
  display:grid; place-items:center; font-family:var(--ui); font-weight:700; font-size:14px;}

/* ---------- faq ---------- */
.j-faq-grid{display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(36px,5vw,80px); align-items:start;}
.j-faq-item{border-bottom:1px solid var(--line); padding:22px 0; cursor:pointer;}
.j-faq-q{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.j-faq-a{display:grid; transition:grid-template-rows .35s var(--ease);}

/* ---------- final cta ---------- */
.j-final{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  padding-block:clamp(60px,8vw,110px);}
.j-final-cover{width:min(70%,300px); justify-self:center; transform:rotate(2deg);}

/* ---------- footer ---------- */
.j-foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
.j-foot-h{font-family:var(--ui); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream-gold); margin-bottom:18px;}
.j-foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.j-foot-grid a{text-decoration:none; color:rgba(255,247,229,.72); font-size:14.5px; transition:color .2s;}
.j-foot-grid a:hover{color:var(--cream);}
.j-news{display:flex; margin-top:20px; background:rgba(255,247,229,.08); border:1px solid rgba(255,247,229,.2);
  border-radius:999px; overflow:hidden;}
.j-news input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--cream);
  padding:12px 18px; font-family:var(--ui); font-size:14px;}
.j-news input::placeholder{color:rgba(255,247,229,.5);}
.j-news button{background:var(--cream-gold); border:none; color:var(--espresso); width:48px; cursor:pointer;
  display:grid; place-items:center; transition:background .2s;}
.j-news button:hover{background:var(--gold);}
.j-foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:54px;
  padding-top:26px; border-top:1px solid rgba(255,247,229,.15); font-size:13px; color:rgba(255,247,229,.6);}

/* ---------- cart drawer ---------- */
.j-scrim{position:fixed; inset:0; background:rgba(58,7,0,.4); z-index:60; transition:opacity .35s; backdrop-filter:blur(2px);}
.j-drawer{position:fixed; top:0; right:0; height:100%; width:min(440px,92vw); background:var(--cream);
  z-index:61; box-shadow:-20px 0 60px -20px rgba(58,7,0,.4); transition:transform .42s var(--ease);
  display:flex; flex-direction:column;}
.j-qty{display:inline-flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:999px; padding:5px 12px;}
.j-qty button{background:none; border:none; cursor:pointer; color:var(--espresso); display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%; transition:background .2s;}
.j-qty button:hover{background:var(--cream-2);}
.j-qty span{font-family:var(--ui); font-weight:600; min-width:16px; text-align:center;}
.j-qty-lg{padding:9px 16px; gap:18px;}
.j-cover-mini{width:84px;}
.j-success-tick{width:74px; height:74px; border-radius:50%; background:var(--cream-2); color:var(--green);
  display:grid; place-items:center; margin:0 auto; animation:j-pop .5s var(--ease);}
@keyframes j-pop{0%{transform:scale(.5); opacity:0;}60%{transform:scale(1.1);}100%{transform:scale(1); opacity:1;}}

/* ---------- product page ---------- */
.j-product{padding-block:24px 90px;}
.j-crumb{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); padding:14px 0 30px;}
.j-crumb button{background:none; border:none; cursor:pointer; color:var(--ink-soft); font:inherit; padding:0;}
.j-crumb button:hover{color:var(--terracotta);}
.j-prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,76px); align-items:start;}
.j-prod-visual{position:sticky; top:96px;}
.j-prod-cover-stage{position:relative; padding:6% 12%;
  background:radial-gradient(circle at 50% 38%, var(--cream-2), var(--cream) 72%);
  border-radius:24px; border:1px solid var(--line);}
.j-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px;}
.j-thumb{aspect-ratio:1; border-radius:12px; overflow:hidden; border:1.5px solid transparent; cursor:pointer; background:var(--cream-2);}
.j-thumb.is-on{border-color:var(--terracotta);}
.j-thumb-cover{transform:scale(1.4); transform-origin:center 30%;}
.j-thumb-photo{width:100%; height:100%;}
.j-live{margin-top:22px; background:var(--cream-2); border:1px solid var(--line); border-radius:18px; padding:20px;}
.j-live-head{display:flex; align-items:center; gap:9px; font-family:var(--ui); font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--espresso); margin-bottom:14px;}
.j-live-dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(91,117,83,.18);
  animation:j-pulse 2s ease-in-out infinite;}
@keyframes j-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.j-live-chips{display:flex; flex-wrap:wrap; gap:8px;}
.j-live-chip{display:inline-flex; align-items:center; gap:7px; background:var(--cream); border:1px solid var(--line);
  border-radius:999px; padding:8px 13px; font-size:13px; color:var(--espresso); animation:j-chipin .4s var(--ease) both;}
.j-live-chip b{font-weight:700;}
@keyframes j-chipin{from{opacity:0; transform:translateY(6px) scale(.96);}to{opacity:1; transform:none;}}

.j-social-proof{display:flex; align-items:center; gap:12px;}
.j-avastack{display:flex;}
.j-avastack span{width:30px; height:30px; border-radius:50%; background:var(--rose); color:var(--cream);
  display:grid; place-items:center; font-family:var(--ui); font-weight:700; font-size:12px;
  border:2px solid var(--cream); margin-left:-8px;}
.j-avastack span:first-child{margin-left:0;}
.j-rule{border:none; border-top:1px solid var(--line); margin:24px 0;}

/* ---------- form ---------- */
.j-form{display:flex; flex-direction:column; gap:24px;}
.j-field-label{display:block; font-family:var(--ui); font-weight:600; font-size:14.5px;
  margin-bottom:10px; line-height:1.4;}
.j-field-hint{font-weight:400; font-size:12.5px; color:var(--ink-soft); margin-left:8px;}
.j-field-err{display:flex; align-items:center; gap:6px; color:var(--terracotta); font-size:12.5px; margin-top:7px;}
.j-input{width:100%; border:1.5px solid var(--line); background:var(--cream); border-radius:13px; padding:14px 16px;
  font-family:var(--ui); font-size:15.5px; color:var(--espresso); outline:none; transition:border-color .2s, box-shadow .2s;}
.j-input:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(237,186,77,.16);}
.j-input::placeholder{color:#b89c86;}

.j-stil-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.j-stil{display:flex; gap:12px; align-items:flex-start; text-align:left; padding:15px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--cream); cursor:pointer; transition:border-color .2s, background .2s;}
.j-stil:hover{border-color:var(--gold);}
.j-stil.is-on{border-color:var(--terracotta); background:var(--cream-2);}
.j-stil-swatch{flex-shrink:0; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--cream); margin-top:1px;}
.j-stil-swatch[data-stil=sanft]{background:linear-gradient(135deg,var(--cream-gold),var(--gold));}
.j-stil-swatch[data-stil=pop]{background:linear-gradient(135deg,var(--rose),var(--terracotta));}

.j-ort-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.j-ort{display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 8px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--cream); cursor:pointer; color:var(--ink-soft);
  transition:border-color .2s, background .2s, color .2s; text-align:center;}
.j-ort:hover{border-color:var(--gold);}
.j-ort.is-on{border-color:var(--terracotta); background:var(--cream-2); color:var(--espresso);}
.j-ort-note{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--ink-soft);
  background:var(--cream-2); border-radius:10px; padding:11px 14px; color:var(--terracotta);}

/* ---------- foto-seiten choice ---------- */
.j-photo-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.j-photo{display:flex; gap:11px; align-items:flex-start; text-align:left; padding:15px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--cream); cursor:pointer; transition:border-color .2s, background .2s;}
.j-photo:hover{border-color:var(--gold);}
.j-photo.is-on{border-color:var(--terracotta); background:var(--cream-2);}
.j-photo-tick{flex-shrink:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--line); background:var(--cream); color:var(--cream); margin-top:1px;}
.j-photo.is-on .j-photo-tick{background:var(--terracotta); border-color:var(--terracotta);}
.j-photo-t{display:block; font-family:var(--ui); font-weight:600; font-size:15px;}
.j-photo-d{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.35; margin-top:2px;}

/* ---------- buy box ---------- */
.j-buy{}
.j-qtybuy{display:flex; gap:12px; align-items:stretch;}
.j-pay{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px;}
.j-pay-pill{font-size:11px; font-weight:600; font-family:var(--ui); color:var(--ink-soft);
  background:var(--cream-2); border:1px solid var(--line); border-radius:6px; padding:5px 9px;}
.j-buy-trust{display:flex; flex-wrap:wrap; gap:16px; margin-top:18px;}
.j-buy-trust span{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft);}
.j-buy-trust svg{color:var(--green);}

/* ---------- upsell ---------- */
.j-upsell{display:flex; flex-direction:column; gap:10px;}
.j-upsell-item{display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line);
  border-radius:14px; background:var(--cream);}
.j-upsell-ico{width:42px; height:42px; border-radius:11px; background:var(--cream-2); display:grid; place-items:center; color:var(--terracotta); flex-shrink:0;}
.j-add-mini{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--espresso); background:none;
  color:var(--espresso); cursor:pointer; display:grid; place-items:center; transition:background .2s, color .2s; flex-shrink:0;}
.j-add-mini:hover{background:var(--espresso); color:var(--cream);}

/* ---------- product layout variants ---------- */
/* editorial: single column, generous whitespace, rose mood */
.j-prod-editorial .j-prod-grid{grid-template-columns:1fr; max-width:760px; margin-inline:auto; gap:40px;}
.j-prod-editorial .j-prod-visual{position:static;}
.j-prod-editorial .j-prod-cover-stage{background:transparent; border:none; padding:0; max-width:340px; margin-inline:auto;}
.j-prod-editorial .j-thumbs{max-width:340px; margin-inline:auto;}
.j-prod-editorial .j-input,.j-prod-editorial .j-stil,.j-prod-editorial .j-ort{border-radius:0; border-width:0 0 1.5px;}
.j-prod-editorial .j-stil,.j-prod-editorial .j-ort{border-width:1.5px; border-radius:14px;}
/* atelier: cover gets a warm framed stage */
.j-prod-atelier .j-prod-cover-stage{background:linear-gradient(160deg,var(--cream-2),var(--cream-gold)); border-color:var(--gold);}

/* ---------- cover theme picker ---------- */
.j-theme-row{display:flex; gap:12px; flex-wrap:wrap;}
.j-theme{display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:none;
  cursor:pointer; padding:0;}
.j-theme-chip{position:relative; width:58px; height:58px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:21px; box-shadow:inset 0 0 0 1px rgba(58,7,0,.12);
  transition:transform .2s, box-shadow .2s;}
.j-theme:hover .j-theme-chip{transform:translateY(-2px);}
.j-theme.is-on .j-theme-chip{box-shadow:0 0 0 2px var(--cream), 0 0 0 4px var(--espresso);}
.j-theme-tick{position:absolute; top:5px; right:5px; opacity:.9;}
.j-theme-label{font-family:var(--ui); font-size:12px; color:var(--ink-soft);}
.j-theme.is-on .j-theme-label{color:var(--espresso); font-weight:600;}

/* ---------- pillars (Was Journella ausmacht) ---------- */
.j-pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:54px;}
.j-pillar{text-align:center; padding:8px 12px;}
.j-pillar-ico{width:64px; height:64px; border-radius:50%; background:var(--cream-2); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--terracotta); margin:0 auto 20px;}
.j-pillar h3{font-family:var(--display); font-weight:700; font-size:25px; margin:0 0 10px;}
.j-pillar p{color:var(--ink-soft); line-height:1.65; font-size:15.5px; max-width:320px; margin:0 auto;}
/* dark variant (Was Journella ausmacht) */
.j-pillars-dark .j-pillar-ico{background:rgba(255,247,229,.07); border-color:rgba(255,247,229,.18); color:var(--cream-gold);}
.j-pillars-dark .j-pillar h3{color:var(--cream);}
.j-pillars-dark .j-pillar p{color:rgba(255,247,229,.72);}

/* ---------- week-by-week spread ---------- */
.j-week-intro{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:54px;}
.j-spread{display:grid; grid-template-columns:1fr 1fr; gap:2px; border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.5);}
.j-spread-page{background:var(--cream); color:var(--espresso); padding:clamp(24px,3vw,40px);}
.j-spread-right{background:var(--cream-2);}
.j-spread-tag{font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracotta); margin-bottom:22px;}
.j-spread-page ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;}
.j-spread-page li{display:flex; align-items:center; gap:14px; font-family:var(--ui); font-size:16px;}
.j-spread-page li svg{color:var(--gold-deep); flex-shrink:0;}

/* ---------- chapters ---------- */
.j-chapters{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); margin-top:54px;}
.j-chapter{display:flex; flex-direction:column;}
.j-chapter-photo{display:block; width:100%; height:300px; box-shadow:0 18px 36px -22px rgba(58,7,0,.34);}
.j-chapter-body{padding-top:24px;}
.j-chapter-head{display:flex; gap:16px; align-items:flex-start; margin-bottom:14px;}
.j-chapter-n{font-family:var(--display); font-size:34px; color:var(--gold-deep); line-height:1; flex-shrink:0;}
.j-chapter-head h3{font-family:var(--display); font-weight:700; font-size:26px; margin:0; line-height:1.14;}
.j-chapter-lead{display:block; margin-top:5px; font-family:var(--ui); font-size:13px; color:var(--ink-soft); letter-spacing:.04em;}
.j-chapter-body > p{color:var(--ink-soft); line-height:1.65; font-size:15.5px; margin:0 0 16px;}
.j-chapter-body ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.j-chapter-body li{display:flex; align-items:center; gap:10px; font-size:14.5px;}
.j-chapter-body li svg{color:var(--terracotta); flex-shrink:0;}

/* ---------- book facts ---------- */
.j-facts-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,6vw,80px); align-items:center;}
.j-facts-photo{display:block; width:100%; height:440px; box-shadow:var(--shadow-cover);}
.j-facts{margin:28px 0 0; display:flex; flex-direction:column;}
.j-fact{display:grid; grid-template-columns:160px 1fr; gap:20px; padding:16px 0; border-top:1px solid var(--line);}
.j-fact:last-child{border-bottom:1px solid var(--line);}
.j-fact dt{font-family:var(--ui); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--terracotta);}
.j-fact dd{margin:0; font-size:15.5px; color:var(--espresso); line-height:1.5;}

/* ---------- blog ---------- */
.j-blog-cat{font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:.01em; margin-bottom:22px;
  padding-bottom:14px; border-bottom:1px solid var(--line);}
.j-blog-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.j-blog-card{cursor:pointer; display:flex; flex-direction:column;}
.j-blog-photo{display:block; width:100%; height:200px; box-shadow:0 14px 28px -20px rgba(58,7,0,.3);
  transition:transform .3s var(--ease);}
.j-blog-card:hover .j-blog-photo{transform:translateY(-4px);}
.j-blog-meta{font-family:var(--ui); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin:16px 0 8px;}
.j-blog-card h4{font-family:var(--display); font-weight:700; font-size:20px; line-height:1.25; margin:0 0 12px;}
.j-blog-link{display:inline-flex; align-items:center; gap:6px; font-family:var(--ui); font-size:13.5px;
  font-weight:600; color:var(--terracotta); margin-top:auto;}

/* ---------- blog article page ---------- */
.j-article{padding-bottom:0;}
.j-article-head{display:grid; grid-template-columns:260px 1fr; gap:clamp(28px,4vw,56px);
  align-items:start; padding-bottom:clamp(36px,5vw,64px);}
.j-article-meta{display:flex; flex-direction:column; gap:18px; padding-top:8px;}
.j-art-author{display:flex; align-items:center; gap:12px;}
.j-art-row{display:flex; justify-content:space-between; align-items:center; padding:11px 0;
  border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft);}
.j-art-row b{color:var(--espresso); font-weight:600;}
.j-art-tags{display:flex; flex-wrap:wrap; gap:8px; padding-top:4px;}
.j-tag{font-family:var(--ui); font-size:12px; color:var(--terracotta); background:var(--cream-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;}
.j-art-share{display:flex; align-items:center; gap:12px; margin-top:4px;}
.j-share-icons{display:flex; gap:4px;}
.j-article-hero{position:relative;}
.j-article-hero-img{display:block; width:100%; height:clamp(320px,42vw,520px);
  box-shadow:0 30px 60px -28px rgba(58,7,0,.4);}
.j-article-hero-title{position:absolute; inset:auto 6% 7% 6%; background:var(--cream);
  border:1px solid var(--line); padding:clamp(20px,2.5vw,34px) clamp(24px,3vw,40px); max-width:80%;}
.j-article-hero-title h1{font-family:var(--display); font-weight:700; font-size:clamp(26px,3.4vw,46px);
  line-height:1.08; letter-spacing:-.01em; margin:0;}
.j-article-body{max-width:720px; margin:0 auto; padding:clamp(20px,4vw,48px) clamp(20px,4vw,56px);}
.j-article-body h2{font-family:var(--display); font-weight:700; font-size:clamp(24px,2.6vw,32px);
  line-height:1.18; margin:42px 0 14px;}
.j-article-body p{font-size:17.5px; line-height:1.8; color:#5a3f33; margin:0 0 18px;}
.j-article-body blockquote{font-family:var(--display); font-weight:600; font-size:clamp(22px,2.6vw,30px);
  line-height:1.35; color:var(--terracotta); margin:34px 0; padding-left:22px; border-left:3px solid var(--gold);}
.j-article-figure{margin:30px 0;}
.j-article-fig-img{display:block; width:100%; height:clamp(260px,32vw,400px);
  box-shadow:0 16px 32px -20px rgba(58,7,0,.3);}
.j-article-promo{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,5vw,70px);
  align-items:center; padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px); background:var(--cream-2);
  border-radius:24px; margin-block:clamp(30px,4vw,50px); max-width:1240px; margin-inline:auto;}
.j-article-promo-cover{width:min(74%,280px); justify-self:center;}
.j-comment-form{display:flex; flex-direction:column; gap:14px;}
.j-comment-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
textarea.j-input{resize:vertical; font-family:var(--ui);}

/* ---------- utilities / responsive ---------- */
.j-desktop{display:flex;}
@media(max-width:980px){
  .j-hero{grid-template-columns:1fr; gap:24px;}
  .j-hero-art{min-height:380px; order:-1;}
  .j-show-grid{grid-template-columns:1fr;}
  .j-show-grid > div:first-child{position:static !important; max-width:300px; margin-inline:auto;}
  .j-prod-grid{grid-template-columns:1fr; gap:36px;}
  .j-prod-visual{position:static;}
  .j-prod-cover-stage{max-width:360px; margin-inline:auto;}
  .j-faq-grid{grid-template-columns:1fr;}
  .j-final{grid-template-columns:1fr; text-align:center;}
  .j-final-cover{order:-1;}
  .j-reviews{grid-template-columns:1fr 1fr;}
  .j-gallery{grid-template-columns:1fr 1fr;}
  .j-pillars{grid-template-columns:1fr; gap:36px; max-width:420px; margin-inline:auto;}
  .j-chapters{grid-template-columns:1fr;}
  .j-blog-grid{grid-template-columns:1fr 1fr;}
  .j-facts-grid{grid-template-columns:1fr;}
  .j-facts-visual{max-width:420px;}
  .j-week-intro{grid-template-columns:1fr; gap:20px; align-items:start;}
  .j-article-head{grid-template-columns:1fr; gap:24px;}
  .j-article-promo{grid-template-columns:1fr; text-align:center;}
  .j-article-promo-cover{order:-1;}
  .j-usp-strip{grid-template-columns:1fr 1fr; gap:20px;}
  .j-steps{grid-template-columns:1fr; gap:30px;}
  .j-foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  .j-desktop{display:none !important;}
  .j-reviews,.j-gallery,.j-usp-strip,.j-stil-row{grid-template-columns:1fr;}
  .j-blog-grid{grid-template-columns:1fr;}
  .j-spread{grid-template-columns:1fr;}
  .j-fact{grid-template-columns:1fr; gap:4px;}
  .j-gallery .j-gal-item[style*="span 2"]{grid-column:auto !important;}
  .j-foot-grid{grid-template-columns:1fr;}
  .j-qtybuy{flex-direction:column;}
  .j-ort-row{grid-template-columns:1fr;}
  .j-photo-row{grid-template-columns:1fr;}
  .j-comment-row{grid-template-columns:1fr;}
}