/* Quiet marks in the notebook margins. No content, spacing or hit areas change. */
:root { --margin-ink: #293da03b; }
.hero-statement::before,
.hero-statement::after,
.about-copy::after,
.resume-date::before,
.resume-date::after,
.chronicle-entry::before,
.projects-count::before,
.skills-heading::before,
.skills-heading::after,
.contact-inner::before,
.contact-inner::after,
.detail-intro::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* A pair of quiet crop marks frames the cover text without enclosing it. */
.hero-statement::before {
  width: 28px; height: 28px; top: -20px; left: -20px;
  border-top: 1px solid var(--margin-ink); border-left: 1px solid var(--margin-ink);
  border-top-left-radius: 5px;
}
.hero-statement::after {
  width: 84px; height: 12px; bottom: -25px; left: 0;
  background: linear-gradient(#293da04d,#293da04d) left center / 44px 1px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) right center / 28px 5px no-repeat;
}

/* A film frame sits beside the career action, inside its existing free space. */
.about-copy, .skills-heading, .detail-intro { position: relative; }
.about-copy::after, .detail-intro::after {
  width: 150px; height: 75px;
  background: url('./assets/film-marginalia.svg') center / contain no-repeat;
}
.about-copy::after { right: 24px; bottom: -10px; }
.detail-intro::after { width: 190px; height: 95px; right: 28px; bottom: 0; }

/* The existing date becomes a pinned index slip. */
.resume-date::before {
  inset: 4px -5px -4px 5px; border: 1px solid var(--margin-ink);
  border-radius: 12px; transform: rotate(-5deg); z-index: -1;
}
.resume-date::after {
  width: 12px; height: 26px; top: -17px; right: 18px;
  border: 1px solid #293da075; border-radius: 7px; transform: rotate(13deg);
  background: linear-gradient(#293da075,#293da075) 4px 6px / 1px 15px no-repeat;
}
.chronicle-entry::before {
  top: -2px; left: 0; width: 28px; height: 3px;
  border-radius: 3px; background: #b6bfdf;
}

/* Extend the album's paper-tab language into the open header margin. */
.projects-count { position: relative; }
.projects-count::before {
  top: -7px; right: 18px; width: 42px; height: 13px;
  background: #ffe1c7d9; transform: rotate(-7deg);
}

/* Editing brackets sit outside the centered skills heading. */
.skills-heading::before, .skills-heading::after {
  top: calc(50% - 27px); width: 22px; height: 54px;
  border-block: 1px solid var(--margin-ink);
}
.skills-heading::before { left: -44px; border-left: 1px solid var(--margin-ink); border-radius: 5px 0 0 5px; }
.skills-heading::after { right: -44px; border-right: 1px solid var(--margin-ink); border-radius: 0 5px 5px 0; }

/* Two fine paper edges peek out below the existing contact card. */
.contact-inner::before {
  width: 62px; height: 17px; top: -7px; left: 56px;
  background: #ffe1c7ed; transform: rotate(-5deg);
}
.contact-inner::after {
  left: 14px; right: 14px; bottom: -8px; height: 8px;
  border-top: 1px solid #e5eaff4d; border-bottom: 1px solid #e5eaff8c;
  border-radius: 0 0 12px 12px;
}

/* Narrow screens keep the small paper details and leave reading space clear. */
@media (max-width: 1200px) {
  .detail-intro::after { display: none; }
  .skills-heading::before { left: -20px; }
  .skills-heading::after { right: -20px; }
}
@media (max-width: 1050px) {
  .about-copy::after { display: none; }
  .skills-heading::before, .skills-heading::after { display: none; }
}
@media (max-width: 760px) {
  .hero-statement::before, .hero-statement::after { display: none; }
  .resume-date { position: relative; inset: auto; }
  .resume-date::after { height: 22px; top: -13px; right: 12px; }
  .projects-count::before { width: 32px; height: 10px; top: -5px; }
  .contact-inner::before { width: 42px; height: 13px; left: 28px; top: -5px; }
}