@charset "UTF-8";

/* ========================================
   MYTHOS CORE REFINE
   precision layer
   shared by MYTHOS / AKANE
======================================== */


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

a{
  transition:opacity .4s ease;
}

a:hover{
  opacity:.7;
}


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

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


/* ========================================
   Vertical Rhythm
   boundary by air
======================================== */

.section{
  padding:96px 0;
}

.section--card{
  padding:104px 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;
  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 Precision
======================================== */

.system-card{

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

}

.system-card:hover{

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

}


/* ========================================
   System Card Typography
======================================== */

.system-card__title{

  letter-spacing:.22em;
  line-height:1.18;
  position:relative;
  top:-1px;

}

.system-card__meta{

  letter-spacing:.10em;
  opacity:.70;
  line-height:1.55;

}

.system-card__meta .dot{

  display:inline-block;
  margin:0 .35em;
  opacity:.42;

}

.system-card__sub{

  letter-spacing:.14em;
  opacity:.58;
  line-height:1.5;
  margin-top:6px;

}

.system-card__body{

  padding-top:18px;

}

@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;
  }

}


/* ========================================
   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;

}