/* daniellejing.com — all the styling for the whole site lives here.
   Change a colour or size once and every page follows. */

:root {
  --ink: #14140f;
  --paper: #fdfcfa;
  --band: #f6f3ec;
  --muted: #55524a;
  --faint: #a09a8c;
  --rule: #eae6dd;
  --rule-soft: #ddd8cc;
  --accent: #7a5230;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- home ---------- */

.home {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.home-body {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
}

.card {
  display: flex;
  gap: 38px;
  align-items: center;
  max-width: 700px;
}

.portrait {
  width: 178px;
  height: 222px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

.intro {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.blurb {
  font-size: 20px;
  line-height: 1.52;
  letter-spacing: 0;
  font-weight: 300;
  text-wrap: pretty;
  max-width: 38ch;
  margin: 0;
  color: #6f6a5e;          /* the body of the sentence, softened */
}

/* the words that stay full-strength — <span class="lead">Currently</span> */
.blurb .lead { color: var(--ink); font-weight: 500; }

/* the year after each job in the ticker */
.ticker-run .yr { color: #a09a8c; }

/* the two lines sit in one group with their own spacing */
.blurbs { display: flex; flex-direction: column; gap: 15px; }

.hr { width: 40px; height: 1px; background: var(--rule-soft); }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 19px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.links a { border-bottom: 1px solid var(--rule-soft); padding-bottom: 1px; }
.links a.primary { border-bottom-color: var(--ink); }

/* ---------- ticker ----------
   Edit the lines inside <div class="ticker-run"> in index.html.
   Keep the two runs identical or the loop will jump. */

.ticker {
  border-top: 1px solid var(--ink);
  background: var(--band);
  overflow: hidden;
  padding: 10px 0;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-slide 38s linear infinite;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d6a5c;
  white-space: nowrap;
}

.ticker-run { display: flex; gap: 32px; flex: 0 0 auto; padding-right: 32px; }
.ticker-run .dot { color: #c2b9a6; }

@keyframes ticker-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; width: auto; }
  .ticker-run + .ticker-run { display: none; }
  .ticker { padding-left: 24px; overflow-x: auto; }
}

/* ---------- inner pages ---------- */

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 34px;
  border-bottom: 1px solid var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bar .right { color: var(--faint); }

.page { padding: 40px 34px 68px; }

.section-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a766c;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}

/* entry list */

.entries { max-width: 765px; }

.entry {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 17px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.entry .date {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: #8a8578;
}

.entry .title { font-size: 17px; font-weight: 400; }

.entry .tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
}

/* a single entry */

.post { max-width: 58ch; padding-top: 6px; }

.post .meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.post h1 {
  font-size: 31px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 15px 0 22px;
  text-wrap: pretty;
}

.post p {
  font-size: 17px;
  line-height: 1.72;
  color: #29271f;
  font-weight: 300;
  margin: 0 0 19px;
}

.post h2 {
  font-size: 19px;
  font-weight: 500;
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
}

.post img { max-width: 100%; display: block; margin: 30px 0; }

.post blockquote {
  margin: 30px 0;
  padding-left: 22px;
  border-left: 1px solid var(--rule-soft);
  color: var(--muted);
  font-style: italic;
}

.post .back {
  display: inline-block;
  margin-top: 34px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}

/* ---------- phones ---------- */

@media (max-width: 700px) {
  .home-body { padding: 38px 22px; }
  .card { flex-direction: column; gap: 24px; align-items: flex-start; }
  .portrait { width: 143px; height: 179px; }
  .blurb { font-size: 18.5px; }
  .bar { padding: 14px 19px; font-size: 10.5px; }
  .page { padding: 31px 19px 54px; }
  .entry { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .entry .date { grid-column: 1 / -1; }
  .post h1 { font-size: 24px; }
  .post p { font-size: 15px; }
}