/* Jae Kim — jaegk.com clone
   Font: Proxima Nova (Squarespace/Adobe) → Montserrat (free, metrically close).
   Values calibrated to computed styles measured from the live original. */

:root {
  --ink: #121212;      /* headings / brand name */
  --near-black: #1f1f1f; /* nav links, list text */
  --body: #666666;     /* body copy */
  --muted: #a3a3a3;    /* current nav item / forthcoming rows */
  --tag: #aaaaaa;      /* tagline */
  --bg: #ffffff;
  --sidebar-w: 400px;
  --gutter: 20px;
  --pad: 80px;
  --bleed: 72px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: "Montserrat", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  font-weight: 400;
}

a { color: var(--near-black); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
em { font-style: italic; }

/* ---- Layout: content left, sidebar right ---- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: var(--gutter);
  padding: var(--pad);
  align-items: start;
}
.content { min-width: 0; }
.sidebar { display: flex; flex-direction: column; align-self: stretch; }

/* ---- Sidebar branding ---- */
.brand-name {
  font-size: 27px; font-weight: 700; color: var(--ink);
  line-height: 1.2; letter-spacing: normal; margin: 0;
}
.brand-name a { color: var(--ink); }
.brand-name a:hover { text-decoration: none; }
.brand-tagline {
  font-size: 12px; color: var(--tag);
  letter-spacing: 0.04em; margin: 6px 0 30px;
}

/* ---- Nav (16px / 500; current item muted, others near-black) ---- */
.site-nav { display: flex; flex-direction: column; }
.site-nav a {
  color: var(--near-black); font-size: 16px; font-weight: 500;
  line-height: 25.6px; padding: 3.2px 0; width: fit-content;
  letter-spacing: normal;
}
.site-nav a:hover { text-decoration: none; opacity: 0.7; }
.site-nav a.active { color: var(--muted); }

/* ---- Social ---- */
.social { display: flex; gap: 16px; margin-top: 28px; }
.social a { color: #111; line-height: 0; }
.social svg { width: 17px; height: 17px; fill: currentColor; }

/* trailing sidebar text (about bio, contact info) */
.sidebar-text { color: var(--body); margin-top: 10px; }
.sidebar-text p { margin: 0 0 14px; }
.sidebar-text .spacer-lg { margin-top: 300px; }

.sidebar-footer { margin-top: auto; padding-top: 46px; font-size: 12px; color: var(--tag); }

/* ---- Content typography ---- */
.content h1 {
  font-size: 18px; font-weight: 700; color: var(--ink);
  margin: 0 0 20px; letter-spacing: normal;
}
.content h2 {
  font-size: 13px; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 54px 0 30px;
}
.content p { margin: 0 0 14px; max-width: 60ch; }
.subhead { color: var(--near-black); margin: 0 0 2px; }
.meta { font-size: 13px; color: var(--body); }

.hero { margin: 0; }
.portrait { margin: 0; }
/* Landscape banner images (home hero, about portrait) bleed left to nearly fill
   the column, matching the original's full-width image blocks. */
.hero img,
.portrait.landscape img {
  width: calc(100% + var(--bleed)); max-width: none; margin-left: calc(-1 * var(--bleed));
}
/* Tall portrait (contact) keeps its natural narrower band, as in the original. */
.portrait.tall img { width: 100%; max-width: 590px; }

/* Book page — single column, cover large at top */
.book-cover { max-width: 680px; margin: 0 0 26px calc(-1 * var(--bleed) / 2); }
.logos { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; margin: 0 0 44px; }
.logos img { height: 56px; width: auto; }
.logos .crescent { height: 50px; }

.book-title { margin-bottom: 14px; }
.btn {
  display: inline-block; background: #111; color: #fff; border: 1px solid #111;
  padding: 12px 26px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; margin: 12px 0 8px;
}
.btn:hover { opacity: 0.85; text-decoration: none; }

.praise blockquote { margin: 0 0 40px; padding: 0; max-width: 62ch; }
.praise blockquote p { margin: 0 0 8px; font-style: normal; color: var(--body); }
.praise cite {
  display: block; text-align: right; font-style: normal;
  font-size: 13px; color: var(--body);
}

/* Publication lists — plain, no dividers */
.pub-list { list-style: none; padding: 0; margin: 0 0 10px; max-width: 62ch; color: var(--near-black); }
.pub-list li { padding: 6px 0; }
.pub-list a { color: var(--near-black); }
.pub-list .forthcoming, .pub-list .forthcoming a { color: var(--muted); }
.pub-list .type { color: inherit; }

.section-lead { margin-top: 8px; }

/* ---- Mobile ---- */
.nav-toggle { display: none; }

@media (max-width: 820px) {
  :root { --pad: 26px; --bleed: 0px; }
  .book-cover { margin-left: 0; }
  .layout { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .sidebar {
    order: -1; padding: 26px 26px 20px; border-bottom: 1px solid #eee;
  }
  .content { padding: 30px 26px 40px; }
  .brand-tagline { margin-bottom: 16px; }
  .nav-toggle {
    display: block; background: none; border: 0; color: var(--ink);
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; padding: 6px 0; cursor: pointer;
  }
  .site-nav { display: none; margin-top: 10px; }
  .site-nav.open { display: flex; }
  .sidebar-text { margin-top: 18px; }
  .sidebar-text .spacer-lg { margin-top: 24px; }
  .sidebar-footer { margin-top: 24px; }
  .book-cover { max-width: 300px; }
}