/* Base styles mirrored from 1chooo.com (Inter, "rurikon" greys, Tailwind sizes) */
:root {
  --background: #fcf9f3;
  --rurikon-50: #ebedef;
  --rurikon-300: #8c95a1;
  --rurikon-400: #6b7480;
  --rurikon-500: #4a515b;
  --rurikon-600: #3b4149;
  --rurikon-800: #1e2125;
  --rurikon-border: #d8dbdfb3;
  --font-features: "cpsp" 1, "cv01", "cv03", "cv04", "calt", "ss03", "liga";
  --sans-variation: "opsz" 32;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; }

::selection { color: #485a74; background: #95a5ac40; }

body {
  background-color: var(--background);
  color: var(--rurikon-500);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: var(--font-features);
  font-variation-settings: "wght" 440, var(--sans-variation);
  font-variant: common-ligatures contextual;
  font-synthesis: none;
  letter-spacing: .0085em;
  word-spacing: -.04em;
  text-rendering: geometricPrecision;
  text-decoration-skip-ink: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-sm leading-6 / p-6 */
  font-size: .875rem;
  line-height: 1.5rem;
  padding: 1.5rem;
  width: 100%;
}

.layout { display: flex; flex-direction: column; }

/* nav */
.nav { width: 100%; }
.nav ul {
  font-family: "Lora", Georgia, serif; font-style: italic; font-variation-settings: normal;
  display: flex; gap: .5rem; justify-content: flex-end;
  text-align: right; text-transform: lowercase; margin-bottom: 1.5rem;
}
.nav li { margin: 0 -.5rem; color: var(--rurikon-300); transition: color .15s; }
.nav li:hover { color: var(--rurikon-600); }
.nav li.active { color: var(--rurikon-800); }
.nav a { display: inline-block; width: 100%; padding: 0 .5rem; color: inherit; text-decoration: none; }
@media (max-width: 29.99rem) {                    /* phones: the menu is a row; make its words easy to tap */
  .nav a { padding-block: .5rem; }
  .nav ul { margin-block: -.5rem 1rem; }
}

/* main column + hairline divider */
main { position: relative; flex: 1; max-width: 42rem; }
.divider {
  position: absolute; right: 0; width: 100%; height: 1px;
  background: var(--rurikon-border); opacity: .5; mix-blend-mode: multiply;
}
article { padding-top: 1.5rem; max-width: 42rem; }

h1 { font-variation-settings: "wght" 600, var(--sans-variation); font-weight: 600; color: var(--rurikon-600); margin-bottom: 1.75rem; text-wrap: balance; }
h2 { font-variation-settings: "wght" 600, var(--sans-variation); font-weight: 600; color: var(--rurikon-600); margin-top: 2.5rem; }
p { margin-top: 1.75rem; }
h1 + p { margin-top: 0; }

article a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
  text-decoration-color: var(--rurikon-300);
  transition: text-decoration-color .15s;
  overflow-wrap: break-word;
}
article a:hover { text-decoration-color: var(--rurikon-600); }

a:focus-visible {
  outline: 1px dotted var(--rurikon-400);
  outline-offset: 1px;
  border-radius: 2px;
}

/* simple list for thoughts/projects pages */
.list li { display: flex; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.list .meta { color: var(--rurikon-300); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ≥30rem (above every phone): nav becomes left column, divider vertical */
@media (min-width: 30rem) {
  .layout { flex-direction: row; }
  .nav { width: 4rem; margin-right: 1.5rem; }
  .nav ul { display: block; position: sticky; top: 1.5rem; margin-bottom: 0; }
  .divider { right: auto; left: 0; width: 1px; height: 100%; opacity: 1; }
  article { padding-top: 0; padding-left: 1.5rem; }
}

/* sm ≥40rem */
@media (min-width: 40rem) {
  body { padding: 2.5rem; font-size: 15px; line-height: 1.75rem; }
  .nav { margin-right: 2.5rem; }
  .nav ul { top: 2.5rem; }
  article { padding-left: 2.5rem; }
}

/* md ≥48rem */
@media (min-width: 48rem) {
  body { padding: 3.5rem; font-size: 1rem; line-height: 1.75rem; }
  .nav { margin-right: 3.5rem; }
  .nav ul { top: 3.5rem; }
  article { padding-left: 3.5rem; }
}