/* Sweet's Flowers home page. Look from the Hero kit (BRIEF.md): stone, paper and one heart-pink band, a big
   Bodoni heading with one italic word opening every section, the morning-light photos. */

/* First screen: on phones the words sit above the cake and the photo fades up into the stone, never behind them. */
.hero{position:relative;height:calc(100svh - 64px);min-height:600px;overflow:hidden;background:var(--stone)}
.hero-ph{position:absolute;left:0;right:0;bottom:0;top:38%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 34%);mask-image:linear-gradient(to bottom,transparent,#000 34%)}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.hero-words{position:relative;z-index:2;padding:22px var(--gut) 0}
.hero h1{font-size:clamp(56px,15vw,150px);line-height:.98}
.hero .lead{margin-top:14px;max-width:30ch}
.hero .acts{margin-top:22px}

/* Sections */
.sec{padding:56px 0}
.sec h2{font-size:clamp(46px,12vw,96px)}
.sec .lead{margin-top:16px}
.sec .acts{margin-top:28px}
.ph{margin:0}
.ph img{width:100%;height:100%;object-fit:cover}

/* Flower cakes: paper, the list of her cakes beside two photos from the shoot */
.cakes{background:var(--paper)}
.cakes-grid{display:grid;gap:32px}
.list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.list a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:16px 0;text-decoration:none}
.list b{display:block;font-family:var(--display);font-weight:400;font-size:23px;line-height:1.15}
.list small{display:block;margin-top:4px;font-size:15px;color:var(--muted);line-height:1.45}
.list .p{font-weight:600;font-size:16px;white-space:nowrap}
.list a:hover b{font-style:italic}
.ph-a{aspect-ratio:4/3}
.ph-a img{object-position:center 60%}

/* Jelly art: stone, the photo first */
.jelly{background:var(--stone)}
.jelly-grid{display:grid;gap:32px}
.jelly .ph{aspect-ratio:4/3}
.facts{margin:26px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:600;font-size:15px}
.facts dd{margin:0;color:var(--muted);font-size:15px}

/* Your cake, your way: the one heart-pink band */
.custom{background:var(--pink)}
.custom-grid{display:grid;gap:32px}
.custom .lead{color:var(--ink)}
.custom .small{margin-top:18px;color:var(--ink)}
.custom .ph{aspect-ratio:1/1}
.custom .ph img{object-position:center 35%}

/* Order and find us: paper, the areas and the map */
.find{background:var(--paper)}
.find-grid{display:grid;gap:32px}
.areas{margin-top:18px;font-family:var(--display);font-style:italic;font-size:21px;line-height:1.4}
.links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:20px}
.links a{font-size:15px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;padding:6px 0}
.map-box{position:relative;aspect-ratio:1/1;background:var(--stone);overflow:hidden}
.map-fb{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;font-size:15px;color:var(--muted)}
.map-fb span{font-family:var(--display);font-size:24px;color:var(--ink)}
.map{position:absolute;inset:0;width:100%;height:100%;border:0;filter:sepia(.25) saturate(.8)}

/* Desktop: its own layout, the words beside each photo */
@media (min-width:900px){
  .hero{height:calc(100svh - 76px);min-height:640px}
  .hero-ph{top:0;-webkit-mask-image:none;mask-image:none}
  .hero-ph img{object-position:right center}
  .hero-words{position:absolute;left:6vw;top:50%;transform:translateY(-50%);padding:0;max-width:560px}
  .hero-words.rise{animation-name:rise-c}
  .hero h1{font-size:clamp(96px,10vw,156px)}
  .hero .lead{max-width:28ch}
  .sec{padding:120px 0}
  .cakes-grid{grid-template-columns:1fr 1fr;align-items:stretch;gap:80px}
  .ph-a{aspect-ratio:auto;height:100%;min-height:520px}
  .jelly .ph{aspect-ratio:4/5}
  .custom .ph{aspect-ratio:4/5}
  .map-box{aspect-ratio:4/3}
  .jelly-grid{grid-template-columns:1fr 1fr;align-items:center;gap:80px}
  .custom-grid{grid-template-columns:1fr 1.1fr;align-items:center;gap:80px}
  .find-grid{grid-template-columns:1fr 1.1fr;align-items:center;gap:80px}
}
@keyframes rise-c{from{opacity:0;transform:translateY(calc(-50% + 12px))}to{opacity:1;transform:translateY(-50%)}}

/* Very wide screens: the hero photo stops at 1920px, centred, with the stone behind it */
@media (min-width:1921px){.hero-ph{left:50%;right:auto;width:1920px;transform:translateX(-50%)}}