/* TemptGifting Journal: gold & white, matched to the store's tokens */
:root{
  --ink:#1C1A16; --ink-soft:#5E574B; --ink-faint:#8E8676;
  --white:#FFFFFF; --wash:#FAF7F1; --line:#ECE4D4;
  --brand:#8F6A1C; --brand-deep:#7A5A17; --brand-soft:#FAF3E1; --brand-line:#E6D3A3;
  --gold:#B8892B; --gold-bright:#E9CF7E; --gold-ink:#22190A;
  --gold-grad:linear-gradient(115deg,#B8902E 0%,#D8B75E 22%,#F4E2A6 44%,#FFF3C9 50%,#EED68E 57%,#D2AE55 76%,#B8902E 100%);
  --gold-grad-rich:linear-gradient(135deg,#9C7422 0%,#C9A24A 35%,#EBD08A 55%,#C29A40 75%,#8F6A1C 100%);
  --ivory-grad:linear-gradient(160deg,#FFFFFF 0%,#FCF8EF 55%,#F6ECD4 100%);
  --radius:14px; --shadow:0 2px 12px rgba(0,0,0,.06); --shadow-gold:0 18px 40px rgba(120,90,30,.14);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important;}}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
.container{max-width:1200px; margin:0 auto; padding:0 24px;}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:8px 14px; z-index:50;}
.skip:focus{left:12px; top:12px;}

/* ---------- top strip + header ---------- */
.topbar{background:linear-gradient(90deg,#CFAE5E 0%,#EAD28E 22%,#FFF2C6 50%,#EAD28E 78%,#CFAE5E 100%); color:var(--gold-ink); font-size:12px; font-weight:600; letter-spacing:.05em; text-align:center; padding:8px 16px;}
.topbar a{text-decoration:underline; text-underline-offset:2px;}
.site-header{background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(184,137,43,.14); position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.2) blur(6px);}
.hdr{display:flex; align-items:center; gap:24px; padding-top:14px; padding-bottom:14px;}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0;}
.logo-mark{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--gold-grad-rich); box-shadow:0 6px 16px rgba(184,137,43,.32), inset 0 1px 0 rgba(255,255,255,.4);}
.logo-mark svg{width:22px; height:22px;}
.logo-text{font-family:var(--serif); font-weight:700; font-size:23px; line-height:1; color:var(--ink);}
.logo-text small{display:block; font-family:var(--sans); font-weight:600; font-size:8px; letter-spacing:.26em; color:var(--brand); margin-top:5px;}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto;}
.nav a{text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-soft); padding:8px 12px; border-radius:10px; white-space:nowrap;}
.nav a:hover{color:var(--brand-deep); background:var(--brand-soft);}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:10px; font-family:var(--sans); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; border:1px solid transparent; transition:background-position .7s ease, box-shadow .2s ease, transform .12s ease, background .15s, color .15s;}
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold-grad); background-size:220% 100%; background-position:0 0; color:var(--gold-ink); border-color:rgba(143,106,28,.35); box-shadow:0 6px 18px rgba(184,137,43,.26), inset 0 1px 0 rgba(255,255,255,.6);}
.btn-gold:hover{background-position:100% 0; box-shadow:0 10px 26px rgba(184,137,43,.36), inset 0 1px 0 rgba(255,255,255,.7);}
.btn-outline{background:#fff; color:var(--ink); border-color:rgba(28,26,22,.8);}
.btn-outline:hover{background:var(--ink); color:var(--gold-bright);}
.btn-sm{padding:9px 16px; font-size:13px;}
.hdr .btn{margin-left:8px;}
@media (max-width:900px){
  .hdr{flex-wrap:wrap; gap:10px 12px; padding-top:10px; padding-bottom:0;}
  .hdr .btn{margin-left:auto; padding:9px 14px; font-size:13px;}
  .nav{order:3; width:100%; margin:0 -24px; padding:4px 18px 8px; overflow-x:auto; scrollbar-width:none; gap:2px;}
  .nav::-webkit-scrollbar{display:none;}
  .nav a{padding:6px 10px; font-size:13px;}
  .logo-mark{width:36px; height:36px; border-radius:10px;}
  .logo-mark svg{width:19px; height:19px;}
  .logo-text{font-size:20px;}
  .logo-text small{font-size:7px; letter-spacing:.2em;}
}
@media (max-width:380px){ .logo-text small{display:none;} .hdr .btn{padding:8px 11px;} }

/* ---------- breadcrumb + hero ---------- */
.crumbs{font-size:13px; color:var(--ink-faint); padding:18px 0 0;}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.crumbs li:not(:last-child)::after{content:'›'; margin-left:6px; color:var(--brand-line);}
.crumbs a{text-decoration:none; color:var(--ink-soft);}
.crumbs a:hover{color:var(--brand);}
.crumbs li[aria-current]{color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46ch;}
.hero{background:var(--ivory-grad); position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.hero::after{content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(760px 420px at 88% 30%, rgba(233,207,126,.30), transparent 62%), radial-gradient(520px 360px at 0% 100%, rgba(233,207,126,.14), transparent 60%);}
.hero .container{position:relative; z-index:1;}
.hero-inner{padding:26px 0 44px; max-width:860px;}
.kicker{display:inline-flex; align-items:center; gap:12px; color:var(--brand); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin:10px 0 16px;}
.kicker::before{content:''; width:34px; height:2px; border-radius:2px; background:var(--gold-grad-rich);}
.hero h1{font-family:var(--serif); font-weight:600; font-size:clamp(30px,4.6vw,48px); line-height:1.12; letter-spacing:-.005em; margin:0 0 16px;}
.hero .lede{font-size:17.5px; color:var(--ink-soft); margin:0 0 20px; max-width:62ch;}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:13px; color:var(--ink-faint);}
.meta b{color:var(--ink-soft); font-weight:600;}
.meta .dot{width:4px; height:4px; border-radius:50%; background:var(--brand-line);}

/* ---------- layout ---------- */
.post-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; padding-top:40px; padding-bottom:20px;}
@media (max-width:1024px){ .post-wrap{grid-template-columns:minmax(0,1fr); gap:0; padding-top:28px;} .sidebar{display:none;} }
@media (max-width:640px){ .container{padding-left:16px; padding-right:16px;} .nav{margin:0 -16px; padding-left:10px; padding-right:10px;} }
.cover{margin:0 0 34px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-gold); outline:1px solid rgba(184,137,43,.35); outline-offset:8px;}
.cover img{width:100%; aspect-ratio:1200/630; object-fit:cover;}
@media (max-width:640px){ .cover{outline-offset:5px; margin-bottom:26px;} }

/* ---------- article typography ---------- */
.prose{max-width:740px; font-size:16.5px;}
.prose > *:first-child{margin-top:0;}
.prose p{margin:0 0 18px;}
.prose h2{font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,31px); line-height:1.25; margin:46px 0 16px; scroll-margin-top:110px;}
.prose h2::before{content:''; display:block; width:44px; height:2px; border-radius:2px; background:var(--gold-grad-rich); margin-bottom:14px;}
.prose h3{font-family:var(--sans); font-weight:600; font-size:19px; margin:30px 0 10px; scroll-margin-top:110px;}
.prose a{color:var(--brand-deep); font-weight:500; text-decoration:underline; text-decoration-color:var(--brand-line); text-decoration-thickness:2px; text-underline-offset:3px;}
.prose a:hover{color:var(--ink); text-decoration-color:var(--gold);}
.prose strong{font-weight:600; color:var(--ink);}
.prose ul,.prose ol{padding-left:22px; margin:0 0 20px;}
.prose li{margin:0 0 8px; padding-left:4px;}
.prose li::marker{color:var(--gold); font-weight:600;}
.prose blockquote{margin:26px 0; padding:18px 22px; background:var(--wash); border:1px solid var(--line); border-left:0; border-radius:12px; position:relative; font-size:15.5px;}
.prose blockquote::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:12px 0 0 12px; background:var(--gold-grad-rich);}
.prose blockquote p:last-child, .prose blockquote ul:last-child{margin-bottom:0;}
.prose blockquote ul{padding-left:18px;}
.prose em{font-style:italic;}
.table-wrap{margin:22px 0 26px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; -webkit-overflow-scrolling:touch;}
.prose table{width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.5; min-width:520px;}
.prose thead th{background:var(--wash); text-align:left; font-weight:600; color:var(--ink); padding:12px 14px; border-bottom:2px solid var(--brand-line); white-space:nowrap;}
.prose td{padding:11px 14px; border-top:1px solid var(--line); vertical-align:top;}
.prose tbody tr:nth-child(even) td{background:#FFFDF8;}
.checklist{list-style:none; padding-left:0!important;}
.checklist li{position:relative; padding-left:32px!important;}
.checklist li::before{content:''; position:absolute; left:0; top:4px; width:18px; height:18px; border:1.5px solid var(--gold); border-radius:5px; background:#fff;}

/* ---------- mobile TOC ---------- */
.toc-m{display:none; margin:0 0 28px; border:1px solid var(--line); border-radius:12px; background:var(--wash);}
@media (max-width:1024px){ .toc-m{display:block;} }
.toc-m summary{cursor:pointer; list-style:none; padding:14px 18px; font-weight:600; font-size:14.5px; display:flex; justify-content:space-between; align-items:center;}
.toc-m summary::-webkit-details-marker{display:none;}
.toc-m summary::after{content:'+'; font-size:20px; color:var(--brand); line-height:1;}
.toc-m[open] summary::after{content:'−';}
.toc-m ol{margin:0; padding:0 18px 16px 38px; font-size:14px;}
.toc-m li{margin:6px 0;}
.toc-m a{text-decoration:none; color:var(--ink-soft);}

/* ---------- sidebar ---------- */
.sidebar{position:relative;}
.side-sticky{position:sticky; top:100px; display:flex; flex-direction:column; gap:18px;}
.side-card{border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:#fff;}
.side-card h2{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brand); margin:0 0 12px;}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:t;}
.toc li{counter-increment:t; margin:0; border-top:1px solid var(--line);}
.toc li:first-child{border-top:0;}
.toc a{display:flex; gap:10px; text-decoration:none; font-size:13.5px; line-height:1.45; color:var(--ink-soft); padding:9px 0;}
.toc a::before{content:counter(t,decimal-leading-zero); font-size:11px; font-weight:700; color:var(--gold); padding-top:2px;}
.toc a:hover{color:var(--ink);}
.side-cta{background:var(--ivory-grad); border-color:var(--brand-line); position:relative; overflow:hidden;}
.side-cta::before{content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--gold-grad-rich);}
.side-cta h3{font-family:var(--serif); font-size:21px; font-weight:600; line-height:1.25; margin:2px 0 8px;}
.side-cta p{font-size:13.5px; color:var(--ink-soft); margin:0 0 14px;}
.side-cta .btn{width:100%;}
.side-cta .alt{display:block; text-align:center; font-size:13px; margin-top:10px; color:var(--brand-deep); font-weight:600;}

/* ---------- product grid ---------- */
.products{margin:26px 0 30px;}
.p-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
@media (max-width:760px){ .p-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;} }
.p-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; text-decoration:none!important; color:var(--ink)!important; font-weight:400!important; transition:box-shadow .2s, border-color .2s, transform .2s;}
.p-card:hover{border-color:var(--brand-line); box-shadow:0 10px 26px rgba(120,90,30,.14); transform:translateY(-2px);}
.p-card img{aspect-ratio:1/1; object-fit:contain; width:100%; background:#fff; border-bottom:1px solid var(--line);}
.p-body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; flex:1;}
.p-cat{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); font-weight:700;}
.p-name{font-size:13.5px; font-weight:600; line-height:1.35;}
.p-desc{font-size:12.5px; line-height:1.45; color:var(--ink-soft);}
.p-price{margin-top:auto; padding-top:6px; font-size:14px; font-weight:700; color:var(--ink);}
.p-price small{font-weight:500; color:var(--ink-faint); font-size:11.5px;}
.p-note{font-size:12px; color:var(--ink-faint); margin:10px 0 0; text-align:right;}

/* ---------- in-article CTA ---------- */
.cta-box{margin:34px 0; padding:26px 26px 24px; border-radius:16px; background:var(--ivory-grad); border:1px solid var(--brand-line); position:relative; overflow:hidden; box-shadow:0 12px 30px rgba(120,90,30,.10);}
.cta-box::after{content:''; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(233,207,126,.45), transparent 70%);}
.cta-box .cta-k{font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--brand); text-transform:uppercase;}
.cta-box h3{font-family:var(--serif); font-size:24px; font-weight:600; margin:6px 0 8px; line-height:1.25; position:relative; z-index:1;}
.cta-box p{margin:0 0 18px; color:var(--ink-soft); font-size:15px; position:relative; z-index:1;}
.cta-actions{display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:1;}
.prose .cta-box a.btn{text-decoration:none; font-weight:600;}
.prose .cta-box a.btn-gold{color:var(--gold-ink);}
.prose .cta-box a.btn-outline{color:var(--ink);}
.prose .cta-box a.btn-outline:hover{color:var(--gold-bright);}

/* ---------- FAQ ---------- */
.faq{margin:50px 0 10px; max-width:740px;}
.faq h2{font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,31px); margin:0 0 16px;}
.faq h2::before{content:''; display:block; width:44px; height:2px; border-radius:2px; background:var(--gold-grad-rich); margin-bottom:14px;}
.faq details{border:1px solid var(--line); border-radius:12px; margin:0 0 10px; background:#fff;}
.faq details[open]{border-color:var(--brand-line); background:#FFFDF8;}
.faq summary{cursor:pointer; list-style:none; padding:16px 50px 16px 18px; font-weight:600; font-size:15.5px; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--brand-line); color:var(--brand); font-size:16px; line-height:1;}
.faq details[open] summary::after{content:'−';}
.faq .ans{padding:0 18px 16px; color:var(--ink-soft); font-size:15px;}
.faq .ans p{margin:0;}

/* ---------- author ---------- */
.author{display:flex; gap:16px; align-items:flex-start; margin:36px 0 0; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--wash); max-width:740px;}
.author .logo-mark{flex-shrink:0;}
.author b{display:block; font-size:15px;}
.author p{margin:4px 0 0; font-size:14px; color:var(--ink-soft);}

/* ---------- related + cards ---------- */
.section{padding:56px 0;}
.section.wash{background:var(--wash); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sec-head{text-align:center; margin:0 auto 30px; max-width:680px;}
.sec-head h2{font-family:var(--serif); font-weight:600; font-size:clamp(25px,3.2vw,34px); margin:0;}
.sec-head h2::after{content:''; display:block; width:56px; height:2px; margin:14px auto 0; border-radius:2px; background:var(--gold-grad-rich);}
.sec-head p{color:var(--ink-soft); margin:14px 0 0;}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;}
@media (max-width:900px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .cards{grid-template-columns:minmax(0,1fr); gap:18px;} }
.card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; transition:box-shadow .2s, transform .2s, border-color .2s;}
.card:hover{box-shadow:0 16px 36px rgba(120,90,30,.14); transform:translateY(-3px); border-color:var(--brand-line);}
.card img{aspect-ratio:1200/630; object-fit:cover; width:100%; border-bottom:1px solid var(--line);}
.card-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.tag{align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); background:var(--gold-grad); background-size:200% 100%; padding:4px 10px; border-radius:999px;}
.card h3{font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.3; margin:2px 0 0;}
.card p{font-size:14px; color:var(--ink-soft); margin:0; line-height:1.55;}
.card .more{margin-top:auto; padding-top:6px; font-size:13.5px; font-weight:600; color:var(--brand-deep);}

/* ---------- blog index ---------- */
.idx-hero .hero-inner{padding:34px 0 48px; max-width:780px;}
.feature{display:grid; grid-template-columns:1.15fr 1fr; gap:0; border:1px solid var(--brand-line); border-radius:18px; overflow:hidden; text-decoration:none; background:#fff; box-shadow:var(--shadow-gold); margin:-28px 0 0; position:relative; z-index:2;}
.feature .fi{display:flex; align-items:center; padding:18px; background:var(--wash); border-right:1px solid var(--line);}
.feature img{width:100%; height:auto; aspect-ratio:1200/630; border-radius:10px; box-shadow:0 10px 24px rgba(120,90,30,.14);}
@media (max-width:860px){ .feature .fi{border-right:0; border-bottom:1px solid var(--line); padding:12px;} }
.feature .fb{padding:30px 32px; display:flex; flex-direction:column; gap:12px; justify-content:center;}
.feature h2{font-family:var(--serif); font-size:clamp(24px,2.8vw,32px); font-weight:600; line-height:1.2; margin:0;}
.feature p{margin:0; color:var(--ink-soft);}
@media (max-width:860px){ .feature{grid-template-columns:minmax(0,1fr); margin-top:-20px;} .feature .fb{padding:22px;} }
.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 28px;}
.chips a{text-decoration:none; font-size:13px; font-weight:600; padding:7px 16px; border-radius:999px; border:1.5px solid var(--gold); color:var(--brand-deep); background:#fff;}
.chips a:hover{background:var(--ink); border-color:var(--ink); color:var(--gold-bright);}
.group-h{font-family:var(--serif); font-size:24px; font-weight:600; margin:44px 0 18px; scroll-margin-top:100px; display:flex; align-items:center; gap:14px;}
.group-h::after{content:''; flex:1; height:1px; background:var(--line);}

/* ---------- CTA band + footer ---------- */
.band{background:var(--ivory-grad); border:1px solid var(--brand-line); border-radius:20px; padding:40px 36px; text-align:center; position:relative; overflow:hidden;}
.band::before{content:''; position:absolute; inset:10px; border:1px solid rgba(184,137,43,.28); border-radius:14px; pointer-events:none;}
.band .cta-k{font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--brand);}
.band h2{font-family:var(--serif); font-size:clamp(24px,3.2vw,34px); font-weight:600; margin:8px 0 10px;}
.band p{color:var(--ink-soft); max-width:560px; margin:0 auto 22px;}
.band .cta-actions{justify-content:center;}
@media (max-width:600px){ .band{padding:32px 20px;} }
.site-footer{background:#fff; border-top:1px solid var(--line); margin-top:10px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding:48px 0 30px;}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:minmax(0,1fr); gap:26px;} }
.foot-grid h4{font-family:var(--serif); font-size:17px; font-weight:600; margin:0 0 12px;}
.foot-grid p{font-size:13.5px; color:var(--ink-soft); margin:12px 0 0;}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13.5px;}
.foot-grid a{text-decoration:none; color:var(--ink-soft);}
.foot-grid a:hover{color:var(--brand-deep);}
.foot-bottom{border-top:1px solid var(--line); padding:18px 0 26px; font-size:12.5px; color:var(--ink-faint); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;}