/* about.css — Our Story page */

.page-about { background: var(--cream-light); }

/* HERO */
.hero {
  position: relative; min-height: 72vh; padding-top: var(--nav-h);
  overflow: hidden; display: flex; align-items: flex-end;
  background: var(--off-black);
}
.hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .3; z-index: 0;
}
.hero__content {
  position: relative; z-index: 5;
  padding: 0 4rem 6rem; max-width: 700px;
}
.hero__ctas { display: flex; gap: 1.25rem; margin-top: 2rem; flex-wrap: wrap; }

/* LETTER SECTION */
.letter-section {
  background: var(--cream-light);
  padding: var(--section-pad);
  display: grid; grid-template-columns: 3fr 7fr; gap: 7rem; align-items: start;
}
.letter-aside { padding-top: .5rem; text-align: center; }
.letter-aside__label {
  writing-mode: vertical-rl; font-size: .58rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--olive);
  display: block; margin-bottom: 2.5rem;
}
.letter-aside__line {
  width: 1px; height: 120px;
  background: linear-gradient(to bottom, var(--olive-pale), transparent);
  margin: 0 auto;
}
.letter-body {}
.letter-date {
  font-size: .65rem; font-weight: 300; letter-spacing: .18em;
  color: var(--text-light); margin-bottom: 2.5rem;
  display: flex; align-items: center; gap: .75rem;
}
.letter-date::before {
  content: ''; display: block; width: 28px; height: 1px; background: var(--cream-dark);
}
.letter-h {
  font-family: var(--serif); font-size: clamp(1.7rem,3vw,2.4rem);
  font-weight: 400; line-height: 1.3; color: var(--brown); margin-bottom: 2rem;
}
.letter-h em { font-style: italic; color: var(--olive-deep); }
.letter-sig { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(98,107,58,.12); }
.letter-sig__name {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 400;
  font-style: italic; color: var(--brown);
}
.letter-sig__title {
  font-size: .68rem; font-weight: 300; letter-spacing: .14em; color: var(--text-light);
}

/* PLACE SECTION */
.place-section {
  background: var(--brown);
  display: grid; grid-template-columns: 1fr 1fr; min-height: 560px;
  position: relative; overflow: hidden;
}
.place-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 70% at 0% 40%, rgba(98,107,58,.18) 0%, transparent 60%);
}
.place-map, .place-info { padding: 5.5rem 4rem; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.place-map { border-right: 1px solid rgba(200,205,154,.08); }
.place-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(200,205,154,.1);
  padding: 2.5rem; position: relative;
}
.place-card__badge {
  position: absolute; top: -1px; right: 2rem;
  background: var(--olive); padding: .3rem .85rem;
  font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--white);
}
.place-card__map-img {
  display: block; width: 100%; margin-bottom: 2rem;
}
.place-card__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.place-card__item-label {
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(200,205,154,.3); margin-bottom: .3rem;
}
.place-card__item-val {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 400;
  font-style: italic; color: var(--cream);
}
.place-facts { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(200,205,154,.08); display: flex; flex-direction: column; gap: 1rem; }
.place-fact { display: flex; gap: 1rem; align-items: flex-start; }
.place-fact__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--olive-pale); flex-shrink: 0; margin-top: 7px; }
.place-fact__text { font-size: .88rem; font-weight: 200; line-height: 1.65; color: rgba(200,213,160,.55); }
.place-fact__text strong { font-weight: 400; color: rgba(200,213,160,.85); }

/* TRI HITA KARANA */
.phi-section { background: var(--cream-light); padding: var(--section-pad); }
.phi-intro { max-width: 700px; margin: 0 auto 6rem; text-align: center; }
.phi-rows { display: flex; flex-direction: column; gap: 1.5px; background: rgba(98,107,58,.15); }
.phi-row { display: grid; grid-template-columns: 1fr 1fr; }
.phi-row:nth-child(even) { direction: rtl; }
.phi-row:nth-child(even) * { direction: ltr; }
.phi-visual {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  min-height: 420px;
}
.phi-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.phi-text { background: var(--cream-light); padding: 4rem; display: flex; flex-direction: column; justify-content: center; }
.phi-text__numeral { font-family: var(--serif); font-size: 4rem; font-weight: 400; color: var(--olive-pale); opacity: .28; line-height: 1; display: block; margin-bottom: -.25rem; }
.phi-text__subtitle { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive-light); margin-bottom: .6rem; }
.phi-text__title { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; color: var(--brown); margin-bottom: 1.25rem; line-height: 1.2; }
.phi-text__title em { font-style: italic; color: var(--olive-deep); }
.phi-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.phi-tag { font-size: .65rem; font-weight: 300; letter-spacing: .1em; padding: .3rem .85rem; background: rgba(98,107,58,.08); border: 1px solid rgba(98,107,58,.18); color: var(--olive); }

/* COMMUNITY */
.community-section { background: var(--off-black); padding: var(--section-pad); }
.community-header { max-width: 760px; margin: 0 auto 5rem; text-align: center; }
.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; background: rgba(200,205,154,.05); margin-bottom: 4rem; }
.community-card { background: rgba(255,255,255,.02); padding: 3rem 2.5rem; position: relative; overflow: hidden; transition: background .4s; }
.community-card:hover { background: rgba(255,255,255,.05); }
.community-card__role { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive-pale); margin-bottom: .75rem; }
.community-card__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--cream); line-height: 1.25; margin-bottom: 1rem; }
.community-card__featured { grid-column: span 2; background: rgba(98,107,58,.08); border: 1px solid rgba(200,205,154,.06); padding: 3.5rem 3rem; }
.community-card__featured .community-card__title { font-size: 1.6rem; }
.community-card__featured .body-copy--light { columns: 2; column-gap: 3.5rem; }
.values-strip { border-top: 1px solid rgba(200,205,154,.07); padding-top: 4rem; }
.values-strip__label { font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(200,205,154,.25); margin-bottom: 2rem; text-align: center; }
.values-row { display: flex; gap: 0; border: 1px solid rgba(200,205,154,.06); }
.value-item { flex: 1; padding: 2rem 1.75rem; border-right: 1px solid rgba(200,205,154,.06); text-align: center; }
.value-item:last-child { border-right: none; }
.value-item__word { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; font-style: italic; color: var(--olive-pale); opacity: .55; display: block; margin-bottom: .35rem; line-height: 1; }
.value-item__meaning { font-size: .62rem; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; color: rgba(200,205,154,.3); margin-bottom: .6rem; }
.value-item__desc { font-size: .8rem; font-weight: 200; line-height: 1.7; color: rgba(200,213,160,.38); }

/* WISDOM */
.wisdom-section { background: var(--cream); padding: var(--section-pad); }
.wisdom-top { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: end; margin-bottom: 5rem; }
.wisdom-list { display: flex; flex-direction: column; }
.wisdom-item { display: grid; grid-template-columns: 80px 1fr; gap: 2.5rem; align-items: start; padding: 2.5rem 0; border-bottom: 1px solid rgba(98,107,58,.1); }
.wisdom-item:first-child { border-top: 1px solid rgba(98,107,58,.1); }
.wisdom-item__num { font-family: var(--serif); font-size: 2.8rem; font-weight: 400; color: var(--olive-pale); opacity: .35; line-height: 1.1; padding-top: .2rem; }
.wisdom-item__balinese { font-family: var(--serif); font-size: .85rem; font-style: italic; color: var(--olive); margin-bottom: .3rem; }
.wisdom-item__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--brown); margin-bottom: .75rem; line-height: 1.2; }

/* CLOSING */
.closing-section { background: var(--cream-light); padding: var(--section-pad); display: grid; grid-template-columns: 1fr 2fr; gap: 7rem; align-items: center; }
.closing-aside { display: flex; flex-direction: column; gap: 1.5rem; }
.closing-aside__bar { width: 100%; height: 2px; background: linear-gradient(to right, var(--olive), transparent); }
.closing-aside__text { font-size: .6rem; font-weight: 300; letter-spacing: .22em; text-transform: uppercase; color: var(--text-light); line-height: 1.8; }
.closing-main__mark { font-family: var(--serif); font-size: 6rem; font-weight: 400; color: var(--olive-pale); opacity: .2; line-height: .7; display: block; margin-bottom: .5rem; }
.closing-main__quote { font-family: var(--serif); font-size: clamp(1.5rem,2.8vw,2.2rem); font-weight: 400; font-style: italic; color: var(--brown); line-height: 1.55; margin-bottom: 2.5rem; }
.closing-sig { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; }
.closing-sig__line { width: 40px; height: 1px; background: var(--olive); }
.closing-sig__name { font-family: var(--serif); font-size: 1rem; font-style: italic; color: var(--brown); }
.closing-sig__loc { font-size: .65rem; font-weight: 200; letter-spacing: .12em; color: var(--text-light); margin-top: .1rem; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .hero__content { padding: 0 2rem 5rem; }
  .letter-section { grid-template-columns: 1fr; gap: 2.5rem; padding: 4rem 2rem; }
  .letter-aside { display: flex; align-items: center; gap: 1.5rem; text-align: left; }
  .letter-aside__label { writing-mode: horizontal-tb; margin-bottom: 0; }
  .letter-aside__line { width: 60px; height: 1px; flex-shrink: 0; }
  .place-section { grid-template-columns: 1fr; }
  .place-map { border-right: none; border-bottom: 1px solid rgba(200,205,154,.08); padding: 4rem 2rem; }
  .place-info { padding: 4rem 2rem; }
  .phi-rows .phi-row { grid-template-columns: 1fr; }
  .phi-rows .phi-row:nth-child(even) { direction: ltr; }
  .phi-visual { min-height: 320px; }
  .phi-text { padding: 3rem 2rem; }
  .community-grid { grid-template-columns: 1fr; }
  .community-card__featured { grid-column: span 1; }
  .community-card__featured .body-copy--light { columns: 1; }
  .values-row { flex-direction: column; }
  .value-item { border-right: none; border-bottom: 1px solid rgba(200,205,154,.06); }
  .value-item:last-child { border-bottom: none; }
  .wisdom-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .wisdom-item { grid-template-columns: 60px 1fr; }
  .closing-section { grid-template-columns: 1fr; gap: 3rem; }
}