/* harpreet.one — rebuilt from the original harpreet.pro theme (2017).
   Palette, proportions and card treatment recovered from the archived
   assets/css/main.css. Floats replaced with flex; tokens kept, except where
   the originals failed contrast (see --muted / --accent-text below). */

/* Self-hosted so verse metrics are guaranteed. The auto-fit in the verse
   section below is calibrated against THIS font; a fallback face is wider and
   would overflow, so font-display is `block` rather than `swap` — better a
   brief invisible pass than a reflow into the wrong metrics. */
@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* decorative brand teal, straight from the 2017 site */
  --accent: #1abc9c;
  /* darker teal for anything that is actually text (4.82:1 on white) */
  --accent-text: #0d8168;
  --bg: #fcfcfc;
  --card: #ffffff;
  --card-alt: #fbfbfb;
  --border: #eeeeee;
  --border-strong: #dddddd;
  --ink: #333333;
  --body: #666666;
  /* original was #aaa at 2.32:1, which fails; this is 4.54:1 */
  --muted: #767676;
  --shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
  --sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

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

body {
  margin: 0;
  padding: 0;
  font: 400 14px/1 var(--sans);
  color: var(--body);
  background: var(--bg);
  box-shadow: inset 0 15px 0 var(--accent);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { line-height: normal; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: var(--body); }
img { max-width: 100%; height: auto; display: block; border: 0; }

/* ---------- layout ---------- */

.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 20px;
  display: flex;
  align-items: flex-start;
  gap: 4%;
}

.user-profile {
  flex: 0 0 28%;
  padding: 20px 0 0;
  text-align: center;
  position: sticky;
  top: 40px;
}

.the-content { flex: 1 1 68%; min-width: 0; }

/* ---------- sidebar ---------- */

.user-profile .avatar {
  width: 140px;
  height: 140px;
  margin: 0 auto 25px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: color .15s linear, box-shadow .15s linear;
}
.user-profile .avatar:hover {
  color: var(--accent-text);
  box-shadow: var(--shadow), 0 0 0 3px rgba(26, 188, 156, 0.18);
}
.user-profile .avatar svg { width: 96px; height: 96px; display: block; }

.user-profile .my-name {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--ink);
}
.user-profile .my-name a { color: inherit; }
.user-profile .my-name a:hover { color: var(--accent-text); }

.user-profile .my-job-title {
  font-size: 14px;
  font-weight: 300;
  margin: 5px 0 0;
  color: var(--muted);
}

.user-profile .mainmenu { margin: 40px 0; }
.user-profile .mainmenu a {
  display: block;
  max-width: 300px;
  margin: 0 auto;
  padding: 15px 0;
  border: 1px solid var(--border);
  border-top: none;
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: all .1s linear;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}
.user-profile .mainmenu a:first-of-type { border-top: 1px solid var(--border); }
.user-profile .mainmenu a:hover,
.user-profile .mainmenu a.active {
  background: #f9f9f9;
  box-shadow: var(--shadow), inset 4px 0 0 var(--accent);
  color: var(--ink);
}

.user-profile .about-me {
  font-size: 16px;
  line-height: 26px;
  margin: 30px 0 0;
  text-align: left;
}

/* ---------- content ---------- */

.section-label {
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 400;
  margin: 0 0 20px;
  text-align: center;
}

.post {
  position: relative;
  margin: 40px 0 0;
  padding: 40px 40px 80px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
}
.post:first-of-type { margin: 0; }
.post.page { padding: 40px; }

.post-header ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.post-header ul li {
  position: relative;
  margin: 0 0 0 10px;
  padding: 0 0 0 12px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.post-header ul li:first-of-type { margin: 0; padding: 0; }
.post-header ul li:first-of-type::before { content: none; }
.post-header ul li::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
  content: "";
  transform: translate(0, -50%);
}

.post.page .post-header { text-align: center; }
.post.page .post-header ul { justify-content: center; }
.post.page { padding: 56px 40px 60px; }

.post-header h1, .post-header h2 {
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 20px;
  color: var(--ink);
  text-wrap: balance;
}
.post-header h1 a, .post-header h2 a { color: var(--ink); }
.post-header h1 a:hover, .post-header h2 a:hover { color: var(--accent-text); }

.post-content { font-size: 16px; line-height: 26px; container-type: inline-size; }
.post-content p { margin: 15px 0; line-height: 27px; }
.post-content a { color: var(--accent-text); border-bottom: 1px solid var(--accent); }
.post-content a:hover { border-bottom-color: var(--accent-text); }
.post-content em, .post-content strong { color: var(--ink); }

/* ---------- verse ---------- */

/* A line of verse must never wrap: a broken line reads as two lines and
   destroys the metre. Two mechanisms, in order of importance:
     1. white-space: nowrap  — the hard guarantee. Lines cannot break.
     2. the --em auto-fit    — keeps that guarantee from costing a scrollbar.
   --em is the width of that poem's own longest line, in em, measured in
   Roboto 400 (see linewidths.json). Type runs at the full 16px wherever it
   fits and scales down only as far as it must. */
.verse {
  --em: 20;
  color: var(--body);
  font-size: clamp(10px, calc(100cqi / var(--em)), 20px);
  line-height: 1.85;
  overflow-x: auto;
}
.verse .line {
  display: block;
  white-space: nowrap;
}
.verse .stanza { margin: 0 0 1.6em; }
.verse .stanza:last-child { margin-bottom: 0; }
.verse .part {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 2.6em 0 1.4em;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
}
.verse .part:first-child { margin-top: 0; }

/* On a poem page the verse block is only as wide as that poem's longest line
   and sits centred, so a short-lined poem reads as a poem on a page rather
   than text stranded in the left third of a wide card. Index excerpts stay
   flush left, where they line up with the card's title and meta. */
.post.page .verse {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.verse.excerpt .stanza { margin-bottom: 0; }

/* ---------- post footer ---------- */

.post-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid var(--border);
  background: var(--card-alt);
  display: flex;
  align-items: stretch;
}
.post-footer .read-more {
  padding: 0 24px;
  min-height: 48px;
  line-height: 48px;
  border-right: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all .1s linear;
}
.post-footer .read-more:hover { background: var(--card); color: var(--accent-text); }
.post-footer .meta {
  margin-left: auto;
  padding: 0 20px;
  min-height: 48px;
  line-height: 48px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--muted);
}

/* ---------- pagination ---------- */

.pagination {
  position: relative;
  margin: 40px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pagination a, .pagination span {
  padding: 14px 20px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--body);
  transition: all .1s linear;
}
.pagination a:hover {
  background: var(--accent-text);
  color: #fff;
  border-color: var(--accent-text);
}
.pagination span { visibility: hidden; }

/* ---------- footer ---------- */

.site-footer {
  margin: 50px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.site-footer a { color: var(--muted); border-bottom: 1px solid var(--border-strong); }
.site-footer a:hover { color: var(--accent-text); border-color: var(--accent-text); }

/* ---------- focus ---------- */

a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.user-profile .mainmenu a:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- responsive ---------- */

@media screen and (max-width: 900px) {
  body { box-shadow: inset 0 10px 0 var(--accent); }
  .wrapper { flex-direction: column; padding: 46px 20px; gap: 0; }
  .user-profile { position: static; width: 100%; flex: none; margin: 0 0 34px; padding: 0; }
  .the-content { width: 100%; flex: none; }

  /* the poems are the point of the site, so the reader should reach them
     without scrolling past a full author bio first */
  .user-profile .avatar { width: 92px; height: 92px; margin-bottom: 16px; }
  .user-profile .avatar svg { width: 62px; height: 62px; }
  .user-profile .mainmenu { margin: 24px 0 0; }
  .user-profile .about-me { display: none; }
}

@media screen and (max-width: 640px) {
  .post, .post.page { padding: 24px 22px 76px; }
  .post.page { padding-bottom: 24px; }
  .post.page .post-header { text-align: center; }
.post.page .post-header ul { justify-content: center; }
.post.page { padding: 56px 40px 60px; }

.post-header h1, .post-header h2 { font-size: 24px; }
  .post-footer .meta { display: none; }
}

/* On a phone the poem IS the page: drop the card chrome so the verse gets the
   full width of the screen, which buys it a larger type size. */
@media screen and (max-width: 640px) {
  .wrapper { padding: 40px 13px; }
  .post, .post:first-of-type { padding: 22px 14px 72px; }
  .post.page {
    padding: 4px 0 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
}