/* ─── thanhwrites v2 — Ways of Seeing ─────────────────────────────────────────
   Helvetica Neue only. Black on white. Bold body. Underline on hover. */

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

:root {
  --ink: #000;
  --paper: #fff;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-label: 12px;
  --text-meta: 13px;
  --text-body: 15px;
  --leading-body: 23px;
  --gutter: 150px;
  --col: 500px;
  --content: 650px;
}

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

body {
  font-family: var(--font);
  font-weight: 700;              /* Ways of Seeing: body is bold */
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

/* ─── Links: plain by default, underline on hover ───────────────────────────── */

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Grid ──────────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Page header: back link + lowercase title ──────────────────────────────── */

.back-link {
  display: inline-block;
  font-size: var(--text-meta);
  font-weight: 400;
  padding-top: 38px;
}

.page-title {
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1.5px;
  padding-top: 18px;
  padding-bottom: 60px;
}

/* ─── Home diagram ──────────────────────────────────────────────────────────── */

.diagram {
  position: relative;
  width: 864px;
  height: 430px;
  /* vertically centered in the viewport, with a sane minimum */
  margin: max(80px, calc(50vh - 235px)) auto 0;
  max-width: calc(100vw - 48px);
}

.diagram .node {
  position: absolute;
  font-size: 44px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -1.5px;
}

/* geometry mirrors the Paper frame: columns 280px apart,
   equal 160px gaps above and below the middle row */
.node-root    { left: 10px;  top: 0;     }
.node-quotes  { left: 0;     top: 204px; width: 200px; text-align: center; }
.node-pixels  { left: 280px; top: 204px; width: 200px; text-align: center; }
.node-links   { left: 560px; top: 204px; width: 200px; text-align: center; }
.node-writing { left: 730px; top: 386px; }

.diagram svg.arrows {
  position: absolute;
  left: 0;
  top: 15px;
  width: 720px;
  height: 400px;
  overflow: visible;
  pointer-events: none;          /* let clicks reach links; re-enable per <a> */
}

.diagram svg.arrows a { pointer-events: auto; cursor: pointer; }
.diagram svg.arrows a:hover .line { stroke-width: 3; }

/* wide invisible stroke behind each arrow = generous hover/click target */
.diagram svg.arrows .hit {
  stroke: transparent;
  stroke-width: 36;
  fill: none;
}

/* ─── Quotes / quoteblog entries ────────────────────────────────────────────── */

.entry {
  display: flex;
  margin-bottom: 80px;
}

.entry .date,
.entry .gutter-label {
  width: var(--gutter);
  flex-shrink: 0;
  font-size: var(--text-label);
  line-height: 17px;
  font-weight: 400;
  padding-right: 24px;
  padding-top: 6px;
}

.entry .body { width: var(--col); }

.entry blockquote {
  font-size: 21px;
  line-height: 30px;
  font-weight: 700;
  white-space: pre-line; /* keep intentional line breaks (poems, haiku) */
}

.entry .source {
  display: block;
  margin-top: 10px;
  font-size: var(--text-label);
  font-weight: 400;
}

.entry .body img { width: 100%; }

.entry .video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.entry .video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 18px;
  font-size: var(--text-meta);
  font-weight: 400;
  padding-bottom: 100px;
}

.pagination .current {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pagination .older { font-weight: 700; }

/* ─── Writing list ──────────────────────────────────────────────────────────── */

.post-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 56px;
}

.post-row .post-text { flex: 1; }

.post-row h2 {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.post-row .excerpt {
  font-size: var(--text-body);
  font-weight: 400;
}

.post-row .thumb {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  object-fit: cover;
}

/* hover: underline the title when the whole row is the link */
a.post-row:hover { text-decoration: none; }
a.post-row:hover h2 { text-decoration: underline; text-underline-offset: 4px; }

/* ─── Article ───────────────────────────────────────────────────────────────── */

.article-title-row { display: flex; padding-bottom: 60px; }

.article-title-row .gutter {
  width: var(--gutter);
  flex-shrink: 0;
}

.article-title-row .title-block {
  width: var(--col);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.article-title-row h1 {
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1.5px;
}

.article-title-row .date {
  font-size: var(--text-label);
  font-weight: 400;
}

.article .row { display: flex; margin-bottom: 48px; }

.article .row .gutter {
  width: var(--gutter);
  flex-shrink: 0;
  font-size: var(--text-label);
  line-height: 17px;
  font-weight: 400;
  padding-right: 24px;
}

.article .row .body {
  width: var(--col);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.article .row .body img { width: 100%; }

.article .row blockquote {
  font-style: italic;
  font-weight: 400;
}

/* ─── Mobile ────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .page-title { font-size: 34px; }

  /* home: diagram collapses to a plain stack of links */
  .diagram { display: none; }
  .home-list { display: flex !important; }

  .entry,
  .article .row,
  .article-title-row { flex-direction: column; }

  .entry .date, .entry .gutter-label,
  .article .row .gutter,
  .article-title-row .gutter {
    width: auto;
    padding-bottom: 8px;
  }

  .entry .body, .article .row .body, .article-title-row .title-block { width: 100%; }
}

/* home fallback list, hidden on desktop */
.home-list {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding-top: 80px;
}

.home-list a {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
}