/* ISIA2 — THE EXPERIENCE | Drop-in component for existing style.css + about.css */
.experience-section {
  --exp-gold: #cfb17a;
  --exp-gold-soft: #b3945e;
  --exp-line: #393d35;
  --exp-text: #ede4d5;
  --exp-muted: #a8aaa1;
  position: relative;
  padding-bottom: 110px;
}
.experience-section * { box-sizing: border-box; }
.experience-section .exp-section-heading { margin-bottom: 14px; }
.exp-editorial-intro { margin: 0 0 43px 53px; max-width: 790px; }
.exp-editorial-intro p { margin: 0; color: var(--exp-muted); font-size: clamp(14px, 1.65vw, 17px); line-height: 1.7; }
.exp-editorial-intro strong { color: #ddd2bd; font-weight: 500; }
.exp-overline { margin: 0 0 13px; font-size: 10px; font-weight: 700; letter-spacing: .19em; color: var(--exp-gold-soft); text-transform: uppercase; }
.exp-feature { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); border: 1px solid #575039; background: #181d19; min-height: 500px; overflow: hidden; }
.exp-feature-art { min-height: 480px; position: relative; overflow: hidden; background: #27352d; }
.exp-feature-art::after { content: ''; position: absolute; inset: 12% 0 0; background: linear-gradient(0deg, #111912d4 0%, #0c160d14 65%); pointer-events: none; }
.exp-feature-art img { display: block; width: 100%; height: 100%; min-height: 480px; position: absolute; inset: 0; object-fit: cover; object-position: 52% center; filter: saturate(.83) brightness(.89); transition: transform .6s ease; }
.exp-feature:hover .exp-feature-art img { transform: scale(1.035); }
.exp-art-corner { position: absolute; z-index: 1; bottom: 26px; left: 30px; right: 25px; padding-top: 14px; border-top: 1px solid #cab57f88; display: flex; gap: 12px; align-items: center; color: #f4e8cd; font: 11px/1.4 Georgia,serif; letter-spacing: .15em; }
.exp-art-corner span { color: #b69a68; }
.exp-feature-copy { padding: clamp(32px,4vw,57px); display: flex; flex-direction: column; justify-content: center; }
.exp-feature-copy h3 { font: 400 clamp(32px,3.8vw,49px)/1.16 Georgia,'Times New Roman',serif; letter-spacing: -.025em; color: var(--exp-text); margin: 0 0 25px; }
.exp-feature-copy > p:not(.exp-overline) { color: #b6b8ae; font-size: 14px; line-height: 1.85; margin: 0 0 13px; }
.exp-feature-copy strong { color: #d8c49a; font-weight: 600; }
.exp-stats { display: grid; grid-template-columns: .7fr 1fr 1.05fr; gap: 15px; border-top: 1px solid #43483d; margin-top: 24px; padding-top: 24px; }
.exp-stats div { display: flex; flex-direction: column; gap: 8px; }
.exp-stats strong { font: 400 clamp(24px,2.5vw,33px)/1 Georgia,serif; letter-spacing: .04em; color: #e1c78d; }
.exp-stats span { color: #888f84; font-size: 9px; letter-spacing: .1em; line-height: 1.4; }
.exp-subhead { display: flex; justify-content: space-between; align-items: end; gap: 26px; margin: 80px 0 28px; }
.exp-subhead h3, .exp-systems-head h3 { margin: 0; font: 400 clamp(28px,3.5vw,39px)/1.2 Georgia,'Times New Roman',serif; color: #eee5d5; max-width: 620px; }
.exp-subhead > p, .exp-systems-head > p { color: #a4aaa0; font-size: 13px; line-height: 1.8; margin: 0; max-width: 285px; }
.exp-journey { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid #58513f; border-bottom: 1px solid #3a3f36; }
.exp-step { padding: 25px clamp(20px, 2.7vw,36px) 31px 0; }
.exp-step + .exp-step { border-left: 1px solid var(--exp-line); padding-left: clamp(20px, 2.7vw,36px); }
.exp-step-top { display: flex; align-items: center; gap: 16px; color: #bf9e65; font: 12px Georgia,serif; }
.exp-step-top span:last-child { font: 700 10px/1.2 system-ui,sans-serif; letter-spacing: .16em; color: #827b6a; }
.exp-step-rule { display: block; width: 26px; height: 1px; background: #756548; }
.exp-step h4 { margin: 24px 0 9px; color: #e8decf; font: 400 25px/1.25 Georgia,'Times New Roman',serif; }
.exp-step p { min-height: 100px; margin: 0 0 23px; color: #a7aaa1; font-size: 13px; line-height: 1.82; }
.exp-step small { display: block; color: #af9468; font-size: 9px; letter-spacing: .11em; }
.exp-pillars { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 75px; }
.exp-pillar { border: 1px solid #414436; background: #1a1e1a; min-width: 0; }
.exp-pillar-media { position: relative; height: 280px; overflow: hidden; background: #202921; }
.exp-pillar-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #161d18 0%, transparent 55%); pointer-events: none; }
.exp-pillar-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; filter: saturate(.81); }
.exp-pillar:hover .exp-pillar-media img { transform: scale(1.05); }
.exp-pillar-media > span { position: absolute; bottom: 23px; left: 28px; z-index: 1; font-size: 10px; letter-spacing: .16em; font-weight: 700; color: #ebd2a0; }
.exp-pillar-body { padding: 29px 30px 34px; }
.exp-pillar-body h3 { color: #eee4d3; font: 400 clamp(26px,3vw,34px)/1.18 Georgia,serif; margin: 0 0 16px; }
.exp-pillar-body > p:last-child { color: #a7aaa1; font-size: 13px; line-height: 1.85; margin: 0; max-width: 500px; }
.exp-subhead--dungeons { margin-top: 83px; }
.exp-dungeons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.exp-dungeon { background: #191d19; border: 1px solid #444639; display: flex; flex-direction: column; min-width: 0; transition: border-color .2s ease; }
.exp-dungeon:hover { border-color: #b79a66; }
.exp-dungeon-art { position: relative; height: 205px; overflow: hidden; background: #19221d; }
.exp-dungeon-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#172019af 0%,transparent 56%); pointer-events: none; }
.exp-dungeon-art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.79); transition: transform .45s ease; }
.exp-dungeon:hover .exp-dungeon-art img { transform: scale(1.06); }
.exp-dungeon-count { position: absolute; bottom: 15px; right: 18px; z-index: 1; color: #efd5a9; letter-spacing: .1em; font-size: 11px; }
.exp-dungeon-content { padding: 27px 25px 25px; display: flex; flex-direction: column; flex: 1; }
.exp-dungeon-content .exp-overline { font-size: 9px; }
.exp-dungeon-content h4 { font: 400 clamp(24px,2.8vw,29px)/1.18 Georgia,serif; margin: 1px 0 14px; color: #ece2d0; }
.exp-dungeon-content > p:not(.exp-overline) { color: #a5a99f; font-size: 12px; line-height: 1.85; margin: 0 0 24px; }
.exp-dungeon-tag { border-top: 1px solid #3b4035; padding-top: 16px; margin-top: auto; color: #b4996b; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.exp-systems-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin: 82px 0 28px; }
.exp-systems { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid #404638; border-left: 1px solid #404638; }
.exp-system { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 28px 27px 28px 23px; border-right: 1px solid #404638; border-bottom: 1px solid #404638; background: #181c19; }
.exp-system-symbol { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #736346; color: #d6b985; font: 26px/1 Georgia,serif; background: #27291f; }
.exp-system-copy > span { display: block; font-size: 9px; letter-spacing: .16em; color: #9b8b6d; margin-bottom: 8px; }
.exp-system-copy h4 { font: 400 22px/1.3 Georgia,serif; color: #e6dece; margin: 0 0 8px; }
.exp-system-copy p { font-size: 12px; line-height: 1.8; color: #a9aaa2; margin: 0; }
.exp-conclusion { position: relative; overflow: hidden; border: 1px solid #736244; background: radial-gradient(circle at 8% 15%,#4e4a2f66,transparent 45%),linear-gradient(115deg,#22291f,#141c17); display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 22px; margin-top: 75px; padding: 37px 37px; }
.exp-conclusion::before { content: ''; position: absolute; inset: 9px; border: 1px solid #ffffff0b; pointer-events: none; }
.exp-conclusion-mark { font: 35px/1 Georgia,serif; color: #cdb079; text-align: center; }
.exp-conclusion h3 { font: 400 clamp(27px,3.4vw,37px)/1.18 Georgia,serif; max-width: 680px; color: #f1e8d7; margin: 0 0 10px; }
.exp-conclusion-copy > p:last-child { font-size: 13px; line-height: 1.7; color: #b7baae; margin: 0; }
.exp-conclusion-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 177px; }
.exp-conclusion-actions .button { min-height: 42px; white-space: nowrap; padding: 0 16px; gap: 13px; }
.exp-disclaimer { margin: 17px auto 0; max-width: 875px; text-align: center; color: #757e73; font-size: 10px; line-height: 1.7; }
@media (max-width: 1050px) {
  .exp-feature { grid-template-columns: 1fr 1fr; }
  .exp-feature-copy { padding: 36px 32px; }
  .exp-conclusion { grid-template-columns: 36px 1fr; }
  .exp-conclusion-actions { grid-column: 2; flex-direction: row; align-items: center; }
}
@media (max-width: 820px) {
  .exp-feature { grid-template-columns: 1fr; }
  .exp-feature-art, .exp-feature-art img { min-height: 390px; }
  .exp-feature-art { height: 390px; }
  .exp-feature-copy { padding: 34px 31px 37px; }
  .exp-editorial-intro { margin-left: 0; }
  .exp-subhead, .exp-systems-head { align-items: flex-start; }
  .exp-dungeons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .exp-dungeon:last-child { grid-column: span 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .exp-dungeon:last-child .exp-dungeon-art { height: 100%; min-height: 250px; }
}
@media (max-width: 630px) {
  .experience-section { padding-bottom: 70px; }
  .exp-editorial-intro { margin-bottom: 28px; }
  .exp-feature-art, .exp-feature-art img { min-height: 290px; }
  .exp-feature-art { height: 290px; }
  .exp-art-corner { left: 19px; bottom: 17px; font-size: 9px; }
  .exp-feature-copy { padding: 30px 23px 35px; }
  .exp-feature-copy h3 { font-size: 32px; }
  .exp-stats { gap: 10px; }
  .exp-stats strong { font-size: 23px; }
  .exp-stats span { font-size: 8px; }
  .exp-subhead, .exp-systems-head { flex-direction: column; align-items: flex-start; margin-top: 59px; gap: 12px; }
  .exp-subhead > p, .exp-systems-head > p { max-width: 540px; }
  .exp-journey { grid-template-columns: 1fr; }
  .exp-step, .exp-step + .exp-step { padding: 23px 4px 24px; border-left: 0; }
  .exp-step + .exp-step { border-top: 1px solid #3a3f36; }
  .exp-step h4 { margin-top: 13px; }
  .exp-step p { min-height: 0; margin-bottom: 15px; }
  .exp-pillars { grid-template-columns: 1fr; gap: 16px; margin-top: 55px; }
  .exp-pillar-media { height: 238px; }
  .exp-pillar-body { padding: 25px 23px 30px; }
  .exp-dungeons { grid-template-columns: 1fr; gap: 16px; }
  .exp-dungeon:last-child { grid-column: auto; display: flex; }
  .exp-dungeon:last-child .exp-dungeon-art { min-height: 0; height: 205px; }
  .exp-systems { grid-template-columns: 1fr; }
  .exp-system { padding: 24px 20px 24px 19px; }
  .exp-conclusion { grid-template-columns: 1fr; padding: 29px 24px 31px; margin-top: 58px; gap: 13px; }
  .exp-conclusion-mark { text-align: left; font-size: 26px; }
  .exp-conclusion-actions { grid-column: auto; flex-direction: column; align-items: stretch; margin-top: 10px; }
  .exp-conclusion-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .experience-section img { transition: none !important; }
}