/* Pressure, dry edges and a small lift of the pen on the lacquer surface.
   Decorative rules stay separate from image borders, controls and print. */
@media screen {
  :root {
    --ink-rule: url('/assets/ink-divider-1.svg');
    --ink-rule-color: #a49b88;
    --ink-rule-opacity: .42;
  }

  .masthead,
  body > footer,
  .shoot-page .section-shell:not(.direction),
  .shoot-page .closing,
  .shoot-page .look,
  .shoot-page .styling-note,
  .shoot-page .beauty .direction-grid > div,
  .shoot-page .direction > .direction-grid > div,
  .shoot-page .anchor-note,
  .shoot-page .shoot-schedule,
  .shoot-page .crew-row,
  .influence-list > li,
  .inspiration-end {
    position: relative;
  }

  body > footer,
  .shoot-page .section-shell:not(.direction),
  .shoot-page .closing,
  .shoot-page .look,
  .shoot-page .styling-note,
  .shoot-page .beauty .direction-grid > div,
  .shoot-page .direction > .direction-grid > div,
  .shoot-page .anchor-note,
  .shoot-page .shoot-schedule,
  .influence-list > li,
  .inspiration-end {
    border-top-color: transparent;
  }

  .masthead,
  .shoot-page .shoot-schedule,
  .shoot-page .crew-row {
    border-bottom-color: transparent;
  }

  body > footer::before,
  .shoot-page .section-shell:not(.direction)::before,
  .shoot-page .closing::before,
  .shoot-page .look::before,
  .shoot-page .styling-note::before,
  .shoot-page .beauty .direction-grid > div::before,
  .shoot-page .direction > .direction-grid > div::before,
  .shoot-page .anchor-note::before,
  .shoot-page .shoot-schedule::before,
  .influence-list > li::before,
  .inspiration-end::before,
  .masthead::after,
  .shoot-page .shoot-schedule::after,
  .shoot-page .crew-row::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--ink-rule-color);
    -webkit-mask: var(--ink-rule) center / 100% 100% no-repeat;
    mask: var(--ink-rule) center / 100% 100% no-repeat;
    opacity: var(--ink-rule-opacity);
    pointer-events: none;
  }

  body > footer::before,
  .shoot-page .section-shell:not(.direction)::before,
  .shoot-page .closing::before,
  .shoot-page .look::before,
  .shoot-page .styling-note::before,
  .shoot-page .beauty .direction-grid > div::before,
  .shoot-page .direction > .direction-grid > div::before,
  .shoot-page .anchor-note::before,
  .shoot-page .shoot-schedule::before,
  .influence-list > li::before,
  .inspiration-end::before {
    top: -2px;
  }

  .masthead::after,
  .shoot-page .shoot-schedule::after,
  .shoot-page .crew-row::after {
    bottom: -2px;
  }

  .shoot-page .section-shell:nth-of-type(3n + 1),
  .shoot-page .look:nth-child(2),
  .shoot-page .crew-row:nth-child(3n + 1),
  .influence-list > li:nth-child(3n + 1),
  .shoot-page .shoot-schedule {
    --ink-rule: url('/assets/ink-divider-2.svg');
  }

  .shoot-page .section-shell:nth-of-type(3n + 2),
  .shoot-page .look:nth-child(3),
  .shoot-page .crew-row:nth-child(3n + 2),
  .influence-list > li:nth-child(3n + 2),
  .shoot-page .styling-note,
  .shoot-page .closing,
  body > footer {
    --ink-rule: url('/assets/ink-divider-3.svg');
  }

  .shoot-page .look,
  .shoot-page .beauty .direction-grid > div,
  .shoot-page .direction > .direction-grid > div,
  .shoot-page .crew-row {
    --ink-rule-opacity: .36;
  }

  .shoot-page .shoot-schedule::after {
    -webkit-mask-image: url('/assets/ink-divider-3.svg');
    mask-image: url('/assets/ink-divider-3.svg');
  }
}
