/* Ghostwriting page (Oct 2026). Loaded only on /ghostwriting. */
.side-note{ color:var(--mute); margin-top:18px; max-width:34ch }

/* Hero with a fan of Himank's own books */
.gw-hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,90px); align-items:end }
.gw-hero__text{ min-width:0 }
.gw-fan{ position:relative; display:block; height:clamp(260px,26vw,380px); perspective:1200px; color:inherit }
.gw-fan__book{ --w:clamp(120px,11vw,170px); position:absolute; left:50%; bottom:46px; width:var(--w); aspect-ratio:2/3; margin-left:calc(var(--w) / -2); border-radius:2px 6px 6px 2px; overflow:hidden; background:var(--bg-2);
  box-shadow:0 18px 40px -18px #0008, inset 4px 0 0 #0002;
  transform-origin:50% 120%;
  transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--spread, 6deg))) translateY(calc(var(--lift, 0px) * -1));
  transition:transform .8s var(--ease-out) }
.gw-fan__book img{ width:100%; height:100%; object-fit:cover }
.gw-fan__book::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0004 0,#fff3 3%,transparent 9%) }
.gw-fan__cap{ position:absolute; left:0; right:0; bottom:0; text-align:center; font-size:.92rem; color:var(--mute); transition:color .3s }
.gw-fan:hover .gw-fan__cap,.gw-fan:focus-visible .gw-fan__cap{ color:var(--accent) }
.gw-fan:hover,.gw-fan:focus-visible{ --spread:11deg }
.gw-fan__book.is-hot{ --lift:26px; z-index:10 }
.gw-fan:focus-visible{ outline:2px solid var(--accent); outline-offset:8px; border-radius:16px }

/* Picker */
.gw-pick{ background:var(--bg-2); border-radius:28px; padding:clamp(18px,3vw,36px) }
.gw-tabs{ position:relative; display:inline-flex; flex-wrap:wrap; gap:4px; padding:5px; border-radius:99px; background:var(--bg); margin-bottom:clamp(24px,3vw,36px) }
.gw-tab{ position:relative; z-index:1; font:inherit; font-size:.95rem; color:var(--fg); background:none; border:0; padding:.75em 1.35em; border-radius:99px; cursor:pointer; transition:color .4s }
.gw-tab[aria-selected="true"]{ color:var(--bg) }
.gw-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.gw-tabs__ink{ position:absolute; z-index:0; top:5px; bottom:5px; left:0; width:0; border-radius:99px; background:var(--fg); transition:transform .55s var(--ease-out), width .55s var(--ease-out) }
.no-ink .gw-tab[aria-selected="true"]{ background:var(--fg) }
.gw-panel{ display:grid; gap:24px; outline:none }
.gw-panel:not([hidden]){ animation:gw-in .5s var(--ease-out) }
@keyframes gw-in{ from{ opacity:0; transform:translateY(12px) } }
.gw-panel__lead{ font-size:clamp(1.2rem,2vw,1.7rem); line-height:1.35; letter-spacing:-.015em; max-width:40ch }
.gw-panel__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px clamp(24px,4vw,64px) }
.gw-panel__cols .label{ margin-bottom:12px }
.gw-panel .pill{ justify-self:start }
.gw-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.gw-list li{ position:relative; padding-left:26px; line-height:1.45 }
.gw-list li::before{ content:""; position:absolute; left:0; top:.55em; width:12px; height:1.5px; background:var(--mute) }
.gw-list--get li::before{ width:14px; height:8px; top:.32em; background:none; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg) }

/* What he writes */
.gw-what{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.gw-what__card{ background:var(--bg-2); border-radius:22px; padding:26px 24px 28px; display:grid; gap:14px; align-content:start; transition:transform .5s var(--ease-out), background .4s; transition-delay:calc(var(--d) * 60ms) }
.gw-what__n{ font-size:.85rem; color:var(--accent); font-variant-numeric:tabular-nums }
.gw-what__card h3{ font-size:clamp(1.3rem,2vw,1.7rem); letter-spacing:-.02em }
.gw-what__card .chips li{ background:var(--bg) }
@media (hover:hover) and (pointer:fine){ .gw-what__card:hover{ transform:translateY(-6px) } }

/* Steps */
.gw-steps{ --p:0; --g:clamp(14px,2vw,28px); --span:calc(4 * ((100% - 4 * var(--g)) / 5 + var(--g))); position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--g) }
.gw-steps::before,.gw-steps::after{ content:""; position:absolute; left:23px; top:22px; height:2px; width:var(--span); background:var(--line) }
.gw-steps::after{ background:var(--accent); width:calc(var(--span) * var(--p)); transition:width .2s linear }
.gw-step{ position:relative; z-index:1; display:grid; gap:12px; align-content:start; transition-delay:calc(var(--d) * 90ms) }
.gw-step__n{ width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--bg); border:1.5px solid var(--line); font-weight:500; transition:background .4s, color .4s, border-color .4s }
.gw-step.is-done .gw-step__n{ background:var(--accent); border-color:var(--accent); color:#fff }
.gw-step h3{ font-size:1.2rem; letter-spacing:-.015em; margin-top:6px }
.gw-step p{ color:var(--mute); font-size:.95rem }

/* Why */
.gw-why{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line) }
.gw-why__item{ padding:28px 28px 0 0; min-width:0 }
.gw-why__item + .gw-why__item{ padding-left:28px; border-left:1px solid var(--line) }
.gw-why__big{ font-size:clamp(3rem,6vw,5.4rem); font-weight:500; letter-spacing:-.05em; line-height:1; color:var(--accent) }
.gw-why__label{ font-size:1.1rem; margin-top:10px }
.gw-why__text{ color:var(--mute); font-size:.95rem; margin-top:12px; max-width:40ch }

/* FAQ */
.gw-faq{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(32px,6vw,110px) }
.gw-faq__list{ border-top:1px solid var(--line) }
.gw-faq details{ border-bottom:1px solid var(--line) }
.gw-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; align-items:center; padding:24px 0 }
.gw-faq summary::-webkit-details-marker{ display:none }
.gw-faq summary h3{ font-size:clamp(1.1rem,1.6vw,1.35rem); letter-spacing:-.01em }
.gw-faq summary::after{ content:""; flex:none; width:16px; height:16px; background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat; transition:transform .4s var(--ease) }
.gw-faq details[open] summary::after{ transform:rotate(45deg) }
.gw-faq details p{ color:var(--mute); padding:0 0 26px; max-width:65ch }

/* CTA */
.gw-cta{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(24px,5vw,80px); background:var(--night); color:var(--on-night); border-radius:28px; padding:clamp(28px,5vw,64px) }
.gw-cta .label{ color:var(--on-night-mute) }
.gw-cta h2{ font-size:clamp(1.8rem,3.6vw,3.2rem); letter-spacing:-.03em; margin:14px 0; max-width:18ch }
.gw-cta p:not(.label){ color:var(--on-night-mute); max-width:52ch }
.gw-cta .pill{ color:var(--on-night) }
.gw-cta .round{ --d:clamp(130px,12vw,170px); position:relative; background:var(--accent) }

@media (max-width:1080px){
  .gw-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:36px }
  .gw-steps::before,.gw-steps::after{ display:none }
}
@media (max-width:860px){
  .gw-hero{ grid-template-columns:minmax(0,1fr) }
  .gw-fan{ height:260px; margin-top:12px }
  .gw-what,.gw-panel__cols{ grid-template-columns:minmax(0,1fr) }
  .gw-why{ grid-template-columns:minmax(0,1fr) }
  .gw-why__item + .gw-why__item{ padding-left:0; border-left:0; border-top:1px solid var(--line); margin-top:28px }
  .gw-faq,.gw-cta{ grid-template-columns:minmax(0,1fr) }
  .gw-cta .round{ justify-self:start }
}
@media (max-width:560px){
  .gw-steps{ grid-template-columns:minmax(0,1fr); gap:0 }
  .gw-step{ grid-template-columns:46px minmax(0,1fr); column-gap:16px; padding-bottom:28px }
  .gw-step h3,.gw-step p{ grid-column:2 }
  .gw-step__n{ grid-row:1 / span 2 }
  .gw-step h3{ margin-top:10px }
  .gw-tabs{ display:grid; grid-template-columns:1fr 1fr; width:100%; border-radius:26px }
  .gw-tab{ padding:.75em .6em }
  .gw-fan__book{ --w:110px }
}
@media (prefers-reduced-motion:reduce){
  .gw-fan__book,.gw-tabs__ink,.gw-steps::after{ transition:none }
  .gw-panel:not([hidden]){ animation:none }
}