/* sum28 tutorials — visual language per ohm design tokens.
   paper #F6F3EC · ink #26221C · stone #A19883 · bronze #8E7554 (one accent
   per screen) · oak #C0A57D · glass #D9DDD6. Weights 300/400/500 only. */

:root {
  --paper: #F6F3EC;
  --ink: #26221C;
  --stone: #A19883;
  --bronze: #8E7554;
  --oak: #C0A57D;
  --glass: #D9DDD6;
  --hairline: rgba(161, 152, 131, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.7 "Helvetica Neue", Helvetica, -apple-system,
        "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

b, strong { font-weight: 500; }
h1, h2, h3 { font-weight: 400; line-height: 1.3; }
h1 { font-size: 1.85rem; margin: .3rem 0 1.2rem; letter-spacing: -.01em; }
h2 { font-size: 1.28rem; margin: 2.3rem 0 .7rem; }
h3 { font-size: 1.02rem; font-weight: 500; margin: 1.8rem 0 .5rem; }
p, ul, ol { margin: .8em 0; }
li { margin: .25em 0; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--stone);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--bronze); }

.layout { display: flex; min-height: 100vh; }

/* -- sidebar ------------------------------------------------------------ */
.sidebar {
  width: 284px;
  flex: none;
  border-right: 1px solid var(--hairline);
  padding: 30px 24px 40px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  display: block;
  font-size: .82rem;
  letter-spacing: .28em;
  text-decoration: none;
  margin-bottom: 5px;
}
.brand-sub { color: var(--stone); font-size: .72rem; letter-spacing: .06em; }
.nav-section { margin-top: 24px; }
.nav-label {
  font-size: .66rem;
  letter-spacing: .22em;
  color: var(--stone);
  margin-bottom: 7px;
}
.sidebar a {
  display: block;
  text-decoration: none;
  font-size: .875rem;
  padding: 3px 0 3px 11px;
  border-left: 2px solid transparent;
}
.sidebar a:hover { border-left-color: var(--stone); }
.sidebar a[aria-current] { border-left-color: var(--bronze); color: var(--bronze); }

/* -- main --------------------------------------------------------------- */
main { flex: 1; min-width: 0; padding: 46px 60px 30px; }
article { max-width: 760px; }
.nav-toggle { display: none; }

blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--oak);
}
blockquote p { margin: .4em 0; }

code {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: .06em .35em;
  font-size: .85em;
}
pre {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.55;
}
pre code { background: none; border: none; padding: 0; font-size: .85rem; }

/* booktabs: horizontal rules only, stone hairlines, no zebra */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.3em 0;
  font-size: .92rem;
  font-variant-numeric: tabular-nums lining-nums;
  border-bottom: 1px solid var(--stone);
}
th {
  font-weight: 500;
  text-align: left;
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  padding: 8px 14px 8px 0;
}
td { padding: 8px 14px 8px 0; vertical-align: top; border: none; }

hr { border: none; border-top: 1px solid var(--hairline); margin: 2.6em 0; }

footer {
  color: var(--stone);
  font-size: .78rem;
  margin-top: 4.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}
footer a { color: var(--stone); }

/* -- small screens ------------------------------------------------------ */
@media (max-width: 900px) {
  .layout { display: block; }
  .sidebar {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding: 22px 20px;
  }
  .sidebar .nav-section { display: none; }
  .sidebar.open .nav-section { display: block; }
  .nav-toggle {
    display: inline-block;
    margin: 14px 0 0;
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--ink);
    font: 400 .72rem/1 "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: .22em;
    padding: 7px 12px;
  }
  main { padding: 6px 20px 30px; }
}