/* ============================================================
   LAYOUT · EDITORIAL
   A more distinctive homepage structure: split asymmetric hero,
   spec ribbon, numbered sections, bento amenities, big-number
   feature band. Uses the same design tokens, so every colour
   theme still applies on top of it.
   ============================================================ */

/* ---------- Spec ribbon ---------- */
.ed-ribbon{background:var(--gold)}
.ed-ribbon .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 1.5rem;padding:1.05rem 0}
.ed-ribbon span{color:#fff;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;display:flex;gap:.65rem;align-items:center}
.ed-ribbon span::before{content:"";width:6px;height:6px;background:rgba(255,255,255,.85);border-radius:50%}

/* ---------- Numbered section header ---------- */
.ed-num{font-family:var(--font-display);font-size:clamp(3.4rem,8vw,7rem);line-height:.7;
  color:var(--line);display:block;margin-bottom:.5rem}
.ed-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}

/* ---------- Big-number feature band ---------- */
.ed-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.5rem}
.ed-why-col{padding:0 clamp(1.2rem,2.5vw,2.4rem)}
.ed-why-col + .ed-why-col{border-left:1px solid var(--line)}
.ed-why-col .n{font-family:var(--font-display);font-size:3rem;color:var(--gold-deep);line-height:1}
.ed-why-col h3{font-size:1.35rem;margin:.6rem 0 .5rem}
.ed-why-col p{color:var(--muted);font-size:.96rem;margin:0}

/* ---------- Bento amenities ---------- */
.ed-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:1rem;grid-auto-flow:dense}
.ed-tile{position:relative;overflow:hidden;border-radius:2px;background:var(--ink)}
.ed-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;
  transition:transform 1s var(--ease)}
.ed-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(12,11,7,.86))}
.ed-tile h3{position:absolute;left:1.2rem;right:1.2rem;bottom:1rem;z-index:2;color:#fff;font-size:1.25rem;margin:0;
  transition:transform .5s var(--ease)}
.ed-tile .no{position:absolute;top:1rem;left:1.2rem;z-index:2;color:var(--gold-2);font-size:.72rem;letter-spacing:.2em}
.ed-tile:hover img{transform:scale(1.07)}
.ed-tile:hover h3{transform:translateY(-4px)}
.ed-tile.big{grid-column:span 2;grid-row:span 2}
.ed-tile.big h3{font-size:1.9rem}
.ed-tile.wide{grid-column:span 2}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .ed-intro-grid{grid-template-columns:1fr}
  .ed-why-grid{grid-template-columns:1fr;gap:1.8rem}
  .ed-why-col + .ed-why-col{border-left:0;border-top:1px solid var(--line);padding-top:1.8rem}
  .ed-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .ed-tile.big{grid-column:span 2;grid-row:span 2}
  .ed-tile.wide{grid-column:span 2}
}
@media (max-width:560px){
  .ed-bento{grid-template-columns:1fr;grid-auto-rows:200px}
  .ed-tile.big,.ed-tile.wide{grid-column:span 1;grid-row:span 1}
}