/* ============================================================
   MinChi Park — About page (also used by Bookmarks)
   Requires shared.css for tokens, header, footer, 3D book.
   ============================================================ */

body > .site-head {
  padding: 48px 48px 0;
}

body > .footer {
  padding: 0 48px 64px;
}

.page {
  --pad: 48px;
  width: 100%;
  padding: 0 var(--pad) 0;
  position: relative;
  counter-reset: ref note;
}

/* text column stays readable; sidenotes live in the space to its right */
.site-head,
.hero,
.section,
.footer {
  max-width: 760px;
}

/* hero */

.hero-line {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}

/* sections */

.section {
  position: relative; /* sidenotes anchor to the section, not the line */
  margin-top: 72px;
}

.section p { text-wrap: pretty; }
.section p:not(.about-line) + p:not(.about-line),
.section p + .item-list,
.section p + .plain-list,
.section .item-list + p,
.section p + .shelf-card { margin-top: 16px; }

.section .shelf-card + .item-list {
  margin-top: 24px;
  margin-bottom: 24px;
}

.section-head {
  font-size: inherit;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 10px;
}

/* bookshelf link — bare row of covers */

.shelf-card {
  display: block;
  margin: 24px 0;
  padding: 32px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.shelf-card:hover {
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  background-color: color-mix(in srgb, var(--ink) 4.5%, transparent);
}

.shelf-label {
  display: block;
  margin-bottom: 28px;
}

.shelf-view {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  width: fit-content;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 120ms ease;
}

.shelf-card:hover .shelf-view {
  text-decoration-color: color-mix(in srgb, var(--ink) 85%, transparent);
}

.shelf-strip {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.shelf-strip .book-scene {
  --bw: 138px;
  --bh: 207px;
}

@media (hover: hover) and (pointer: fine) {
  .book-scene:hover .b-image {
    transform: perspective(2000px) translateX(calc(var(--bw) * -0.027)) rotateY(-12deg) scaleX(0.96);
    box-shadow:
      10px 10px 20px rgba(0, 0, 0, 0.25),
      20px 20px 40px rgba(0, 0, 0, 0.2),
      40px 40px 60px rgba(0, 0, 0, 0.15);
  }

  .book-scene:hover .b-light {
    opacity: 0.2;
    transform: perspective(2000px) rotateY(-12deg);
  }

  .book-scene:hover .b-effect {
    margin-left: 4.5%;
  }

  .book-scene:hover .b-page:nth-child(1) {
    transform: translateX(calc(var(--bw) * 0.018));
  }

  .book-scene:hover .b-page:nth-child(2) {
    transform: translateX(calc(var(--bw) * 0.009));
  }
}

/* lists & links */

.item-list {
  list-style-type: circle;
  padding-left: 1.3em;
}

.item-list li {
  padding: 3px 0;
  line-height: 1.5;
  text-wrap: pretty;
}

.item-list li::marker { color: var(--ink-faint); }

/* bare list: no bullets, one item per line */
.plain-list { list-style: none; }

.plain-list li {
  padding: 6px 0;
  text-wrap: pretty;
}

/* label sits on its own line above the link */
.line-label {
  display: block;
  color: var(--ink-soft);
}

/* numbered sidenotes — margin notes on wide screens, hidden otherwise */

.ref-mark {
  counter-increment: ref;
  display: none; /* footnotes are a wide-screen feature */
}

.ref-mark::before {
  content: counter(ref);
  font-size: 12px;
  color: var(--ink-soft);
}

/* link underlines pick up an olive green that sits well on the paper */
.page a {
  text-decoration-color: #0BA1FF;
}

.page a:hover {
  text-decoration-color: #0778c2;
}

/* footnoted phrases — linked or not — get a darker green dotted line,
   so annotations read differently from plain links */
.noted,
.page a:has(+ .ref-mark) {
  text-decoration: underline dotted #C98210;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.page a:has(+ .ref-mark):hover {
  text-decoration-color: #9a6209;
}

.sidenote {
  counter-increment: note;
  display: none; /* hidden below the margin-note breakpoint */
  padding-left: 14px;
  border-left: 1px dotted color-mix(in srgb, var(--ink) 45%, transparent);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.sidenote::before {
  content: "№ " counter(note) "\00a0\00a0";
  color: var(--ink-soft);
}

@media (min-width: 1160px) {
  .ref-mark { display: inline; }

  .sidenote {
    display: block;
    position: absolute;
    left: calc(100% + 48px);
    top: 0;
    /* as wide as the free space allows, up to 420px */
    width: min(420px, calc(100vw - 904px));
    margin: 0;
    /* hidden until you hover the phrase it belongs to */
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, visibility 0s linear 400ms;
  }

  .sidenote.show,
  .sidenote:hover {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

/* full-width table-of-contents list: link · dotted leader · date */

.section-wide { max-width: none; }

/* prose inside a wide section keeps its readable measure */
.section-wide > p { max-width: 760px; }

.toc-list {
  list-style: none;
  padding-left: 0;
}

.toc-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
}

.toc-list .leader {
  flex: 1;
  min-width: 32px;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 40%, transparent);
  transform: translateY(-4px);
}

.toc-list .date {
  color: var(--ink-soft);
  white-space: nowrap;
}

/* quote-style aside: italic with a dotted rule like the sidenotes */
.quote {
  font-style: italic;
  color: var(--ink-soft);
  border-left: 1px dotted color-mix(in srgb, var(--ink) 45%, transparent);
  padding-left: 16px;
  margin: 16px 0;
}

@media (max-width: 600px) {
  body > .site-head { padding: 44px 20px 0; }
  body > .footer { padding: 0 20px 48px; }
  .page { --pad: 20px; padding: 0 var(--pad) 0; }
  .section { margin-top: 36px; }
}

@media (max-width: 720px) {
  .shelf-strip .book-scene {
    --bw: 96px;
    --bh: 144px;
  }
}

@media (max-width: 480px) {
  .shelf-strip { gap: 10px; }
  .shelf-strip .book-scene:nth-child(5) { display: none; }
  .shelf-strip .book-scene {
    --bw: 72px;
    --bh: 108px;
  }
}

.shelf-view svg { display: block; }

/* first section sits the same distance below the header on every page */
.site-head + .section {
  margin-top: 0;
}

/* about: one statement per line, tightly stacked */
.about-line {
  text-wrap: pretty;
}

.about-line + .about-line {
  margin-top: 6px;
}

/* the opening statement of the About section, in the old hero size */
.about-lead {
  font-size: 28px;
  line-height: 1.4;
  margin-bottom: 20px;
  text-wrap: balance;
}

@media (max-width: 600px) {
  .about-lead { font-size: 22px; }
}

/* the personal line under the opening statement */
.about-sub {
  margin-bottom: 20px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

@media (max-width: 700px) {
  /* title on its own line, date beneath it */
  .toc-list li {
    display: block;
    padding: 8px 0;
  }

  .toc-list .leader { display: none; }

  .toc-list .date {
    display: block;
    margin-top: 2px;
  }
}