/* ---------- Design tokens ---------- */
:root{
  --container: 1120px;
  --content: 68ch;
  --gutter: 1.25rem;
  --text: #1f2937;         /* slate-800 */
  --muted: #6b7280;        /* slate-500 */
  --line: #e5e7eb;         /* slate-200 */
  --bg: #ffffff;
}

/* ---------- Reset (lightweight) ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Base type ---------- */
body{
  font: 16px/1.65 ui-sans-serif, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wrap{ max-width: var(--container); margin: 0 auto; padding: var(--gutter); }

/* ---------- Header ---------- */
 .site-header { padding-block: 1rem; border-bottom: 1px solid var(--line); } 
 .site-title { font-weight: 700; text-decoration: none; color: inherit; letter-spacing: -0.01em; } 

.site-header .site-title{
  font-size: 1.35rem;   /* mobile/tablet */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media (min-width: 900px){
  .site-header .site-title{
    font-size: 1.6rem;  /* desktop */
  }
}

/* ---------- Layout ---------- */
.layout{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
}

/* ---------- Sidebar ---------- */
.sidebar { position: sticky; top: 1.25rem; align-self: start; }
.avatar img{
  width: 112px; height: 112px; border-radius: 9999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 1px 12px rgba(0,0,0,.06);
}
.quote{ margin: 1rem 0; color: var(--muted); font-size: .95rem; }
.quote p{ margin: 0 0 .35rem 0; }
.quote footer{ font-size: .92em; }

.links ul{ list-style: none; padding: 0; margin: .75rem 0 0; }
.links li + li { margin-top: .35rem; }
.links a{ color: inherit; text-decoration: none; }
.links a:hover{ text-decoration: underline; }

/* Inline links with "•" separators */
.sidebar .links ul{
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  display: flex;
  flex-wrap: wrap;           /* wrap on small screens */
  align-items: center;
}
.sidebar .links li{ display: inline; }
.sidebar .links li + li::before{
  content: "•";
  margin: 0 .55rem;
  color: var(--muted);
}
.sidebar .links a{
  text-decoration: none;
}
.sidebar .links a:hover{
  text-decoration: underline;
}


/* ---------- Content ---------- */
.content{ max-width: var(--content); }
.content > * + * { margin-top: 1rem; }

.lead{
  text-align: justify; text-justify: inter-word; hyphens: auto;
  font-size: 1.1rem; line-height: 1.6; margin: 0;
}

/* details blocks */
details{
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem .9rem;
  background: #fff;
}
details + details { margin-top: .9rem; }
details > summary{
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
details > summary::-webkit-details-marker{ display: none; }
details > summary::before{
  content: "\25B8";          /* caret */
  display: inline-block;
  margin-right: .5rem;
  transition: transform .2s ease;
}
details[open] > summary::before{ transform: rotate(90deg); }
details ul{ margin: .55rem 0 0 1.1rem; }
details li + li{ margin-top: .35rem; }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--line); padding-block: .55rem; }
.small{ font-size: .88rem; color: var(--muted); }
.site-footer p{ margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 920px){
  .layout{ grid-template-columns: 1fr; gap: 1.25rem; }
  .sidebar{ position: static; }
  .avatar img{ width: 96px; height: 96px; }
  .content{ max-width: 100%; }
}

/* unify small text (quote, links, footer) */
:root { --small-text: .90rem; }        /* taste: .88–.92rem */

.sidebar .quote,
.sidebar .quote footer,
.sidebar .links,
.sidebar .links a,
.site-footer,
.site-footer p {
  font-size: var(--small-text);
  line-height: 1.5;
}

/* unify text body size to medium */
:root { --body-text: 1rem; }  /* 16px; try 0.98–1.05 to taste */

.content { font-size: var(--body-text); line-height: 1.6; }

/* intro paragraph uses the same size as the rest */
.content .lead { font-size: var(--body-text); line-height: 1.6; }

/* collapsible sections use the same size too */
.content details { font-size: var(--body-text); line-height: 1.6; }
.content details summary { font-size: 1em; font-weight: 600; }

/* optional: nudge up slightly on wide screens */
@media (min-width: 1000px){
  :root { --body-text: 1.03rem; }  /* +3% on desktop if you like */
}

/* Block-justify the sidebar quote */
.sidebar .quote,
.sidebar .quote p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.sidebar .quote footer{
  display: block;
  margin-top: .35rem;
  text-align: left;        /* keep the attribution left */
}

/* Header links under the title, single line with dot separators */
.site-header .site-links{
  margin-top: .35rem;
  font-size: var(--small-text, .90rem); /* same small size you defined */
  line-height: 1.4;
  white-space: normal;                   /* allow wrap on small screens */
}

.site-header .site-links a{
  text-decoration: none;
  color: inherit;
  display: inline-flex;                  /* baseline consistency */
  align-items: baseline;
}

.site-header .site-links a + a::before{
  content: "•";
  color: var(--muted, #6b7280);
  margin: 0 .55rem;
}
.site-header .site-links a:hover{ text-decoration: underline; }