/* ============================================================================
   HoneyWorks theme — "Official mode" (honeyworks.jp)
   ----------------------------------------------------------------------------
   Layered on top of Bootstrap rather than replacing it: the panel's markup and
   its tab behaviour already depend on Bootstrap, and the design guide says to
   adapt the tokens into the existing stack rather than fight it. Everything
   below is therefore an override, in the same order the guide lists its rules.

   The five things that make this read as HoneyWorks, and which must not be
   quietly undone later:
     1. white ground, no dark mode
     2. zero box-shadows anywhere
     3. hairlines and whitespace instead of borders and cards
     4. 14px body with positive tracking
     5. exactly one accent hue (magenta)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  /* ground + ink */
  --hw-white:      #ffffff;
  --hw-ink:        #000000;
  --hw-ink-soft:   #666666;
  --hw-gray:       #888888;
  --hw-gray-light: #a2a2a2;
  --hw-hairline:   #e2e2e2;

  /* brand pink */
  --hw-magenta:    #e5307d;
  --hw-pink:       #ff7eb5;
  --hw-pink-soft:  #f7b2d0;
  --hw-pink-wash:  #fff7fb;

  /* reserved: gradients are for thin bars only, never large fills */
  --hw-sky:        #80cce4;
  --hw-coral:      #f4797e;
  --hw-grad:       linear-gradient(90deg, #79d7f3 0%, #fa94c1 100%);

  --hw-font-en:   "Manrope", "Noto Sans JP", sans-serif;
  --hw-font-body: "Noto Sans JP", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  --hw-ease:      cubic-bezier(.16, 1, .3, 1);
  --hw-ease-wipe: cubic-bezier(.87, 0, .13, 1);

  --hw-max: 1000px;

  /* Bootstrap token overrides — cheaper and more consistent than chasing
     individual component rules. */
  --bs-body-font-family: var(--hw-font-body);
  --bs-body-font-size: 14px;
  --bs-body-color: var(--hw-ink);
  --bs-body-bg: var(--hw-white);
  --bs-secondary-color: var(--hw-gray);
  --bs-border-color: var(--hw-hairline);
  --bs-link-color: var(--hw-magenta);
  --bs-link-hover-color: var(--hw-ink);
  --bs-border-radius: 20px;
  --bs-border-radius-sm: 2px;
  --bs-focus-ring-color: rgba(229, 48, 125, .18);
}

/* ── 1. Ground ────────────────────────────────────────────────────────────── */

body {
  background: var(--hw-white);
  color: var(--hw-ink);
  font-family: var(--hw-font-body);
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

/* Rule 2, enforced globally. Bootstrap sprays shadows through .card,
   .shadow-sm, .dropdown-menu, focus rings and more; depth in this system comes
   from artwork and gradient, never elevation. */
*, *::before, *::after { box-shadow: none !important; }

::selection { background: var(--hw-pink-soft); color: var(--hw-ink); }

/* ── 2. Typography scale ──────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hw-font-en);
  font-weight: 700;
  line-height: 1.35;
  color: var(--hw-ink);
}

.hw-display   { font: 500 60px/1.05 var(--hw-font-en); letter-spacing: .02em; }
.hw-title     { font: 700 42px/1.2 var(--hw-font-en);  letter-spacing: .05em; }
.hw-heading   { font: 700 34.5px/1.3 var(--hw-font-en); letter-spacing: .06em; }
.hw-card-title{ font: 700 24px/1.4 var(--hw-font-en);  letter-spacing: .04em; }
.hw-sub       { font: 500 20.5px/1.5 var(--hw-font-en); letter-spacing: .035em; }
.hw-meta      { font: 700 12.5px/1.6 var(--hw-font-en); letter-spacing: .06em; }
.hw-caption   { font: 400 11.5px/1.7 var(--hw-font-body); letter-spacing: .07em; color: var(--hw-gray); }

.hw-num { font-family: var(--hw-font-en); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Rule 8: Latin, uppercase, tracked out. Used for every section header and
   every piece of navigation; Indonesian is reserved for actual content. */
.hw-label {
  display: block;
  font: 700 12.5px/1 var(--hw-font-en);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hw-ink);
}
.hw-label--pink { color: var(--hw-magenta); }
.hw-label--muted { color: var(--hw-gray); font-weight: 600; }

/* Section header: Latin label on the left, hairline running to the right edge.
   The guide's right-aligned rail, adapted to a single-column app layout. */
.hw-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
}
.hw-section-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hw-hairline);
}

/* ── 3. Ornaments ─────────────────────────────────────────────────────────── */

/* The waveform / heartbeat "giza" stroke — the signature HoneyWorks ornament.
   Inline SVG so it inherits currentColor. */
.hw-giza { display: block; color: var(--hw-magenta); }
.hw-giza svg { display: block; width: 100%; height: 10px; }
.hw-giza--divider { margin: 40px 0; color: var(--hw-pink-soft); }

.hw-heart { color: var(--hw-magenta); font-size: 11px; line-height: 1; }

/* Sparse dot grid, fading diagonally. Decorative only. */
.hw-dotgrid {
  position: absolute;
  width: 120px; height: 120px;
  background-image: radial-gradient(var(--hw-pink-soft) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%);
  mask-image: linear-gradient(135deg, #000, transparent 70%);
  opacity: .8;
  pointer-events: none;
}

/* Oversized ghost lettering behind a section, cropped by its edge. */
.hw-ghost {
  position: absolute;
  font: 700 clamp(80px, 18vw, 190px)/1 var(--hw-font-en);
  letter-spacing: .02em;
  color: var(--hw-ink);
  opacity: .04;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Thin gradient bar. The only place --hw-grad is allowed. */
.hw-gradbar { height: 3px; background: var(--hw-grad); border-radius: 3px; }

/* ── 4. Layout ────────────────────────────────────────────────────────────── */

.hw-shell { max-width: var(--hw-max); margin: 0 auto; padding: 0 24px; }
.hw-shell--narrow { max-width: 560px; }
.hw-shell--tight  { max-width: 400px; }

/* Fixed white header with a centred logotype flanked by the giza stroke. */
.hw-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--hw-white);
  border-bottom: 1px solid var(--hw-hairline);
}
.hw-header__inner {
  max-width: var(--hw-max);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hw-logo {
  display: flex; align-items: center; gap: 10px;
  font: 700 17px/1 var(--hw-font-en);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hw-ink);
  text-decoration: none;
}
.hw-logo__giza { width: 34px; color: var(--hw-magenta); }
.hw-logo__giza svg { display: block; width: 100%; height: 12px; }
.hw-header__spacer { flex: 1 1 auto; }
.hw-header__meta { text-align: right; line-height: 1.4; }

.hw-page { padding: 48px 0 0; position: relative; }
.hw-section { padding: 0 0 48px; position: relative; }

/* Cards are flat: no shadow, no outline. A hairline above them is the only
   separation, exactly as the news rows on the official site. */
.hw-panel { background: var(--hw-white); padding: 28px 0 0; border-top: 1px solid var(--hw-hairline); }
.hw-panel--plain { border-top: 0; padding-top: 0; }

/* The one permitted non-white background, and it should read as white until
   placed beside white. */
.hw-wash { background: var(--hw-pink-wash); border-radius: 20px; padding: 22px 24px; }

/* Dotted rule between list rows — no card, no hover fill. */
.hw-row {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0;
  border-top: 1px dotted var(--hw-hairline);
}
.hw-row:first-child { border-top: 0; }

/* ── 5. Bootstrap component overrides ─────────────────────────────────────── */

.card {
  border: 0;
  border-radius: 20px;
  background: var(--hw-white);
}
.card-body { padding: 0; }

.container, .wrap { max-width: var(--hw-max); }

/* Pill button with the black wipe — the official site's signature.
   The wipe is a background-image rather than an ::before overlay: backgrounds
   always paint beneath a button's text, so this works whether the label is a
   <span> or a bare text node. An overlay would have hidden the label on every
   button built with textContent, which is most of the dynamic ones. */
.btn {
  --bs-btn-border-width: 0;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 100px;
  font-family: var(--hw-font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 26px;
  background-image: linear-gradient(var(--hw-ink), var(--hw-ink));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .45s var(--hw-ease-wipe), color .3s var(--hw-ease);
}
.btn:hover, .btn:focus-visible { background-size: 100% 100%; }
.btn > * { position: relative; }

.btn-primary, .btn-success, .btn-danger {
  background-color: var(--hw-magenta);
  color: var(--hw-white);
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover,
.btn-primary:focus, .btn-success:focus, .btn-danger:focus {
  background-color: var(--hw-magenta);
  color: var(--hw-white);
}

/* Opt-in chevron for the primary calls to action, built from two borders as on
   the original. Opt-in because it needs the extra right padding. */
.hw-cta { padding-right: 52px; }
.hw-cta::after {
  content: "";
  position: absolute; top: 50%; right: 22px;
  margin-top: -4px; width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* Secondary actions stay quiet: text only, hairline pill, no fill. */
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger, .btn-outline-success {
  background-color: transparent;
  color: var(--hw-ink);
  border: 1px solid var(--hw-hairline) !important;
}
.btn-outline-secondary:hover, .btn-outline-primary:hover,
.btn-outline-danger:hover, .btn-outline-success:hover {
  color: var(--hw-white);
  border-color: var(--hw-ink) !important;
  background-color: transparent;
}
.btn-outline-danger { color: var(--hw-magenta); }

.btn-sm { padding: 9px 18px; font-size: 11.5px; letter-spacing: .09em; }
.btn:disabled, .btn.disabled { opacity: .35; }

/* Discord blurple is a third-party brand mark, kept as-is on purpose — it is
   the one colour on these pages that is not ours to restyle. */
.btn-discord { background-color: #5865f2 !important; color: #fff !important; }

/* Forms: hairline only, magenta on focus. No fills, no shadows. */
.form-control, .form-select {
  border: 1px solid var(--hw-hairline);
  border-radius: 2px;
  background-color: var(--hw-white);
  font-family: var(--hw-font-body);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--hw-ink);
  padding: 10px 12px;
  transition: border-color .3s var(--hw-ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--hw-magenta);
  background-color: var(--hw-white);
  color: var(--hw-ink);
}
.form-control::placeholder { color: var(--hw-gray-light); letter-spacing: .04em; }
.form-control-sm, .form-select-sm { font-size: 13px; padding: 8px 10px; }

.form-label {
  font: 700 11.5px/1 var(--hw-font-en);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hw-ink);
  margin-bottom: 8px;
}
.form-text { color: var(--hw-gray); font-size: 11.5px; letter-spacing: .05em; line-height: 1.7; }

/* Tag chips — hairline ground, gray text, fully rounded. */
.badge {
  background: var(--hw-hairline) !important;
  color: var(--hw-ink-soft) !important;
  border-radius: 50px;
  font: 700 11px/1 var(--hw-font-en);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.badge.text-bg-success { background: var(--hw-pink-wash) !important; color: var(--hw-magenta) !important; }
.badge.text-bg-danger  { background: #fdeced !important; color: #c9424a !important; }
.badge.text-bg-warning { background: #fff6e8 !important; color: #a4703a !important; }

/* Alerts: flat wash, no border, one hairline accent on the left. */
.alert {
  border: 0;
  border-left: 2px solid var(--hw-hairline);
  border-radius: 0;
  background: #fafafa;
  color: var(--hw-ink);
  font-size: 13px;
  letter-spacing: .04em;
  padding: 14px 16px;
}
.alert-success { background: var(--hw-pink-wash); border-left-color: var(--hw-magenta); }
.alert-danger  { background: #fdeced; border-left-color: var(--hw-coral); }
.alert-warning { background: #fff6e8; border-left-color: #e0a355; }
.alert-link { color: var(--hw-magenta); }
.btn-close { opacity: .3; }

/* Tabs become tracked Latin labels with a magenta underline. */
.nav-tabs { border-bottom: 1px solid var(--hw-hairline); gap: 28px; }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 0;
  font: 700 12.5px/1 var(--hw-font-en);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hw-gray);
  background: transparent;
  transition: color .3s var(--hw-ease), letter-spacing .3s var(--hw-ease);
}
.nav-tabs .nav-link:hover { color: var(--hw-ink); letter-spacing: .2em; }
.nav-tabs .nav-link.active {
  color: var(--hw-ink);
  border-bottom-color: var(--hw-magenta);
  background: transparent;
}

hr { border-color: var(--hw-hairline); opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--hw-hairline) !important; }
.bg-light { background: var(--hw-pink-wash) !important; }
.text-secondary { color: var(--hw-gray) !important; }
.text-danger { color: var(--hw-coral) !important; }
.text-success { color: var(--hw-magenta) !important; }
.rounded-3, .rounded { border-radius: 20px !important; }

a { text-decoration: none; transition: color .3s var(--hw-ease); }
a:hover { color: var(--hw-ink); }

/* Latin links stretch their tracking on hover. Cheap and very on-brand. */
.hw-link {
  font-family: var(--hw-font-en);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hw-ink);
  transition: letter-spacing .3s var(--hw-ease), color .3s var(--hw-ease);
}
.hw-link:hover { letter-spacing: .2em; color: var(--hw-magenta); }

.hw-footer {
  border-top: 1px solid var(--hw-hairline);
  margin-top: 56px;
  padding: 28px 0 40px;
  text-align: center;
}
.hw-footer__copy { font: 400 11.5px/1.8 var(--hw-font-en); letter-spacing: .1em; color: var(--hw-gray-light); }

/* ── 6. Motion ────────────────────────────────────────────────────────────── */

.hw-reveal { opacity: 0; transform: translateY(24px); }
.hw-reveal.is-active {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s cubic-bezier(.61, 1, .88, 1),
              transform .8s var(--hw-ease);
}

/* Per-letter stagger on section labels. Spans are injected by honeyworks.js. */
.hw-split__char {
  display: inline-block;
  opacity: 0;
  transform: translateX(-20px);
  white-space: pre;
}
.is-active .hw-split__char {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--hw-ease), transform .6s var(--hw-ease);
  transition-delay: calc(var(--i) * .04s);
}

/* ── 7. Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .hw-shell { padding: 0 18px; }
  .hw-display { font-size: 3.5rem; }
  .hw-title   { font-size: 30px; }
  .hw-heading { font-size: 24px; }
  .hw-card-title { font-size: 19px; }
  .hw-header__inner { padding: 14px 18px; }
  .hw-logo { font-size: 15px; letter-spacing: .12em; }
  .hw-page { padding-top: 32px; }
  .nav-tabs { gap: 18px; }
  .hw-ghost { display: none; }
}

/* ── 8. Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hw-reveal, .hw-reveal.is-active,
  .hw-split__char, .is-active .hw-split__char {
    opacity: 1;
    transform: none;
    transition: opacity .2s linear;
  }
  .btn { transition: none; }
  .nav-tabs .nav-link:hover, .hw-link:hover { letter-spacing: inherit; }
  * { animation: none !important; }
}