html.has-sheet {
  --rail-x: calc(var(--gutter) / 2);
  --beam: 160px;
}

/* Sheet: content below the hero framed by the rails, closed by a bottom line above the footer. */

html.has-sheet [data-sheet] {
  position: relative;
  /* width:auto — when main is the sheet, override main{width:100%} so rail margins shrink the box instead of shifting it right */
  width: auto;
  max-width: none;
  margin: 0 var(--rail-x);
  border: 1px solid var(--rail-line);
  border-top: 0;
}

html.has-sheet [data-sheet]::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -5px;
  right: -5px;
  height: 9px;
  color: var(--rail-cross);
  background:
    linear-gradient(currentColor, currentColor) left 4px top 0 / 1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) left 0 top 4px / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right 4px top 0 / 1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) right 0 top 4px / 9px 1px no-repeat;
  pointer-events: none;
}

html.has-sheet [data-sheet] .home-section,
html.has-sheet [data-sheet] .library-page__container,
html.has-sheet [data-sheet] .blog-page__container,
html.has-sheet [data-sheet] .case-page__container {
  padding-left: calc(var(--gutter) - var(--rail-x) - 1px);
  padding-right: calc(var(--gutter) - var(--rail-x) - 1px);
}

html.has-sheet [data-rail] {
  position: relative;
}

html.has-sheet [data-rail]::before,
html.has-sheet [data-rail]::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

html.has-sheet [data-rail]::before {
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rail-line);
}

/* "+" marks where the section line meets the sheet edges. */
html.has-sheet [data-rail]::after {
  top: -4px;
  left: -5px;
  right: -5px;
  height: 9px;
  color: var(--rail-cross);
  background:
    linear-gradient(currentColor, currentColor) left 4px top 0 / 1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) left 0 top 4px / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right 4px top 0 / 1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) right 0 top 4px / 9px 1px no-repeat;
  transition: color .4s ease;
}

html.has-sheet [data-rail].is-lit::after {
  color: var(--rail-light);
}

.sheet__beam {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 1px;
  height: calc(var(--beam) * 2);
  background: linear-gradient(transparent, var(--rail-light), transparent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(var(--beam-y, 0px) - var(--beam)));
  transition: opacity .4s ease;
  will-change: transform;
}

.sheet__beam::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 9px;
  background: linear-gradient(transparent, var(--rail-glow), transparent);
  filter: blur(4px);
}

.sheet__beam--left {
  left: -1px;
}

.sheet__beam--right {
  right: -1px;
}

[data-sheet].is-beaming .sheet__beam {
  opacity: 1;
}

html.has-sheet .footer {
  border-top: 0;
}

@media (max-width: 767px) {
  /* Keep rail crosses (>=5px arms) inside the viewport — never cause horizontal pan */
  html.has-sheet {
    --rail-x: 6px;
  }

  html.has-sheet [data-sheet] {
    width: auto;
    max-width: none;
    margin: 0 var(--rail-x);
    border: 1px solid var(--rail-line);
    border-top: 0;
  }

  /* Extra top air after hero dunes so rail crosses sit clearly below the photo */
  html.has-sheet main:has(.hero) > [data-sheet] {
    margin-top: 28px;
  }

  html.has-sheet [data-sheet] .home-section,
  html.has-sheet [data-sheet] .library-page__container,
  html.has-sheet [data-sheet] .blog-page__container,
  html.has-sheet [data-sheet] .case-page__container {
    padding-left: calc(var(--gutter) - var(--rail-x) - 1px);
    padding-right: calc(var(--gutter) - var(--rail-x) - 1px);
  }
}