/* Option 4 · The Arch — the artist in a tall arch of soft colour, the links
   tapered across the corners as in the reference: Florals top-left,
   Customs bottom-right. Quiet and gallery-like. */
.shp{ background:#fff }
.shp-me{ grid-row:1/4; padding:clamp(24px,3vw,44px) clamp(18px,2.4vw,36px) 0; border-radius:999px 999px 0 0; background:linear-gradient(180deg, color-mix(in srgb, var(--c-peach) 55%, #fff), color-mix(in srgb, var(--c-lilac) 40%, #fff)); width:clamp(280px,38vw,560px); overflow:hidden }
.shp-me img{ filter:drop-shadow(0 14px 18px rgba(51,43,66,.2)) }
.shp-link--florals{ grid-row:1; align-self:start; justify-self:start; text-align:left; flex-direction:column; align-items:flex-start; gap:8px }
.shp-link--customs{ grid-row:3; align-self:end; justify-self:end; text-align:right; flex-direction:column; align-items:flex-end; gap:8px }
.shp-link{ font-size:clamp(1.4rem,2.6vw,2.2rem); letter-spacing:.16em; text-transform:uppercase; font-weight:500 }
.shp-link .shp-copy{ font-family:var(--font-body); font-size:var(--fs-sm); letter-spacing:0; text-transform:none; color:var(--ink-soft) }
.shp-bag{ display:none }
@media (max-width:760px){ .shp-link--florals{ align-items:flex-start } .shp-link--customs{ align-items:flex-end } }

/* pull the two links in toward the arch, and keep the right one clear of the
   edge so nothing is ever clipped */
.shp-stage{ max-width:1180px; margin-inline:auto; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:clamp(16px,2.6vw,36px); padding:0 clamp(24px,3vw,48px) }
.shp-link{ font-size:clamp(1.15rem,1.8vw,1.6rem); letter-spacing:.11em }
.shp-me{ width:clamp(260px,34vw,500px) }
.shp-link--florals{ align-self:start; margin-top:clamp(10px,2vw,30px) }
.shp-link--customs{ align-self:end; margin-bottom:clamp(10px,2vw,30px) }

/* the operator's marks: Florals a quarter of the way down, level with the top
   of the canvas; Customs three quarters down, level with the boots; both
   sitting just off the arch rather than in the far corners */
.shp-stage{ grid-template-rows:1fr 1fr; align-items:center }
.shp-me{ grid-row:1/3 }
.shp-link--florals{ grid-row:1; align-self:center; justify-self:end; text-align:right; align-items:flex-end; margin:0 clamp(6px,1.4vw,22px) 0 0 }
.shp-link--customs{ grid-row:2; align-self:center; justify-self:start; text-align:left; align-items:flex-start; margin:0 0 0 clamp(6px,1.4vw,22px) }
@media (max-width:760px){
  .shp-stage{ grid-template-rows:auto auto auto }
  .shp-me{ grid-row:2 }
  .shp-link--florals{ grid-row:1; justify-self:start; text-align:left; align-items:flex-start; margin:0 }
  .shp-link--customs{ grid-row:3; justify-self:end; text-align:right; align-items:flex-end; margin:0 }
}

/* on the site: boxed like the carousel band above it, on the sheet's ground */
.shp--boxed{ padding:0 clamp(12px,2.4vw,32px) clamp(18px,2.6vw,36px); background:transparent }
.shp--boxed > .wrap{ background:#fff; border:3px solid var(--ink); border-radius:22px; box-shadow:var(--sh-sticker); padding:clamp(14px,2vw,28px) clamp(14px,2vw,32px) }
.shp--boxed .shp-stage{ min-height:0 }
.shp--boxed .shp-me{ width:clamp(220px,28vw,400px) }

/* a thin rule under each link, a little heavier on hover */
.shp-link > span:not(.shp-bag){ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:9px; text-decoration-color:currentColor }
.shp-link:hover > span:not(.shp-bag), .shp-link:focus-visible > span:not(.shp-bag){ text-decoration-thickness:2px }
.shp-link:hover, .shp-link:focus-visible{ text-decoration:none }

/* thinner on the site: a smaller arch and tighter padding */
.shp--boxed > .wrap{ padding:clamp(10px,1.4vw,18px) clamp(14px,2vw,32px) }
.shp--boxed .shp-me{ width:clamp(200px,21vw,300px); padding-top:clamp(16px,2vw,28px) }
.shp--boxed .shp-link{ font-size:clamp(1.05rem,1.5vw,1.35rem) }

/* phones: everything centred — Shop florals above the arch, Shop customs below it */
@media (max-width:760px){
  .shp-stage{ grid-template-columns:1fr; grid-template-rows:auto auto auto; justify-items:center; padding:0 12px; row-gap:14px }
  .shp-me{ grid-column:1; grid-row:2; width:min(78vw,340px); justify-self:center }
  .shp-link--florals, .shp-link--customs{ grid-column:1; justify-self:center; text-align:center; align-items:center; margin:0; padding:6px 4px }
  .shp-link--florals{ grid-row:1 } .shp-link--customs{ grid-row:3 }
}