/* William Morris desktop frame 1:974, measured at 1200px.
   Image crops are exported from the source nodes; mobile rules remain in styles.css. */
@media (min-width:761px){
  .william-page .figma-desktop-only{display:block}

  /* 1:359 — 600px hero, with the original 600px-square sculpture crop. */
  .william-page .detail-hero{
    height:50vw;min-height:0;
    background:var(--butter) url('assets/figma-final/william-hero-paper.png') center top/cover no-repeat;
    color:var(--ink);
  }
  .william-page .detail-title-panel,
  .william-page .detail-hero-image{
    position:relative;flex:0 0 50%;width:50%;height:100%;min-height:0;aspect-ratio:auto;
  }
  .william-page .detail-title-panel{display:block;background:transparent;text-align:center}
  .william-page .detail-title-panel::before{content:none}
  .william-page .detail-title-panel>div{
    position:absolute;top:calc(50% - 77px);left:calc(50% - 9.5px);transform:translateX(-50%);
    width:455px;max-width:calc(100% - 40px);height:154.303px;padding:0;
  }
  .william-page .detail-title-panel h1{
    position:absolute;top:0;left:calc(50% + 2.365px);transform:translateX(-50%);
    width:239px;max-width:none;height:62px;margin:0;
    font:500 25px/31px Lora,Georgia,serif;letter-spacing:.75px;text-align:center;white-space:nowrap;
  }
  .william-page .detail-title-panel p{
    position:absolute;top:86.303px;left:0;width:100%;max-width:none;height:68px;margin:0;
    font:400 15px/23.236px Lora,Georgia,serif;letter-spacing:.15px;text-align:center;
    text-wrap:wrap;text-shadow:none;
  }
  .william-page .detail-hero-image{order:-1}
  .william-page .detail-hero-image picture{display:block;width:100%;height:100%}
  .william-page .detail-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}

  /* 1:405 is an image fill in Figma, despite its “WM Prize Video” layer name. */
  .william-page .william-film{height:50vw;background:var(--ink)}
  .william-page .william-film img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

  /* 1:456 — the text sits beside the original five drifting collage images. */
  .william-page .detail-story{
    height:700px;min-height:0;padding:0;overflow:hidden;
    background:var(--ivory) url('assets/figma-final/william-story-paper.png') center top/cover no-repeat;
    color:var(--ink);
  }
  .william-page .detail-story::before{content:none}
  .william-page .detail-story .mobile-folder-panel{display:block;position:relative;width:100%;max-width:1200px;height:100%;margin:auto}
  .william-page .detail-story .section-canvas{height:700px}
  .william-page .detail-story p{
    position:absolute;left:8.666667%;top:111px;width:460px;max-width:42%;height:138px;margin:0;
    font:400 15px/23.236px Lora,Georgia,serif;letter-spacing:.15px;text-align:left;text-wrap:wrap;
  }
  .william-page .detail-story .story-paragraph,
  .william-page .detail-story p .figma-desktop-only{display:inline}
  .william-page .detail-story .story-paragraph+.story-paragraph{margin:0}
  .william-page .detail-story img{border:0;object-fit:fill}
  .william-page .detail-story .collage-0{left:59.416667%;top:233px;width:179px;height:179px}
  .william-page .detail-story .collage-1{left:78.333333%;top:452px;width:54px;height:54px}
  .william-page .detail-story .collage-2{left:40.25%;top:536px;width:54px;height:54px}
  .william-page .detail-story .collage-3{left:78.333333%;top:64px;width:111px;height:111px}
  .william-page .detail-story .collage-4{left:17.583333%;top:412px;width:80px;height:80px}

  /* 1:246 — source photograph, icon and Contact typography. */
  .william-page .detail-contact{
    height:599px;min-height:0;padding:0;
    background:var(--ink) url('assets/figma-final/william-contact-crop.png') center top/cover no-repeat;
    color:var(--ivory);text-align:center;
  }
  .william-page .detail-contact .contact-icon{
    top:141px;left:47.75%;width:71px;height:76px;
    object-fit:fill;filter:none;mix-blend-mode:normal;opacity:1;
  }
  .william-page .detail-contact h2{
    top:230px;left:calc(50% - 1.508px);transform:translateX(-50%);width:138px;height:27px;margin:0;
    font:700 34.883px/26.578px Lora,Georgia,serif;letter-spacing:1.0465px;text-align:center;
  }
  .william-page .detail-contact p{
    top:279.056px;left:calc(50% + .113px);width:502.227px;max-width:calc(100% - 48px);height:67.742px;margin:0;
    font:400 15px/23.333px Lora,Georgia,serif;letter-spacing:.15px;text-align:center;text-wrap:wrap;
  }
  .william-page .detail-contact .dark-button{
    top:347px;left:calc(50% - .746px);width:79.646px;height:21.571px;min-width:0;min-height:0;padding:0;
    border:.83px solid var(--ivory);border-radius:0;background:transparent;color:var(--ivory);
    font:700 12.445px/16px Lora,Georgia,serif;letter-spacing:0;white-space:nowrap;
  }
  .william-page .detail-contact .dark-button:is(:hover,:focus-visible){background:var(--ivory);color:var(--ink)}
}