/* ── Section 3 · The Philosophy · /v3 ───────────────────────────────────
   Dark band between two paper sections. One text-free plate (scene in the
   right third, dark wall on the left) + live type + gold hairline cards.
   Headline is the rendered swash lettering (keyed PNG). data-plate drives the bench. */
.s3 { position:relative; overflow:hidden; background:#0E0C0A; padding:112px 0 124px; color:#F1E6CF; }
.s3-plate { position:absolute; inset:0; margin:0; }
.s3-plate img { width:100%; height:100%; object-fit:cover; object-position:0% 50%; display:block; }
/* guarantee a dark ground under the type whatever the plate does */
.s3-plate::after { content:""; position:absolute; inset:0;
  background: linear-gradient(to right, rgba(14,12,10,0.78) 0%, rgba(14,12,10,0.55) 42%, rgba(14,12,10,0) 68%); }
.s3-inner { position:relative; z-index:1; max-width:1420px; margin:0 auto; }  /* wider than the page container so the copy sits ~150px further left into the dark wall */
.s3-copy { max-width:720px; }  /* matches .s3-grid so the rule reaches the second card; headline capped by .s3-h2-img */

.s3-kicker { display:block; font-family:var(--font-ui); font-size:12px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:rgba(241,230,207,0.85); margin-bottom:24px; }
.s3-h2 { margin:0; }
/* rendered lettering: keyed PNG, glow baked (alt text carries the words) */
.s3-h2-img { display:block; width:100%; max-width:680px; height:auto;
  filter: drop-shadow(0 0 6px rgba(255,214,140,0.65)) drop-shadow(0 0 22px rgba(255,196,110,0.45)) drop-shadow(0 0 60px rgba(255,170,80,0.25)); }
/* live fallback, kept for the bench if a face comes back */
.s3-h2-live { display:block; font-family:'Oranienbaum','TiemposHeadline',Georgia,serif; font-weight:400; text-transform:uppercase; font-size:clamp(34px, 3.9vw, 60px); line-height:1.0; letter-spacing:0.02em; color:#F3E4C4; max-width:14em;
  text-shadow: 0 0 6px rgba(255,214,140,0.55), 0 0 22px rgba(255,196,110,0.35), 0 0 60px rgba(255,170,80,0.18); }
.s3-rule { border:0; border-top:1px solid #B8933F; margin:32px 0 40px; max-width:720px; }  /* same width as .s3-grid so the rule spans both cards */

.s3-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:720px; }
.s3-card { border:1px solid rgba(184,147,63,0.62); padding:26px 28px 30px; background:rgba(10,8,6,0.46); }
.s3-card-label { display:block; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.20em; text-transform:uppercase; color:rgba(241,230,207,0.92); margin-bottom:14px; }
.s3-card p { font-family:var(--font-body); font-size:15px; line-height:1.7; color:rgba(241,230,207,0.82); margin:0; }

/* card frames: keyed gold + cream renders as nine-slice border-image; hairline is the default */
.s3[data-frame="w01"] .s3-card { border:18px solid transparent; border-image:url(/second-chair-full/images/v3/s3/frame-w01.png) 44 / 18px stretch; padding:16px 18px 20px; background:transparent; }
.s3[data-frame="w02"] .s3-card { border:37px solid transparent; border-image:url(/second-chair-full/images/v3/s3/frame-w02.png) 93 / 37px stretch; padding:12px 14px 16px; background:transparent; }
.s3[data-frame="w03"] .s3-card { border:12px solid transparent; border-image:url(/second-chair-full/images/v3/s3/frame-w03.png) 30 / 12px stretch; padding:22px 24px 26px; background:transparent; }
.s3[data-frame="w04"] .s3-card { border:23px solid transparent; border-image:url(/second-chair-full/images/v3/s3/frame-w04.png) 57 / 23px stretch; padding:12px 14px 16px; background:rgba(10,8,6,0.46); background-clip:border-box; }
.s3[data-frame="w05"] .s3-card { border:40px solid transparent; border-image:url(/second-chair-full/images/v3/s3/frame-w05.png) 101 / 40px stretch; padding:12px 14px 16px; background:transparent; }
.s3[data-frame="w06"] .s3-card { border:18px solid transparent; border-image:url(/second-chair-full/images/v3/s3/frame-w06.png) 45 / 18px stretch; padding:16px 18px 20px; background:transparent; }

@media (max-width: 768px) {
  .s3 { padding:72px 0 88px; }
  .s3-plate img { object-position:78% 50%; }
  .s3-plate::after { background: linear-gradient(to bottom, rgba(14,12,10,0.82) 0%, rgba(14,12,10,0.62) 55%, rgba(14,12,10,0.35) 100%); }
  .s3-h2-live { font-size:clamp(34px, 9.4vw, 46px); }
  .s3-grid { grid-template-columns:1fr; gap:16px; }
}