/* ============================================================
   SOBRE — page specific styles
   ============================================================ */
/* page hero */
.page-hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:#1a1714}
.page-hero .ph{position:absolute;inset:0}
.page-hero .hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;z-index:0}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(8,7,5,.34),rgba(8,7,5,.24) 42%,rgba(8,7,5,.86)),
  linear-gradient(90deg,rgba(8,7,5,.55),rgba(8,7,5,.10) 58%)}
.page-hero .container{position:relative;z-index:2;padding-bottom:clamp(48px,8vw,96px)}
.page-hero .eyebrow{color:var(--gold-3);display:block;margin-bottom:22px}
.page-hero h1{font-weight:200;text-transform:uppercase;font-size:clamp(44px,9vw,116px);line-height:.98;letter-spacing:.01em}
.page-hero p{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,28px);color:rgba(255,255,255,.9);max-width:30ch;margin-top:26px}

/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.story.flip{direction:rtl}.story.flip>*{direction:ltr}
.story .text h2{font-weight:200;text-transform:uppercase;font-size:clamp(26px,3.4vw,44px);line-height:1.1;margin-bottom:26px;letter-spacing:.01em}
.story .text p{color:var(--ink-soft);margin-bottom:20px;font-size:clamp(15px,1.5vw,17px);max-width:46ch}
.story .text .eyebrow{display:block;margin-bottom:18px}
.story .media .ph{aspect-ratio:4/5;width:100%}
.story .media.land .ph{aspect-ratio:5/6}
.story .media .simg{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;display:block}
.story .media.land .simg{aspect-ratio:5/6}

.first-letter::first-letter{font-family:var(--serif);font-style:italic;font-size:3.4em;line-height:.8;float:left;padding:6px 12px 0 0;color:var(--gold-4)}

/* pillars */
.pillars{background:var(--cream-2)}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px)}
.pillar{text-align:center}
.pillar .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold-4);display:block;margin-bottom:18px}
.pillar h3{font-weight:300;text-transform:uppercase;font-size:clamp(18px,2vw,24px);letter-spacing:.06em;margin-bottom:14px}
.pillar p{color:var(--ink-soft);font-size:14.5px;max-width:30ch;margin:0 auto}
.pillar .div{width:34px;height:1px;background:var(--gold-grad);margin:0 auto 22px}

/* quote */
.quote-band{background:var(--ink);color:var(--cream);text-align:center;position:relative;overflow:hidden}
.quote-band .ph{position:absolute;inset:0;opacity:.18}
.quote-band .qbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.22;z-index:0}
.quote-band .container{position:relative;z-index:2}
.quote-band blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(26px,4.2vw,52px);line-height:1.32;max-width:26ch;margin:0 auto 32px}
.quote-band cite{font-style:normal;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(249,240,232,.55)}

@media (max-width:860px){
  .story{grid-template-columns:1fr;gap:34px}
  .story.flip{direction:ltr}
  .pillar-grid{grid-template-columns:1fr;gap:48px}
}