/* RenewShot guides and long-form articles.
   This layer extends styles.css without changing the main site. */

.guide-shell{
  max-width:900px;
  margin:0 auto;
  padding:32px 0 88px;
}

.breadcrumbs{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin-bottom:28px;
  color:var(--faint);
  font-size:.78rem;
}
.breadcrumbs a{color:var(--muted); text-decoration:none}
.breadcrumbs a:hover{color:var(--honey)}
.breadcrumbs span[aria-hidden="true"]{color:var(--line)}

.guide-hero{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(540px 260px at 86% 0%, rgba(255,106,61,.15), transparent 70%),
    linear-gradient(145deg,var(--card),var(--raised));
  padding:clamp(28px,6vw,58px);
  margin-bottom:34px;
}
.guide-hero::after{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  right:-92px;
  bottom:-112px;
  border:1px solid rgba(255,196,107,.16);
  border-radius:50%;
}
.guide-hero h1{max-width:16ch}
.guide-hero .sub{max-width:58ch; margin-bottom:0}
.guide-count{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:24px;
  color:var(--muted);
  font-size:.82rem;
}
.guide-count::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--leaf);
  box-shadow:0 0 0 5px rgba(116,201,142,.09);
}

.guide-grid{display:grid; gap:18px}
.guide-card{
  display:grid;
  grid-template-columns:minmax(210px,.78fr) minmax(0,1.22fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--card);
  color:inherit;
  text-decoration:none;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.guide-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,196,107,.48);
  box-shadow:0 22px 55px -36px rgba(255,106,61,.7);
}
.guide-card img{width:100%; height:100%; min-height:260px; object-fit:cover}
.guide-card-copy{padding:clamp(24px,4vw,38px); align-self:center}
.guide-card-copy h2{font-size:clamp(1.45rem,3vw,2rem); margin:8px 0 12px}
.guide-card-copy p{color:var(--muted); margin-bottom:18px}
.guide-card-copy .read-more{color:var(--honey); font-weight:700; font-size:.88rem}
.guide-card-copy .read-more::after{content:"  →"}

.guide-topics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:38px;
}
.guide-topic{border:1px solid var(--line); border-radius:16px; background:var(--raised); padding:20px}
.guide-topic b{display:block; margin-bottom:5px; font-size:.93rem}
.guide-topic p{color:var(--muted); font-size:.83rem}

.article-shell{max-width:880px; margin:0 auto; padding:26px 0 90px}
.feature-shell{max-width:1080px; margin:0 auto; padding:26px 0 90px}
.feature-hero{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  align-items:center;
  gap:clamp(32px,6vw,72px);
  padding:40px 0 58px;
}
.feature-copy h1{font-size:clamp(2.45rem,6vw,4.8rem); max-width:12ch; margin:10px 0 20px}
.feature-dek{max-width:57ch; color:#c8ccd6; font-size:clamp(1.02rem,2vw,1.16rem); line-height:1.72}
.feature-actions{display:flex; align-items:center; flex-wrap:wrap; gap:16px 20px; margin-top:25px}
.feature-actions .text-link{color:var(--honey); font-size:.88rem; font-weight:700; text-underline-offset:4px}
.feature-fine{color:var(--faint); font-size:.74rem; margin-top:13px}
.feature-proof{min-width:0}
.feature-proof .result-pair{margin-top:0}
.feature-body{max-width:800px}
.quick-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0}
.quick-facts div{border:1px solid var(--line); border-radius:14px; background:var(--raised); padding:16px}
.quick-facts b,.quick-facts span{display:block}
.quick-facts b{color:var(--honey); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px}
.quick-facts span{color:var(--muted); font-size:.84rem; line-height:1.5}
.article-header{max-width:790px; margin-bottom:32px}
.article-header h1{font-size:clamp(2.25rem,6vw,4.15rem); max-width:17ch; margin-bottom:20px}
.article-dek{max-width:65ch; color:#c8ccd6; font-size:clamp(1.02rem,2vw,1.18rem); line-height:1.7}
.article-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; color:var(--faint); font-size:.78rem}
.article-meta span+span{position:relative}
.article-meta span+span::before{content:"·"; position:absolute; left:-11px; color:var(--line)}
.article-disclosure{
  max-width:66ch;
  margin:18px 0 0;
  color:var(--faint);
  font-size:.78rem;
  line-height:1.6;
}
.article-disclosure strong{color:var(--muted)}

.result-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--line);
  box-shadow:0 34px 72px -44px rgba(0,0,0,.95);
  margin:26px 0 12px;
}
.result-panel{position:relative; min-width:0; background:var(--raised)}
.result-panel img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover}
.result-label{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(8,9,13,.78);
  color:var(--ink);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.12em;
}
.result-panel:last-child .result-label{color:var(--honey)}
.figure-caption{color:var(--faint); font-size:.76rem; line-height:1.55; margin:10px 2px 34px}

.toc{
  display:block;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,106,61,.06),rgba(25,30,42,.84));
  padding:24px 26px;
  margin:34px 0 48px;
}
.toc strong{display:block; color:var(--honey); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px}
.toc ol{columns:2; column-gap:36px; padding-left:20px}
.toc li{break-inside:avoid; padding:4px 0; color:var(--muted); font-size:.86rem}
.toc a{color:inherit; text-decoration:none}
.toc a:hover{color:var(--ink)}

.article-body{max-width:750px; margin:0 auto}
.article-body>section{padding:0; margin:0 0 52px; scroll-margin-top:22px}
.article-body h2{font-size:clamp(1.65rem,4vw,2.35rem); margin:0 0 16px; line-height:1.22}
.article-body h3{font-size:1.06rem; color:var(--ink); margin:28px 0 9px}
.article-body p,.article-body li{color:#c9cdd8; font-size:.98rem; line-height:1.78}
.article-body p{margin-bottom:16px}
.article-body ul,.article-body ol{padding-left:24px; margin:12px 0 20px}
.article-body li{padding:3px 0}
.article-body strong{color:var(--ink)}
.article-body a{color:var(--honey); text-underline-offset:3px}
.article-body a:hover{color:#ffd69a}
.article-body code{
  color:#f5d8bd;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2px 5px;
  font-size:.84em;
  overflow-wrap:anywhere;
}

.step-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
  color:var(--ember);
  font-weight:800;
  font-size:.73rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.step-kicker::before{content:""; width:20px; height:1px; background:currentColor}

.note{
  border-left:3px solid var(--honey);
  border-radius:0 14px 14px 0;
  background:var(--card);
  padding:18px 20px;
  margin:22px 0;
}
.note p{margin:0; font-size:.91rem}
.note.warning{border-left-color:var(--ember)}

.capture-checklist{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:22px 0;
}
.capture-checklist div{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--raised);
  color:#c9cdd8;
  padding:14px 15px 14px 42px;
  font-size:.88rem;
}
.capture-checklist div::before{
  content:"✓";
  position:absolute;
  left:15px;
  top:13px;
  color:var(--leaf);
  font-weight:800;
}

.detail-pair{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0 10px}
.detail-card{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card)}
.crop-window{height:225px; overflow:hidden; background:#050607}
.crop-window img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(2.55); transform-origin:57% 29%}
.detail-card:last-child .crop-window img{transform-origin:55% 29%}
.detail-card span{display:block; padding:9px 12px; color:var(--muted); font-size:.73rem}

.tool-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:16px; margin:20px 0}
.tool-table{width:100%; border-collapse:collapse; min-width:620px; background:var(--raised)}
.tool-table th,.tool-table td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); font-size:.86rem}
.tool-table th{color:var(--honey); background:var(--card); font-weight:700}
.tool-table td{color:#c9cdd8}
.tool-table tr:last-child td{border-bottom:none}

.article-cta{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,106,61,.42);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,106,61,.12),rgba(255,196,107,.04));
  padding:clamp(24px,5vw,38px);
  margin:54px 0;
}
.article-cta h2{margin-bottom:9px; font-size:1.75rem}
.article-cta p{max-width:55ch; color:var(--muted); margin-bottom:20px}

.article-faq details{border:1px solid var(--line); border-radius:14px; background:var(--card); margin-bottom:10px}
.article-faq summary{padding:17px 20px; cursor:pointer; font-weight:700; font-size:.94rem; list-style:none}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary::after{content:"+"; float:right; color:var(--honey); font-size:1.05rem}
.article-faq details[open] summary::after{content:"–"}
.article-faq details p{padding:0 20px 17px; color:var(--muted); font-size:.9rem; margin:0}

.sources-list{padding-left:22px}
.sources-list li{padding:5px 0; font-size:.88rem}

.article-footer-nav{
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:48px;
}
.article-footer-nav a{color:var(--muted); text-decoration:none; font-size:.84rem}
.article-footer-nav a:hover{color:var(--honey)}

a:focus-visible,summary:focus-visible{
  outline:2px solid var(--honey);
  outline-offset:4px;
  border-radius:4px;
}

@media(max-width:720px){
  .feature-hero{grid-template-columns:1fr; padding-top:26px}
  .feature-copy h1{max-width:14ch}
  .guide-card{grid-template-columns:1fr}
  .guide-card img{height:240px; min-height:0}
  .guide-topics{grid-template-columns:1fr}
  .toc ol{columns:1}
  .article-header h1{font-size:2.4rem}
  .crop-window{height:170px}
}

@media(max-width:520px){
  nav .links a:not(.btn){display:none}
  .guide-shell,.article-shell,.feature-shell{padding-top:14px}
  .guide-hero{border-radius:18px}
  .result-pair,.detail-pair{grid-template-columns:1fr}
  .result-panel img{aspect-ratio:5/4; object-position:center 26%}
  .capture-checklist{grid-template-columns:1fr}
  .quick-facts{grid-template-columns:1fr}
  .article-meta{display:grid; gap:4px}
  .article-meta span+span::before{display:none}
  .article-footer-nav{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .guide-card{transition:none}
}