/* ============================================================
   Austad — blog
   Loaded only on /blogg/**. Extends styles.css; every colour, font and
   easing token comes from there, so the blog inherits the landing page's
   design rather than restating it.
   ============================================================ */

/* The blog has no hero, so the header is solid from the first frame. Without
   this the fixed header would sit transparent over white text-on-white. */
.blog-body{padding-top:0}
.site-header.is-static{position:sticky}

/* No scrollspy on a blog page — there are no homepage sections below to
   track — so the sliding pill has nothing to follow. The nav links keep
   their hover state and go home. */
.site-header.is-static .nav-pill{display:none}

/* ---------- reading progress ---------- */
.read-bar{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:70;
  background:var(--hero-accent);
  transform-origin:left;pointer-events:none;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13.5px;color:var(--muted);margin-bottom:26px;
}
.crumbs a{text-decoration:none;transition:color 180ms ease}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-current]{
  color:var(--ink);
  /* A long post title would push the trail onto three lines on a phone;
     truncate the leaf, since the two ancestors are the useful part. */
  max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ============================================================
   BLOG INDEX — head
   ============================================================ */
.blog-head{
  background:var(--ink);color:var(--page);
  padding:clamp(96px,11vw,150px) 0 clamp(52px,6vw,74px);
}
.blog-head .crumbs{color:rgb(250 250 248 / .5)}
.blog-head .crumbs span[aria-current]{color:rgb(250 250 248 / .9)}
.blog-head .crumbs a:hover{color:#fff}
.blog-head h1{font-size:clamp(34px,5.4vw,64px);max-width:16ch;letter-spacing:-.012em}
.blog-head-lead{
  margin-top:1em;max-width:58ch;
  font-size:clamp(16px,1.35vw,19px);color:rgb(250 250 248 / .66);
}
.blog-head-meta{
  display:flex;flex-wrap:wrap;gap:20px;margin-top:2.2em;
  font-size:14px;color:rgb(250 250 248 / .5);
}
.blog-head-meta a{text-decoration:none;transition:color 180ms ease}
.blog-head-meta a:hover{color:rgb(250 250 248 / .95);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   BLOG INDEX — filter + list
   ============================================================ */
.blog-list{background:var(--page);padding:clamp(40px,5vw,60px) 0 clamp(72px,10vw,120px)}

.tag-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px}
.tag-filter button{
  cursor:pointer;padding:8px 15px;border-radius:999px;
  font-family:var(--font-body);font-size:14px;font-weight:500;
  color:var(--muted);background:transparent;
  border:1px solid var(--line);
  transition:background 180ms ease,color 180ms ease,border-color 180ms ease;
}
.tag-filter button:hover{color:var(--ink);border-color:rgb(21 23 26 / .3)}
.tag-filter button[aria-pressed="true"]{
  background:var(--ink);color:var(--page);border-color:var(--ink);
}

.post-cards{display:grid;gap:16px}

.post-card{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  transition:transform 260ms var(--ease-out-expo),box-shadow 260ms ease,border-color 260ms ease;
}
@media (hover:hover){
  .post-card:hover{
    transform:translateY(-3px);
    border-color:rgb(21 23 26 / .16);
    box-shadow:0 14px 34px rgb(21 23 26 / .08);
  }
}
/* The whole card is the target, but only the title is the <a> — that keeps
   the accessible name to the headline instead of the entire card text. */
.post-card-link{
  display:block;text-decoration:none;
  padding:clamp(22px,2.6vw,32px);
}
.post-card-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.post-card-meta{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:var(--muted);margin-bottom:14px;
}
.post-card h2{
  font-size:clamp(20px,2.1vw,26px);line-height:1.2;max-width:26ch;
  margin-bottom:.5em;
}
.post-card p{color:var(--muted);font-size:15.5px;max-width:64ch}
.post-card-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:14.5px;font-weight:500;color:var(--ink);
}
.post-card-more svg{
  width:17px;height:17px;
  transition:transform 260ms var(--ease-out-expo);
}
@media (hover:hover){.post-card:hover .post-card-more svg{transform:translateX(4px)}}

/* Sits above the card's ::after overlay so the tags stay selectable text
   rather than becoming part of the link's click target. */
.post-card-tags{
  position:relative;z-index:1;
  list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:7px;
  padding:0 clamp(22px,2.6vw,32px) clamp(20px,2.4vw,28px);
}
.post-card-tags li,.post-tags li{
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:rgb(21 23 26 / .05);
  padding:5px 11px;border-radius:999px;
}

.blog-empty,.no-hits{color:var(--muted);font-size:16px;padding:24px 0}
.blog-empty a{color:var(--ink)}

/* ============================================================
   POST — head
   ============================================================ */
.post-head{
  background:#fff;border-bottom:1px solid var(--line);
  padding:clamp(96px,10vw,132px) 0 clamp(34px,4vw,48px);
}
.post-head .wrap{max-width:820px}
.post-head h1{
  font-size:clamp(30px,4.4vw,54px);line-height:1.08;letter-spacing:-.014em;
  max-width:20ch;
}
.post-standfirst{
  margin-top:.9em;max-width:56ch;
  font-size:clamp(16px,1.35vw,19.5px);line-height:1.5;color:var(--muted);
}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:1.8em;font-size:14px;color:var(--muted);
}
.post-author{color:var(--ink);font-weight:500}
.dot{opacity:.45}
.post-tags{list-style:none;margin:1.5em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}

/* ============================================================
   POST — body
   ============================================================ */
.post-grid{
  display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:minmax(0,1fr);
  padding-block:clamp(44px,5vw,68px) clamp(64px,8vw,104px);
  max-width:820px;
}
/* The table of contents only earns a column once there is room for it beside
   a 720px measure — below that it would squeeze the text it is indexing. */
@media (min-width:1200px){
  .post-grid{grid-template-columns:minmax(0,720px) 232px;max-width:1060px}
  /* Must track .post-grid's width, not the body column's: both are centred
     .wrap elements, so a narrower head would centre on a different axis and
     the h1 would sit 75px to the right of the paragraph beneath it. */
  .post-head .wrap{max-width:1060px}
}

.post-body{max-width:720px;font-size:17.5px;line-height:1.72}
.post-body > * + *{margin-top:1.15em}

.post-body h2{
  font-size:clamp(23px,2.5vw,31px);line-height:1.18;letter-spacing:-.006em;
  margin-top:2em;scroll-margin-top:96px;
}
.post-body h3{
  font-size:clamp(19px,1.8vw,22px);line-height:1.25;
  margin-top:1.7em;scroll-margin-top:96px;
}
.post-body h4{font-size:17.5px;margin-top:1.5em;scroll-margin-top:96px}
.post-body p{color:#22262B}
.post-body a{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:rgb(21 23 26 / .3);text-underline-offset:3px;
  transition:text-decoration-color 180ms ease;
}
.post-body a:hover{text-decoration-color:var(--ink)}
.post-body strong{font-weight:600;color:var(--ink)}
.post-body ul,.post-body ol{padding-left:1.3em;color:#22262B}
.post-body li + li{margin-top:.45em}
.post-body li::marker{color:var(--muted)}
.post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgb(21 23 26 / .06);padding:.15em .42em;border-radius:5px;
}
.post-body hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}
.post-body blockquote{
  margin-inline:0;padding:2px 0 2px 22px;
  border-left:2px solid var(--hero-accent);
  color:var(--muted);font-size:18px;
}
.post-body blockquote p + p{margin-top:.8em}

/* ---------- Kort fortalt ----------
   First in the reading order and structurally distinct, because this is the
   passage an answer engine lifts when it cites the page. Bullets, not prose:
   each one has to stand alone out of context. */
.tldr{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.4vw,28px);
  border-left:3px solid var(--hero-accent);
}
.tldr h2{
  font-size:13px!important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9em!important;font-weight:600;
  font-family:var(--font-body);
}
.tldr ul{list-style:none;margin:0;padding:0;display:grid;gap:.7em}
.tldr li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.55;color:var(--ink)}
.tldr li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:2px;background:var(--hero-accent);
}

/* ---------- LinkedIn pointer ----------
   A link, not an embed: the text above is already on this domain and
   indexable, so the iframe would add third-party cookies and a second copy
   of the same words without adding anything a crawler can read. */
.post-linkedin{margin-top:2.4em!important}
.post-linkedin a{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:999px;text-decoration:none!important;
  font-size:15px;font-weight:500;
  color:#0A66C2;border:1px solid rgb(10 102 194 / .28);
  background:rgb(10 102 194 / .05);
  transition:background 200ms ease,border-color 200ms ease,transform 200ms var(--ease-out-expo);
}
.post-linkedin a:hover{background:rgb(10 102 194 / .11);border-color:rgb(10 102 194 / .45);transform:translateY(-2px)}
.post-linkedin svg{width:17px;height:17px;fill:currentColor;flex:none}

/* ---------- per-post FAQ ---------- */
.post-faq{margin-top:3em!important;padding-top:2.2em;border-top:1px solid var(--line)}
.post-faq h2{margin-top:0!important;font-size:clamp(21px,2.2vw,27px)}
.post-faq details{border-bottom:1px solid var(--line)}
.post-faq summary{
  cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.3;
}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform 220ms var(--ease-out-expo);
}
.post-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.post-faq details p{padding:0 40px 20px 0;color:var(--muted);font-size:16px}

/* ---------- author ----------
   Named author with a verifiable background, on every post. This is the
   E-E-A-T signal: an unsigned page about a technical subject carries less
   weight than the same page attributed to someone whose experience checks out. */
.author-card{
  display:flex;gap:18px;align-items:flex-start;
  margin-top:3.4em!important;padding-top:2.4em;border-top:1px solid var(--line);
}
.author-mark{
  flex:none;width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--ink);color:var(--page);
  font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:.04em;
}
.author-name{font-family:var(--font-display);font-weight:800;font-size:17px;margin-bottom:.35em}
.author-bio{color:var(--muted);font-size:15px;line-height:1.55}
.author-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:.9em;font-size:14.5px}
.author-links a{text-decoration:none;color:var(--ink);border-bottom:1px solid rgb(21 23 26 / .25);padding-bottom:1px}
.author-links a:hover{border-color:var(--ink)}

/* ---------- table of contents ---------- */
.toc{display:none}
@media (min-width:1200px){
  .toc{
    display:block;position:sticky;top:104px;align-self:start;
    max-height:calc(100svh - 140px);overflow:auto;
  }
}
.toc h2{
  font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;
}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--line)}
.toc a{
  display:block;padding:7px 0 7px 14px;margin-left:-1px;
  border-left:2px solid transparent;
  font-size:14px;line-height:1.35;color:var(--muted);text-decoration:none;
  transition:color 180ms ease,border-color 180ms ease;
}
.toc a:hover{color:var(--ink)}
.toc a.is-current{color:var(--ink);border-left-color:var(--hero-accent);font-weight:500}

/* ============================================================
   RELATED
   ============================================================ */
.related{background:#fff;border-top:1px solid var(--line);padding:clamp(56px,7vw,88px) 0}
.related h2{font-size:clamp(21px,2.2vw,28px);margin-bottom:1em}
.related-grid{display:grid;gap:16px}
@media (min-width:760px){.related-grid{grid-template-columns:1fr 1fr}}
.related-card{
  display:block;text-decoration:none;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line);border-radius:16px;background:var(--page);
  transition:transform 240ms var(--ease-out-expo),border-color 240ms ease,box-shadow 240ms ease;
}
@media (hover:hover){
  .related-card:hover{transform:translateY(-3px);border-color:rgb(21 23 26 / .16);box-shadow:0 12px 28px rgb(21 23 26 / .07)}
}
.related-card time{font-size:13px;color:var(--muted)}
.related-card h3{font-size:19px;line-height:1.25;margin:.5em 0 .45em}
.related-card p{font-size:15px;color:var(--muted)}

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .read-bar{display:none}
  .post-card,.related-card,.post-linkedin a,.nav-blog{transition:none}
  .post-card:hover,.related-card:hover{transform:none}
}

/* ---------- images in a post ----------
   Markdown ![alt](src). Full measure, matching the card radius elsewhere.
   A paragraph that is only an image loses the paragraph's own spacing rules,
   so the figure is the block and the <p> around it collapses to nothing. */
.post-body p:has(> img:only-child){margin-block:1.8em}
.post-body img{
  width:100%;height:auto;border-radius:14px;
  border:1px solid var(--line);background:#fff;
}