/* Dorina Projects — shared scope, tokens and utilities.
   Wraps the approved project.css / archive.css without touching the child theme. */

.dorina-projects-app {
  --dur-micro: 240ms;
  --dur-short: 460ms;
  --dur-reveal: 900ms;
  background: var(--paper);
  color: var(--text-paper);
  overflow-x: clip;
}

.dorina-projects-app .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.dorina-projects-app img {
  display: block;
  max-width: 100%;
}

.dorina-projects-app button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.dorina-projects-app .sv-ink {
  background: var(--ink);
  color: var(--text-ink);
}

.dorina-projects-app .sv-paper {
  background: var(--paper);
  color: var(--text-paper);
}

.dorina-projects-app section {
  position: relative;
}

.dorina-projects-app .sv-ink .mono-label {
  color: var(--text-ink-soft);
}

.dorina-projects-app .mono-label .num {
  color: var(--bronze);
}

.dorina-projects-app .sv-ink .mono-label .num {
  color: var(--lumen);
}

.dorina-projects-app .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dorina-projects-app .eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--bronze);
}

.dorina-projects-app .sv-ink .eyebrow::before {
  background: var(--lumen);
}

.dorina-projects-app .dim-line {
  position: relative;
  height: 1px;
  background: var(--line-paper);
}

.dorina-projects-app .dim-line::before,
.dorina-projects-app .dim-line::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--line-paper-strong);
}

.dorina-projects-app .dim-line::before {
  left: 0;
}

.dorina-projects-app .dim-line::after {
  right: 0;
}

.dorina-projects-app .sv-ink .dim-line {
  background: var(--line-ink);
}

.dorina-projects-app .sv-ink .dim-line::before,
.dorina-projects-app .sv-ink .dim-line::after {
  background: var(--line-ink-strong);
}

.dorina-projects-app .leaders {
  flex: 1;
  height: 1px;
  margin-inline: 14px;
  background-image: linear-gradient(to right, var(--line-paper-strong) 0 2px, transparent 2px 6px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: 0 center;
}

.dorina-projects-app .sv-ink .leaders {
  background-image: linear-gradient(to right, var(--line-ink-strong) 0 2px, transparent 2px 6px);
}

.dorina-projects-app .btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px 16px;
  font-family: var(--font-sans), sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--line-paper-strong);
  color: var(--text-paper);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.dorina-projects-app .btn .btn__arrow {
  transition: transform var(--dur-short) var(--ease-out);
}

.dorina-projects-app .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 420ms var(--ease-out);
  z-index: 0;
}

.dorina-projects-app .btn:hover::before,
.dorina-projects-app .btn:focus-visible::before {
  transform: scaleY(1);
}

.dorina-projects-app .btn:hover,
.dorina-projects-app .btn:focus-visible {
  color: var(--text-ink);
  border-color: var(--ink);
}

.dorina-projects-app .btn:hover .btn__arrow,
.dorina-projects-app .btn:focus-visible .btn__arrow {
  transform: translateX(5px);
}

.dorina-projects-app .btn > * {
  position: relative;
  z-index: 1;
}

.dorina-projects-app .sv-ink .btn {
  border-color: var(--line-ink-strong);
  color: var(--text-ink);
}

.dorina-projects-app .sv-ink .btn::before {
  background: var(--paper);
}

.dorina-projects-app .sv-ink .btn:hover,
.dorina-projects-app .sv-ink .btn:focus-visible {
  color: var(--ink);
  border-color: var(--paper);
}

.dorina-projects-app .display em,
.dorina-projects-app .display .accent {
  font-style: italic;
}

.dorina-projects-app .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.dorina-projects-app .line-mask > span {
  display: block;
}

/* Graceful no-JS archive fallback: first preview only. GSAP overrides inline. */
.dorina-projects-app .archive__layer:not(:first-child) {
  opacity: 0;
}

/* Plain <img> fills the same boxes Next/Image used to fill. */
.dorina-projects-app .pj-hero__img,
.dorina-projects-app .pj-full__img,
.dorina-projects-app .pj-fig__img,
.dorina-projects-app .pj-water__img,
.dorina-projects-app .pj-grg__img,
.dorina-projects-app .pj-grg__under,
.dorina-projects-app .pj-sig__img,
.dorina-projects-app .pj-next__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dorina-projects-app .pj-next__img {
  transform: scale(1.02);
}

/* The source stacks each garage scene over the previous one, which covers the
   bottom-edge counters. Keep the counter functional at the top edge. */
.dorina-projects-app .pj-mod--grg .pj-grg__count {
  top: calc(var(--header-h) + 26px);
  bottom: auto;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.dorina-projects-app .pj-next--cine .pj-next__img {
  transform: scale(1);
}

.dorina-projects-app .pj-fig__btn {
  cursor: zoom-in;
}

/* Archive paper hero: the child header defaults to light-on-dark. */
body.dorina-project-archive .site-header:not(.is-scrolled) {
  color: var(--text-paper);
  text-shadow: none;
}

body.dorina-project-archive .site-header:not(.is-scrolled)::before {
  opacity: 0;
}

body.dorina-project-archive .site-header:not(.is-scrolled) .nav-cta {
  border-color: var(--line-paper-strong);
}

body.dorina-project-archive .site-header:not(.is-scrolled) .nav-cta:hover,
body.dorina-project-archive .site-header:not(.is-scrolled) .nav-cta:focus-visible {
  color: var(--text-ink);
  background: var(--ink);
  border-color: var(--ink);
}

body.dorina-project-archive .site-header:not(.is-scrolled) .bars::before,
body.dorina-project-archive .site-header:not(.is-scrolled) .bars::after {
  background: currentColor;
}

body.dorina-project-archive.menu-open .site-header {
  color: #f6f2e9;
  text-shadow: 0 1px 3px rgba(10, 9, 7, 0.55), 0 2px 22px rgba(10, 9, 7, 0.4);
}

/* Keep anchor navigation clear of the fixed header. */
.dorina-projects-app [id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  .dorina-projects-app .archive__layer,
  .dorina-projects-app .pj-fig__img,
  .dorina-projects-app .pj-next__img,
  .dorina-projects-app .pj-next__line,
  .dorina-projects-app .pj-next__arrow {
    transition: none !important;
  }
}