/* ==========================================================================
   Journal: the list at /journal/ and every post under it.
   Loaded only by journal pages, after style.css, so the rest of the site
   never downloads it. Tokens all come from style.css.

   Accent discipline holds here too: links in long-form copy are body-colored
   with a teal underline, so a post with twenty source links does not turn
   into a wall of "click me". Rules and bullets use the logo teals.
   ========================================================================== */

/* ---- header of a post or the list ---------------------------------------- */

.hero.post-hero{padding-block:clamp(2.75rem,6vw,4.25rem) clamp(2rem,4vw,2.75rem);}
.post-head{max-width:46rem;}
.post-hero h1{font-size:clamp(2.1rem,4.6vw,3.25rem);margin-top:1.2rem;}
.post-hero .badge + h1{margin-top:1.4rem;}

.crumbs{font-size:.88rem;color:var(--text-mute);}
.crumbs a{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;
  color:var(--text-dim);
  transition:color var(--t-fast);
}
.crumbs a::before{
  content:"";width:.5rem;height:.5rem;
  border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-right:.1rem;
}
.crumbs a:hover{color:var(--text);}

.byline{display:flex;align-items:center;gap:.85rem;margin-top:1.6rem;}
.byline img{
  width:48px;height:48px;flex:none;
  border-radius:50%;
  border:1px solid var(--line-2);
  object-fit:cover;
}
.byline p{display:flex;flex-direction:column;line-height:1.45;}
.byline-name{font-weight:600;color:var(--text);font-size:.95rem;}
.byline-meta{color:var(--text-mute);font-size:.875rem;}

/* ---- the article column ---------------------------------------------------- */

.post{max-width:43rem;}

.answer{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent-2);
  border-radius:var(--r);
  padding:1.4rem 1.6rem;
  font-size:1.1rem;
  line-height:1.62;
  color:var(--text);
  text-wrap:pretty;
}

.toc{
  margin-top:2.25rem;
  padding-block:1.25rem;
  border-block:1px solid var(--line);
}
.toc-title{
  font-size:.735rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:.6rem;
}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;}
.toc li{counter-increment:toc;display:flex;gap:.7rem;}
.toc li::before{
  content:counter(toc,decimal-leading-zero);
  color:var(--text-mute);font-size:.8rem;
  font-variant-numeric:tabular-nums;
  padding-top:.62rem;
}
.toc a{
  display:block;padding-block:.45rem;
  color:var(--text-dim);font-size:.95rem;line-height:1.45;
  transition:color var(--t-fast);
}
.toc a:hover{color:var(--text);}

.post-body{margin-top:.5rem;font-size:1.05rem;overflow-wrap:break-word;}
.post-body > * + *{margin-top:1.15rem;}
.post-body p,.post-body li{color:var(--text-dim);text-wrap:pretty;}
.post-body h2{
  font-size:clamp(1.5rem,2.8vw,1.95rem);
  letter-spacing:-.028em;line-height:1.15;
  margin-top:3.1rem;
  scroll-margin-top:6rem;
}
.post-body h3{font-size:1.2rem;margin-top:2.1rem;}
.post-body h2 + *,.post-body h3 + *{margin-top:.9rem;}

.post a:not(.btn),.answer a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;
  text-underline-offset:.22em;
  transition:color var(--t-fast);
}
.post a:not(.btn):hover{color:var(--accent);}
.toc a,.more-posts a{text-decoration:none !important;}

.post-body ul,.post-body ol{padding:0;list-style:none;display:grid;gap:.6rem;}
.post-body ul > li{position:relative;padding-left:1.35rem;}
.post-body ul > li::before{
  content:"";position:absolute;left:.1rem;top:.72em;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent-2);
}
.post-body ol{counter-reset:item;}
.post-body ol > li{position:relative;padding-left:2.1rem;counter-increment:item;}
.post-body ol > li::before{
  content:counter(item);
  position:absolute;left:0;top:.2em;
  width:1.5rem;height:1.5rem;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line-2);
  font-size:.78rem;font-weight:600;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}

/* A sample text or email, set apart from the explanation around it */
.sample{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.1rem 1.3rem;
}
.sample-label{
  display:block;
  font-size:.735rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:.45rem;
}
.post-body .sample p{color:var(--text);}

.note{
  border-left:2px solid var(--line-2);
  padding-left:1.1rem;
  font-size:.95rem;
}
.post-body .note p{color:var(--text-dim);}

/* --text-mute passes 4.5:1 only on --ink. On --surface and --surface-2 it
   measured 4.22 and 3.92 (17 Sep 2026), so small text on cards uses --text-dim. */

/* ---- tables ------------------------------------------------------------------ */

.table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
}
.table-wrap:focus-visible{outline-offset:2px;}
.table-wrap table{width:100%;min-width:32rem;border-collapse:collapse;font-size:.94rem;}
.table-wrap caption{
  caption-side:top;text-align:left;
  padding:.95rem 1.1rem .2rem;
  font-size:.82rem;color:var(--text-dim);
}
.table-wrap th,.table-wrap td{
  text-align:left;vertical-align:top;
  padding:.8rem 1.1rem;
  line-height:1.5;
}
.table-wrap thead th{
  font-size:.735rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);
  border-bottom:1px solid var(--line-2);
}
.table-wrap tbody tr + tr > *{border-top:1px solid var(--line);}
.table-wrap tbody th{font-weight:600;color:var(--text);}
.table-wrap td{color:var(--text-dim);font-variant-numeric:tabular-nums;}

/* ---- end of a post ------------------------------------------------------------ */

.sources{
  margin-top:3.5rem;
  padding-top:1.75rem;
  border-top:1px solid var(--line);
}
.sources h2{font-size:1.2rem;letter-spacing:-.02em;scroll-margin-top:6rem;}
.sources p{margin-top:.5rem;font-size:.9rem;color:var(--text-mute);}
.sources ol{margin:1rem 0 0;padding-left:1.4rem;list-style:decimal;display:grid;gap:.45rem;}
.sources li{font-size:.92rem;color:var(--text-mute);padding-left:.25rem;}
.sources li::marker{font-variant-numeric:tabular-nums;}

.author-box{
  display:flex;gap:1rem;align-items:flex-start;
  margin-top:2.5rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.25rem 1.35rem;
}
.author-box img{
  width:64px;height:64px;flex:none;
  border-radius:50%;
  border:1px solid var(--line-2);
  object-fit:cover;
}
.author-box p{font-size:.95rem;color:var(--text-dim);line-height:1.6;}

.more-posts{margin-top:3rem;}
.more-posts h2{font-size:1.2rem;letter-spacing:-.02em;}
.more-posts ul{margin-top:.6rem;}
.more-posts li + li{border-top:1px solid var(--line);}
.more-posts a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px;padding-block:.75rem;
  color:var(--text-dim);font-weight:500;
  transition:color var(--t-fast);
}
.more-posts a::after{
  content:"";flex:none;width:.5rem;height:.5rem;
  border-right:1.5px solid var(--text-mute);border-top:1.5px solid var(--text-mute);
  transform:rotate(45deg);
}
.more-posts a:hover{color:var(--text);}

.cta-band p{max-width:34em;margin-inline:auto;}

/* ---- the list at /journal/ ------------------------------------------------------ */

.post-list{display:grid;gap:1rem;max-width:52rem;}
.post-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.5rem 1.65rem;
  transition:border-color var(--t),background var(--t);
}
.post-card:hover{border-color:var(--line-2);background:var(--surface-2);}
.post-card-meta{font-size:.85rem;color:var(--text-mute);}
.post-card h2{
  font-size:clamp(1.3rem,2.4vw,1.6rem);
  letter-spacing:-.026em;line-height:1.2;
  margin-top:.45rem;
}
/* The title link covers the whole card, so the card is one tap target. */
.post-card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.post-card h2 a:focus-visible{outline:none;}
.post-card h2 a:focus-visible::after{outline:2px solid var(--accent);outline-offset:3px;}
.post-card > p:last-child{margin-top:.6rem;color:var(--text-dim);font-size:.975rem;}

@media (max-width:560px){
  .answer{padding:1.15rem 1.2rem;font-size:1.04rem;}
  .post-body{font-size:1rem;}
  .post-card{padding:1.25rem 1.2rem;}
  .author-box{padding:1.1rem;}
}

@media print{
  .toc,.more-posts,.cta-band,.site-header,.site-footer{display:none;}
  .post a{color:inherit;}
}