/* Keep the original desktop composition; enlarge it only on narrow screens. */
@media (max-width: 1024px) {
  :root {
    --castle-stage: calc(var(--castle-viewport-height, 100vh) - 35px);
    --castle-photo: min(80vw, calc(var(--castle-viewport-height, 100vh) * .72));
    --castle-gap: clamp(28px, 10vw, 72px);
  }
  @supports (height: 100svh) {
    :root {
      --castle-stage: calc(var(--castle-viewport-height, 100svh) - 35px);
      --castle-photo: min(80vw, calc(var(--castle-viewport-height, 100svh) * .72));
    }
  }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .scroll {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    top: 35px !important;
    height: var(--castle-stage) !important;
    touch-action: pan-y pinch-zoom;
  }
  .scroll-content { height: var(--castle-stage); }
  .slide {
    flex: none;
    width: calc(var(--castle-photo) + var(--castle-gap));
    /* The stagger remains proportional to the photo, rather than phone height. */
    padding: max(28px, calc((var(--castle-stage) - var(--castle-photo) * 1.1) / 2)) 0 max(56px, calc((var(--castle-stage) - var(--castle-photo) * 1.1) / 2));
  }
  .slide:last-child {
    width: calc(var(--castle-photo) + var(--castle-gap) * 2);
    padding-right: var(--castle-gap);
  }
  .slide__inner { padding-left: var(--castle-gap); }
  .slide__img { padding-top: 65%; }
  .slide__img img {
    border-width: clamp(4px, .7vw, 6px);
    box-shadow: 6px 6px 4px rgb(119 119 119 / 30%);
  }
  .slide__title {
    top: 22%;
    left: calc(var(--castle-gap) * .5);
    margin: 0;
    font-size: clamp(28px, calc(var(--castle-photo) * .1143), 64px);
    line-height: 1.2;
    white-space: nowrap;
  }
  .slide__sub-title {
    top: 6%;
    left: calc(var(--castle-gap) * .33);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - var(--castle-gap) * .33);
    font-size: clamp(11px, calc(var(--castle-photo) * .0286), 16px);
    line-height: 1.6;
  }
  .slide__sub-title span { display: inline-block; margin: 0; padding: 2px 5px; line-height: 1.5; }
  .slide__project {
    max-width: var(--castle-photo);
    padding-top: 10px;
    padding-bottom: 3px;
    font-size: clamp(12px, calc(var(--castle-photo) * .0329), 18px);
    line-height: 1.5;
    white-space: normal;
    text-align: right;
    background-size: 100% 5px;
  }
  .scrollbar { left: 12%; right: 12%; bottom: 8%; }
  .mask-line { width: min(70vw, 20rem); }
  .resize { display: none; }
}