@font-face {
  font-family: "The Bold Font";
  src: url("../fonts/THEBOLDFONT-PRO.woff") format("woff");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* Natalie the Nerd — Workbench tokens (shared by shop, blog, links) */
  --ntn-ink: #141414;
  --ntn-paper: #f6f4ee;
  --ntn-white: #ffffff;
  --ntn-yellow: #ffcb35;
  --ntn-pink: #f78bbd;
  --ntn-muted: #555555;
  --ntn-grid: rgba(0, 0, 0, 0.06);
  --ntn-grid-size: 32px;

  --ntn-font-display: "The Bold Font", "Barlow", sans-serif;
  --ntn-font-body: "Barlow", system-ui, sans-serif;
  --ntn-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ntn-rule: 2px solid var(--ntn-ink);
  --ntn-rule-dashed: 1px dashed var(--ntn-ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { color: var(--ntn-ink); font-family: var(--ntn-font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }

.ntn-grid-bg {
  background-color: var(--ntn-paper);
  background-image:
    linear-gradient(var(--ntn-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ntn-grid) 1px, transparent 1px);
  background-size: var(--ntn-grid-size) var(--ntn-grid-size);
}

/* Title block: small mono label, big display title, optional caption, rule */
.ntn-title { display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; border-bottom: var(--ntn-rule); }
.ntn-title__label { font-family: var(--ntn-font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ntn-title__heading { margin: 0; font-family: var(--ntn-font-display); font-weight: 800; font-size: clamp(48px, 9vw, 112px); line-height: .95; }
.ntn-title__caption { font-family: var(--ntn-font-mono); font-size: 14px; text-transform: uppercase; }

/* Crop-mark frame for photos */
.ntn-crop { position: relative; margin: 6px; }
.ntn-crop::before, .ntn-crop::after, .ntn-crop > .ntn-crop__b::before, .ntn-crop > .ntn-crop__b::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--ntn-ink); pointer-events: none;
}
.ntn-crop::before { top: -6px; left: -6px; border-top-width: 2px; border-left-width: 2px; }
.ntn-crop::after { top: -6px; right: -6px; border-top-width: 2px; border-right-width: 2px; }
.ntn-crop > .ntn-crop__b::before { bottom: -6px; left: -6px; border-bottom-width: 2px; border-left-width: 2px; }
.ntn-crop > .ntn-crop__b::after { bottom: -6px; right: -6px; border-bottom-width: 2px; border-right-width: 2px; }
.ntn-crop img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ref tag (small black mono chip) */
.ntn-tag { display: inline-block; background: var(--ntn-ink); color: var(--ntn-paper); font-family: var(--ntn-font-mono); font-size: 12px; padding: 3px 7px; }
.ntn-tag--outline { background: transparent; color: var(--ntn-ink); border: 1px solid var(--ntn-ink); }

/* Buttons */
.ntn-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ntn-ink); color: var(--ntn-yellow); font-family: var(--ntn-font-mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 14px 18px; border: 0; text-decoration: none; cursor: pointer; }
.ntn-btn:hover { background: #000; color: var(--ntn-yellow); }
.ntn-btn--yellow { background: var(--ntn-yellow); color: var(--ntn-ink); border: var(--ntn-rule); }
.ntn-btn--yellow:hover { background: var(--ntn-ink); color: var(--ntn-yellow); }

/* Top bar */
.topbar { display: flex; align-items: center; gap: 28px; padding: 16px 48px; background: var(--ntn-ink); color: var(--ntn-paper); }
.topbar__logo img { display: block; width: 40px; height: 40px; object-fit: contain; }
.topbar__nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 24px; font-family: var(--ntn-font-mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.topbar__nav a { text-decoration: none; }
.topbar__nav a:hover, .topbar__nav a.is-active { color: var(--ntn-yellow); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 56px 48px; }
.page-title { margin-bottom: 48px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }

/* Post cards */
.post-list { display: flex; flex-direction: column; }
.post-card { display: flex; gap: 32px; padding: 28px 0; border-bottom: var(--ntn-rule-dashed); }
.post-card:first-child { padding-top: 0; }
.post-card__image { width: 200px; height: 150px; flex: none; }
.post-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.post-card__meta { font-family: var(--ntn-font-mono); font-size: 12px; text-transform: uppercase; color: var(--ntn-muted); display: flex; flex-wrap: wrap; gap: 6px; }
.post-card__meta a { text-decoration: none; }
.post-card__meta a:hover { color: var(--ntn-ink); background: var(--ntn-yellow); }
.post-card__title { margin: 0; font-family: var(--ntn-font-display); font-weight: 800; font-size: 28px; line-height: 1.1; }
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { background: linear-gradient(transparent 55%, var(--ntn-yellow) 55%, var(--ntn-yellow) 90%, transparent 90%); }
.post-card__excerpt { margin: 0; color: #333; }

/* Pagination */
.pagination { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-family: var(--ntn-font-mono); font-size: 13px; text-transform: uppercase; }
.pagination a { text-decoration: none; border-bottom: var(--ntn-rule); }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; gap: 32px; }
.sidebar__block { display: flex; flex-direction: column; gap: 12px; }
.sidebar__block p { margin: 0; font-size: 16px; }
.sidebar__box { border: 1px solid var(--ntn-ink); background: var(--ntn-white); padding: 20px; }
.sidebar__label { font-family: var(--ntn-font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.sidebar__avatar { width: 96px; height: 96px; }
.sidebar__avatar img { object-fit: contain; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list .ntn-tag { text-decoration: none; text-transform: uppercase; }
.tag-list .ntn-tag:hover { background: var(--ntn-yellow); }
.subscribe { display: flex; flex-direction: column; gap: 10px; }
.subscribe input { font-family: var(--ntn-font-mono); font-size: 14px; padding: 11px; border: 1px solid var(--ntn-ink); border-radius: 0; background: var(--ntn-white); }
.subscribe .ntn-btn { width: 100%; }
.subscribe__msg { display: none; font-family: var(--ntn-font-mono); font-size: 12px; }
.subscribe.success .subscribe__msg--ok, .subscribe.error .subscribe__msg--err { display: block; }
.subscribe.loading .ntn-btn { opacity: .6; }

/* Article */
.article { max-width: 860px; }
.ntn-title__heading--post { font-size: clamp(40px, 6vw, 72px); }
.ntn-title__caption a { text-decoration: none; }
.article__image { margin: 40px 6px; aspect-ratio: 16 / 9; }
.article__content { margin-top: 40px; font-size: 19px; line-height: 1.65; }
.article__content h2, .article__content h3 { font-family: var(--ntn-font-display); font-weight: 800; line-height: 1.1; margin: 1.6em 0 .5em; }
.article__content h2 { font-size: 36px; }
.article__content h3 { font-size: 26px; }
.article__content a { text-decoration: underline; text-decoration-color: var(--ntn-yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.article__content a:hover { background: var(--ntn-yellow); }
.article__content blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--ntn-yellow); font-style: italic; }
.article__content code { font-family: var(--ntn-font-mono); font-size: .85em; background: var(--ntn-white); border: 1px solid var(--ntn-ink); padding: 1px 5px; }
.article__content pre { font-family: var(--ntn-font-mono); font-size: 14px; background: var(--ntn-ink); color: var(--ntn-paper); padding: 20px; overflow-x: auto; }
.article__content pre code { background: none; border: 0; padding: 0; color: inherit; }
.article__content hr { border: 0; border-top: var(--ntn-rule-dashed); margin: 2.5em 0; }
.article__content img { display: block; height: auto; }
.kg-image-card, .kg-gallery-card, .kg-video-card, .kg-embed-card { margin: 2em 0; }
.kg-width-wide { margin-left: -80px; margin-right: -80px; }
.kg-width-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.kg-gallery-row { display: flex; gap: 8px; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
figcaption { font-family: var(--ntn-font-mono); font-size: 12px; color: var(--ntn-muted); margin-top: 8px; }
.kg-bookmark-card a { display: flex; border: 1px solid var(--ntn-ink); background: var(--ntn-white); text-decoration: none; }
.kg-bookmark-content { padding: 16px; flex: 1; }
.kg-bookmark-title { font-weight: 600; }
.kg-bookmark-description, .kg-bookmark-metadata { font-size: 14px; color: var(--ntn-muted); }
.kg-bookmark-thumbnail { width: 30%; position: relative; }
.kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Footer */
.footer { display: flex; flex-wrap: wrap; gap: 16px 40px; padding: 28px 48px; background: var(--ntn-ink); color: #bbb; font-family: var(--ntn-font-mono); font-size: 13px; text-transform: uppercase; }
.footer nav { margin-left: auto; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ntn-yellow); }

@media (max-width: 900px) {
  .topbar { padding: 14px 20px; gap: 16px; }
  .topbar__nav { gap: 14px; font-size: 12px; }
  .wrap { padding: 32px 20px; }
  .layout { grid-template-columns: 1fr; gap: 48px; }
  .post-card { flex-direction: column; gap: 16px; }
  .post-card__image { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .kg-width-wide { margin-left: 0; margin-right: 0; }
  .footer { padding: 24px 20px; }
  .footer nav { margin-left: 0; }
}