:root{
  --yk-blue-900:#0B2A4A;
  --yk-blue-700:#124B73;
  --yk-coral-500:#F47C5C;
  --yk-coral-700:#B84224;
  --yk-mint-300:#9EE6C7;
  --yk-sand-100:#F6EFE3;
  --yk-paper-050:#FBF9F5;
  --yk-sky-100:#E7F1F7;
  --yk-ink-900:#14212B;
  --yk-line-200:#D9E2E8;
  --yk-focus-500:#2A7F9E;

  --yk-wrap:1180px;
  --yk-wrap-narrow:760px;
  --yk-gutter:clamp(16px,3.2vw,40px);
  --yk-radius:6px;
  --yk-radius-sm:3px;

  --yk-serif:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif;
  --yk-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --yk-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --yk-shadow:0 1px 2px rgba(11,42,74,.06),0 8px 22px -14px rgba(11,42,74,.28);
  --yk-ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--yk-paper-050);
  color:var(--yk-ink-900);
  font-family:var(--yk-sans);
  font-size:17px;
  line-height:1.8;
  font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--yk-blue-700);text-decoration:none}
a:hover{color:var(--yk-coral-700)}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{
  outline:2px solid var(--yk-focus-500);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- skip link ---------- */
.yk-skip{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%,-140%);
  z-index:120;
  background:var(--yk-mint-300);
  color:var(--yk-blue-900);
  font-weight:700;
  font-size:14px;
  padding:10px 20px;
  border-radius:0 0 var(--yk-radius) var(--yk-radius);
  transition:transform .2s var(--yk-ease);
}
.yk-skip:focus-visible,
.yk-skip:focus{transform:translate(-50%,0);color:var(--yk-blue-900)}

/* ---------- header ---------- */
.yk-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--yk-blue-900);
  color:var(--yk-paper-050);
  border-bottom:1px solid rgba(158,230,199,.22);
}
.yk-progress{
  height:3px;
  width:0%;
  background:linear-gradient(90deg,var(--yk-mint-300),var(--yk-coral-500));
  transition:width .08s linear;
}
.yk-header__inner{
  width:100%;
  max-width:var(--yk-wrap);
  margin:0 auto;
  padding:0 var(--yk-gutter);
}
.yk-header__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:18px 0 14px;
}
.yk-brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  color:var(--yk-paper-050);
  min-width:0;
}
.yk-brand:hover{color:#fff}
.yk-brand__line{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-family:var(--yk-sans);
  color:var(--yk-mint-300);
  font-weight:700;
}
.yk-brand__name{
  font-family:var(--yk-serif);
  font-weight:700;
  font-size:clamp(26px,3.4vw,38px);
  line-height:1.15;
  letter-spacing:.04em;
}
.yk-brand__tagline{
  font-size:13px;
  line-height:1.6;
  color:rgba(251,249,245,.72);
  letter-spacing:.06em;
}
.yk-utility{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.yk-utility__link{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  font-size:14px;
  color:rgba(251,249,245,.86);
  padding:6px 10px;
  border:1px solid rgba(217,226,232,.26);
  border-radius:var(--yk-radius-sm);
  transition:background .18s var(--yk-ease),border-color .18s var(--yk-ease),color .18s var(--yk-ease);
  white-space:nowrap;
}
.yk-utility__link:hover,
.yk-utility__link:focus-visible{
  background:rgba(158,230,199,.14);
  border-color:var(--yk-mint-300);
  color:#fff;
}
.yk-utility__abbr{
  font-size:10px;
  letter-spacing:.18em;
  font-weight:700;
  color:var(--yk-coral-500);
}

/* nav */
.yk-navwrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-top:1px solid rgba(217,226,232,.18);
  padding-top:12px;
}
.yk-nav{
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.yk-nav__link{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  padding:9px 14px;
  color:rgba(251,249,245,.84);
  font-size:15px;
  white-space:nowrap;
  border-radius:var(--yk-radius-sm);
  border:1px solid transparent;
  transition:background .18s var(--yk-ease),color .18s var(--yk-ease),border-color .18s var(--yk-ease);
}
.yk-nav__abbr{
  font-size:10px;
  letter-spacing:.16em;
  font-weight:700;
  color:rgba(158,230,199,.9);
  font-family:var(--yk-mono);
}
.yk-nav__label{font-weight:500}
.yk-nav__link:hover,
.yk-nav__link:focus-visible{
  background:rgba(231,241,247,.1);
  color:#fff;
  border-color:rgba(217,226,232,.28);
}
.yk-nav__link[aria-current="page"]{
  background:var(--yk-paper-050);
  color:var(--yk-blue-900);
  border-color:var(--yk-paper-050);
  box-shadow:inset 0 -3px 0 var(--yk-coral-500);
}
.yk-nav__link[aria-current="page"] .yk-nav__abbr{color:var(--yk-coral-700)}
.yk-header__cta{flex-shrink:0}

.yk-nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1px solid rgba(217,226,232,.4);
  border-radius:var(--yk-radius-sm);
  color:var(--yk-paper-050);
  padding:9px 12px;
  cursor:pointer;
  transition:border-color .18s var(--yk-ease),background .18s var(--yk-ease);
}
.yk-nav-toggle:hover{border-color:var(--yk-mint-300)}
.yk-nav-toggle__bars,
.yk-nav-toggle__bars::before,
.yk-nav-toggle__bars::after{
  display:block;
  width:16px;
  height:2px;
  background:var(--yk-mint-300);
  transition:transform .2s var(--yk-ease),opacity .2s var(--yk-ease);
}
.yk-nav-toggle__bars{position:relative}
.yk-nav-toggle__bars::before,
.yk-nav-toggle__bars::after{content:"";position:absolute;left:0}
.yk-nav-toggle__bars::before{top:-5px}
.yk-nav-toggle__bars::after{top:5px}
.yk-nav-toggle__text{font-size:13px;letter-spacing:.08em}
.yk-header[data-open] .yk-nav-toggle__bars{background:transparent}
.yk-header[data-open] .yk-nav-toggle__bars::before{transform:translateY(5px) rotate(45deg)}
.yk-header[data-open] .yk-nav-toggle__bars::after{transform:translateY(-5px) rotate(-45deg)}

/* ---------- buttons ---------- */
.yk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  border-radius:var(--yk-radius-sm);
  border:1px solid transparent;
  background:var(--yk-blue-700);
  color:var(--yk-paper-050);
  cursor:pointer;
  transition:background .18s var(--yk-ease),color .18s var(--yk-ease),border-color .18s var(--yk-ease),transform .18s var(--yk-ease);
}
.yk-btn:hover{background:var(--yk-blue-900);color:#fff}
.yk-btn:active{transform:translateY(1px)}
.yk-btn--accent{background:var(--yk-coral-700);color:var(--yk-paper-050)}
.yk-btn--accent:hover{background:#9d3719;color:#fff}
.yk-btn--ghost{
  background:transparent;
  color:var(--yk-paper-050);
  border-color:rgba(158,230,199,.6);
}
.yk-btn--ghost:hover{
  background:rgba(158,230,199,.16);
  border-color:var(--yk-mint-300);
  color:#fff;
}

/* ---------- layout ---------- */
.yk-main{
  display:block;
  background:var(--yk-paper-050);
}
.yk-section{
  padding:clamp(40px,6vw,76px) 0;
}
.yk-section__head{
  max-width:var(--yk-wrap-narrow);
  margin-bottom:clamp(20px,3vw,34px);
}
.yk-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--yk-coral-700);
  margin-bottom:10px;
}
.yk-eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--yk-coral-500);
}
.yk-h2{
  font-family:var(--yk-serif);
  font-weight:700;
  font-size:clamp(24px,2.9vw,32px);
  line-height:1.28;
  letter-spacing:.02em;
  color:var(--yk-blue-900);
}
.yk-lead{
  font-size:17px;
  line-height:1.85;
  color:#33454f;
  max-width:60ch;
  margin-top:12px;
}
.yk-rule{
  height:4px;
  border:0;
  margin:0;
  background:linear-gradient(90deg,var(--yk-coral-500) 0 18%,var(--yk-sand-100) 18% 100%);
}

.yk-grid{
  display:grid;
  gap:clamp(16px,2.4vw,28px);
}
.yk-grid--5-7{grid-template-columns:5fr 7fr}
.yk-grid--7-5{grid-template-columns:7fr 5fr}
.yk-grid--3-9{grid-template-columns:3fr 9fr}
.yk-grid--4-8{grid-template-columns:4fr 8fr}

/* ---------- cards / badges ---------- */
.yk-card{
  background:#fff;
  border:1px solid var(--yk-line-200);
  border-radius:var(--yk-radius);
  box-shadow:var(--yk-shadow);
  overflow:hidden;
}
.yk-card__body{padding:clamp(16px,2.2vw,26px)}
.yk-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:13px;
  color:#5b6b76;
  margin-bottom:10px;
}
.yk-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--yk-line-200);
  background:var(--yk-sky-100);
  color:var(--yk-blue-700);
  font-variant-numeric:tabular-nums;
}
.yk-badge--batch{
  background:var(--yk-coral-700);
  border-color:var(--yk-coral-700);
  color:#fff;
}
.yk-badge--mint{
  background:var(--yk-mint-300);
  border-color:#7fd6b1;
  color:var(--yk-blue-900);
}

/* ---------- breadcrumb ---------- */
.yk-crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#5b6b76;
  padding:14px 0 0;
}
.yk-crumb__item{display:inline-flex;align-items:center;gap:6px}
.yk-crumb__sep{color:var(--yk-line-200)}

/* ---------- figure ---------- */
.yk-figure{
  margin:0;
  border:1px solid var(--yk-line-200);
  border-radius:var(--yk-radius);
  background:var(--yk-sky-100);
  overflow:hidden;
}
.yk-figure__media{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  background:
    radial-gradient(circle at 18% 24%,rgba(244,124,92,.18),transparent 42%),
    radial-gradient(circle at 82% 76%,rgba(158,230,199,.4),transparent 46%),
    repeating-linear-gradient(135deg,rgba(18,75,115,.08) 0 1px,transparent 1px 14px),
    var(--yk-sand-100);
  display:flex;
  align-items:center;
  justify-content:center;
}
.yk-figure__media img,
.yk-figure__media svg{
  width:100%;
  height:100%;
  object-fit:cover;
}
.yk-figure__caption{
  padding:10px 14px;
  font-size:13px;
  line-height:1.7;
  color:#4d5d68;
  background:#fff;
  border-top:1px solid var(--yk-line-200);
}

/* ---------- details ---------- */
.yk-details{
  border:1px solid var(--yk-line-200);
  border-radius:var(--yk-radius);
  background:#fff;
  padding:0;
}
.yk-details + .yk-details{margin-top:10px}
.yk-details__summary{
  cursor:pointer;
  list-style:none;
  padding:14px 18px;
  font-weight:700;
  color:var(--yk-blue-900);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.yk-details__summary::-webkit-details-marker{display:none}
.yk-details__summary::after{
  content:"+";
  font-family:var(--yk-mono);
  color:var(--yk-coral-700);
  font-size:18px;
  transition:transform .2s var(--yk-ease);
}
.yk-details[open] .yk-details__summary::after{transform:rotate(45deg)}
.yk-details__body{padding:0 18px 16px;font-size:15px;line-height:1.8;color:#33454f}

/* ---------- reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--yk-ease),transform .45s var(--yk-ease);
}
[data-reveal].is-revealed{opacity:1;transform:none}

/* ---------- top button ---------- */
.yk-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:70;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--yk-blue-900);
  color:var(--yk-mint-300);
  border:1px solid rgba(158,230,199,.5);
  border-radius:50%;
  cursor:pointer;
  box-shadow:var(--yk-shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s var(--yk-ease),transform .2s var(--yk-ease),visibility .2s;
}
.yk-top.is-visible{opacity:1;visibility:visible;transform:none}
.yk-top:hover{background:var(--yk-blue-700)}

/* ---------- footer ---------- */
.yk-footer{
  background:var(--yk-blue-900);
  color:var(--yk-paper-050);
  border-top:4px solid var(--yk-coral-500);
  margin-top:clamp(40px,6vw,80px);
}
.yk-footer__inner{
  width:100%;
  max-width:var(--yk-wrap);
  margin:0 auto;
  padding:clamp(34px,5vw,60px) var(--yk-gutter) 26px;
}
.yk-footer__grid{
  display:grid;
  grid-template-columns:1.15fr 1.15fr .9fr 1fr;
  gap:clamp(18px,3vw,36px);
  padding-bottom:26px;
  border-bottom:1px solid rgba(217,226,232,.2);
}
.yk-footer__col{min-width:0}
.yk-footer__col--brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.yk-footer__brandline{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--yk-mint-300);
}
.yk-footer__brandname{
  font-family:var(--yk-serif);
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.04em;
}
.yk-footer__title{
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--yk-mint-300);
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(217,226,232,.22);
}
.yk-footer__text{
  font-size:14px;
  line-height:1.8;
  color:rgba(251,249,245,.78);
}
.yk-footer__text--tight{font-size:13px;line-height:1.7;margin-top:8px;word-break:break-word}
.yk-footer__list{display:flex;flex-direction:column;gap:8px}
.yk-footer__link{
  font-size:14px;
  color:rgba(251,249,245,.86);
  border-bottom:1px solid transparent;
  transition:color .18s var(--yk-ease),border-color .18s var(--yk-ease);
}
.yk-footer__link:hover,
.yk-footer__link:focus-visible{color:var(--yk-mint-300);border-bottom-color:var(--yk-mint-300)}
.yk-indexcard{
  background:rgba(158,230,199,.1);
  border:1px solid rgba(158,230,199,.42);
  border-radius:var(--yk-radius);
  padding:16px;
}
.yk-indexcard__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.yk-tag{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  padding:3px 10px;
  border-radius:999px;
  background:var(--yk-mint-300);
  color:var(--yk-blue-900);
}
.yk-footer__note{
  font-size:13px;
  line-height:1.8;
  color:rgba(251,249,245,.72);
  padding:18px 0 0;
  max-width:74ch;
}
.yk-footer__legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(217,226,232,.2);
  font-size:12.5px;
  color:rgba(251,249,245,.66);
  letter-spacing:.04em;
}
.yk-icp{font-variant-numeric:tabular-nums;color:rgba(251,249,245,.8)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .yk-footer__grid{grid-template-columns:1fr 1fr}
  .yk-grid--3-9,.yk-grid--4-8{grid-template-columns:1fr}
}
@media (max-width:900px){
  .yk-header__top{align-items:center}
  .yk-utility{display:none}
  .yk-nav-toggle{display:inline-flex}
  .yk-navwrap{
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding-top:4px;
  }
  .yk-header[data-open] .yk-navwrap{display:flex}
  .yk-nav{flex-direction:column;align-items:stretch;overflow:visible;gap:2px}
  .yk-nav__link{justify-content:flex-start;padding:12px 10px}
  .yk-header__cta{width:100%}
  .yk-grid--5-7,.yk-grid--7-5{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .yk-header__top{padding:14px 0 10px}
  .yk-brand__tagline{font-size:12px}
  .yk-footer__grid{grid-template-columns:1fr;gap:22px}
  .yk-footer__legal{flex-direction:column;align-items:flex-start}
  .yk-figure__media{aspect-ratio:4/3}
  .yk-section{padding:34px 0}
  .yk-top{right:12px;bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
}
