/* v59 · 2026-11-07 · fix and polish pass */

/* 1. What we do: the three cards are real frosted glass, so the gold storyline passes softly BEHIND them
      instead of drawing a hard line across the card text */
.wwd-grid article{-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  background:linear-gradient(150deg,rgba(40,33,24,.55),rgba(18,15,11,.42))}
.wwd-grid article.on{background:linear-gradient(150deg,rgba(58,47,30,.6),rgba(22,18,12,.46))}

/* 2. Glass section on short screens: the heading was sliding under the fixed menu bar
      (laptop/tablet widths under 820px tall, and small phones) */
@media(min-width:701px) and (max-width:999px) and (max-height:819px){
  .anim #bespoke-glass .gl-head{padding-top:96px}
}
@media(max-width:700px) and (max-height:650px){
  .anim #bespoke-glass .gl-head{padding-top:82px}
}

/* 3. "Real photos. Polished characters." steps on phones: three even tiles instead of squeezed pills */
@media(max-width:600px){
  .sk-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;margin:10px 0!important}
  .sk-steps li{display:flex!important;flex-direction:column;align-items:flex-start;gap:4px!important;padding:10px 11px 11px!important;border-radius:16px!important;min-width:0;width:auto!important}
  .sk-steps li b{font-size:11px!important;line-height:1}
  .sk-steps li span{font-size:12.5px!important;line-height:1.22!important;overflow-wrap:anywhere}
}