/* fromscrat.ch — minimal typographic. Self-contained, no external deps. */
:root{
  --ink:#1b1b1a; --muted:#6a6a66; --bg:#fcfcf9; --rule:#e6e4dc;
  --accent:#8a5a2b; --accent-ink:#6b4420; --max:44rem;
}
*{box-sizing:border-box}
html{font-size:19px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,"Times New Roman",serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.masthead{
  max-width:var(--max); margin:0 auto; padding:1.4rem 1.25rem 0;
}
.masthead a{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; border:0;
}
.masthead a:hover{color:var(--accent-ink)}
main{max-width:var(--max); margin:0 auto; padding:1.5rem 1.25rem 4rem}

/* headings */
h1.title{
  font-size:2rem; line-height:1.2; font-weight:600; text-align:left;
  margin:1.2rem 0 .3rem; letter-spacing:-.01em;
}
main>h2:first-of-type,          /* the subtitle right under the title */
.subtitle{color:var(--muted); font-weight:400; font-style:italic; font-size:1.15rem; margin:.1rem 0 2rem}
h2{font-size:1.4rem; font-weight:600; margin:2.4rem 0 .6rem; line-height:1.25}
h3{font-size:1.15rem; font-weight:600; margin:1.8rem 0 .4rem}
h4{font-size:1rem; font-weight:600; margin:1.4rem 0 .3rem}
.section-number-2,.section-number-3,.section-number-4{color:var(--muted); font-weight:400; margin-right:.4em}

/* links */
a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule)}
a:hover{color:var(--accent-ink); border-bottom-color:var(--accent)}

/* table of contents */
#table-of-contents{
  margin:2rem 0 2.5rem; padding:1rem 1.25rem; background:#fff;
  border:1px solid var(--rule); border-radius:6px;
}
#table-of-contents h2{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-family:ui-sans-serif,system-ui,sans-serif; margin:.1rem 0 .6rem}
#table-of-contents ul{list-style:none; margin:.2rem 0; padding-left:1rem}
#table-of-contents>#text-table-of-contents>ul{padding-left:0}
#table-of-contents a{border:0; color:var(--ink)}
#table-of-contents a:hover{color:var(--accent)}

/* body text */
p{margin:0 0 1.1rem}
ul,ol{margin:0 0 1.1rem; padding-left:1.4rem}
li{margin:.25rem 0}
blockquote{margin:1.2rem 0; padding-left:1rem; border-left:3px solid var(--rule); color:var(--muted)}
img{max-width:100%; height:auto}
hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0}

/* code */
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em}
pre{background:#f4f3ee; border:1px solid var(--rule); border-radius:6px; padding:.8rem 1rem; overflow:auto}
code{background:#f4f3ee; padding:.1em .35em; border-radius:3px}
pre code{background:none; padding:0}

/* tables */
table{border-collapse:collapse; width:100%; margin:1.2rem 0; font-size:.95rem}
th,td{border:1px solid var(--rule); padding:.4rem .6rem; text-align:left; vertical-align:top}
th{background:#f4f3ee}

/* org export odds & ends */
.todo{color:#b00; font-weight:600}.done{color:#2a7}.timestamp{color:#aaa}
.outline-text-2,.outline-text-3,.outline-text-4{margin-top:.4rem}

.colophon{
  max-width:var(--max); margin:0 auto; padding:2rem 1.25rem 3rem;
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border-top:1px solid var(--rule);
}
@media (max-width:480px){ html{font-size:17px} h1.title{font-size:1.6rem} }