/* ==========================================================
   TINA FERNÁNDEZ
   PROJECT TEMPLATE — REFINED
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root {
  --project-black: #111;
  --project-white: #fff;

  --project-bg: #f7f7f5;
  --project-gallery-bg: #e8e8e5;

  --project-grey: #747474;
  --project-soft-grey: #9a9a96;

  --project-border: rgba(17, 17, 17, .13);

  --project-padding:
    clamp(18px, 1.5vw, 26px);

  --project-sidebar-width:
    25vw;

  --project-gallery-width:
    75vw;

  --project-info-gap:
    clamp(58px, 7vh, 88px);

  --project-nav-height:
    42px;

  --project-ease:
    cubic-bezier(.16, 1, .3, 1);

  --project-reveal-overlap:
    18svh;
}


/* ==========================================================
   RESET
========================================================== */

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


html,
body {
  width: 100%;
  min-height: 100%;

  margin: 0;
  padding: 0;
}


html {
  background: var(--project-bg);
  color-scheme: only light;
}


body {
  background: var(--project-bg);
  color: var(--project-black);

  font-family: var(--font-sans);

  overflow-x: hidden;
  overflow-y: auto;
}


body,
h1,
h2,
h3,
p,
dl,
dt,
dd {
  margin: 0;
}


a {
  color: inherit;
  text-decoration: none;
}


img,
video {
  display: block;

  user-select: none;
  -webkit-user-drag: none;
}


/* ==========================================================
   CUSTOM CURSOR
========================================================== */

.cursor {
  position: fixed;

  left: 0;
  top: 0;

  z-index: 20000;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--project-black);

  pointer-events: none;

  transform:
    translate(-50%, -50%);

  transition:
    width .32s var(--project-ease),
    height .32s var(--project-ease),
    opacity .2s ease;
}


.cursor.is-media {
  width: 42px;
  height: 42px;

  opacity: .12;
}


/* ==========================================================
   FIRST VISUAL CHAPTER
========================================================== */

.project-page {
  position: relative;
  z-index: 30;

  width: 100vw;
  height: 100svh;

  display: grid;

  grid-template-columns:
    minmax(0, var(--project-sidebar-width))
    minmax(0, var(--project-gallery-width));

  background: var(--project-bg);

  overflow: hidden;

  box-shadow:
    0 28px 68px
    rgba(17, 17, 17, .065);
}


/* ==========================================================
   SIDEBAR
========================================================== */

.project-sidebar {
  position: relative;
  z-index: 10;

  width: 100%;
  height: 100svh;

  min-width: 0;

  padding:
    108px
    var(--project-padding)
    calc(
      var(--project-padding) +
      var(--project-nav-height)
    );

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border-right:
    1px solid
    var(--project-border);

  background: var(--project-bg);

  overflow: hidden;
}


.project-sidebar-main {
  width: 100%;
  min-width: 0;
}


/* ==========================================================
   HEADING
========================================================== */

.project-heading {
  width: 100%;

  padding-bottom:
    var(--project-info-gap);
}


.project-index {
  margin-bottom: 8px;

  color: var(--project-grey);

  font-variant-numeric:
    tabular-nums;
}


.project-section-tag {
  margin-bottom: 10px;

  color: var(--project-soft-grey);
}


.project-title {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  text-transform: none;

  overflow-wrap: break-word;
}


/* ==========================================================
   META
========================================================== */

.project-meta {
  width: 100%;

  display: flex;
  flex-direction: column;
}


.project-meta-row {
  width: 100%;
  min-width: 0;

  padding: 5px 0;

  display: grid;

  grid-template-columns:
    minmax(64px, .7fr)
    minmax(0, 1.3fr);

  gap: 12px;
}


.project-meta-row:first-child {
  padding-top: 0;
}


.project-meta-row dt {
  color: var(--project-soft-grey);
}


.project-meta-row dd {
  min-width: 0;

  color: var(--project-black);

  overflow-wrap: break-word;
}


/* ==========================================================
   QUICK NAVIGATION
========================================================== */

.project-quick-nav,
.project-chapter-quick-nav {
  width: 100%;

  margin-top:
    clamp(22px, 3.2vh, 36px);

  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}


.project-quick-link {
  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding:
    6px 9px;

  border:
    1px solid
    var(--project-border);

  border-radius:
    999px;

  background: transparent;

  transition:
    background-color .28s var(--project-ease),
    color .28s var(--project-ease),
    border-color .28s var(--project-ease);
}


@media
(hover: hover)
and
(pointer: fine) {

  .project-quick-link:hover {
    background: var(--project-black);
    color: var(--project-white);

    border-color: var(--project-black);
  }

}


/* ==========================================================
   VISUAL STAGE GUIDANCE
========================================================== */

.project-stage-guidance,
.project-chapter-guidance {
  width: 100%;

  margin-top:
    clamp(28px, 4.5vh, 48px);

  padding-top: 10px;

  border-top:
    1px solid
    var(--project-border);
}


.project-stage-guidance-small,
.project-chapter-guidance-small {
  margin-top: 5px;

  color: var(--project-soft-grey);
}


/* ==========================================================
   SIDEBAR BOTTOM
========================================================== */

.project-sidebar-bottom {
  width: 100%;
  min-width: 0;
}


/*
   There is intentionally NO desktop previous / next
   navigation inside the sidebar. The persistent bar below
   is the single project navigation system.
*/

.project-sidebar-navigation {
  display: none !important;
}


/* ==========================================================
   MOBILE CAPTION
========================================================== */

.project-mobile-caption,
.project-chapter-mobile-caption {
  display: none;
}


/* ==========================================================
   GALLERY
========================================================== */

.project-gallery,
.project-chapter-gallery {
  position: relative;

  width: 100%;
  height: 100svh;

  min-width: 0;

  overflow: hidden;

  background: var(--project-gallery-bg);

  cursor: grab;

  touch-action: pan-y;

  user-select: none;
}


.project-gallery.is-dragging,
.project-chapter-gallery.is-dragging {
  cursor: grabbing;
}


/* ==========================================================
   TRACK
========================================================== */

.project-track,
.project-chapter-track {
  position: relative;

  display: flex;
  align-items: stretch;

  width: max-content;
  height: 100%;

  will-change: transform;
}


/* ==========================================================
   MEDIA
========================================================== */

.project-media {
  position: relative;

  flex: 0 0 auto;

  width: auto;
  height: 100%;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: #ddd;

  isolation: isolate;
}


.project-media img,
.project-media video {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;

  max-width: none;
  max-height: none;

  padding: 0;

  object-fit: cover;
  object-position: center;

  pointer-events: none;

  transform: scale(1.001);
  transform-origin: center center;

  transition:
    transform .9s var(--project-ease),
    filter .6s ease;

  will-change: transform;
}


@media
(hover: hover)
and
(pointer: fine) {

  .project-media:hover img,
  .project-media:hover video {
    transform: scale(1.055);

    filter:
      contrast(1.02)
      saturate(1.025);
  }

}


/* ==========================================================
   COMMENT FOLLOWER
========================================================== */

.project-media-comment {
  position: fixed;

  left: 0;
  top: 0;

  z-index: 15000;

  width:
    min(300px, 28vw);

  pointer-events: none;

  opacity: 0;

  color: #fff;

  mix-blend-mode: difference;

  transform:
    translate3d(18px, 18px, 0);

  transition:
    opacity .16s ease;

  will-change: transform;
}


.project-media-comment.is-visible {
  opacity: 1;
}


/* ==========================================================
   GALLERY UI
========================================================== */

.project-gallery-ui,
.project-chapter-gallery-ui {
  position: absolute;

  left:
    var(--project-padding);

  right:
    var(--project-padding);

  bottom:
    calc(
      var(--project-padding) +
      var(--project-nav-height)
    );

  z-index: 20;

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 20px;

  pointer-events: none;
}


.project-gallery-counter,
.project-gallery-hint,
.project-chapter-counter,
.project-chapter-hint {
  padding:
    7px
    10px;

  border:
    1px solid
    rgba(17, 17, 17, .09);

  border-radius: 999px;

  background:
    rgba(247, 247, 245, .60);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(1.08);

  backdrop-filter:
    blur(16px)
    saturate(1.08);

  font-variant-numeric:
    tabular-nums;
}


.project-gallery-hint,
.project-chapter-hint {
  max-width:
    calc(100% - 78px);

  text-align: right;
}


.project-gallery-hint-mobile {
  display: none;
}


/* ==========================================================
   EDITORIAL INFORMATION — REAL UNDERLAY
========================================================== */

/*
   This block overlaps the visual chapter above.
   Because it has a lower z-index, the visual chapter behaves
   like a cover sitting on top of the information. During the
   JS transition the cover moves away and the copy is revealed
   from underneath — the same visual logic as the footer.
*/

.project-details,
.project-chapter-details {
  position: relative;
  z-index: 10;

  width: 100%;

  min-height:
    118svh;

  margin-top:
    calc(
      -1 *
      var(--project-reveal-overlap)
    );

  padding:
    calc(
      var(--project-reveal-overlap) +
      clamp(94px, 12vh, 142px)
    )
    var(--project-padding)
    clamp(150px, 18vh, 220px);

  background:
    var(--project-bg);

  overflow: visible;

  /*
     No border here: the unwanted horizontal line
     under the carousel is intentionally removed.
  */
}


.project-details-inner,
.project-chapter-details-inner {
  width: 100%;

  display: grid;

  grid-template-columns:
    calc(
      25vw -
      (
        var(--project-padding) * 2
      )
    )
    minmax(0, 1fr);

  column-gap:
    var(--project-padding);

  align-items: start;

  transform:
    translate3d(
      0,
      calc(
        (
          1 -
          var(--chapter-reveal, 0)
        ) *
        13vh
      ),
      0
    );

  opacity:
    calc(
      .18 +
      (
        var(--chapter-reveal, 0)
        *
        .82
      )
    );

  will-change:
    transform,
    opacity;
}


/*
   IMPORTANT:
   The title and the first line of the body share exactly
   the same vertical starting coordinate.
*/

.project-details-heading,
.project-chapter-details-heading {
  position: sticky;

  top:
    clamp(82px, 10vh, 112px);

  min-width: 0;

  align-self: start;
}


.project-details-title,
.project-chapter-details-title {
  margin: 0;
}


.project-details-kicker,
.project-chapter-details-kicker {
  margin-top: 10px;

  color: var(--project-soft-grey);
}


.project-details-content,
.project-chapter-details-content {
  width:
    min(100%, 880px);

  min-width: 0;

  padding-top: 0;

  justify-self: start;
}


.project-description,
.project-chapter-description {
  width: 100%;
  max-width: none;

  margin: 0;
}


.project-description p + p,
.project-chapter-description p + p {
  margin-top: 1.05em;
}


/* ==========================================================
   EXTERNAL LINKS
========================================================== */

.project-external-links {
  width: 100%;

  margin:
    clamp(22px, 3vh, 34px)
    0
    0;

  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}


.project-external-links[hidden] {
  display: none;
}

.project-details-heading .project-external-links,
.project-chapter-details-heading .project-external-links {
  margin-top: clamp(28px, 4vh, 46px);
  margin-bottom: 0;
}


.project-external-link {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding:
    7px
    10px;

  border:
    1px solid
    var(--project-border);

  border-radius: 999px;

  background: transparent;

  transition:
    background-color .28s var(--project-ease),
    color .28s var(--project-ease),
    border-color .28s var(--project-ease);
}


@media
(hover: hover)
and
(pointer: fine) {

  .project-external-link:hover {
    background: var(--project-black);
    color: var(--project-white);

    border-color: var(--project-black);
  }

}


/* ==========================================================
   DETAILS NEXT
========================================================== */

.project-details-next,
.project-chapter-next {
  display: inline-flex;
  align-items: center;

  margin-top:
    clamp(60px, 9vh, 110px);

  padding-bottom: 3px;

  border-bottom:
    1px solid
    currentColor;
}


/* ==========================================================
   ADDITIONAL CHAPTERS
========================================================== */

#projectAdditionalSections,
.project-additional-sections {
  position: relative;
  z-index: 20;

  width: 100%;
}


.project-chapter-visual {
  position: relative;
  z-index: 30;

  width: 100vw;
  height: 100svh;

  display: grid;

  grid-template-columns:
    minmax(0, var(--project-sidebar-width))
    minmax(0, var(--project-gallery-width));

  background: var(--project-bg);

  overflow: hidden;

  box-shadow:
    0 28px 68px
    rgba(17, 17, 17, .065);
}


.project-chapter-sidebar {
  position: relative;

  width: 100%;
  height: 100svh;

  min-width: 0;

  padding:
    108px
    var(--project-padding)
    calc(
      var(--project-padding) +
      var(--project-nav-height)
    );

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border-right:
    1px solid
    var(--project-border);

  background:
    var(--project-bg);

  overflow: hidden;
}


.project-chapter-heading {
  min-width: 0;
}


.project-chapter-index,
.project-chapter-project {
  color:
    var(--project-soft-grey);
}


.project-chapter-index {
  margin-bottom: 8px;
}


.project-chapter-project {
  margin-bottom: 10px;
}


.project-chapter-title {
  max-width: 100%;

  overflow-wrap: break-word;
}


/* ==========================================================
   PERSISTENT PREVIOUS / NEXT
========================================================== */

/*
   This is the ONLY previous / next project navigation
   visible on desktop. It uses the same small UI scale as
   the quick links and remains stable until the footer begins.
*/

.project-persistent-nav {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 14000;

  min-height:
    var(--project-nav-height);

  padding:
    0
    var(--project-padding);

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  background:
    rgba(247, 247, 245, .94);

  -webkit-backdrop-filter:
    blur(16px);

  backdrop-filter:
    blur(16px);

  transform:
    translate3d(0, 0, 0);

  opacity: 1;

  transition:
    transform .42s var(--project-ease),
    opacity .28s ease;

  will-change:
    transform,
    opacity;
}


.project-persistent-nav.is-hidden {
  transform:
    translate3d(
      0,
      calc(
        100% +
        2px
      ),
      0
    );

  opacity: 0;

  pointer-events: none;
}


.project-persistent-link {
  display: inline-flex;

  align-items: center;

  min-height:
    var(--project-nav-height);

  white-space: nowrap;
}


/* ==========================================================
   ERROR
========================================================== */

.project-error {
  position: relative;
  z-index: 10;

  width: 100vw;
  min-height: 100svh;

  padding:
    120px
    var(--project-padding);

  background:
    var(--project-bg);
}


/* ==========================================================
   TABLET
========================================================== */

@media
(min-width: 801px)
and
(max-width: 1100px) {

  :root {
    --project-sidebar-width:
      32vw;

    --project-gallery-width:
      68vw;

    --project-info-gap:
      clamp(52px, 7vh, 76px);
  }


  .project-details-inner,
  .project-chapter-details-inner {
    grid-template-columns:
      calc(
        32vw -
        (
          var(--project-padding) * 2
        )
      )
      minmax(0, 1fr);
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media
(max-width: 800px) {

  :root {
    --project-padding:
      clamp(14px, 4.2vw, 20px);

    --project-reveal-overlap:
      0px;
  }


  body {
    overflow-x: hidden;
    overflow-y: auto;
  }


  .cursor,
  .project-media-comment,
  .project-persistent-nav {
    display: none;
  }


  /* --------------------------------------------------------
     FIRST VISUAL
  -------------------------------------------------------- */

  .project-page {
    width: 100%;
    height: auto;
    min-height: 100svh;

    display: flex;
    flex-direction: column;

    overflow: visible;

    box-shadow: none;
  }


  .project-sidebar {
    position: relative;

    width: 100%;
    height: auto;

    min-height: 0;

    flex: 0 0 auto;

    padding:
      clamp(122px, 31vw, 148px)
      var(--project-padding)
      0;

    justify-content: flex-start;

    border-right: 0;

    background:
      var(--project-bg);

    overflow: visible;
  }


  .project-sidebar-main {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    column-gap:
      clamp(18px, 5vw, 30px);

    row-gap: 0;

    align-items: start;
  }


  .project-heading {
    padding: 0;
  }


  .project-index {
    margin-bottom: 7px;
  }


  .project-section-tag {
    margin-bottom: 8px;
  }


  .project-meta {
    padding-top: 3px;
  }


  .project-meta-row {
    padding: 3px 0;

    grid-template-columns:
      clamp(52px, 14vw, 68px)
      minmax(0, 1fr);

    gap:
      clamp(8px, 2.5vw, 13px);
  }


  .project-quick-nav {
    grid-column:
      1 / -1;

    margin-top:
      clamp(28px, 7vw, 42px);
  }


  .project-stage-guidance {
    display: none;
  }


  .project-sidebar-bottom {
    width: 100%;

    margin-top:
      clamp(38px, 9vw, 58px);
  }


  .project-mobile-caption {
    display: block;

    width: 100%;

    padding:
      0
      0
      clamp(10px, 2.7vw, 14px);

    color:
      var(--project-grey);
  }


  .project-gallery {
    width: 100%;

    height:
      clamp(430px, 64svh, 760px);

    min-height: 0;

    flex: 0 0 auto;

    background:
      var(--project-gallery-bg);
  }


  .project-gallery-ui,
  .project-chapter-gallery-ui {
    left:
      var(--project-padding);

    right:
      var(--project-padding);

    bottom:
      var(--project-padding);
  }


  .project-gallery-hint-desktop {
    display: none;
  }


  .project-gallery-hint-mobile {
    display: inline;
  }


  /* --------------------------------------------------------
     DETAILS
  -------------------------------------------------------- */

  .project-details,
  .project-chapter-details {
    min-height: 0;

    margin-top: 0;

    padding:
      clamp(64px, 15vw, 92px)
      var(--project-padding)
      clamp(100px, 24vw, 150px);

    background:
      var(--project-bg);
  }


  .project-details-inner,
  .project-chapter-details-inner {
    display: block;

    transform: none;

    opacity: 1;
  }


  .project-details-heading,
  .project-chapter-details-heading {
    position: static;

    margin-bottom:
      clamp(36px, 9vw, 56px);
  }


  .project-details-content,
  .project-chapter-details-content {
    width: 100%;
  }


  .project-external-links {
    margin-bottom:
      clamp(28px, 7vw, 42px);
  }


  /* --------------------------------------------------------
     ADDITIONAL VISUAL
  -------------------------------------------------------- */

  .project-chapter-visual {
    width: 100%;
    height: auto;
    min-height: 100svh;

    display: flex;
    flex-direction: column;

    overflow: visible;

    box-shadow: none;
  }


  .project-chapter-sidebar {
    width: 100%;
    height: auto;
    min-height: 0;

    padding:
      clamp(92px, 22vw, 128px)
      var(--project-padding)
      var(--project-padding);

    border-right: 0;

    overflow: visible;
  }


  .project-chapter-quick-nav {
    margin-top:
      clamp(26px, 7vw, 40px);
  }


  .project-chapter-guidance {
    display: none;
  }


  .project-chapter-mobile-caption {
    display: block;

    margin-top:
      clamp(32px, 8vw, 48px);

    padding-bottom:
      clamp(10px, 2.7vw, 14px);

    color:
      var(--project-grey);
  }


  .project-chapter-gallery {
    width: 100%;

    height:
      clamp(430px, 64svh, 760px);

    flex: 0 0 auto;
  }

}


/* Second chapters repeat the first chapter's information rhythm:
   metadata first, navigation immediately below it. */
@media (min-width: 801px) {
  .project-chapter-guidance {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    margin: clamp(28px, 4vh, 46px) 0 0;
  }

  .project-chapter-actions {
    margin-top: 12px;
  }
}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media
(max-width: 480px) {

  .project-sidebar {
    padding-top: 124px;
  }


  .project-sidebar-main {
    column-gap: 14px;
  }


  .project-gallery,
  .project-chapter-gallery {
    height:
      clamp(410px, 62svh, 660px);
  }

}


/* ==========================================================
   SHORT MOBILE SCREENS
========================================================== */

@media
(max-width: 800px)
and
(max-height: 700px) {

  .project-sidebar {
    padding-top: 112px;
  }


  .project-gallery,
  .project-chapter-gallery {
    height: 72svh;

    min-height: 390px;
  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media
(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

}

/* ==========================================================
   UX FLOW REFINEMENT — CHAPTER ACTIONS / FULL-VIEW DETAILS
========================================================== */

.project-stage-guidance,
.project-chapter-guidance {
  border-top: 0;
  padding-top: 0;
}

.project-stage-actions,
.project-chapter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.project-action-link,
.project-details-next,
.project-chapter-next {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 10px;
  border: 1px solid var(--project-border);
  border-radius: 999px;
  background: transparent;
  transition: background-color .28s var(--project-ease), color .28s var(--project-ease), border-color .28s var(--project-ease), transform .28s var(--project-ease);
}

.project-details-next,
.project-chapter-next {
  margin-top: clamp(46px, 7vh, 82px);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--project-border);
}

@media (hover: hover) and (pointer: fine) {
  .project-action-link:hover,
  .project-details-next:hover,
  .project-chapter-next:hover {
    background: var(--project-black);
    color: var(--project-white);
    border-color: var(--project-black);
    transform: translateY(-1px);
  }
}

.project-details,
.project-chapter-details {
  min-height: 100svh;
  padding-top: calc(var(--project-reveal-overlap) + clamp(82px, 10vh, 118px));
  padding-bottom: clamp(82px, 10vh, 118px);
  display: flex;
  align-items: center;
}

.project-details-inner,
.project-chapter-details-inner {
  min-height: min(70svh, 720px);
  align-items: center;
}

.project-details-heading,
.project-chapter-details-heading {
  position: static;
}

.project-persistent-nav {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
  mix-blend-mode: difference;
}

.project-persistent-link {
  color: inherit;
}

@media (max-width: 800px) {
  .project-details,
  .project-chapter-details {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: clamp(64px, 15vw, 92px) var(--project-padding) clamp(80px, 20vw, 120px);
  }

  .project-details-inner,
  .project-chapter-details-inner {
    min-height: 0;
  }
}

/* ==========================================================
   2026-08-13 — PROJECT UI POLISH
========================================================== */
:root { --project-gallery-bg: var(--project-bg); }

.project-page,
.project-chapter-visual { box-shadow: none; }

/* One shared editorial link language */
.project-action-link,
.project-info-action,
.project-external-link,
.project-persistent-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 0;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  transition: transform .45s var(--project-ease), opacity .25s ease;
}

.project-action-link::after,
.project-info-action::after,
.project-external-link::after,
.project-persistent-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--project-ease);
}

@media (hover:hover) and (pointer:fine) {
  .project-action-link:hover,
  .project-info-action:hover,
  .project-external-link:hover,
  .project-persistent-link:hover {
    background: transparent;
    color: inherit;
    border-color: currentColor;
    transform: translateY(-2px);
  }
  .project-action-link:hover::after,
  .project-info-action:hover::after,
  .project-external-link:hover::after,
  .project-persistent-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

.project-stage-actions,
.project-chapter-actions,
.project-info-actions,
.project-external-links {
  gap: 14px 20px;
}

/* Guidance becomes part of the heading rhythm */
.project-sidebar-main,
.project-chapter-sidebar-main { display: flex; flex-direction: column; }

.project-stage-guidance,
.project-chapter-guidance {
  order: -1;
  margin: 0 0 clamp(42px, 6vh, 70px);
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: start;
}

.project-stage-guidance-main,
.project-chapter-guidance-main { grid-column: 1; }
.project-stage-guidance-small,
.project-chapter-guidance-small { grid-column: 2; margin-top: 0; }
.project-stage-actions,
.project-chapter-actions { grid-column: 1 / -1; margin-top: 12px; }

/* Counter only: no duplicated drag instruction in gallery */
.project-gallery-hint,
.project-chapter-hint { display: none !important; }
.project-gallery-ui,
.project-chapter-gallery-ui {
  justify-content: flex-start;
  left: var(--project-padding);
  right: var(--project-padding);
  bottom: calc(var(--project-padding) + var(--project-nav-height));
}
.project-gallery-counter,
.project-chapter-counter {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Details are a true viewport */
@media (min-width: 801px) {
  .project-details,
  .project-chapter-details {
    height: 100svh;
    min-height: 100svh;
    margin-top: 0;
    padding: clamp(94px, 11vh, 124px) var(--project-padding) calc(var(--project-padding) + var(--project-nav-height));
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .project-details-inner,
  .project-chapter-details-inner {
    min-height: 0;
    height: auto;
    align-items: start;
  }
}

/* Persistent project nav uses the same page inset as every other control */
.project-persistent-nav {
  min-height: auto;
  padding: 0 var(--project-padding) var(--project-padding);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.project-persistent-link { min-height: 0; }

@media (max-width:800px) {
  .project-stage-guidance,
  .project-chapter-guidance { display: none; }
  .project-gallery-ui,
  .project-chapter-gallery-ui { bottom: var(--project-padding); }
}

/* ==========================================================
   2026-08-13 — SIDEBAR INFORMATION ARCHITECTURE
   STATUS → TITLE → TAGS → ACTIONS
========================================================== */

/* First and additional chapters use the same vertical rhythm. */
.project-sidebar-main,
.project-chapter-sidebar-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

/* Top status block: same two-column proportions as the tag rows. */
.project-status-grid,
.project-chapter-status-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(64px, .7fr)
    minmax(0, 1.3fr);
  gap: 12px;
  align-items: start;
  margin: 0 0 clamp(38px, 5.2vh, 62px);
}

.project-status-position,
.project-chapter-status-position {
  min-width: 0;
}

.project-index,
.project-section-tag,
.project-chapter-project-index,
.project-chapter-index {
  margin: 0;
  color: var(--project-grey);
  font-variant-numeric: tabular-nums;
}

.project-section-tag,
.project-chapter-index {
  margin-top: 5px;
  color: var(--project-soft-grey);
}

/* Guidance belongs exclusively to column two of the top status block. */
.project-stage-guidance,
.project-chapter-guidance {
  order: initial;
  grid-column: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

.project-stage-guidance-main,
.project-chapter-guidance-main,
.project-stage-guidance-small,
.project-chapter-guidance-small {
  grid-column: auto;
}

.project-stage-guidance-small,
.project-chapter-guidance-small {
  margin-top: 5px;
}

/* Title is its own block. */
.project-heading,
.project-chapter-heading {
  width: 100%;
  padding: 0;
  margin: 0 0 clamp(42px, 5.8vh, 68px);
}

/* Tags stay together as the third block. */
.project-meta,
.project-chapter-meta {
  width: 100%;
  margin: 0;
}

/* Actions are the fourth block, directly below the tags. */
.project-stage-actions,
.project-chapter-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: clamp(30px, 4.2vh, 48px);
}

/* More breathing room between editorial copy and its navigation actions. */
.project-info-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: clamp(54px, 8vh, 96px);
}

/* All project-page navigation links share one physical scale. */
.project-action-link,
.project-info-action,
.project-external-link,
.project-persistent-link {
  min-height: 0;
  padding-bottom: 3px;
}

/* Gallery counter aligns to the same lower inset as prev/next project links. */
.project-gallery-ui,
.project-chapter-gallery-ui {
  left: var(--project-padding);
  right: var(--project-padding);
  bottom: calc(var(--project-padding) + 3px);
}

/* Keep previous / next controls on the exact same page inset. */
.project-persistent-nav {
  padding:
    0
    var(--project-padding)
    var(--project-padding);
}

/* No duplicated gallery instruction. */
.project-gallery-hint,
.project-chapter-hint {
  display: none !important;
}


/* ==========================================================
   MOBILE SAFETY
========================================================== */

@media (max-width: 800px) {

  .project-sidebar-main,
  .project-chapter-sidebar-main {
    display: flex;
    flex-direction: column;
  }

  .project-status-grid,
  .project-chapter-status-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
    gap: clamp(14px, 4vw, 24px);
    margin-bottom: clamp(30px, 8vw, 46px);
  }

  .project-stage-guidance,
  .project-chapter-guidance {
    display: none;
  }

  .project-heading,
  .project-chapter-heading {
    margin-bottom: clamp(30px, 8vw, 46px);
  }

  .project-stage-actions,
  .project-chapter-actions {
    margin-top: clamp(24px, 7vw, 38px);
  }

  .project-info-actions {
    margin-top: clamp(42px, 12vw, 68px);
  }

  .project-gallery-ui,
  .project-chapter-gallery-ui {
    bottom: var(--project-padding);
  }

}

/* ==========================================================
   PROJECT ACTIONS — BIGGER / STACKED / MORE EXPRESSIVE
========================================================== */


/* ----------------------------------------------------------
   ACTION GROUPS

   Every action sits on its own line.
---------------------------------------------------------- */

.project-stage-actions,
.project-chapter-actions,
.project-info-actions,
.project-external-links {

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  flex-wrap:
    nowrap;

  gap:
    10px;

}


/* Buttons directly under tags */

.project-stage-actions,
.project-chapter-actions {

  margin-top:
    clamp(
      34px,
      4.8vh,
      54px
    );

}


/* More air after project description */

.project-info-actions {

  margin-top:
    clamp(
      38px,
      5vh,
      62px
    );

}


/* External links */

.project-external-links {

  gap:
    10px;

}



/* ==========================================================
   SHARED EDITORIAL LINK
========================================================== */

.project-action-link,
.project-info-action,
.project-external-link,
.project-persistent-link {

  position:
    relative;

  appearance:
    none;

  font:
    inherit;

  text-align:
    left;

  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  max-width:
    100%;

  min-height:
    0;

  padding:
    0 0 5px;

  border:
    0;

  background:
    transparent;

  color:
    inherit;

  text-decoration:
    none;

  cursor:
    pointer;

  transform-origin:
    left center;

  transition:
    transform
      .55s
      var(--project-ease),
    letter-spacing
      .55s
      var(--project-ease),
    opacity
      .3s
      ease;

}


/* ----------------------------------------------------------
   BASE UNDERLINE
---------------------------------------------------------- */

.project-action-link::before,
.project-info-action::before,
.project-external-link::before,
.project-persistent-link::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    1px;

  background:
    currentColor;

  opacity:
    .32;

}


/* ----------------------------------------------------------
   ANIMATED UNDERLINE
---------------------------------------------------------- */

.project-action-link::after,
.project-info-action::after,
.project-external-link::after,
.project-persistent-link::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    100%;

  height:
    2px;

  background:
    currentColor;

  transform:
    scaleX(0);

  transform-origin:
    right center;

  transition:
    transform
      .55s
      var(--project-ease);

}



/* ==========================================================
   HOVER
========================================================== */

@media
(hover: hover)
and
(pointer: fine) {

  .project-action-link:hover,
  .project-info-action:hover,
  .project-external-link:hover,
  .project-persistent-link:hover {

    transform:
      translate3d(
        7px,
        -2px,
        0
      )
      rotate(-1deg);

    letter-spacing:
      -.035em;

  }


  .project-action-link:hover::after,
  .project-info-action:hover::after,
  .project-external-link:hover::after,
  .project-persistent-link:hover::after {

    transform:
      scaleX(1);

    transform-origin:
      left center;

  }

}



/* ==========================================================
   VISUAL CHAPTER DEPTH

   The gallery + project data behaves like a sheet
   floating above the editorial information below.
========================================================== */

.project-page,
.project-chapter-visual {

  position:
    relative;

  z-index:
    30;

  box-shadow:
    0
    30px
    65px
    rgba(
      17,
      17,
      17,
      .10
    );

}



/* Slightly more concentrated shadow at the seam */

.project-page::after,
.project-chapter-visual::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    -22px;

  height:
    22px;

  pointer-events:
    none;

  background:
    linear-gradient(
      to bottom,
      rgba(
        17,
        17,
        17,
        .055
      ),
      rgba(
        17,
        17,
        17,
        0
      )
    );

}

@media (min-width: 801px) {
  .project-chapter-sidebar-main {
    position: relative;
  }

  .project-chapter-guidance {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 6px);
    margin: 0;
  }

  .project-chapter-heading {
    padding-top: 0;
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media
(max-width: 800px) {

  .project-stage-actions,
  .project-chapter-actions {

    margin-top:
      clamp(
        28px,
        8vw,
        42px
      );

  }


  .project-info-actions {

    margin-top:
      clamp(
        52px,
        14vw,
        78px
      );

  }


  .project-page,
  .project-chapter-visual {

    box-shadow:
      0
      20px
      42px
      rgba(
        17,
        17,
        17,
        .075
      );

  }

}

/* Additional chapters repeat chapter one's two-column status composition. */
@media (min-width: 801px) {
  .project-chapter-status-grid .project-chapter-guidance {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    margin: 0;
  }

  .project-chapter-sidebar-main .project-chapter-actions {
    margin-top: clamp(34px, 4.8vh, 54px);
  }
}