/* A personal site about me: one clean font, warm colors, one accent, thin lines and room to read.
   The page uses the full width of the screen; the text of a post keeps a readable line length. */
:root {
  /* The colors and font of toolscaled.com (toolscaledcore frontend/src/design/themes.ts). */
  color-scheme: light;
  --bg: #ffffff;
  --ink: #1f2328;
  --muted: #656d76;
  --line: #d0d7de;
  --accent: #0969da;
  --accent-hover: #0550ae;
  --panel: #f6f8fa;
  --glow: rgba(9, 105, 218, 0.08);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fast: 0.18s ease;
  --side: clamp(16px, 5vw, 72px);
  --wide: 1440px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b0b0c;
    --ink: #f0efec;
    --muted: #a4a09a;
    --line: #27272c;
    --accent: #d2ad6d;
    --accent-hover: #e2c184;
    --panel: #141416;
    --glow: rgba(210, 173, 109, 0.12);
  }
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
img { max-width: 100%; height: auto; }
pre { overflow-x: auto; }
blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 2px solid var(--accent); color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); }
time, .date, .muted { color: var(--muted); font-size: 14px; }

/* The full width, with the content inside a wide frame */
.bar, main { max-width: var(--wide); margin: 0 auto; padding: 0 var(--side); }

/* Top bar: my name, and a link to each section of the home page */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-bottom: clamp(28px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em 1.5em;
  padding-top: 18px;
  padding-bottom: 14px;
}
.site-header .name { font-weight: 750; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.2em 1.6em; font-size: 15px; }
.site-header nav a { color: var(--muted); text-decoration: none; transition: color var(--fast); }
.site-header nav a:hover { color: var(--accent); }

/* About me: the photo beside a few lines, in a soft card */
.intro {
  display: flex;
  gap: clamp(1.5em, 4vw, 3.5em);
  align-items: center;
  padding: clamp(24px, 5vw, 72px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: radial-gradient(70% 120% at 0% 0%, var(--glow), transparent 70%), var(--panel);
}
.intro .portrait { flex: 0 0 auto; width: clamp(120px, 16vw, 200px); height: clamp(120px, 16vw, 200px); object-fit: cover; border-radius: 50%; border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, 0.12); }
.intro h1 { margin: 0 0 0.3em; font-size: clamp(2.4em, 6vw, 4.6em); font-weight: 750; line-height: 1.05; letter-spacing: -0.045em; }
.intro h1 em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.02em; color: var(--accent); }
.intro p { margin: 0.5em 0; max-width: 40em; font-size: 18px; color: var(--muted); }

/* Home page sections: a small label and a heading on the left, the content on the right */
.section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: 1em clamp(2em, 5vw, 5em);
  padding: clamp(40px, 6vw, 80px) 0;
  border-bottom: 1px solid var(--line);
}
.section:last-child { border-bottom: 0; }
.label {
  margin: 0 0 0.4em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.section h2 { margin: 0; font-size: clamp(1.6em, 3.4vw, 2.1em); font-weight: 750; letter-spacing: -0.035em; }
.more { margin: 1.2em 0 0; font-size: 15px; font-weight: 600; }
.more a { text-decoration: none; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { padding: 1.4em 1.5em; border: 1px solid var(--line); border-radius: 16px; transition: transform var(--fast), border-color var(--fast); }
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.card h3 { margin: 0 0 0.4em; font-size: 1.25em; }
.card p { margin: 0 0 0.8em; color: var(--muted); font-size: 15px; }
.card .links { margin: 0; display: flex; gap: 1.2em; font-size: 14px; font-weight: 600; }
.card .links a { text-decoration: none; }

.writing { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.section .writing { border-top: 0; }
.section .writing li:first-child { padding-top: 0; }
.writing li { padding: 1.3em 0; border-bottom: 1px solid var(--line); }
.writing h3 { margin: 0.15em 0 0.35em; font-size: 1.3em; }
.writing h3 a { color: var(--ink); text-decoration: none; transition: color var(--fast); }
.writing h3 a:hover { color: var(--accent); }
.writing p { margin: 0; color: var(--muted); font-size: 15px; }

.time-card { padding: 1.4em 1.5em; border: 1px solid var(--line); border-radius: 16px; }
.time-card .headline { margin: 0 0 1em; }

.pills { display: flex; flex-wrap: wrap; gap: 0.6em; }
.pill {
  padding: 0.5em 1.2em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--fast), transform var(--fast);
}
.pill:hover { border-color: var(--accent); transform: translateY(-1px); }

/* Inner pages: a post, all posts, the time meter. The text keeps a readable line length. */
.page > * { max-width: 46rem; }
.page h1 { margin: 0 0 0.3em; font-size: clamp(1.9em, 4.5vw, 2.7em); font-weight: 750; line-height: 1.1; letter-spacing: -0.04em; }
.page h2 { font-size: 1.45em; margin-top: 1.8em; }
.page .date { margin-top: 0; }
.page .writing { margin-top: 1.5em; }

/* Subscribe section after a post: the Toolscaled form page in an iframe */
.subscribe { margin-top: 3em; padding: 1.4em 1.6em; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.subscribe h2 { font-size: 1.1em; margin: 0 0 0.5em; }
.subscribe iframe { display: block; width: 100%; border: 0; }
.subscribe p { margin-top: 0.3em; }

footer { margin-top: 4em; padding: 1.2em 0 2em; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* Time meter: one bar for each category of the week, a mark at the goal, and a column for each week */
.time-now { margin: 1.5em 0; }
.time-now .date { margin: 0; }
.headline { margin: 0.2em 0 0; }
.headline .number { font-size: 2.5em; font-weight: 750; letter-spacing: -0.04em; line-height: 1; margin-right: 0.2em; color: var(--accent); }
.time-now .muted { margin: 0.2em 0 0.6em; }
.time-bars { list-style: none; padding: 0; margin: 0.5em 0 1em; }
.time-bars li { margin-bottom: 0.6em; font-size: 15px; }
.time-bars .value { font-weight: 700; }
.time-bars .track { position: relative; display: block; height: 0.9em; margin-top: 0.2em; border: 1px solid var(--line); border-radius: 999px; }
.time-bars .fill { display: block; height: 100%; border-radius: 999px; }
.track .goal { position: absolute; top: -0.3em; bottom: -0.3em; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.column { position: relative; display: flex; flex-direction: column-reverse; height: 8em; border: 1px solid var(--line); border-radius: 6px; }
.column .goal { position: absolute; left: -0.3em; right: -0.3em; height: 3px; margin-bottom: -1.5px; background: var(--ink); }
.legend { font-size: 14px; color: var(--muted); }
.key { display: inline-block; width: 0.9em; height: 0.9em; margin: 0 0.3em 0 0.8em; border-radius: 2px; vertical-align: -0.1em; }
.legend .item { white-space: nowrap; }
.legend .item:first-child .key { margin-left: 0; }
.time-weeks h2 { font-size: 1.1em; }
.time-weeks ul { list-style: none; padding: 0; margin: 0 0 1em; display: flex; gap: 0.8em; overflow-x: auto; }
.time-weeks li { flex: 0 0 3em; text-align: center; }
.time-weeks .value { display: block; font-weight: 700; margin-top: 0.3em; }
.time-weeks time { display: block; }
.time-line { margin-top: 2em; }
.pager { display: flex; justify-content: space-between; margin: 0 0 1em; }
.pager a[rel="next"] { margin-left: auto; }

/* Phones */
@media (max-width: 800px) {
  .section { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-header { position: static; }
  .intro { flex-direction: column; align-items: flex-start; gap: 1em; }
  .intro .portrait { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}