/* ============================================================
   INSAR V3 — REUSABLE COMPONENTS
   Eyebrow · Rule · Button · TextLink · Media · Logo · Reveal
   ============================================================ */

/* ---------- Eyebrow (small uppercase label) ---------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.85rem;
  font-size:.67rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:1.5rem;
}
.eyebrow::before{
  content:""; width:30px; height:1px; background:var(--gold); flex:none;
}
.eyebrow--bare::before{ display:none; }
.eyebrow--center{ justify-content:center; }
.section--ivory .eyebrow{ color:#9A7B35; }
.section--ivory .eyebrow::before{ background:#9A7B35; }

/* ---------- Gold rule that draws itself on scroll ---------- */
.rule{
  height:1px; background:var(--gold-hair);
  position:relative; overflow:hidden; width:100%;
}
.rule::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform-origin:left; transition:transform 1.3s var(--slow);
}
.js .rule::after{ transform:scaleX(0); }
.js .rule.in::after{ transform:scaleX(1); }
.section--ivory .rule{ background:rgba(154,123,53,.2); }
.section--ivory .rule::after{ background:#9A7B35; }

/* ---------- Buttons ---------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  font-size:.7rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  padding:1.05rem 2.1rem;
  border:1px solid transparent; cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease),
             border-color .45s var(--ease);
  white-space:nowrap;
}
.btn .ar{ display:inline-block; transition:transform .45s var(--ease); }
.btn:hover .ar{ transform:translateX(5px); }

.btn--gold{ background:var(--gold); color:var(--black); }
.btn--gold:hover{ background:var(--gold-3); }

.btn--ghost{ background:transparent; color:var(--ivory); border-color:var(--ivory-32); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-2); }

.btn--ghost-gold{ background:transparent; color:var(--gold-2); border-color:var(--gold-dim); }
.btn--ghost-gold:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }

.btn--dark{ background:var(--ink); color:var(--ivory-2); }
.btn--dark:hover{ background:#000; }

.btn--sm{ padding:.78rem 1.5rem; font-size:.65rem; }
.btn--wide{ width:100%; }

/* ---------- Quiet editorial text link ---------------------- */
.tlink{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.67rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold-2);
  /* padding-top only: grows the tap target without moving the rule */
  padding-top:.55rem; padding-bottom:.45rem;
  border-bottom:1px solid var(--gold-dim);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.tlink .ar{ transition:transform .4s var(--ease); }
.tlink:hover{ border-color:var(--gold); color:var(--gold-3); }
.tlink:hover .ar{ transform:translateX(5px); }
.section--ivory .tlink{ color:#8A6D2C; border-color:rgba(138,109,44,.32); }
.section--ivory .tlink:hover{ color:#5E4A1B; border-color:#8A6D2C; }

/* ---------- Media: ONE art direction for every photograph ---
   Real Sarawak photography, graded warm/dark so the entire
   page reads as a single cinematic shoot.
   ----------------------------------------------------------- */
.media{
  position:relative; overflow:hidden;
  background:var(--black-3);
}
.media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.70) contrast(1.10) brightness(.76) sepia(.16);
  transform:scale(1.02);
  transition:transform 1.5s var(--slow),filter 1.5s var(--slow);
}
.media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(165deg,
    rgba(8,8,7,.20) 0%,
    rgba(8,8,7,.04) 42%,
    rgba(8,8,7,.74) 100%);
}
/* Softer grade where the subject needs to stay readable */
.media--soft img{ filter:saturate(.80) contrast(1.05) brightness(.86) sepia(.10); }
/* Deep grade for full-bleed backdrops carrying type */
.media--deep::after{
  background:linear-gradient(180deg,
    rgba(8,8,7,.55) 0%,
    rgba(8,8,7,.32) 38%,
    rgba(8,8,7,.92) 100%);
}
.media--flat::after{ background:linear-gradient(180deg,rgba(8,8,7,.15),rgba(8,8,7,.55)); }

a:hover .media img,
.hoverable:hover .media img{
  transform:scale(1.06);
  filter:saturate(.86) contrast(1.07) brightness(.88) sepia(.08);
}

/* Inset gold hairline frame */
.framed{ position:relative; }
.framed::before{
  content:""; position:absolute; inset:14px; z-index:2;
  border:1px solid var(--gold-hair); pointer-events:none;
}

/* Caption under / over an image */
.caption{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory-50);
}

/* ---------- Reveal on scroll -------------------------------
   Gated behind `.js` (set by an inline script in the head) so
   that if scripting is unavailable or fails, every section is
   simply visible rather than stuck at opacity 0.
   ----------------------------------------------------------- */
.reveal{ transition:opacity 1s var(--slow),transform 1s var(--slow); }
.js .reveal{ opacity:0; transform:translateY(26px); }
.js .reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.09s } .d2{ transition-delay:.18s }
.d3{ transition-delay:.27s } .d4{ transition-delay:.36s }

/* ---------- Logo lockup ------------------------------------
   The real INSAR / ITT globe mark, rebuilt as vector so a
   single asset can render champagne gold on dark, ivory over
   photography, or ink on light. Geometry is preserved:
   circular globe, meridians + parallels, serif ITT on the
   equatorial band. Aspect ratio is locked — never stretched.
   ----------------------------------------------------------- */
.logo{ display:inline-flex; align-items:center; gap:.95rem; }
.logo__mark{
  width:46px; height:46px; flex:none;
  color:var(--gold);
  transition:color .5s var(--ease);
}
.logo__lockup{
  display:flex; flex-direction:column; gap:.2rem;
  padding-left:.95rem; border-left:1px solid var(--gold-dim);
}
.logo__name{
  font-family:var(--serif); font-weight:400; font-size:1.4rem;
  letter-spacing:.12em; line-height:1; color:var(--ivory-2);
}
.logo__sub{
  font-size:.52rem; font-weight:500; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold-2); line-height:1;
}
.logo__since{
  font-size:.46rem; font-weight:400; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ivory-32); line-height:1;
}

/* Ink variant for ivory backgrounds */
.logo--ink .logo__mark{ color:var(--ink); }
.logo--ink .logo__name{ color:var(--ink); }
.logo--ink .logo__sub{ color:#8A6D2C; }
.logo--ink .logo__since{ color:var(--ink-45); }
.logo--ink .logo__lockup{ border-left-color:var(--ink-12); }

/* Ivory variant for busy photography */
.logo--ivory .logo__mark{ color:var(--ivory-2); }

.logo--sm .logo__mark{ width:38px; height:38px; }
.logo--sm .logo__name{ font-size:1.16rem; }
.logo--lg .logo__mark{ width:60px; height:60px; }
.logo--lg .logo__name{ font-size:1.8rem; }
.logo--mark-only .logo__lockup{ display:none; }

/* ---------- Trust block (replaces the award badge) ---------
   No award is claimed. This carries only verified facts.
   ----------------------------------------------------------- */
.trust{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:1.9rem 1.5rem;
  background:rgba(8,8,7,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--gold-hair);
  text-align:center;
}
.trust__mark{ width:38px; height:38px; color:var(--gold); }
.trust__line{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ivory-70); line-height:1.9;
}
.trust__year{
  font-family:var(--serif); font-size:1.5rem; font-weight:300;
  color:var(--gold-2); letter-spacing:.06em; line-height:1;
}
.trust__div{ width:26px; height:1px; background:var(--gold-dim); }