/* SOJ STORY V2 — executive founder profile */
body[data-page="story"]{
  --story-ink:#071c14;
  --story-green:#073a29;
  --story-green-2:#0d5239;
  --story-gold:#dfc45e;
  --story-paper:#f4ecdd;
  --story-red:#741124;
  --story-muted:#667069;
  background:#f4ecdd;
}
body[data-page="story"] main{
  background:var(--story-paper);
}
.story-v2-intro{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:16px var(--space) 17px;
  background:
    radial-gradient(circle at 50% 120%,rgba(223,196,94,.08),transparent 42%),
    linear-gradient(180deg,#050505,#010101);
  color:#fff;
  border-top:1px solid rgba(223,196,94,.14);
  border-bottom:1px solid rgba(223,196,94,.24);
}
.story-v2-intro-copy{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  text-align:center;
}
.story-v2-intro h1{
  margin:0;
  color:#fff8ee;
  font:700 clamp(38px,3.6vw,52px)/.95 var(--editorial);
  letter-spacing:-.035em;
}
.story-v2-intro h1 em{
  color:var(--story-gold);
  font-style:normal;
}
.story-v2-intro p{
  margin:7px 0 0;
  color:#e8dfd7;
  font-size:14px;
  line-height:1.25;
  white-space:nowrap;
}

.story-v2-profile{
  position:relative;
  display:grid;
  grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);
  min-height:610px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,27,19,.99) 0%,rgba(4,31,21,.96) 41%,rgba(5,42,28,.91) 67%,rgba(5,38,26,.97) 100%),
    url('/assets/backgrounds/twilight_temple_town_beneath_fuji.webp') center/cover;
  color:#fff;
}
.story-v2-profile:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.22));
}
.story-v2-portrait{
  position:relative;
  z-index:2;
  min-height:610px;
  overflow:hidden;
  background:#0a2c20;
}
.story-v2-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 20%;
  filter:saturate(.92) contrast(1.02);
}
.story-v2-portrait:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 70%,rgba(4,31,21,.92) 100%),linear-gradient(0deg,rgba(3,25,17,.45),transparent 38%);
}
.story-v2-portrait-label{
  position:absolute;
  z-index:3;
  left:26px;
  right:26px;
  bottom:24px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding-top:17px;
  border-top:1px solid rgba(255,255,255,.48);
}
.story-v2-portrait-label span{
  color:#fff6e8;
  font-size:11px;
  font-weight:800;
}
.story-v2-portrait-label small{
  color:#d9c56e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.story-v2-profile-copy{
  position:relative;
  z-index:3;
  align-self:center;
  padding:58px clamp(42px,5vw,78px) 52px;
}
.story-v2-eyebrow{
  margin:0 0 17px;
  color:var(--story-gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.story-v2-profile-copy h2{
  max-width:760px;
  margin:0;
  color:#fff9ef;
  font:400 clamp(54px,5.4vw,82px)/.9 var(--editorial);
  letter-spacing:-.055em;
}
.story-v2-profile-copy h2 em{
  display:block;
  color:var(--story-gold);
  font-style:normal;
}
.story-v2-lead{
  max-width:690px;
  margin:25px 0 0;
  color:#dce5de;
  font-size:15px;
  line-height:1.72;
}
.story-v2-signature{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:33px;
  border-top:1px solid rgba(223,196,94,.28);
  border-bottom:1px solid rgba(223,196,94,.28);
}
.story-v2-signature div{
  min-height:84px;
  padding:17px 17px 15px 0;
}
.story-v2-signature div+div{
  padding-left:18px;
  border-left:1px solid rgba(223,196,94,.21);
}
.story-v2-signature strong{
  display:block;
  color:#f2d875;
  font:400 26px/1 var(--editorial);
}
.story-v2-signature span{
  display:block;
  margin-top:7px;
  color:#bfcfc4;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.story-v2-quote{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:42px;
  align-items:center;
  padding:40px var(--space);
  background:linear-gradient(110deg,#701024,#4b0713);
  color:#fff;
}
.story-v2-quote-mark{
  color:#e6ca68;
  font:400 110px/.65 var(--editorial);
  text-align:center;
}
.story-v2-quote blockquote{
  margin:0;
  max-width:1020px;
  color:#fff8ed;
  font:400 clamp(28px,3.3vw,49px)/1.03 var(--editorial);
  letter-spacing:-.035em;
}
.story-v2-quote cite{
  display:block;
  margin-top:14px;
  color:#efd87f;
  font:900 9px/1.2 var(--text);
  font-style:normal;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.story-v2-chapters{
  background:#f3ecdf;
}
.story-v2-chapter{
  display:grid;
  grid-template-columns:150px minmax(260px,.72fr) minmax(0,1.28fr);
  gap:38px;
  padding:58px var(--space);
  border-bottom:1px solid rgba(33,62,48,.15);
}
.story-v2-chapter:nth-child(even){
  background:#e9e5d7;
}
.story-v2-number{
  color:#9d7e26;
  font:400 58px/.85 var(--editorial);
}
.story-v2-chapter-title p{
  margin:0 0 11px;
  color:#8e6d17;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.story-v2-chapter-title h3{
  margin:0;
  color:#123c2d;
  font:400 clamp(37px,3.8vw,56px)/.94 var(--editorial);
  letter-spacing:-.035em;
}
.story-v2-chapter-copy{
  align-self:center;
  max-width:700px;
  color:#5f685f;
  font-size:14px;
  line-height:1.88;
}
.story-v2-chapter-copy strong{
  color:#183e30;
}

.story-v2-hospitality{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:480px;
  background:#092f22;
  color:#fff;
}
.story-v2-hospitality-image{
  position:relative;
  min-height:480px;
}
.story-v2-hospitality-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.story-v2-hospitality-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 70%,#092f22 100%);
}
.story-v2-hospitality-copy{
  align-self:center;
  padding:55px var(--space) 55px 48px;
}
.story-v2-hospitality-copy h2{
  margin:0;
  max-width:600px;
  color:#fff8eb;
  font:400 clamp(48px,5vw,76px)/.91 var(--editorial);
  letter-spacing:-.05em;
}
.story-v2-hospitality-copy h2 em{
  color:var(--story-gold);
  font-style:normal;
}
.story-v2-hospitality-copy p:not(.story-v2-eyebrow){
  max-width:560px;
  margin-top:22px;
  color:#d6dfd8;
  font-size:14px;
  line-height:1.85;
}
.story-v2-values{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:25px;
}
.story-v2-values span{
  padding:9px 11px;
  border:1px solid rgba(227,201,103,.28);
  color:#eedb91;
  background:rgba(255,255,255,.03);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.story-v2-future{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:42px;
  align-items:center;
  padding:55px var(--space);
  background:#0b1f18;
  color:#fff;
}
.story-v2-future h2{
  margin:0;
  max-width:900px;
  color:#fff8eb;
  font:400 clamp(45px,5vw,72px)/.92 var(--editorial);
  letter-spacing:-.05em;
}
.story-v2-future h2 em{
  color:#d9bd5a;
  font-style:normal;
}
.story-v2-future p{
  max-width:720px;
  margin-top:17px;
  color:#c8d3cc;
  font-size:13px;
  line-height:1.75;
}
.story-v2-actions{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:190px;
}
.story-v2-actions a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  padding:0 16px;
  border:1px solid rgba(223,196,94,.32);
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.story-v2-actions a:first-child{
  border-color:#8d233c;
  background:linear-gradient(180deg,#741124,#570a18);
}
.story-v2-actions a:last-child:hover{
  border-color:#d9bd5a;
  color:#e9d27b;
}

.story-v2-film{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  align-items:stretch;
  background:#efe8da;
}
.story-v2-film-copy{
  padding:58px var(--space);
  align-self:center;
}
.story-v2-film-copy h2{
  margin:0;
  color:#143a2d;
  font:400 clamp(45px,4.8vw,70px)/.92 var(--editorial);
  letter-spacing:-.045em;
}
.story-v2-film-copy p:not(.story-v2-eyebrow){
  max-width:450px;
  margin-top:20px;
  color:#667068;
  font-size:13px;
  line-height:1.8;
}
.story-v2-film-copy .button{
  margin-top:24px;
}
.story-v2-film>img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
}

@media(max-width:980px){
  .story-v2-profile{grid-template-columns:42% 58%;min-height:540px}
  .story-v2-portrait{min-height:540px}
  .story-v2-profile-copy{padding:42px 30px}
  .story-v2-profile-copy h2{font-size:58px}
  .story-v2-lead{font-size:13px}
  .story-v2-signature strong{font-size:22px}
  .story-v2-chapter{grid-template-columns:90px .8fr 1.2fr;gap:25px}
  .story-v2-hospitality-copy{padding:45px 32px}
}
@media(max-width:760px){
  .story-v2-intro{padding:13px 18px 14px}
  .story-v2-intro h1{font-size:36px}
  .story-v2-intro p{font-size:12px;line-height:1.35;white-space:normal}
  .story-v2-profile{grid-template-columns:1fr;min-height:0}
  .story-v2-portrait{min-height:430px;height:430px}
  .story-v2-portrait:after{background:linear-gradient(0deg,rgba(4,31,21,.72),transparent 45%)}
  .story-v2-profile-copy{padding:38px 24px 43px}
  .story-v2-profile-copy h2{font-size:52px}
  .story-v2-lead{font-size:13px}
  .story-v2-signature{grid-template-columns:1fr}
  .story-v2-signature div{min-height:0;padding:14px 0}
  .story-v2-signature div+div{padding-left:0;border-left:0;border-top:1px solid rgba(223,196,94,.21)}
  .story-v2-quote{grid-template-columns:1fr;gap:8px;padding:32px 24px}
  .story-v2-quote-mark{text-align:left;font-size:70px}
  .story-v2-quote blockquote{font-size:32px}
  .story-v2-chapter{grid-template-columns:55px 1fr;padding:40px 24px;gap:18px}
  .story-v2-number{font-size:42px}
  .story-v2-chapter-copy{grid-column:2;font-size:13px;line-height:1.75}
  .story-v2-hospitality{grid-template-columns:1fr}
  .story-v2-hospitality-image{min-height:300px;height:300px}
  .story-v2-hospitality-image:after{background:linear-gradient(0deg,#092f22 0%,transparent 34%)}
  .story-v2-hospitality-copy{padding:38px 24px 45px}
  .story-v2-hospitality-copy h2{font-size:50px}
  .story-v2-future{grid-template-columns:1fr;padding:42px 24px}
  .story-v2-future h2{font-size:50px}
  .story-v2-actions{min-width:0}
  .story-v2-film{grid-template-columns:1fr}
  .story-v2-film-copy{padding:42px 24px}
  .story-v2-film>img{min-height:280px}
}


/* STORY V2 MOBILE CONTAINMENT — keep editorial chapter grid inside the viewport */
@media(max-width:760px){
  .story-v2-chapter{
    grid-template-columns:48px minmax(0,1fr);
    gap:14px;
  }
  .story-v2-chapter-title,
  .story-v2-chapter-copy{
    min-width:0;
  }
}
