@charset "UTF-8";

/* =====================================================
  HUB IMPORTS（functions.php触らずに構成を固定）
  ※ base.css と同じフォルダ（/assets/css/）に
    layout.css / utilities.css / forms.css がある前提
===================================================== */
@import url("./layout.css");
@import url("./utilities.css");
@import url("./forms.css");

/* =====================================================
  BASE – MYTHOS CORE（Parent Theme）
  - Reset / Base / Typography (Foundation)
===================================================== */

/* =====================================================
  RESET / BASE
===================================================== */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-jp);
  color: var(--brand-ink);
  background: var(--brand-bg);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-body);
  -webkit-text-size-adjust: 100%;
  text-rendering: geometricPrecision;
}

body, button, input, textarea{
  font-variant-numeric: lining-nums;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

a, button{
  transition:
    opacity var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

button{
  border:0;
  background:transparent;
  cursor:pointer;
}

ul, ol{ list-style:none; }

/* =====================================================
  TYPOGRAPHY（foundation）
===================================================== */
.eyebrow{
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-muted);
  font-weight: 400;
}

.title{
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--brand-ink);
  font-size: clamp(22px, 2.6vw, 34px);
}

.lead{
  font-size: 15px;
  color: var(--brand-muted);
  max-width: 760px;
  margin-left:auto;
  margin-right:auto;
  line-height: 2.4;
  letter-spacing: var(--ls-body);
}

.hero-title{
  text-align:center;
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing:.24em;
  font-size: clamp(32px,4vw,56px);
  text-transform: uppercase;
  color: var(--brand-ink);
}

.kicker{
  text-align:center;
  font-family: var(--font-en);
  letter-spacing:.18em;
  color: var(--brand-muted);
}

/* Editor-ish defaults */
p{ line-height: inherit; }
strong{ font-weight: 600; }
small{ font-size: 0.92em; color: var(--brand-muted); }

/* Focus minimal */
.site-content a:focus-visible,
button:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand-accent) 55%, transparent);
  outline-offset: 3px;
}