/* Insights (blog) styles — matches the portfolio (General Sans, black/white/orange). */
#ins{--ink:#030712;--soft:#7a7a7a;--accent:#ff621a;--card:#f5f5f5;--line:#ececec;font-family:GeneralSans,ui-sans-serif,system-ui,sans-serif;color:var(--ink)}
html.dark #ins{--ink:#fff;--soft:#aeb2ba;--accent:#fe7746;--card:#0d1117;--line:#1c1f26}
#ins *{box-sizing:border-box}
/* gradient placeholders — grey, same tone as the Works cards (#F5F5F5 / dark #141922).
   Swap for real photos later. */
.ins-g1{background:linear-gradient(135deg,#fafafa 0%,#efefef 50%,#e2e2e2 100%)}
.ins-g2{background:linear-gradient(135deg,#f4f4f4 0%,#e8e8e8 55%,#d8d8d8 100%)}
.ins-g3{background:linear-gradient(160deg,#f6f6f6 0%,#e6e6e6 60%,#d4d4d4 100%)}
html.dark .ins-g1{background:linear-gradient(135deg,#1a212d 0%,#141922 55%,#0e131b 100%)}
html.dark .ins-g2{background:linear-gradient(135deg,#1c2431 0%,#141922 55%,#0d1117 100%)}
html.dark .ins-g3{background:linear-gradient(160deg,#19212d 0%,#131820 60%,#0c1016 100%)}
/* index / listing — horizontal insets come from mx-6/laptop:mx-25 on the .ins-wrap
   element so its left/right edges line up exactly with the footer (no own max-width). */
.ins-wrap{padding:44px 0 96px}
@media(min-width:1024px){.ins-wrap{padding-top:56px}}
.ins-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:64px}
.ins-wrap>.ins-back{margin-bottom:48px}
.ins-h1{font-size:clamp(30px,5vw,46px);font-weight:500;letter-spacing:-.02em;margin:0;line-height:1.05}
.ins-accent{color:var(--accent)}
/* category filter row. The chips themselves use the SAME Tailwind classes as the
   Works filter (identical default/hover/selected styles); this only lays out the row. */
.ins-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 64px}
.ins-sub{color:var(--soft);margin:10px 0 0;font-size:clamp(16px,2vw,19px);max-width:520px}
/* 'All Insights' button — same style as the Works 'Next' pagination button
   (white + black border in light, #1F2937 tile in dark, grey hover). */
.ins-all{display:inline-flex;align-items:center;gap:10px;border:1px solid #030712;border-radius:9999px;padding:8px 20px;font-weight:500;text-decoration:none;color:#030712;background:#fff;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease}
.ins-all:hover{background:#E5E7EB;color:#030712}
html.dark .ins-all{background:#1F2937;border-color:transparent;color:#fff}
html.dark .ins-all:hover{background:rgba(229,231,235,.3);color:#fff}
.ins-all svg{width:20px;height:20px}
.ins-grid{display:grid;grid-template-columns:1fr;gap:64px 48px}
@media(min-width:700px){.ins-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.ins-grid{grid-template-columns:1fr 1fr 1fr}}
.ins-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.ins-thumb{aspect-ratio:1/1;border-radius:24px;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;filter:grayscale(1);transition-property:transform,filter;transition-duration:.4s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.ins-card:hover .ins-thumb{transform:translateY(-4px) scale(1.02);filter:grayscale(0)}
@media(prefers-reduced-motion:reduce){.ins-thumb{transition:none}.ins-card:hover .ins-thumb{transform:none}}
.ins-card h3{font-size:20px;font-weight:500;line-height:1.25;margin:24px 0 10px;letter-spacing:-.01em;transition:color .15s ease;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ins-card p{color:var(--soft);font-size:15px;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* article */
.ins-article{max-width:720px;margin:0 auto;padding:48px 24px 96px}
@media(min-width:1024px){.ins-article{padding-top:64px}}
/* Back button — same pill as the Design Process page (no navbar on article pages) */
.ins-back{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:9999px;background:#fff;color:#030712;border:1px solid #030712;font-weight:500;line-height:1.5;text-decoration:none;margin-bottom:40px;transition:background .15s ease,color .15s ease}
.ins-back svg{width:24px;height:24px}
.ins-back:hover{background:#E5E7EB}
html.dark .ins-back{background:#030712;color:#fff;border-color:#fff}
html.dark .ins-back:hover{background:rgba(229,231,235,.2)}
.ins-eyebrow{color:var(--accent);font-weight:500;font-size:13px;margin:0 0 14px;text-transform:uppercase;letter-spacing:.05em}
.ins-title{font-size:clamp(30px,5vw,46px);font-weight:500;line-height:1.1;letter-spacing:-.02em;margin:0}
.ins-deck{font-size:clamp(18px,2.4vw,21px);line-height:1.5;color:var(--soft);margin:20px 0 22px}
.ins-meta{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:14px;margin-bottom:34px;flex-wrap:wrap}
/* article actions (read aloud + share) — same concept as the chat's read-aloud button */
.ins-actions{display:inline-flex;align-items:center;gap:2px;margin-left:6px}
.ins-act{position:relative;width:30px;height:30px;padding:0;border:none;background:transparent;color:var(--soft);border-radius:9999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease,transform .15s cubic-bezier(.2,0,0,1)}
.ins-act::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.ins-act:hover{background:rgba(0,0,0,.07);color:var(--ink)}
.ins-act:active{transform:scale(.96)}
.ins-act:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ins-act[aria-pressed='true']{color:var(--ink);background:rgba(0,0,0,.07)}
html.dark .ins-act:hover{background:rgba(255,255,255,.10)}
html.dark .ins-act:focus-visible{outline-color:#fff}
html.dark .ins-act[aria-pressed='true']{background:rgba(255,255,255,.10)}
.ins-act.copied{color:#16a34a}
/* informative tooltip on the action buttons — content comes from aria-label, so it
   auto-syncs with state (Read aloud / Stop reading, Copy link / Link copied). */
.ins-act::before{content:attr(aria-label);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(3px);background:#030712;color:#fff;font-size:12px;font-weight:500;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;padding:6px 9px;border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:50}
.ins-act:hover::before,.ins-act:focus-visible::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
html.dark .ins-act::before{background:#fff;color:#030712}
@media(prefers-reduced-motion:reduce){.ins-act::before{transition:none}}
.ins-hero{aspect-ratio:16/9;border-radius:28px;margin-bottom:44px;background-size:cover;background-position:center;background-repeat:no-repeat}
/* in-body figure (diagrams / screenshots) */
.ins-fig{margin:32px 0}
/* image sits inside a fixed-ratio box (background-image) so a missing file shows a
   neutral placeholder instead of a broken-image icon; light bg keeps the (light) diagram
   readable in dark mode too. */
.ins-fig-box{aspect-ratio:2000/1122;background-color:#f6f6f6;background-position:center;background-size:contain;background-repeat:no-repeat;border-radius:16px;border:1px solid var(--line)}
.ins-fig figcaption{margin-top:10px;color:var(--soft);font-size:13.5px;text-align:center}
.ins-body{font-size:17px;line-height:1.72}
.ins-body p{margin:0 0 20px}
.ins-body h2{font-size:clamp(22px,3vw,27px);font-weight:500;letter-spacing:-.01em;line-height:32px;margin:80px 0 14px}
.ins-body ul,.ins-body ol{margin:0 0 20px;padding-left:1.35em;list-style-position:outside}.ins-body ul{list-style:disc}.ins-body ol{list-style:decimal}.ins-body li{margin:11px 0;padding-left:.2em}.ins-body li::marker{color:var(--soft)}
.ins-body strong{font-weight:600}
.ins-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:.08em .38em}
.ins-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ins-body .ins-refs{list-style:none;padding-left:0;font-size:14.5px;color:var(--soft)}
.ins-body .ins-refs li{margin:9px 0;line-height:1.5}
.ins-body .ins-refs li::marker{content:""}
.ins-body blockquote{margin:34px 0;padding:6px 0 6px 24px;border-left:3px solid var(--accent);font-size:18px;line-height:1.5;font-weight:500;color:var(--ink)}
/* home section reuses the same card styles (Figma: title + button header, square cards).
   Width is aligned to the Works block above via the same mx-6/laptop:mx-25 insets on
   the <section> element (both live inside <main class="container mx-auto">). */
.home-ins{padding:40px 0 80px}
.home-ins .ins-head{margin-bottom:40px}
.home-ins .ins-h1{font-size:clamp(26px,3.4vw,30px)}
.home-ins .ins-grid{gap:32px}
/* image lightbox — click an article image to open it fullscreen (same concept as the
   project image viewer): dark backdrop, centered image, close on click / Esc / button. */
/* clickable article images: normal (pointer) cursor + the same lift/grow hover as the
   Works/Insights cards; click still opens the fullscreen viewer. */
.ins-hero[data-lightbox],.ins-fig-box[data-lightbox]{cursor:pointer;transition-property:transform;transition-duration:.4s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.ins-hero[data-lightbox]:hover,.ins-fig-box[data-lightbox]:hover{transform:translateY(-4px) scale(1.02)}
@media(prefers-reduced-motion:reduce){.ins-hero[data-lightbox],.ins-fig-box[data-lightbox]{transition:none}.ins-hero[data-lightbox]:hover,.ins-fig-box[data-lightbox]:hover{transform:none}}
.ins-lb{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.85);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;cursor:zoom-out}
.ins-lb.open{opacity:1;visibility:visible}
.ins-lb img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);transform:scale(.97);transition:transform .25s ease;cursor:default}
.ins-lb.open img{transform:scale(1)}
.ins-lb-close{position:fixed;top:20px;right:20px;width:44px;height:44px;border:none;border-radius:9999px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.ins-lb-close:hover{background:rgba(255,255,255,.24)}
@media(prefers-reduced-motion:reduce){.ins-lb,.ins-lb img{transition:none}}
/* Table of Contents (anchor menu) — fixed left-side section nav on wide screens,
   inspired by jakub.kr: a short line that grows + darkens on the active section
   (scroll-spy), smooth-scroll on click, 250ms ease-out motion. Rendered on <body>,
   so it uses explicit colors (the #ins theme vars don't reach here). */
.ins-toc{display:none}
@media(min-width:1280px){
  .ins-toc{display:block;position:fixed;top:118px;left:40px;width:222px;z-index:20;animation:ins-toc-in .4s ease-out both}
}
@media(min-width:1600px){.ins-toc{left:64px;width:244px}}
@keyframes ins-toc-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.ins-toc-head{display:flex;align-items:center;gap:8px;margin-bottom:18px;color:#7a7a7a}
.ins-toc-head svg{width:15px;height:15px;flex:none}
.ins-toc-head span{font-size:13px;font-weight:500}
.ins-toc-list{display:flex;flex-direction:column}
.ins-toc-item{display:flex;align-items:center;gap:12px;padding:7px 0;text-decoration:none}
.ins-toc-line{height:2px;width:16px;flex:none;border-radius:2px;background:#d3d6db;transition:width .25s ease-out,background-color .25s ease-out}
.ins-toc-label{font-size:13px;font-weight:450;line-height:1.3;color:#7a7a7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s ease-out}
.ins-toc-item:hover .ins-toc-label{color:#030712}
.ins-toc-item.active .ins-toc-line{width:30px;background:#ff621a}
.ins-toc-item.active .ins-toc-label{color:#030712}
html.dark .ins-toc-head{color:#aeb2ba}
html.dark .ins-toc-line{background:#3a4049}
html.dark .ins-toc-label{color:#aeb2ba}
html.dark .ins-toc-item:hover .ins-toc-label{color:#fff}
html.dark .ins-toc-item.active .ins-toc-line{background:#fe7746}
html.dark .ins-toc-item.active .ins-toc-label{color:#fff}
@media(prefers-reduced-motion:reduce){.ins-toc{animation:none}.ins-toc-line,.ins-toc-label{transition:none}}
/* Article tables (design-system comparison / lifecycle) — GitHub-ish, theme-aware */
.ins-table{margin:28px 0 32px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(3,7,18,.12);border-radius:16px}
html.dark .ins-table{border-color:rgba(255,255,255,.14)}
.ins-body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.ins-body th,.ins-body td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(3,7,18,.10)}
.ins-body th:not(:last-child),.ins-body td:not(:last-child){border-right:1px solid rgba(3,7,18,.07)}
.ins-body thead th{font-weight:600;background:rgba(3,7,18,.035);white-space:nowrap}
.ins-body tbody tr:last-child td{border-bottom:0}
html.dark .ins-body th,html.dark .ins-body td{border-bottom-color:rgba(255,255,255,.12)}
html.dark .ins-body th:not(:last-child),html.dark .ins-body td:not(:last-child){border-right-color:rgba(255,255,255,.08)}
html.dark .ins-body thead th{background:rgba(255,255,255,.05)}
/* References group labels */
.ins-body .ins-refs-h{font-size:15px;font-weight:600;margin:26px 0 8px}