@charset "UTF-8";

/* ========================================
   MYTHOS REFINE
   extremely subtle precision layer
   - rhythm
   - optical typography
   - CTA micro balance
   - hover calm
======================================== */


/* ========================================
   Anchor hover calm
======================================== */

a{
  transition: opacity .4s ease;
}

a:hover{
  opacity:.7;
}


/* ========================================
   Micro rendering
======================================== */

body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ========================================
   Vertical Rhythm (GLOBAL)
   section spacing unify
======================================== */

.section{
  padding:96px 0;
}

.section--card{
  padding:96px 0;
}

@media(max-width:768px){

  .section,
  .section--card{
    padding:72px 0;
  }

}


/* ========================================
   Section Head Optical Alignment
======================================== */

.section-head{
  margin-bottom:22px;
}

.section-head .title,
.section-head .hero-title{
  position:relative;
  top:-1px;                /* optical adjustment */
  line-height:1.15;
}

.section-head .eyebrow,
.section-head .kicker{
  margin-bottom:10px;
  opacity:.62;
}


/* ========================================
   Typography Calm Adjustment
======================================== */

.lead p,
.section-body p{
  line-height:2.28;
  letter-spacing:.06em;
}


/* ========================================
   CTA Precision
======================================== */

.vip-btn,
.system-summary__cta{

  padding:16px 34px;
  line-height:1;
  letter-spacing:.18em;

  transition:
  opacity .35s ease,
  transform .35s ease;

}

.vip-btn:hover,
.system-summary__cta:hover{

  opacity:.78;
  transform:translateY(-1px);

}


/* ========================================
   System Card Micro Hover
======================================== */

.system-card{

  transition:
  transform .45s ease,
  opacity .45s ease;

}

.system-card:hover{

  transform:translateY(-2px);
  opacity:.96;

}


/* ========================================
   System Meta Typography
======================================== */

.system-card__meta{

  letter-spacing:.08em;
  opacity:.72;

}

.system-card__meta .dot{

  opacity:.45;

}


/* ========================================
   Gallery UI Calm
======================================== */

.gallery-ui button{

  letter-spacing:.14em;
  transition:opacity .35s ease;

}

.gallery-ui button:hover{

  opacity:.7;

}


/* ========================================
   Information List Calm Hover
======================================== */

.info-top__link{

  transition:opacity .35s ease;

}

.info-top__link:hover{

  opacity:.7;

}


/* ========================================
   SYSTEM CARDS 98 (Typography + rhythm)
======================================== */

/* card title: optical + tracking */
.system-card__title{
  letter-spacing:.22em;
  line-height:1.18;
  position:relative;
  top:-1px;
}

/* meta line: calm, not noisy */
.system-card__meta{
  letter-spacing:.10em;
  opacity:.70;
  line-height:1.55;
}

/* dot spacing: micro balance */
.system-card__meta .dot{
  display:inline-block;
  margin:0 .35em;
  opacity:.42;
}

/* sub line: make it quiet + aligned */
.system-card__sub{
  letter-spacing:.14em;
  opacity:.58;
  line-height:1.5;
  margin-top:6px;
}

/* card body: consistent vertical rhythm */
.system-card__body{
  padding-top:18px;
}

/* hover: less “jump”, more “lift” */
.system-card:hover{
  transform: translateY(-1px);
  opacity:.985;
}

/* SP: prevent tightness */
@media(max-width:768px){

  .system-card__body{
    padding-top:16px;
  }

  .system-card__meta{
    letter-spacing:.08em;
  }

  .system-card__sub{
    letter-spacing:.12em;
    margin-top:5px;
  }
}


/* ========================================
   SECTION RHYTHM
   boundary by air
======================================== */

.section{
  padding:96px 0;
}

.section--card{
  padding:104px 0;
}

@media(max-width:768px){

  .section,
  .section--card{
    padding:72px 0;
  }

}