/* siamand.cc — writing. Sans for structure, serif for reading. */
:root {
  --bg: #fcfcfb;
  --ink: #14161a;
  --ink-2: #4e5564;
  --ink-3: #868c99;
  --line: #e4e4e1;
  --rule: #d9d9d6;
  --link: #2a4ea8;
  --mark: rgba(42, 78, 168, .10);
  --amber: #e4941b;
  --amber-ink: #8a5405;
  --amber-soft: #fdf1dc;
  --amber-line: #f2d9ae;
  --accent-soft: #eef2fb;

  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --read: "New York", ui-serif, "Iowan Old Style", Charter, "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 36rem;
  --step: 1.1875rem;        /* 19px body */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101216;
    --ink: #e9ebef;
    --ink-2: #a7adba;
    --ink-3: #7b818e;
    --line: #262930;
    --rule: #2f333b;
    --link: #9dbaf5;
    --mark: rgba(157, 186, 245, .14);
    --amber: #f5b74e;
    --amber-ink: #f7c76f;
    --amber-soft: #2a2114;
    --amber-line: #4a3a1c;
    --accent-soft: #171c27;
  }
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--step)/1.72 var(--read);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 0 1.5rem;
}
.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--mark); }

/* the only chrome */
.home {
  display: inline-flex; align-items: center; gap: .5rem; padding: 2.25rem 0 0;
  font: 600 .8rem/1 var(--display); letter-spacing: .01em; color: var(--ink-3);
}
.home .mark {
  width: auto; height: 1.35rem; display: block;
  color: var(--ink-2);
  transition: color .15s ease, transform .15s ease;
}
.home:hover { color: var(--ink); text-decoration: none; }
.home:hover .mark { color: var(--ink); transform: translateY(-1px); }

/* ---------- index ---------- */
.lead { padding: 4rem 0 1rem; }
.lead h1 {
  font-family: var(--display); font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--ink);
}
.lead p { margin-top: .85rem; font-family: var(--display); font-size: 1.05rem; font-weight: 450; color: var(--ink-2); letter-spacing: -.005em; }
.list { list-style: none; padding: 2rem 0 5rem; }
.list li { padding: 1.75rem 0; border-top: 1px solid var(--line); }
.list li:last-child { border-bottom: 1px solid var(--line); }
.list time {
  display: block; font: 500 .72rem/1 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.list a {
  display: block; margin-top: .55rem;
  font-family: var(--display); font-size: 1.45rem; font-weight: 650; letter-spacing: -.028em;
  line-height: 1.18; color: var(--ink); text-wrap: balance;
}
.list a:hover { color: var(--link); text-decoration: none; }
.list li p { margin-top: .5rem; font-size: 1.02rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ---------- article ---------- */
article { padding: 3.5rem 0 0; }
article > time {
  display: block; font: 500 .72rem/1 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
article h1 {
  margin: 1.1rem 0 .9rem;
  font-family: var(--display); font-size: clamp(2.2rem, 6.4vw, 3.15rem); font-weight: 700;
  letter-spacing: -.042em; line-height: 1.02; text-wrap: balance;
}
article .sub {
  margin: 0 0 2.75rem;
  font-family: var(--display); font-size: 1.22rem; font-weight: 450; line-height: 1.42;
  letter-spacing: -.012em; color: var(--ink-2); text-wrap: pretty;
}
/* the opening paragraph carries a little more weight */
article .sub + p { font-size: 1.32rem; line-height: 1.6; color: var(--ink); margin-bottom: 1.6rem; }
article p { margin: 0 0 1.4rem; text-wrap: pretty; hanging-punctuation: first last; }
article h2 {
  margin: 3.25rem 0 1.1rem;
  font-family: var(--display); font-size: 1.45rem; font-weight: 650;
  letter-spacing: -.028em; line-height: 1.25; text-wrap: balance;
}
article h2 + p { margin-top: 0; }
article strong { font-weight: 650; }
article em { font-style: italic; }
article ul, article ol { margin: 0 0 1.5rem 1.35rem; }
article li { margin: .45rem 0; padding-left: .2rem; }
article li::marker { color: var(--ink-3); }
article blockquote {
  margin: 0 0 1.5rem; padding: .1rem 0 .1rem 1.25rem; border-left: 2px solid var(--rule);
  font-style: italic; color: var(--ink-2);
}
article pre {
  margin: 0 0 1.6rem; padding: 1.1rem 1.2rem; overflow-x: auto;
  background: rgba(128, 128, 128, .08); border: 1px solid var(--line); border-radius: .6rem;
  font: .8rem/1.7 var(--mono); color: var(--ink);
}
article :not(pre) > code {
  font: .86em var(--mono); background: rgba(128, 128, 128, .12);
  border-radius: 4px; padding: .1em .32em;
}
article hr { border: 0; border-top: 1px solid var(--line); margin: 2.75rem 0; }
article .tags {
  margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font: 500 .76rem/1.9 var(--mono); letter-spacing: .02em; color: var(--ink-3);
}

/* ---------- foot ---------- */
.end {
  border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.5rem 0 4rem;
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  font: 500 .78rem/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
.end a { color: var(--ink-3); }
.end a:hover { color: var(--ink); }

@media (max-width: 34rem) {
  body { font-size: 1.125rem; padding: 0 1.25rem; }
  article .sub + p { font-size: 1.2rem; }
  article h2 { margin-top: 2.5rem; }
}


/* ---------- colour and shape ---------- */

/* the honest label on posts about my own projects */
article .almost-ad {
  position: relative;
  margin: -1.4rem 0 2.6rem; padding: .85rem 1rem .85rem 1.1rem;
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: .85rem;
  font: 500 .88rem/1.7 var(--display); color: var(--ink-2); letter-spacing: -.005em;
}
article .almost-ad .flag {
  display: inline-block; padding: .22rem .6rem; border-radius: 999px;
  background: var(--amber); color: #2a1c05;
  font: 700 .68rem/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; margin-right: .45rem; vertical-align: .08em;
}
article .almost-ad strong { color: var(--ink); font-weight: 650; }
article .almost-ad a { color: var(--amber-ink); font-weight: 600; text-decoration: none; }
article .almost-ad a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* headings get a small coloured marker */
article h2 { position: relative; padding-left: 1.1rem; }
article h2::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .45rem; height: .45rem; border-radius: 2px;
  background: var(--link); transform: rotate(45deg);
}

/* quotes and code, warmer */
article blockquote {
  border-left: 3px solid var(--amber); background: var(--amber-soft);
  border-radius: 0 .6rem .6rem 0; padding: .8rem 1rem; font-style: normal;
}
article pre {
  background: var(--accent-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--link); border-radius: .2rem .7rem .7rem .2rem;
}

/* tags become chips */
article .tags { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .4rem; }
article .tags .tag {
  display: inline-block; padding: .25rem .6rem; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--line);
  font: 500 .74rem/1.3 var(--mono); color: var(--ink-2); letter-spacing: .02em;
}

/* index: a coloured dot per kind, and the ad flag where it applies */
.list li { position: relative; padding-left: 1.4rem; }
.list li::before {
  content: ""; position: absolute; left: 0; top: 2.05rem;
  width: .5rem; height: .5rem; border-radius: 999px; background: var(--link);
}
.list li.is-ad::before { background: var(--amber); border-radius: 2px; transform: rotate(45deg); }
.list .row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.list .chip {
  display: inline-block; padding: .18rem .5rem; border-radius: 999px;
  background: var(--amber); color: #2a1c05;
  font: 700 .62rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.lead h1 { position: relative; display: inline-block; }
.lead h1::after {
  content: ""; display: block; width: 2.6rem; height: .3rem; border-radius: 999px;
  background: var(--amber); margin-top: .7rem;
}


/* ---------- pull quotes and side panels ---------- */
article blockquote.pull {
  margin: 2.4rem 0; padding: 0 0 0 1.2rem;
  border-left: 3px solid var(--amber); background: none; border-radius: 0;
}
article blockquote.pull p {
  margin: 0; font-family: var(--display); font-weight: 650;
  font-size: 1.42rem; line-height: 1.28; letter-spacing: -.028em;
  color: var(--ink); text-wrap: balance;
}
article .panel {
  margin: 2rem 0; padding: 1.15rem 1.25rem 1.2rem;
  background: var(--accent-soft);
  border: 1px solid var(--line); border-top: 2px solid var(--link);
  border-radius: .2rem .2rem .5rem .5rem;
}
article .panel p { margin: 0 0 .65rem; font-size: 1rem; line-height: 1.58; color: var(--ink-2); }
article .panel p:last-child { margin-bottom: 0; }
article .panel strong { color: var(--ink); }
article .panel ul { margin: 0; padding: 0; list-style: none; font-size: 1rem; }
article .panel li {
  position: relative; margin: .4rem 0; padding-left: .95rem;
  line-height: 1.5; color: var(--ink-2);
}
article .panel li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .3rem; height: .3rem; border-radius: 1px;
  background: var(--link); transform: rotate(45deg);
}
article .panel .panel-label {
  font: 700 .66rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--link); margin: 0 0 .55rem;
}

/* side notes sit inside the text column and the prose wraps around them */
@media (min-width: 46rem) {
  article .panel.side {
    float: right; clear: right;
    width: 14.5rem; max-width: 42%;
    margin: .4rem 0 1.2rem 1.8rem;
    padding: .9rem 1rem .95rem;
  }
  article .panel.side p, article .panel.side ul, article .panel.side li {
    font-size: .92rem; line-height: 1.5;
  }
  article .panel.side .panel-label { font-size: .62rem; }
}

/* the wide one is a full-measure aside, amber rather than blue */
article .panel.wide {
  background: var(--amber-soft); border-top-color: var(--amber);
}
article .panel.wide .panel-label { color: var(--amber-ink); }
article .panel.wide li::before { background: var(--amber); }

article h2, article blockquote.pull, article .panel.wide, article pre { clear: both; }
article::after { content: ""; display: block; clear: both; }