@font-face {
  font-family: "Robit";
  src: url("fonts/T1Robit-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Robit";
  src: url("fonts/T1Robit-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Light";
  src: url("fonts/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Light";
  src: url("fonts/OpenSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans Regular";
  src: url("fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #f0f0ef;
  --line: #cccccc;
  --ink: #141313;
  --hover: #95927a;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

html {
  scroll-snap-type: y mandatory;
}

body {
  font-family: "Open Sans Light", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  --gutter: 48px;
}

h1, h2, h3, h4 {
  font-family: "Robit", sans-serif;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
}

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

/* background grid guides — header band only; scrolls away with the page
   rather than repeating behind all content down to the footer */
.grid-guides {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
  z-index: 0;
}
.grid-guides span {
  border-left: 0.25px solid var(--line);
  height: 100%;
}
.grid-guides span:last-child {
  border-right: 0.25px solid var(--line);
}

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 48px;
  border-bottom: 0.25px solid var(--line);
  scroll-snap-align: start;
}
.topbar .mark {
  font-family: "Robit", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 14px;
  text-decoration: none;
}
.topbar nav a {
  font-family: "Robit", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-decoration: none;
  margin-left: 32px;
}

.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  /* default (stretch): .feed fills the row height set by the sticky 100vh
     sidebar even when its own content is short, so its opaque background
     masks the decorative grid lines instead of leaving them exposed */
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 96px 64px 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--bg);
}

.sidebar h1 {
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
}

.sidebar .tagline {
  font-family: "Open Sans Light", sans-serif;
  font-style: italic;
  font-size: 15px;
  margin-top: 12px;
  color: var(--ink);
}

.sidebar .intro {
  margin-top: 28px;
  max-width: 34ch;
  font-size: 14px;
}

.sidebar nav {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar nav a {
  font-family: "Robit", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-decoration: none;
  width: fit-content;
}
.sidebar nav a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.feed {
  padding: 96px 0 96px 0;
  border-left: 0.25px solid var(--line);
  background: var(--bg);
}

.archive-year-block {
  margin-bottom: 56px;
}

.archive-year {
  font-weight: 700;
  font-size: 40px;
  margin-bottom: 8px;
  padding-right: var(--gutter);
  padding-left: 20px;
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.archive-item {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0 16px 20px;
  border-top: 0.25px solid var(--line);
  font-family: "Robit", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.archive-list .archive-item:last-child {
  border-bottom: 0.25px solid var(--line);
}

.archive-item .date {
  color: var(--hover);
}

.archive-item a {
  font-size: 16px;
  text-transform: uppercase;
}

.archive-item .cat {
  color: var(--hover);
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  padding-right: var(--gutter);
}

@media (max-width: 767px) {
  .archive-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .archive-item .cat {
    text-align: left;
  }
}

.post-card {
  padding-bottom: 64px;
  margin-bottom: 64px;
  border-bottom: 0.25px solid var(--line);
  scroll-snap-align: start;
}
.post-card:last-child {
  border-bottom: none;
}

.post-card img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 24px;
  filter: grayscale(4%);
}

.post-card .cap {
  font-size: 12px;
  font-style: italic;
  color: var(--hover);
  margin-top: -16px;
  margin-bottom: 20px;
  padding-right: var(--gutter);
  padding-left: 20px;
}

.post-card h2 {
  font-weight: 500;
  font-size: 24px;
  padding-right: var(--gutter);
  padding-top: 25px;
  padding-left: 20px;
  margin-bottom: 25px;
  border-top: 0.25px solid var(--line);
}

.post-card .body-copy {
  margin-top: 25px;
  max-width: 60ch;
  font-size: 14.5px;
  padding-right: var(--gutter);
  padding-left: 20px;
}
.post-card .body-copy p {
  margin: 0 0 16px;
}
.post-card .body-copy p:last-child {
  margin-bottom: 0;
}

.meta-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 30px;
  padding: 25px 0 12px 20px;
  border-top: 0.25px solid var(--line);
  font-family: "Robit", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.01em;
}
.meta-row:last-of-type {
  border-bottom: 0.25px solid var(--line);
}
.meta-row .label {
  color: var(--hover);
}
.meta-row > span:last-child {
  padding-right: var(--gutter);
}

.site-footer {
  position: relative;
  z-index: 2;
  margin-top: 0;
  border-top: 0.25px solid var(--line);
  background: var(--ink);
  color: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px var(--gutter) 20px var(--gutter);
  font-family: "Open Sans Regular", sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.01em;
  scroll-snap-align: end;
}
.site-footer a {
  color: var(--bg);
}
.site-footer a:hover {
  color: var(--hover);
}
.pagination {
  display: flex;
  align-items: center;
  gap: 24px;
}

.note {
  position: relative;
  z-index: 2;
  padding: 24px 48px 64px;
  font-size: 12px;
  color: var(--hover);
  border-top: 0.25px solid var(--line);
  max-width: 60ch;
}

/* Desktop (1440) is the baseline above; XL Desktop (1920) gets more breathing room */
@media (min-width: 1920px) {
  .sidebar { padding-left: 96px; }
  body { --gutter: 96px; }
}

/* Tablet (768) — feed keeps a left inset (no sidebar column to provide one),
   but padding-right stays 0 so borders still reach the true right edge;
   the gutter var handles right-side text inset instead */
@media (max-width: 1439px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; padding: 64px 32px 0; }
  .feed { border-left: none; padding: 48px 0 48px 32px; }
  body { --gutter: 32px; }
  .grid-guides { grid-template-columns: repeat(4, 1fr); }
}

/* Phone (375) */
@media (max-width: 767px) {
  .topbar { padding: 20px 20px; }
  .sidebar { padding: 40px 20px 0; }
  .sidebar h1 { font-size: 32px; }
  .feed { padding: 32px 0 32px 20px; }
  body { --gutter: 20px; }
  .post-card h2 { font-size: 19px; }
  .grid-guides { grid-template-columns: repeat(2, 1fr); }
}