/* Josh Hickson Solutions — the index that hosts the projects.
   Shares the type system with the project pages (same author) but inverts the
   palette, so stepping into a project is a visible change of context. */

:root {
  --paper:  #F7F7F5;
  --ink:    #14161A;
  --muted:  #6A7078;
  --rule:   #DCDCD6;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --w: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root { --paper: #101216; --ink: #E8EAED; --muted: #8A929C; --rule: #262A31; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: clamp(2rem, 1rem + 5vw, 5rem) clamp(1.25rem, .5rem + 3vw, 2rem) 4rem;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(15px, .95rem + .15vw, 17px)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--paper);
              padding: .5rem 1rem; font: 400 .8rem/1 var(--mono); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sol-head, .sol-nav, main, .sol-foot { max-width: var(--w); margin-inline: auto; }

h1 {
  font: 600 clamp(1.9rem, 1.3rem + 2.6vw, 3rem)/1.05 var(--mono);
  letter-spacing: -.04em; margin: 0;
}
.sub { color: var(--muted); margin: .75rem 0 0; max-width: 34ch; }

.sol-nav {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin: 2.5rem auto 0; padding: .85rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font: 400 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.sol-nav a { color: var(--muted); text-decoration: none; }
.sol-nav a:first-child { color: var(--ink); }
.sol-nav a:hover { color: var(--ink); }

.projects { list-style: none; margin: 0; padding: 0; }
.projects li { padding: 3rem 0; border-bottom: 1px solid var(--rule); }

.meta {
  display: flex; gap: 1.5rem; margin: 0 0 1rem;
  font: 400 .72rem/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.projects h2 { font: 600 1.6rem/1.2 var(--mono); letter-spacing: -.03em; margin: 0 0 1rem; }
.projects h2 a { color: inherit; text-decoration: none;
                 box-shadow: 0 2px 0 var(--rule); }
.projects h2 a:hover { box-shadow: 0 2px 0 var(--ink); }
.projects p { margin: 0 0 1rem; }

/* The honesty note is set apart, not tucked into the prose. */
.note {
  border-left: 2px solid var(--rule); padding-left: 1rem;
  font: 400 .85rem/1.6 var(--sans); color: var(--muted); max-width: 44ch;
}
.note a { color: inherit; }

.links { display: flex; gap: 1.25rem; font: 400 .76rem/1 var(--mono);
         letter-spacing: .08em; text-transform: uppercase; margin: 1.5rem 0 0; }
.links a { color: var(--muted); text-decoration: none; }
.links a:hover { color: var(--ink); }
/* A domain is read, not scanned as a label: keep it in the case it is typed. */
.links a.site { text-transform: none; letter-spacing: .02em; }

.sol-foot { margin-top: 3rem; font: 400 .74rem/1 var(--mono);
            letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Small screens. The nav and project links were 12px tall — a third of what a
   thumb needs — and the section rhythm was set for a desktop column. */
@media (max-width: 46rem) {
  .projects li { padding: 2rem 0; }
  .sol-nav { gap: 1rem 1.25rem; margin-top: 1.75rem; }
  .meta { gap: 1rem; }
  .projects h2 { font-size: 1.35rem; }
  .note { font-size: .88rem; }
}

@media (pointer: coarse) {
  .sol-nav a, .links a, .projects h2 a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .sol-nav { padding-block: .25rem; }
  .links { flex-wrap: wrap; gap: .5rem 1.25rem; }
}

@media (max-width: 46rem) {
  .sol-nav, .sol-foot, .meta, .links { font-size: .8rem; }
}