/* Gatsbee — guides (one guide page + the guides index)
   Loaded after gatsbee.css and gatsbee-faq.css
   (the FAQ file gives the .qa questions and the diamond markers).
   Same tokens: midnight hero with the sunburst, powder body, gold rules, chamfered corners. */

/* ============ HERO ============ */
.guide-hero{overflow:hidden;padding:clamp(48px,6vw,88px) 0 clamp(52px,6vw,84px)}
.guide-hero .sunburst{right:-18%;top:-40%;width:62%;height:170%;opacity:.16}
.guide-hero .wrap{position:relative}
.guide-hero h1{max-width:20ch;margin-bottom:24px;font-size:clamp(34px,4.2vw,60px)}
.guide-hero .lede{color:var(--on-dark-soft);margin-bottom:36px;max-width:60ch}
.guide-hero .load{opacity:0;transform:translateY(12px);animation:rise 700ms var(--ease-out) forwards}
.guide-hero .load:nth-child(2){animation-delay:50ms}
.guide-hero .load:nth-child(3){animation-delay:100ms}
.guide-hero .load:nth-child(4){animation-delay:150ms}
.guide-hero .load:nth-child(5){animation-delay:200ms}

.crumbs{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--on-dark-soft)}
.crumbs li + li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--on-dark)}

/* byline: who wrote it, when it was updated, how long it takes */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;font-size:15px;color:var(--on-dark-soft);padding-top:24px;border-top:1px solid var(--line-dark)}
.byline .who{display:flex;align-items:center;gap:12px;color:var(--on-dark)}
.byline .who img{width:44px;height:44px;object-fit:cover;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.byline .who b{display:block;font-weight:600;line-height:1.25}
.byline .who span{display:block;font-size:13.5px;color:var(--on-dark-soft);line-height:1.25}
.byline .sep{width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}

/* ============ BODY: contents on the left, the article on the right ============ */
.guide-body{padding:clamp(48px,6vw,88px) 0 clamp(72px,8vw,120px)}
.guide-layout{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}

.guide-toc{position:sticky;top:108px}
.guide-toc-label{font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase}
.guide-toc ol{list-style:none;margin:0 0 28px;padding:0;border-top:2px solid var(--ink)}
.guide-toc li a{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line-light);text-decoration:none;font-weight:600;font-size:15px;line-height:1.35;color:var(--ink-soft);transition:color 200ms ease}
.guide-toc .mk{width:8px;height:8px;transform:rotate(45deg) translateY(-1px);box-shadow:inset 0 0 0 1.5px var(--ink-soft);transition:background-color 250ms ease,box-shadow 250ms ease}
.guide-toc li a:hover,.guide-toc li a.on{color:var(--ink)}
.guide-toc li a.on .mk{background:var(--gold);box-shadow:none}

/* ============ PROSE ============ */
.prose{max-width:720px;min-width:0}
.prose > * + *{margin-top:22px}
.prose h2{font-size:clamp(26px,2.6vw,36px);line-height:1.12;margin-top:clamp(56px,6vw,80px);padding-top:22px;border-top:2px solid var(--ink);scroll-margin-top:100px}
.prose h3{margin-top:36px;font-size:clamp(20px,1.6vw,23px)}
.prose p,.prose li{color:var(--ink-soft);font-size:18px;line-height:1.65}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold);transition:border-color .2s}
.prose a:hover{border-color:var(--ink)}
.prose ul,.prose ol{padding-left:0;list-style:none}
.prose ul li,.prose ol li{position:relative;padding-left:30px}
.prose ul li + li,.prose ol li + li{margin-top:10px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;font-family:var(--f-numeral);font-size:20px;line-height:1.45;color:var(--gold)}

/* "In short": the direct answer, first thing on the page (what AI search quotes) */
.answer{background:var(--paper);padding:28px 32px;border-left:3px solid var(--gold);clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.answer .label{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.prose .answer p{color:var(--ink);font-size:19px;line-height:1.6}

/* tables */
.g-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--ink)}
.g-table table{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
.g-table th{font-family:var(--f-display);font-stretch:110%;font-weight:600;text-align:left;padding:14px 16px 14px 0;color:var(--ink);border-bottom:1px solid var(--ink);vertical-align:bottom}
.g-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line-light);color:var(--ink-soft);vertical-align:top;line-height:1.5}
.g-table td:first-child{color:var(--ink);font-weight:600}

/* checklist: tick boxes as gold diamonds */
.prose ul.checklist li::before{width:12px;height:12px;left:2px;top:.5em;background:transparent;box-shadow:inset 0 0 0 1.5px var(--gold)}
.prose ul.checklist li::after{content:"";position:absolute;left:6px;top:calc(.5em + 4px);width:4px;height:4px;background:var(--gold);transform:rotate(45deg)}

/* "From the field": Alex's own experience */
.from-field{background:var(--midnight);color:var(--on-dark);padding:32px 34px 30px;position:relative;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.from-field .label{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light);margin-bottom:16px}
.from-field .label::before{content:"";width:28px;height:1px;background:currentColor}
.prose .from-field p{color:var(--on-dark);font-size:18px}
.prose .from-field p + p{margin-top:14px}
.prose .from-field .from{margin-top:18px;font-size:14px;color:var(--on-dark-soft)}

/* figures and diagrams */
.figure{margin:36px 0 0}
.figure figcaption{font-size:14px;color:var(--ink-soft);margin-top:12px}
.diagram{background:var(--paper);padding:24px;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}
.diagram svg{display:block;width:100%;height:auto}

/* FAQ inside a guide: reuses .qa from gatsbee-faq.css */
.guide-faq{margin-top:clamp(56px,6vw,80px)}
.guide-faq h2{margin-bottom:0}
.prose .qa .a p{font-size:17px}

/* author box */
.author{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;align-items:start;margin-top:clamp(56px,6vw,80px);padding-top:28px;border-top:2px solid var(--ink)}
.author .frame{aspect-ratio:1;--cut:14px}
.author h3{margin:0 0 4px;font-size:21px}
.author .role{font-size:14px;color:var(--ink-soft);margin-bottom:10px}
.prose .author p{font-size:16px}

/* last updated */
.updated{font-size:14px;color:var(--ink-soft)}

/* ============ RELATED GUIDES + INDEX CARDS ============ */
.related{padding:clamp(64px,8vw,112px) 0}
.related h2{margin-bottom:36px;font-size:clamp(28px,3vw,40px)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:14px;padding:28px 28px 26px;background:var(--powder);text-decoration:none;color:var(--ink);min-height:220px;transition:background-color .2s,transform .3s var(--ease-out);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.paper .card{background:var(--powder)}
.light .card{background:var(--paper)}
.card:hover{transform:translateY(-3px)}
.card .topic{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.card h3{font-size:clamp(20px,1.6vw,23px)}
.card p{color:var(--ink-soft);font-size:15.5px;line-height:1.55}
.card .go{margin-top:auto;font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px}
.card .go::after{content:"";width:22px;height:1.5px;background:var(--gold);transition:width .3s var(--ease-out)}
.card:hover .go::after{width:34px}
.card.soon{opacity:.6;pointer-events:none}
.card.soon .go::after{display:none}

/* guides index: one group per theme */
.g-groups{display:grid;gap:clamp(56px,7vw,96px)}
.g-group-head{display:flex;align-items:baseline;gap:18px;padding-bottom:22px;margin-bottom:28px;border-bottom:2px solid var(--ink)}
.g-group-head .numeral{font-size:clamp(28px,2.6vw,36px);line-height:1;color:var(--gold)}
.g-group-head h2{font-size:clamp(28px,3vw,42px)}
.g-group-head p{margin-left:auto;color:var(--ink-soft);font-size:15px;max-width:40ch;text-align:right}

/* ============ SMALL SCREENS ============ */
@media (max-width:900px){
  .guide-layout{grid-template-columns:1fr}
  .guide-toc{position:static}
  .guide-toc ol{margin-bottom:0}
  .g-group-head{flex-wrap:wrap}
  .g-group-head p{margin-left:0;text-align:left;flex-basis:100%}
}
@media (max-width:560px){
  .answer{padding:22px 20px}
  .byline .who + .sep{display:none}
  .byline .who{flex-basis:100%}
  .from-field{padding:26px 22px;--cut:18px}
  .author{grid-template-columns:72px minmax(0,1fr);gap:16px}
  .prose p,.prose li{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .guide-hero .load{opacity:1;transform:none;animation:none}
  .card,.card .go::after{transition:none}
}

/* ============ ORDER-FLOW DIAGRAM (retailer-orders.html) ============ */
/* Draws in once it scrolls into view; the dots (SVG animations) run only while it is on screen.
   Selecting a format highlights its path and shows what the team does with it. */
.dg-anim .dg-chip rect{fill:var(--powder);stroke:var(--ink);stroke-width:1.5;transition:fill 200ms ease}
.dg-anim .dg-chip text{fill:var(--ink);text-anchor:middle;transition:fill 200ms ease}
.dg-anim .dg-line{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 700ms var(--ease-in-out) var(--d,0ms),stroke-width 200ms ease}
.dg-anim .dg-chip,.dg-anim .dg-node,.dg-anim .dg-soft{transform-box:fill-box;transform-origin:center;transition:opacity 450ms var(--ease-out) var(--d,0ms),transform 450ms var(--ease-out) var(--d,0ms)}
.js .dg-anim:not(.dg-in) .dg-chip{opacity:0;transform:translateX(-8px)}
.js .dg-anim:not(.dg-in) .dg-node{opacity:0;transform:scale(.96)}
.js .dg-anim:not(.dg-in) .dg-soft{opacity:0}
.js .dg-anim:not(.dg-in) .dg-line{stroke-dashoffset:1}
.dg-anim .dg-dot{fill:var(--ink);pointer-events:none}
.dg-anim .dg-dot-gold{fill:var(--gold)}
.dg-anim .dg-dot-q{fill:var(--ink-soft)}
.dg-anim .dg-pulse{opacity:0;transform-box:fill-box;transform-origin:center}
.dg-live .dg-pulse{animation:dg-pulse 2s var(--ease-out) 1.1s infinite}
.dg-live .dg-dash{animation:dg-march 1s linear infinite}
@keyframes dg-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@keyframes dg-march{to{stroke-dashoffset:-8}}
/* interaction */
.dg-anim .dg-src{cursor:pointer;outline:none;transition:opacity 200ms ease}
.dg-anim .dg-src:focus-visible rect{stroke:var(--gold);stroke-width:2.5}
.dg-anim .dg-src.is-on .dg-chip rect{fill:var(--midnight)}
.dg-anim .dg-src.is-on .dg-chip text{fill:var(--on-dark)}
.dg-anim .dg-src.is-on .dg-line{stroke-width:3}
.dg-anim.has-pick .dg-src:not(.is-on){opacity:.35}
.dg-anim .dg-hint{margin:.75rem 0 0;min-height:3em;font-size:.95rem;line-height:1.5;color:var(--ink-soft);transition:opacity 150ms ease}
.dg-anim .dg-hint.is-swap{opacity:0}
@media (prefers-reduced-motion:reduce){
  .js .dg-anim:not(.dg-in) .dg-chip,.js .dg-anim:not(.dg-in) .dg-node{transform:none}
  .dg-anim .dg-line{transition:none;stroke-dashoffset:0!important}
  .dg-live .dg-pulse,.dg-live .dg-dash{animation:none}
  .dg-anim .dg-dot{display:none}
}

/* "From the field" with a headline figure (order-errors.html) */
.prose .from-field .ff-figure{font-family:var(--f-numeral);font-size:44px;line-height:1;color:var(--gold-light);margin-bottom:6px}

/* ============ ERROR-JOURNEY DIAGRAM (order-errors.html) ============ */
/* A gold diamond hops from "Catalogue change" to "Invoice"; the sentence underneath changes at each step.
   Plays once when it scrolls into view; Replay runs it again; selecting a step jumps to it. */
.ej{margin:36px 0 0}
.ej-box{overflow:hidden;background:var(--paper);padding:28px 28px 22px;display:grid;gap:18px;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}
.ej-track{position:relative;margin:44px 8% 40px}
.ej-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--line-light)}
.prose .ej-stops{position:relative;display:flex;justify-content:space-between;margin:0;padding:0}
.prose .ej-stops li{position:relative;width:14px;height:14px;padding:0;margin:0}
.prose .ej-stops li::before{content:none}
.ej-stops button{position:absolute;inset:-10px;background:none;border:0;padding:0;cursor:pointer}
.ej-stops button::before{content:"";position:absolute;inset:12px;transform:rotate(45deg);background:var(--powder);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ej-stops button:focus-visible{outline:2px solid var(--gold);outline-offset:0}
.ej-stops b{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--ink-soft);transition:color 200ms ease}
.ej-stops li.on b{color:var(--ink)}
.ej-run{position:absolute;inset:0 14px 0 0;pointer-events:none}
.ej-pos{position:absolute;inset:0;transform:translateX(calc(var(--i,0) * 20%));transition:transform 520ms var(--ease-in-out)}
.ej-dot{position:absolute;left:-4px;top:50%;width:22px;height:22px;margin-top:-11px}
.ej-dot i{position:absolute;inset:3px;transform:rotate(45deg);transition:opacity 220ms var(--ease-out)}
.ej-dot .g{background:var(--gold)}
.ej-dot .r{background:var(--rouge);opacity:0}
.ej.found .ej-dot .r{opacity:1}
.ej-tag{position:absolute;bottom:calc(100% + 14px);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:opacity 260ms var(--ease-out)}
.ej-tag.start{left:0;transform:translateX(-12%);color:var(--gold)}
.ej-tag.end{right:0;transform:translateX(12%);color:var(--rouge);opacity:0}
.ej.found .ej-tag.end{opacity:1}
.ej-say{min-height:3.2em;display:grid;gap:2px;border-left:3px solid var(--gold);padding:2px 0 2px 14px;transition:border-color 220ms ease}
.ej.found .ej-say{border-color:var(--rouge)}
.ej-name{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.prose .ej-text{font-size:17px;color:var(--ink);margin:0;transition:opacity 160ms ease-out}
.ej-say.is-swap .ej-text{opacity:0}
.ej-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-light);padding-top:14px}
.prose .ej-cap{font-size:15px;max-width:52ch;margin:0}
.ej-replay{font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:none;border:0;border-bottom:2px solid var(--gold);padding:0 0 2px;cursor:pointer;transition:transform 160ms ease-out}
.ej-replay:active{transform:scale(.97)}
@media (max-width:640px){
  .ej-box{padding:24px 18px 18px}
  .ej-track{margin:40px 6% 12px}
  .ej-stops b{display:none}
  .ej-tag{font-size:11px}
  .ej-tag.start{transform:translateX(-8%)}
  .ej-tag.end{transform:translateX(8%)}
}
@media (prefers-reduced-motion:reduce){
  .ej-pos,.ej-dot i,.ej-tag,.ej-text{transition:none}
}