/* Shared decorative depth, loaded after each microsite's photo and layout rules. */
body.design-02 .thumb,
body.design-02 .process-card,
body.design-02 .site-footer {
  position: relative;
}

/* Existing borders retain their width so photo crops and card sizes stay intact. */
body.design-02 .thumb {
  border-color: #f1dba0 #b28c3e #896827 #dbc17f;
  box-shadow:
    inset 0 1px 0 #ffffffd9,
    inset 0 -2px 0 #091f5926,
    0 5px 0 #775b2b,
    0 12px 24px #020d2c40;
}

body.design-02 .process-card {
  border-color: #f8fcff #b8c8d7 #8297ae #dce7ef;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -2px 0 #091f5912,
    0 4px 0 #8397ac,
    0 10px 22px #091f591c;
}

body.design-02 .site-footer {
  border-color: #f1dba0 #b28c3e #896827 #dbc17f;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -2px 0 #091f5926,
    0 5px 0 #8d713b,
    0 13px 26px #091f5924;
}

body.design-02 .thumb::after,
body.design-02 .process-card::after,
body.design-02 .site-footer::after {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: 1;
  border: 1px solid #e0bc6870;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #ffffffad, inset 0 -1px 0 #091f591a;
  pointer-events: none;
}

body.design-02 .process-card::after {
  border-color: #a8bacb55;
}

/* Narrow rails provide depth without adding a border to the hero photo itself. */
body.design-02 .graphite-photo .photo-stage::after {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: 1;
  border: 1px solid #e0bc6899;
  box-shadow:
    0 0 0 1px #fff4,
    inset 0 1px 0 #fff7,
    inset 0 -2px 0 #091f5966;
  pointer-events: none;
}

/* State cues remain separate from the ornamental bevel. */
body.design-02 .thumb.active,
body.design-02 .thumb[aria-pressed="true"] {
  border-color: #f0d68c;
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 0 #775b2b,
    0 12px 24px #020d2c40;
  outline: 2px solid #f0d68c;
  outline-offset: 4px;
}

body.design-02 .thumb:focus-visible {
  outline: 3px solid #fff0b6;
  outline-offset: 5px;
}

@media (hover: hover) {
  body.design-02 .thumb:hover {
    border-color: #fff0b6 #d0a953 #a68133 #f0d68c;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -2px 0 #091f5926,
      0 5px 0 #775b2b,
      0 12px 24px #020d2c55;
  }
}

/* Touch screens use solid bevels rather than large soft shadow layers. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body.design-02 .thumb,
  body.design-02 .thumb:hover,
  body.design-02 .thumb.active,
  body.design-02 .thumb[aria-pressed="true"],
  body.design-02 .site-footer {
    box-shadow: inset 0 1px 0 #ffffffd9, 0 3px 0 #8d713b;
  }

  body.design-02 .process-card {
    box-shadow: inset 0 1px 0 #fff, 0 3px 0 #8397ac;
  }

  body.design-02 .thumb::after,
  body.design-02 .process-card::after,
  body.design-02 .site-footer::after {
    inset: 2px;
    border-radius: 13px;
  }

  body.design-02 .graphite-photo .photo-stage::after {
    inset: 3px;
  }
}

@media (forced-colors: active) {
  body.design-02 .thumb::after,
  body.design-02 .process-card::after,
  body.design-02 .site-footer::after,
  body.design-02 .graphite-photo .photo-stage::after {
    display: none;
  }
}