/* Blog posts made in the Den (den.garagewolves.com). Loaded after site.css on those pages only;
   the markup comes from api/_den/render.js. The page's own inline .prose rules still apply,
   this adds what the Den's editor can produce beyond them. Only transform/opacity animate. */

.gw-post::after{ content:""; display:block; clear:both; }
.gw-post > :first-child{ margin-top:0; }

.gw-post h2{ font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:-0.03em; line-height:1.02;
  color:#F5F5F5; font-size:clamp(1.75rem,3.4vw,2.5rem); margin:2.6rem 0 1rem; }
.gw-post h3{ font-family:'Archivo',sans-serif; font-weight:700; letter-spacing:-0.02em; line-height:1.15;
  color:#F5F5F5; font-size:clamp(1.3rem,2.2vw,1.6rem); margin:2rem 0 .75rem; }
.gw-post strong{ color:#F5F5F5; font-weight:600; }
/* A color picked in the editor wins over the default bold/link colors inside it. */
.gw-post span[style*="color"] *{ color:inherit; }
.gw-post .gw-gap{ height:1em; margin:0; }

/* A list or quote beside a wrapped photo would slide its bullets/rule under the photo;
   a new block formatting context keeps it beside the photo instead. */
.gw-post ul, .gw-post ol, .gw-post blockquote{ overflow:hidden; }
.gw-post ol{ list-style:decimal; padding-left:1.5rem; margin:0 0 1rem; color:#C8C8CC; }
.gw-post ol li{ line-height:1.7; padding-left:.35rem; margin-bottom:.5rem; }
.gw-post ol li::marker{ color:#3B6FD6; font-weight:600; }
.gw-post blockquote{ margin:1.75rem 0; padding:.25rem 0 .25rem 1.4rem; border-left:2px solid #3B6FD6;
  font-family:'Archivo',sans-serif; font-weight:600; font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.45; color:#F5F5F5; }
.gw-post blockquote p{ color:inherit; line-height:inherit; }
.gw-post hr{ clear:both; border:0; height:1px; background:rgba(255,255,255,.1); margin:2.5rem 0; }

/* Font sizes from the editor. Desktop matches the pixel size picked; big ones ease down on phones. */
.gw-fs-12{ font-size:.75rem; }
.gw-fs-14{ font-size:.875rem; }
.gw-fs-16{ font-size:1rem; }
.gw-fs-18{ font-size:1.125rem; }
.gw-fs-20{ font-size:1.25rem; line-height:1.55; }
.gw-fs-24{ font-size:clamp(1.25rem,2.5vw,1.5rem); line-height:1.4; }
.gw-fs-28{ font-size:clamp(1.4rem,2.9vw,1.75rem); line-height:1.3; }
.gw-fs-32{ font-size:clamp(1.55rem,3.4vw,2rem); line-height:1.2; }
.gw-fs-40{ font-size:clamp(1.8rem,4.2vw,2.5rem); line-height:1.12; letter-spacing:-0.02em; }
.gw-fs-48{ font-size:clamp(2rem,5vw,3rem); line-height:1.05; letter-spacing:-0.03em; }

/* Photos: real job photos, so no tint or crop. --w is the width picked in the editor. */
.gw-photo{ width:var(--w,100%); max-width:100%; margin:1.9rem auto; }
.gw-photo img{ display:block; width:100%; height:auto; border-radius:12px; background:#0B0B0D;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -22px rgba(0,0,0,.8), 0 26px 60px -34px rgba(0,51,139,.45); }
.gw-photo figcaption, .gw-cover figcaption{ color:#9A9AA0; font-size:.875rem; line-height:1.6; margin-top:.7rem; }
.gw-photo--full{ width:100%; }
.gw-photo--left{ float:left; margin:.4rem 2rem 1.25rem 0; }
.gw-photo--right{ float:right; margin:.4rem 0 1.25rem 2rem; }
@media (max-width:639px){
  .gw-photo--left, .gw-photo--right{ float:none; width:100%; margin:1.6rem 0; }
  .gw-photo{ width:max(var(--w,100%),60%); }
}

.gw-cover-frame{ border-radius:16px; overflow:hidden; background:#161618;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8), 0 40px 90px -50px rgba(0,51,139,.5); }
.gw-cover-frame img{ display:block; width:100%; height:auto; max-height:min(78vh,760px); object-fit:contain; }
/* Cover with its background removed: no frame, the cut-out sits on the page with a soft shadow. */
.gw-cover--clear .gw-cover-frame{ background:none; box-shadow:none; border-radius:0; overflow:visible; }
.gw-cover--clear .gw-cover-frame img{ filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 34px 60px rgba(0,51,139,.28)); }
.gw-cover--clear figcaption{ text-align:center; }

/* Links box (above or below the post) */
.gw-links{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
@media (min-width:768px){ .gw-links{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.gw-link{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.15rem; border-radius:12px; background:#0B0B0D; border:1px solid rgba(255,255,255,.08);
  color:#F5F5F5; font-weight:500; line-height:1.4; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.gw-link::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid rgba(59,111,214,.6);
  opacity:0; transition:opacity .3s; pointer-events:none; }
.gw-link:hover{ transform:translateY(-2px); }
.gw-link:hover::after, .gw-link:focus-visible::after{ opacity:1; }
.gw-link:active{ transform:translateY(0); }
.gw-link-arrow{ flex:none; color:#3B6FD6; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.gw-link:hover .gw-link-arrow{ transform:translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .gw-link, .gw-link::after, .gw-link-arrow{ transition:none !important; }
}