/* ============================================================
   unfinished thinking — shared magazine design system
   unfinishedthinking.ai · Michael Herrick
   No external requests. System/serif font stacks only.
   One restrained accent. Editorial, fast, timeless.
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root{
  /* Ink & paper — warm, low-glare, AA-contrast on body text */
  --paper:        #F6F4EE;   /* page background, warm off-white */
  --paper-raised: #FBFAF6;   /* cards / raised surfaces        */
  --paper-sunk:   #ECE8DE;   /* wells / quiet bands            */
  --ink:          #1B1A17;   /* body text — ~15:1 on paper     */
  --ink-soft:     #4A4641;   /* secondary text — ~8:1          */
  --ink-faint:    #726C63;   /* meta / captions — ~4.8:1 (AA)  */
  --rule:         #D8D2C6;   /* hairlines / borders            */

  /* The one restrained accent — a muted ink-red, "red pen" */
  --accent:       #9E2B25;   /* links, marks — ~6.3:1 on paper */
  --accent-deep:  #7A201C;   /* hover / pressed                */
  --accent-wash:  #F0E2DF;   /* badge / tint background        */

  /* Typography — serif system stacks, zero network */
  --font-display: "Hoefler Text","Iowan Old Style","Apple Garamond",
                  "Palatino Linotype",Palatino,"URW Palladio L",
                  Georgia,"Times New Roman",serif;
  --font-body:    "Iowan Old Style","Palatino Linotype",Palatino,
                  "Book Antiqua","URW Palladio L",Georgia,
                  "Times New Roman",serif;
  --font-meta:    ui-sans-serif,system-ui,-apple-system,
                  "Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Fluid type scale (min at 320px → max at 1200px) */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.06rem, 1.00rem + 0.30vw, 1.25rem);
  --step-1:  clamp(1.30rem, 1.18rem + 0.55vw, 1.66rem);
  --step-2:  clamp(1.58rem, 1.36rem + 1.00vw, 2.20rem);
  --step-3:  clamp(1.92rem, 1.55rem + 1.80vw, 2.95rem);
  --step-4:  clamp(2.34rem, 1.70rem + 3.10vw, 4.05rem);

  /* Spacing & measure */
  --space:    clamp(1.2rem, 0.9rem + 1.4vw, 2.2rem);
  --measure:  38rem;       /* ideal reading line length */
  --measure-wide: 66rem;   /* feature / grid container  */
  --radius:   2px;
}

/* ---- Reset-ish (a minimal reset is injected upstream) ----- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.62;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block; }

/* ---- Skip link (visible on focus) ------------------------- */
.skip-link{
  position:absolute;
  left:0.5rem; top:-4rem;
  z-index:100;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-meta);
  font-size:var(--step--1);
  padding:0.6rem 1rem;
  border-radius:var(--radius);
  text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:0.5rem; }

/* ---- Focus visibility ------------------------------------- */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* ---- Layout shell ----------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--measure-wide);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 0.5rem + 3vw, 3rem);
}
.measure{ max-width:var(--measure); }

/* ---- Masthead --------------------------------------------- */
.masthead{
  padding-block:clamp(1.6rem,1rem+2vw,2.6rem) clamp(1rem,0.6rem+1.5vw,1.8rem);
  border-bottom:1px solid var(--rule);
}
.masthead__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:0.5rem 1.5rem;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-2);
  letter-spacing:-0.015em;
  line-height:1;
  color:var(--ink);
  text-decoration:none;
  text-transform:lowercase;
}
.wordmark:hover,.wordmark:focus-visible{ color:var(--ink); }
.wordmark .thin{ font-style:italic; font-weight:400; }
.masthead__nav{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  letter-spacing:0.02em;
}
.masthead__nav a{
  color:var(--ink-soft);
  text-decoration:none;
  margin-left:1.2rem;
}
.masthead__nav a:first-child{ margin-left:0; }
.masthead__nav a:hover,.masthead__nav a:focus-visible{
  color:var(--accent); text-decoration:underline;
}
.tagline{
  margin-top:0.5rem;
  font-family:var(--font-meta);
  font-size:var(--step--1);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---- Intro blurb (home) ----------------------------------- */
.intro{
  padding-block:clamp(1.8rem,1.2rem+2vw,3rem);
  border-bottom:1px solid var(--rule);
}
.intro__lede{
  font-family:var(--font-display);
  font-size:var(--step-1);
  line-height:1.4;
  color:var(--ink);
  max-width:48rem;
  font-weight:400;
}
.intro__lede em{ color:var(--accent); font-style:italic; }
.intro__note{
  margin-top:1rem;
  color:var(--ink-soft);
  max-width:var(--measure);
}

/* ---- The UNFINISHED badge (the site's lifecycle marker) --- */
.badge-unfinished{
  display:inline-flex;
  align-items:center;
  gap:0.5ch;
  font-family:var(--font-meta);
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-deep);
  background:var(--accent-wash);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  padding:0.28em 0.7em 0.24em;
  border-radius:var(--radius);
  line-height:1;
  white-space:nowrap;
}
.badge-unfinished::before{
  content:"";
  width:0.5em; height:0.5em;
  border-radius:50%;
  background:var(--accent);
  flex:0 0 auto;
}
/* Finished (ratified) counterpart — quiet, for later use */
.badge-finished{
  display:inline-flex; align-items:center; gap:0.5ch;
  font-family:var(--font-meta);
  font-size:0.68rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--rule);
  padding:0.28em 0.7em 0.24em;
  border-radius:var(--radius); line-height:1;
}

/* The honest lifecycle note that rides under the badge */
.unfinished-note{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  color:var(--ink-faint);
  line-height:1.5;
  max-width:var(--measure);
}
.unfinished-note strong{ color:var(--ink-soft); font-weight:600; }

/* ---- Feed (index) ----------------------------------------- */
.feed{
  padding-block:clamp(1.6rem,1rem+2vw,2.8rem);
}
.feed__heading{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:1.5rem;
}

/* Feature (first / lead) item */
.feed__list{ list-style:none; margin:0; padding:0; }
.feed__item{
  padding-block:clamp(1.4rem,1rem+1.5vw,2.2rem);
  border-top:1px solid var(--rule);
}
.feed__item:first-child{ border-top:0; }

.entry-card{ display:block; }
.entry-card__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.8rem;
  margin-bottom:0.7rem;
}
.entry-card__date{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  color:var(--ink-faint);
  letter-spacing:0.02em;
}
.entry-card__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-2);
  line-height:1.14;
  letter-spacing:-0.012em;
  margin:0 0 0.5rem;
}
.entry-card__title a{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1.5px;
  background-position:0 92%;
  background-repeat:no-repeat;
  transition:background-size .2s ease;
}
.entry-card__title a:hover,
.entry-card__title a:focus-visible{
  color:var(--accent);
  background-size:100% 1.5px;
}
.entry-card__summary{
  color:var(--ink-soft);
  max-width:var(--measure);
  font-size:var(--step-0);
}
.entry-card__more{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  color:var(--accent);
  text-decoration:none;
  letter-spacing:0.02em;
  margin-top:0.6rem;
  display:inline-block;
}
.entry-card__more:hover,
.entry-card__more:focus-visible{ color:var(--accent-deep); text-decoration:underline; }

/* Lead treatment for the first feed item */
.feed__item--lead .entry-card__title{ font-size:var(--step-3); }

/* Empty-feed fallback (before any articles injected) */
.feed__empty{
  color:var(--ink-faint);
  font-style:italic;
}

/* Lead item gets a wider summary measure & a touch more air */
.feed__item--lead .entry-card__summary{
  font-size:var(--step-1);
  line-height:1.4;
  max-width:46rem;
  color:var(--ink-soft);
}

/* ---- Cards strip (home) — the Tetrads shelf ---------------- */
.cards-strip{
  margin-top:clamp(2rem,1.4rem+2vw,3.2rem);
  padding-top:clamp(1.6rem,1rem+2vw,2.6rem);
  border-top:1px solid var(--rule);
}
.cards-strip__intro{
  color:var(--ink-soft);
  max-width:var(--measure);
  margin:-0.6rem 0 1.4rem;
}
.cards-strip__list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));
  gap:clamp(1rem,0.7rem+1vw,1.5rem);
}
.card-chip{ display:flex; }
.card-chip__link{
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  width:100%;
  padding:clamp(1.1rem,0.8rem+1.2vw,1.5rem);
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink);
  transition:border-color .2s ease, transform .2s ease;
}
.card-chip__link:hover,
.card-chip__link:focus-visible{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));
  transform:translateY(-1px);
}
.card-chip__series{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.card-chip__no{ color:var(--accent-deep); font-weight:600; }
.card-chip__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-1);
  line-height:1.16;
  letter-spacing:-0.012em;
  color:var(--ink);
}
.card-chip__link:hover .card-chip__title,
.card-chip__link:focus-visible .card-chip__title{ color:var(--accent); }
.card-chip__subject{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.card-chip__subject b{ color:var(--ink-soft); font-weight:600; }
.card-chip__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.7rem;
  margin-top:0.2rem;
}
.card-chip__date{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  color:var(--ink-faint);
}

/* ---- Article (h-entry) ------------------------------------ */
.article{
  padding-block:clamp(1.8rem,1.2rem+2vw,3.2rem);
}
.article__header{ margin-bottom:clamp(1.6rem,1rem+2vw,2.6rem); }
.article__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem;
  margin-bottom:1rem;
}
.article__date{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  color:var(--ink-faint);
  letter-spacing:0.02em;
}
.article__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-4);
  line-height:1.08;
  letter-spacing:-0.018em;
  margin:0 0 0.7rem;
  max-width:18ch;
}
.article__standfirst{
  font-family:var(--font-display);
  font-size:var(--step-1);
  line-height:1.4;
  color:var(--ink-soft);
  font-style:italic;
  max-width:42rem;
}
.article__byline{
  margin-top:1rem;
  font-family:var(--font-meta);
  font-size:var(--step--1);
  color:var(--ink-faint);
}
.article__byline a{ color:var(--ink-soft); }

/* Article body: readable measure, generous rhythm */
.article__body{
  max-width:var(--measure);
  font-size:var(--step-0);
}
.article__body > * + *{ margin-top:1.15em; }
.article__body h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-2);
  line-height:1.2;
  letter-spacing:-0.01em;
  margin-top:2.2em;
}
.article__body h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-1);
  line-height:1.25;
  margin-top:1.8em;
}
.article__body a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.article__body a:hover,.article__body a:focus-visible{ color:var(--accent-deep); }
.article__body blockquote{
  margin-inline:0;
  padding-left:1.2rem;
  border-left:3px solid var(--accent);
  color:var(--ink-soft);
  font-style:italic;
  font-size:var(--step-1);
  line-height:1.45;
}
.article__body blockquote cite{
  display:block;
  margin-top:0.5rem;
  font-family:var(--font-meta);
  font-size:var(--step--1);
  font-style:normal;
  color:var(--ink-faint);
}
.article__body ul,.article__body ol{ padding-left:1.4rem; }
.article__body li + li{ margin-top:0.4em; }
.article__body hr{
  border:0;
  border-top:1px solid var(--rule);
  margin-block:2.4em;
}
.article__body figure{ margin-block:1.6em; }
.article__body figcaption{
  font-family:var(--font-meta);
  font-size:var(--step--1);
  color:var(--ink-faint);
  margin-top:0.5rem;
}
.article__body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.9em;
  background:var(--paper-sunk);
  padding:0.1em 0.35em;
  border-radius:var(--radius);
}
.article__body pre{
  overflow-x:auto;
  background:var(--paper-sunk);
  padding:1rem 1.1rem;
  border-radius:var(--radius);
  font-size:var(--step--1);
}
.drop-cap:first-letter{
  float:left;
  font-family:var(--font-display);
  font-weight:600;
  font-size:3.4em;
  line-height:0.78;
  padding:0.05em 0.12em 0 0;
  color:var(--accent);
}

/* Back-to-index */
.backlink{
  display:inline-flex; align-items:center; gap:0.4ch;
  font-family:var(--font-meta);
  font-size:var(--step--1);
  letter-spacing:0.02em;
  color:var(--ink-soft);
  text-decoration:none;
  margin-bottom:1.4rem;
}
.backlink::before{ content:"\2190"; color:var(--accent); }
.backlink:hover,.backlink:focus-visible{ color:var(--accent); }

/* ---- About page / h-card ---------------------------------- */
.page{ padding-block:clamp(1.8rem,1.2rem+2vw,3.2rem); }
.page__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-3);
  line-height:1.1;
  letter-spacing:-0.015em;
  margin:0 0 1.2rem;
}
.prose{ max-width:var(--measure); font-size:var(--step-0); }
.prose > * + *{ margin-top:1.1em; }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover,.prose a:focus-visible{ color:var(--accent-deep); }

/* The lettered UNFINISHED concept block */
.concept{
  margin-block:clamp(1.8rem,1.2rem+2vw,2.8rem);
  padding:clamp(1.2rem,0.9rem+1.4vw,2rem);
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
}
.concept dl{ margin:0; }
.concept dt{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-1);
  color:var(--accent);
  float:left;
  width:1.6em;
  line-height:1.3;
}
.concept dd{
  margin:0 0 0.6rem 1.9em;
  color:var(--ink-soft);
}
.concept dd:last-child{ margin-bottom:0; }
.concept dd b{ color:var(--ink); font-weight:600; }

/* h-card author block */
.h-card{
  margin-block:clamp(1.6rem,1rem+2vw,2.4rem);
  padding:clamp(1.2rem,0.9rem+1.4vw,1.8rem);
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  max-width:var(--measure);
}
.h-card .p-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--step-1);
  color:var(--ink);
  display:block;
  margin-bottom:0.3rem;
}
.h-card .p-note{ color:var(--ink-soft); font-size:var(--step-0); }
.h-card .u-url{ color:var(--accent); }

/* ---- Colophon / footer ------------------------------------ */
.colophon{
  margin-top:clamp(2.4rem,1.6rem+3vw,4rem);
  border-top:1px solid var(--rule);
  padding-block:clamp(1.6rem,1rem+2vw,2.6rem) clamp(2rem,1.4rem+2vw,3rem);
  font-family:var(--font-meta);
  font-size:var(--step--1);
  color:var(--ink-faint);
  line-height:1.6;
}
.colophon__byline{ max-width:44rem; }
.colophon__byline b{ color:var(--ink-soft); font-weight:600; }
.colophon__noads{
  margin-top:0.8rem;
  display:inline-block;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.68rem;
  color:var(--accent-deep);
}
.colophon__rule{ color:var(--rule); }
.colophon a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.colophon a:hover,.colophon a:focus-visible{ color:var(--accent); }

/* ---- Motion & print --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

@media print{
  :root{ --paper:#fff; --paper-raised:#fff; --ink:#000; --accent:#000; }
  body{ font-size:11pt; line-height:1.45; }
  .skip-link,.masthead__nav,.backlink,.entry-card__more{ display:none!important; }
  a{ color:#000; text-decoration:underline; }
  .article__body a[href]::after{ content:" (" attr(href) ")"; font-size:0.85em; color:#444; }
  .badge-unfinished{ border:1px solid #000; color:#000; background:none; }
  .concept,.h-card,.colophon{ border-color:#000; }
  .wrap{ max-width:none; }
}