/* Desktop-only linen surround. Content and mobile styles are unchanged.
   No transformed wrapper: dialogs and fixed controls retain the viewport. */
@media (min-width:1360px) {
  html:has(body[data-page]) {
    --desktop-page-width:min(1560px, calc(100vw - 80px));
    --desktop-surface-mask:
      url('../media/desktop-paper-edge-left.svg') left top / 12px 240px repeat-y,
      linear-gradient(#000,#000) center / calc(100% - 24px) 100% no-repeat,
      url('../media/desktop-paper-edge.svg') right top / 12px 240px repeat-y;
    background:#eee5ce url('../media/desktop-linen.jpg') center top / 768px 2048px repeat;
    overflow-x:clip;
  }
  body[data-page] {
    position:relative;
    width:var(--desktop-page-width);
    max-width:1560px;
    margin-inline:auto;
    background:transparent;
    isolation:isolate;
    overflow:visible;
    box-shadow:none;
  }
  /* Fray the background itself, never add a cream strip beside coloured
     sections or mask the content and its overhanging plants. */
  body[data-page]::before {
    content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
    background:var(--paper,#f5f0e4);
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  body[data-page]::after{display:none}
  .expedition-header,.expedition-page,.archive-page{background-color:transparent}
  /* The clipping boundary is the screen edge, not the paper edge.
     Padding keeps the content at exactly its previous paper width. */
  body[data-page]>main:not(.species-detail){
    width:100vw;max-width:none;box-sizing:border-box;
    margin-inline:calc((var(--desktop-page-width) - 100vw)/2);
    padding-inline:calc((100vw - var(--desktop-page-width))/2);
    overflow:clip;
    background:transparent;
  }
  .expedition-page,.archive-page,.support-page{overflow:visible}
  .botanical-edge{overflow:visible;contain:none}

  /* Use the available paper width, not the wider browser window. */
  .atlas-section{padding-inline:max(6%,calc((100% - 1240px)/2))}
  .atlas-section .region-explorer{
    grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);
  }
  .mission-scene{padding-inline:max(8%,calc((100% - 1160px)/2));background:transparent}
  .mission-background{
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  .atlas-section,.voices-section{background:transparent}
  .atlas-section::before{
    inset:0;height:auto;transform:none;z-index:-1;background:#75252a;
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  .archive-page .atlas-section::before{clip-path:none}
  .voices-section{overflow:visible}
  .voices-section::after{
    content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:#eee6d6;
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  .expedition-footer,.species-area>.expedition-footer{background:transparent}
  .expedition-footer .footer-main::before{
    content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:#802019;
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  .species-area>.expedition-footer .footer-main::before{background:#204b39}
  .support-strip{background:transparent}
  .support-strip::before{
    content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
    background:var(--forest,#204b39);
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  .support-strip>.pointer-events-none{
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  /* Previously viewport-wide section grounds now follow the paper surface. */
  .field-introduction::before{
    inset-inline:calc((100% - var(--desktop-page-width))/2);
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  .project-garden::before{
    width:var(--desktop-page-width);
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  .botanical-edge{inset-inline:calc((100% - var(--desktop-page-width))/2)}
  .voices-section{padding-inline:max(5%,calc((var(--desktop-page-width) - 1480px)/2))}
  /* Anchor existing plants to the new page edges, not the window edges. */
  .hero-vine{right:min(-45px,calc((1440px - var(--desktop-page-width))/2 - 45px))}
  .hero-fern{right:min(-1px,calc((1440px - var(--desktop-page-width))/2 - 1px))}
  .archive-vine{right:calc((100% - var(--desktop-page-width))/2)!important}
  .project-fern{right:min(-90px,calc((1280px - var(--desktop-page-width))/2 - 25px))}
  .project-vine{right:min(-100px,calc((1280px - var(--desktop-page-width))/2 - 70px))}
  .journal-section::before{left:min(-105px,calc((1250px - var(--desktop-page-width))/2 - 105px))}
  .field-introduction::after{left:min(-110px,calc((1250px - var(--desktop-page-width))/2 - 80px))}
  .specimen-section::after{right:min(-85px,calc((1310px - var(--desktop-page-width))/2 - 75px))}
  .specimen-section .specimen-fern{left:-90px;bottom:0;transform:none}
  .specimen-section .botanical-edge::after{top:0;right:-35px}
  /* At the visible header seam the rotated cutout's cropped edge ends
     40px before its image box. Its natural fronds may overhang below it. */
  .support-hero::after{right:calc((100% - var(--desktop-page-width))/2 - 40px)}
  .project-garden::after{left:min(-105px,calc((1280px - var(--desktop-page-width))/2 - 90px))}
  .shop-botanical-left,.shop-fern-new{left:calc((100% - var(--desktop-page-width))/2)}
  .shop-botanical-right,.shop-vine-new{right:calc((100% - var(--desktop-page-width))/2)}
  /* Only the cropped upper trunk follows the paper's frayed right edge.
     The rest of the silhouette remains unmasked, including the fronds. */
  .shop-botanical-right,.archive-heading .archive-vine{
    -webkit-mask:
      linear-gradient(#000,#000) left top / calc(100% - 12px) 100% no-repeat,
      url('../media/desktop-paper-edge.svg') right top / 12px 240px repeat-y,
      linear-gradient(#000,#000) left bottom / 100% calc(100% - 80px) no-repeat;
    mask:
      linear-gradient(#000,#000) left top / calc(100% - 12px) 100% no-repeat,
      url('../media/desktop-paper-edge.svg') right top / 12px 240px repeat-y,
      linear-gradient(#000,#000) left bottom / 100% calc(100% - 80px) no-repeat;
  }
  /* The top vine grows out of the header seam; its transparent lower end
     overhangs the linen. It cannot block links or occupy content space. */
  body[data-page=home]>.expedition-header::after {
    content:"";position:absolute;left:0;top:calc(100% - 2px);
    width:124px;height:510px;
    background:url('../media/shop-vine-natural.png') center top / contain no-repeat;
    pointer-events:none;z-index:0;transform:scaleX(-1);
  }
  /* Side gutters must stay transparent on every public page. Plants with
     cropped trunks are replaced by complete cutouts. Thin stem ends attach
     to a section seam; the leaves remain free to overhang the paper. */
  .expedition-hero::before,.expedition-hero::after,.archive-heading::before{
    width:var(--desktop-page-width);
  }
  .expedition-hero>.hero-vine{
    content:url('../media/shop-vine-natural.png');
    width:300px;right:calc((100% - var(--desktop-page-width))/2);top:0!important;transform:none;
    clip-path:none;mask-image:none;-webkit-mask-image:none;
  }
  .expedition-hero>.hero-fern{
    content:url('../media/botanical-natural.png');
    width:400px;right:calc((100% - var(--desktop-page-width))/2);bottom:0!important;transform:scaleX(-1);
  }
  .voices-section::before{
    background-image:url('../media/shop-vine-natural.png');
    background-position:right top;width:185px;height:320px;
    left:0;top:0;transform:scaleX(-1);
    mask-image:none;-webkit-mask-image:none;
  }
  .field-introduction .botanical-edge::after{
    background-image:url('../media/shop-vine-natural.png');
    width:190px;height:360px;right:0;top:0;
    transform:rotate(-10deg);transform-origin:right top;
    mask-image:none;-webkit-mask-image:none;
  }
  .atlas-section .atlas-fern{
    content:url('../media/botanical-natural.png');
    width:330px;right:0;top:-160px!important;bottom:auto!important;
    transform:scaleX(-1);filter:drop-shadow(2px 6px 8px #17332220);
  }
  /* Let the fern cross the forest seam instead of placing the later
     section's isolated background in front of it. */
  .expedition-page>.specimen-section{z-index:2}
  .specimen-section .botanical-edge{top:-22px}
  .specimen-section .specimen-fern{
    content:url('../media/botanical-natural.png');
    width:340px;left:-45px;bottom:-42px;transform:rotate(-12deg);
  }
  .mission-scene .mission-fern{
    content:url('../media/botanical-natural.png');
    width:330px;left:10px;bottom:12px;transform:rotate(8deg);
  }
  /* The subdued vine on association pages also has a complete silhouette,
     and a stem growing from the header seam instead of cropped leaves. */
  .association-lead{overflow:visible}
  .association-lead::after{
    background-image:url('../media/shop-vine-natural.png');
    width:210px;height:330px;top:0;
    right:calc((100% - var(--desktop-page-width))/2);
    transform:rotate(-7deg);transform-origin:right top;
  }

  .specimen-section .botanical-edge::before{
    background-image:url('../media/shop-vine-natural.png');
    width:190px;height:330px;left:0;transform:scaleX(-1);
    mask-image:none;-webkit-mask-image:none;
  }
  .journal-section .botanical-edge::after{
    background-image:url('../media/shop-vine-natural.png');
    width:180px;height:350px;right:0;top:0;transform:none;
    mask-image:none;-webkit-mask-image:none;
  }
  .journal-section .botanical-edge::before{
    left:-26px;top:0;
    mask-image:none;-webkit-mask-image:none;
  }
  /* The forest sits on the same frayed paper silhouette as its footer.
     Only its background is masked: photos, paper records and vines stay free. */
  .species-area .species-detail.detail-wrap{background:transparent;overflow:visible}
  .species-area .species-detail.detail-wrap::before{
    content:"";display:block;position:absolute;inset:0;height:auto;max-height:none;
    z-index:-1;pointer-events:none;transform:none;clip-path:none;
    background:linear-gradient(180deg,#f5f0e4 0,#dfe4d1ed 13%,#d9e0cce8 70%,#bdc6abd9 88%,#204b39 100%),url('../media/rainforest.webp') center / cover no-repeat;
    -webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);
  }
  body[data-page]::before,.atlas-section::before,.voices-section::after,
  .field-introduction::before,.project-garden::before,
  .expedition-footer .footer-main::before,.support-strip::before,
  .support-strip>.pointer-events-none,.mission-background,
  .species-area .species-detail.detail-wrap::before{
    -webkit-mask-position:left var(--desktop-edge-phase,0px),center,right var(--desktop-edge-phase,0px);
    mask-position:left var(--desktop-edge-phase,0px),center,right var(--desktop-edge-phase,0px);
  }
  /* Generated from the measured page contour, not an independently repeated
     edge image on the plant. Masking ends below the cropped-origin zone. */
  body[data-page] [data-desktop-plant-mask]{
    -webkit-mask-image:var(--desktop-plant-mask);mask-image:var(--desktop-plant-mask);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-position:0 0;mask-position:0 0;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  body[data-page] [data-desktop-before-mask]::before{
    -webkit-mask-image:var(--desktop-before-mask);mask-image:var(--desktop-before-mask);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-position:0 0;mask-position:0 0;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  body[data-page] [data-desktop-after-mask]::after{
    -webkit-mask-image:var(--desktop-after-mask);mask-image:var(--desktop-after-mask);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-position:0 0;mask-position:0 0;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }

}

@media(min-width:1360px){.species-area .portrait-flora{overflow:visible}}

/* Selected forest-floor treatment. The soil never overhangs the paper. */
.hero-soil{display:none}
@media(min-width:701px){
 .expedition-hero>.hero-soil{display:block;position:absolute;pointer-events:none;left:0;right:0;bottom:1px;height:clamp(135px,17vw,230px);z-index:3;background:url('../media/hero-forest-soil.png') right bottom / min(650px,60%) 100% no-repeat}
 .voices-section::before{background-image:url('../media/hanging-maidenhair.png');background-position:left top;background-size:contain;transform:none;width:195px;height:370px;left:0;top:0;bottom:auto;mask-image:none;-webkit-mask-image:none;opacity:1}
}
@media(min-width:1360px){
 .expedition-hero>.hero-soil{left:50%;right:auto;width:var(--desktop-page-width);transform:translateX(-50%);-webkit-mask:var(--desktop-surface-mask);mask:var(--desktop-surface-mask);-webkit-mask-position:left var(--desktop-edge-phase,0px),center,right var(--desktop-edge-phase,0px);mask-position:left var(--desktop-edge-phase,0px),center,right var(--desktop-edge-phase,0px)}
 .expedition-hero>.hero-fern{bottom:25px!important}
 .voices-section::before{width:195px;height:370px;left:0;transform:none}
}