/* Direction 1d — "Snið"
   Dark sticky rail against a warm paper field. Work Sans for reading,
   IBM Plex Mono for every label, number and piece of structure. */

:root {
  --paper: #e8e5df;
  --ink: #101010;
  --ink-muted: #3a3a38;
  --panel: #101010;
  --panel-ink: #f0eee9;

  --rule: rgba(16, 16, 16, 0.18);
  --rule-panel: rgba(240, 238, 233, 0.2);
  --dim: rgba(16, 16, 16, 0.55);
  --dim-panel: rgba(240, 238, 233, 0.55);

  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rail-w: 420px;
  --gutter: clamp(20px, 5vw, 40px);
  --rail-pad: clamp(28px, 5vw, 36px);

  /* Content column at the 1440px reference width, used for `sizes`. */
  --content-w: min(940px, calc(100vw - var(--rail-w) - var(--gutter) * 2));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a:hover {
  opacity: 0.62;
}

a:focus-visible,
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

img {
  display: block;
  max-width: 100%;
}

picture {
  display: block;
}

h1,
h2,
h3 {
  font-weight: 400;
  margin: 0;
}

p {
  margin: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--panel);
  color: var(--panel-ink);
  padding: 12px 18px;
  font: 500 13px/1 var(--mono);
  z-index: 10;
}

.skip:focus {
  left: 0;
}

/* ---------------------------------------------------------------- layout */

.layout {
  display: block;
  max-width: 1440px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ rail */

.rail {
  background: var(--panel);
  color: var(--panel-ink);
  padding: var(--rail-pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.rail-mark {
  width: 64px;
  height: auto;
  margin-bottom: 26px;
  /* The mark is black line art on transparency — flip it for the dark rail. */
  filter: invert(1);
}

.rail-word {
  font: 600 clamp(26px, 6vw, 30px) / 1 var(--mono);
  letter-spacing: -0.01em;
}

.rail-eyebrow {
  font: 400 11px/1.6 var(--mono);
  letter-spacing: 0.26em;
  color: var(--dim-panel);
  margin-top: 8px;
}

.rail-hr {
  height: 1px;
  background: var(--rule-panel);
  margin: 28px 0;
  border: 0;
}

.rail-intro {
  font: 300 17px/1.55 var(--sans);
  color: rgba(240, 238, 233, 0.9);
  margin-bottom: 20px;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font: 500 13.5px/1 var(--mono);
  letter-spacing: 0.06em;
}

.rail-nav a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(240, 238, 233, 0.18);
  padding-bottom: 9px;
}

.rail-nav span:last-child {
  color: rgba(240, 238, 233, 0.45);
}

.rail-name {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.2em;
  color: var(--dim-panel);
  margin-bottom: 12px;
}

.rail-bio {
  font: 300 15px/1.6 var(--sans);
  color: rgba(240, 238, 233, 0.8);
  margin-bottom: 22px;
}

.rail-creds {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-panel);
}

.rail-creds div {
  display: grid;
  gap: 5px;
}

.rail-creds b {
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.16em;
  color: rgba(240, 238, 233, 0.75);
}

.rail-creds span {
  font: 300 13.5px/1.55 var(--sans);
  color: rgba(240, 238, 233, 0.6);
}

.rail-contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 500 clamp(15px, 4vw, 17px) / 1.55 var(--mono);
}

.rail-address {
  font: 400 11px/1.7 var(--mono);
  letter-spacing: 0.04em;
  color: rgba(240, 238, 233, 0.45);
  margin-top: 14px;
}

/* --------------------------------------------------------------- content */

.content {
  min-width: 0;
}

.content-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 var(--gutter);
  padding: 40px 0 14px;
  border-bottom: 1px solid var(--rule);
}

.content-head b {
  font: 600 11.5px/1.4 var(--mono);
  letter-spacing: 0.22em;
}

.content-head span {
  font: 400 11.5px/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: var(--dim);
}

/* --------------------------------------------------------------- project */

.project {
  margin: 0 var(--gutter);
  padding-top: 26px;
}

.project + .project {
  padding-top: 34px;
}

.project img {
  width: 100%;
  height: clamp(240px, 43vw, 620px);
  object-fit: cover;
}

.project--md img {
  height: clamp(220px, 39vw, 560px);
}

.project-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px 0 34px;
  border-bottom: 1px solid var(--rule);
}

.project-meta h2 {
  font: 400 clamp(21px, 3vw, 26px) / 1.2 var(--sans);
  margin-bottom: 6px;
}

.project-cat {
  font: 500 11.5px/1.4 var(--mono);
  letter-spacing: 0.1em;
  color: var(--dim);
}

.project-desc {
  font: 300 15px/1.65 var(--sans);
  color: var(--ink-muted);
}

.project-stamp {
  font: 400 11px/1.9 var(--mono);
  letter-spacing: 0.05em;
  color: var(--dim);
}

/* ------------------------------------------------------------------ pair */

.pair {
  margin: 0 var(--gutter);
  padding-top: 34px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 24px;
}

.pair img {
  width: 100%;
  height: clamp(200px, 26vw, 300px);
  object-fit: cover;
}

.pair h3 {
  font: 400 clamp(18px, 2.2vw, 20px) / 1.25 var(--sans);
  margin: 14px 0 6px;
}

.pair p {
  font: 400 11px/1.8 var(--mono);
  letter-spacing: 0.06em;
  color: var(--dim);
}

/* ------------------------------------------------------------------ note */

.note {
  margin: 0 var(--gutter);
  padding-top: 40px;
}

.note-inner {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: space-between;
  align-items: flex-end;
}

.note p {
  font: 400 13px/1.7 var(--mono);
  color: rgba(16, 16, 16, 0.6);
  max-width: 520px;
}

.note a {
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------- cta */

.cta {
  margin: 44px var(--gutter);
  background: var(--panel);
  color: var(--panel-ink);
  padding: clamp(28px, 5vw, 40px) clamp(24px, 4vw, 36px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: space-between;
  align-items: flex-end;
}

.cta h2 {
  font: 300 clamp(26px, 4vw, 34px) / 1.15 var(--sans);
  max-width: 420px;
}

.cta-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 500 clamp(16px, 3.4vw, 17px) / 1.5 var(--mono);
}

.colophon {
  margin: 0 var(--gutter) 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font: 400 11px/1.7 var(--mono);
  letter-spacing: 0.05em;
  color: var(--dim);
}

/* --------------------------------------------------------- 700px and up */

@media (min-width: 700px) {
  .project-meta {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .project-stamp {
    grid-column: 2;
    text-align: right;
  }

  .pair {
    grid-template-columns: 1fr 1fr;
  }

  .cta-links {
    text-align: right;
  }
}

/* -------------------------------------------------------- 1080px and up */

@media (min-width: 1080px) {
  .layout {
    display: flex;
    align-items: flex-start;
  }

  .rail {
    position: sticky;
    top: 0;
    flex: none;
    width: var(--rail-w);
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    justify-content: space-between;
    padding: 40px 36px;
  }

  .content {
    flex: 1;
  }

  .project-meta {
    grid-template-columns: 1fr 1fr 210px;
  }

  .project-stamp {
    grid-column: 3;
  }
}

/* ------------------------------------------------------- wider than 1440 */

/* The layout caps at 1440, so past that the rail would stop short of the left
   edge and float on the paper. Painting the body behind it lets it read as a
   panel that runs off the screen, which is the whole point of the direction.
   50% - 300px is where the rail ends once a 1440 layout is centred. */
@media (min-width: 1441px) {
  body {
    background: linear-gradient(
      to right,
      var(--panel) 0 calc(50% - 300px),
      var(--paper) calc(50% - 300px)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}