/* circlesco.com blog in the circlesco.tech Insights look (owner, 2026-11-04). Templates: home.php, _blog-single.php.
   Gilroy for all words, Space Mono only for small labels; Circles blue #1264ff for links and markers. */
.cc-blog{--in-blue:#1264ff;--in-ink:#0b0b0f;--in-g3:#5f6068;--in-line:#e6e6eb;--in-g1:#f2f2f4;--in-ease:cubic-bezier(.2,.7,.2,1);
  --in-sans:Gilroy,Helvetica,Arial,sans-serif;--in-mono:"Space Mono",ui-monospace,Menlo,monospace}
/* the theme's .content wrapper is overflow:hidden, which turns off position:sticky; clip still stops sideways scroll */
body.cc-blog .content{overflow:visible!important;overflow-x:clip!important}
.in-main{background:#fff;color:var(--in-ink);font-family:var(--in-sans)}
.in-main *{box-sizing:border-box}
.in-wrap{width:min(1240px,82%);margin-inline:auto}
.in-mono{font-family:var(--in-mono);font-size:12.5px;line-height:1.4;letter-spacing:0;font-weight:400}
.in-cap{text-transform:uppercase;letter-spacing:.08em}
.in-dim{color:var(--in-g3)}
.in-main a{text-decoration:none}

/* ============ LIST: TITLE ============ */
/* the site header sits over the top 100px (70px on phones) */
.in-hero{padding:calc(100px + clamp(72px,16vh,190px)) 0 clamp(44px,6vh,84px)}
.in-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(18px,3vh,40px)}
.in-meta-l{display:inline-flex;align-items:center;gap:12px}
.in-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--in-blue)}
.in-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 64px}
.in-title{margin:0;font-family:var(--in-sans);font-weight:800;font-size:clamp(64px,10vw,190px);line-height:.88;letter-spacing:-.05em;margin-left:-.04em;color:var(--in-ink)}
.in-title em{color:var(--in-blue);font-style:normal}
.in-statement{margin:0 0 0 auto;max-width:500px;font-size:clamp(17px,1.4vw,22px);font-weight:500;line-height:1.35;letter-spacing:-.01em;text-wrap:pretty;color:var(--in-ink)}

/* ============ LIST: FEATURED ============ */
.in-lead{padding-bottom:clamp(64px,8vw,130px)}
.in-main .in-feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:end;color:inherit}
.in-feature-img{display:block;border-radius:24px;overflow:hidden;aspect-ratio:16/10;background:var(--in-g1)}
.in-feature-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--in-ease)}
.in-feature:hover .in-feature-img img{transform:scale(1.035)}
.in-feature-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding-bottom:6px}
.in-feature-title{font-weight:800;font-size:clamp(30px,3.2vw,54px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance;color:var(--in-ink);transition:color .3s var(--in-ease)}
.in-feature:hover .in-feature-title{color:var(--in-blue)}
.in-feature-ex{font-size:clamp(17px,1.3vw,20px);line-height:1.45;font-weight:500;color:var(--in-g3);text-wrap:pretty;max-width:34em}
.in-arrow{font-weight:700;font-size:17px;color:var(--in-blue)}

/* ============ LIST: INDEX ROWS ============ */
.in-index{padding:0 0 clamp(80px,9vw,150px)}
.in-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--in-ink)}
.in-main .in-sec-head a{color:var(--in-g3);transition:color .3s}.in-main .in-sec-head a:hover{color:var(--in-blue)}
.in-rows{list-style:none;margin:0;padding:0}
.in-rows li{border-bottom:1px solid var(--in-line);margin:0;padding:0}
.in-rows li::before{display:none}
.in-main .in-row{display:grid;grid-template-columns:140px minmax(0,1fr) 140px 32px;gap:24px;align-items:baseline;padding:clamp(20px,2.3vw,32px) 0;color:inherit}
.in-row-title{font-weight:700;font-size:clamp(21px,2vw,32px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance;color:var(--in-ink);transition:color .3s var(--in-ease)}
.in-row-cat{color:var(--in-ink);text-align:right}
.in-row-go{font-size:22px;justify-self:end;color:var(--in-ink);transition:transform .5s var(--in-ease),color .3s}
.in-row:hover .in-row-title,.in-row:hover .in-row-go{color:var(--in-blue)}
.in-row:hover .in-row-go{transform:translateX(6px)}

/* ============ ARTICLE ============ */
.in-art-hero{padding:calc(100px + clamp(64px,14vh,170px)) 0 clamp(32px,5vh,60px)}
.in-main .in-back{color:var(--in-ink);transition:color .3s}.in-main .in-back:hover{color:var(--in-blue)}
.in-art-title{margin:0;font-family:var(--in-sans);font-weight:800;font-size:clamp(40px,5.2vw,88px);line-height:.98;letter-spacing:-.045em;max-width:17ch;text-wrap:balance;color:var(--in-ink)}
.in-art-ex{margin:clamp(20px,2.4vw,32px) 0 0;max-width:40em;font-size:clamp(17px,1.35vw,21px);line-height:1.45;font-weight:500;color:var(--in-g3);text-wrap:pretty}
.in-art-photo{margin:0 auto clamp(48px,6vw,96px)}
.in-art-photo img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;border-radius:24px;background:var(--in-g1)}
.in-art-photo figcaption{margin-top:12px}
.in-main .in-art-photo figcaption a{color:inherit;transition:color .3s}.in-main .in-art-photo figcaption a:hover{color:var(--in-blue)}
.in-art-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);padding-bottom:clamp(80px,9vw,140px)}
.in-toc{position:sticky;top:172px;align-self:start}
/* headings land below the sticky header (40px bar + 100px header) when a TOC link is clicked */
.in-main .in-body h2{scroll-margin-top:172px}
.in-toc p{margin:0}
.in-toc ol{list-style:none;margin:14px 0 0;padding:0;counter-reset:t}
.in-toc li{position:relative;counter-increment:t;border-top:1px solid var(--in-line);margin:0;padding:0}
.in-toc li::after{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--in-blue);transition:width .5s var(--in-ease)}
.in-toc li.is-on::after{width:100%}
.in-main .in-toc a{display:flex;gap:12px;padding:10px 0;color:var(--in-g3);font-weight:600;font-size:14.5px;line-height:1.3;transition:color .3s}
.in-toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--in-mono);font-weight:400;font-size:11px;padding-top:2px;color:var(--in-blue)}
.in-main .in-toc a:hover,.in-main .in-toc li.is-on a{color:var(--in-ink)}

/* body type: Gilroy, a reading measure, blue only for links and markers */
.in-body{max-width:720px;font-family:var(--in-sans);font-size:clamp(18px,1.25vw,20px);line-height:1.65;font-weight:400;color:var(--in-ink)}
.in-body>*{margin:0}
.in-body>*+*{margin-top:1.1em}
.in-body p{font:inherit;color:inherit;text-wrap:pretty}
.in-body h2{scroll-margin-top:24px;margin-top:2.1em;font-family:var(--in-sans);font-weight:800;font-size:clamp(26px,2.2vw,36px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance;color:var(--in-ink)}
.in-body h3{margin-top:1.8em;font-family:var(--in-sans);font-weight:700;font-size:clamp(20px,1.5vw,24px);line-height:1.2;letter-spacing:-.015em}
.in-body h2+*,.in-body h3+*{margin-top:.7em}
.in-body strong{font-weight:700}
.in-main .in-body a{color:var(--in-blue);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.in-body ul,.in-body ol{padding:0;list-style:none}
.in-body li{position:relative;padding-left:28px;font:inherit;color:inherit;margin:0}
.in-body li+li{margin-top:.6em}
.in-body ul li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;border:2px solid var(--in-blue)}
.in-body ol{counter-reset:o}
.in-body ol li{counter-increment:o}
.in-body ol li::before{content:counter(o);position:absolute;left:0;top:.25em;font-family:var(--in-mono);font-size:12px;color:var(--in-blue)}
.in-body blockquote{margin:1.8em 0;padding-left:24px;border-left:3px solid var(--in-blue);font-weight:700;font-size:1.2em;line-height:1.35;letter-spacing:-.015em}
.in-more{padding-top:clamp(64px,8vw,120px);border-top:1px solid var(--in-line)}

/* theme-screen.css sets every <p> to 1.6em !important on phones; these paragraphs keep their own sizes */
.in-main .in-body p,.in-main .in-body li{font-size:inherit!important;line-height:inherit!important}
.in-main p.in-statement{font-size:clamp(17px,1.4vw,22px)!important;line-height:1.35!important}
.in-main p.in-art-ex{font-size:clamp(17px,1.35vw,21px)!important;line-height:1.45!important}
.in-main .in-toc p{font-size:12.5px!important;line-height:1.4!important}

@media (max-width:1000px){
  .in-main .in-feature{grid-template-columns:1fr}
  .in-art-grid{grid-template-columns:1fr}
  .in-toc{display:none}
}
@media (max-width:700px){
  .in-wrap{width:88%}
  .in-hero{padding-top:calc(70px + 56px)}
  .in-art-hero{padding-top:calc(70px + 48px)}
  .in-meta{flex-direction:column;align-items:flex-start;gap:8px}
  .in-statement{margin-left:0}
  .in-main .in-row{grid-template-columns:1fr 24px;gap:8px 16px}
  .in-row-date{grid-column:1;order:-1}
  .in-row-title{grid-column:1}
  .in-row-cat{display:none}
  .in-row-go{grid-row:1 / span 2;grid-column:2;align-self:center}
  .in-art-photo img{aspect-ratio:4/3;border-radius:16px}
  .in-feature-img{border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .in-main *{transition:none!important}
}