/* One continuous blue introduction aligned with the font catalog. */
body[data-page=fonts] #font-page .font-hero.wrap{
  width:100%;max-width:none;margin:0 0 28px;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:32px;padding:36px var(--lab-gutter);
  align-items:center;position:relative;overflow:hidden;isolation:isolate;
  background:#2456f5;color:#fff;
}
.font-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:56px 56px;
}
.font-hero-copy{min-width:0;position:relative;z-index:1}
.font-hero.lab-hero .eyebrow{color:#e0e7ff;font-size:10px;letter-spacing:.1em}
.font-hero .brand-symbol{background:#fff;border-radius:6px;padding:3px;flex-shrink:0}
.font-hero.lab-hero h1{font-size:clamp(42px,3.8vw,64px);line-height:1.2;color:#fff;margin-top:22px}
.font-hero.lab-hero h1>em{color:#c8f18b}
.font-hero.lab-hero p{font-size:14px;line-height:1.8;color:#e0e7ff;margin-top:18px}
.font-hero-visual{min-width:0;position:relative;width:100%;max-width:760px;justify-self:center}
.font-hero-art{
  position:relative;height:268px;overflow:hidden;isolation:isolate;contain:paint;
  background:transparent;border-radius:0;color:#fff;
}
.font-motion-grid{display:none}
.font-motion-top{position:absolute;top:10px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:.1em;color:#ffffffb3}
.font-motion-top i{width:5px;height:5px;border-radius:50%;background:#c8f18b}
.font-motion-aa{position:absolute;left:35px;top:29px;font-family:Georgia,serif;font-style:italic;font-size:230px;line-height:.9;letter-spacing:-.14em;animation:letter-drift 12s ease-in-out infinite}
.font-motion-ko{position:absolute;right:65px;bottom:32px;font-family:Paperlogy,Pretendard,sans-serif;font-size:190px;font-weight:750;line-height:1;color:#d4e0ff;animation:korean-drift 12s ease-in-out infinite}
.font-motion-star{position:absolute;right:24px;top:35px;width:59px;height:59px;color:#c8f18b;animation:star-orbit 26s linear infinite}
.font-motion-star svg{display:block;width:100%;height:100%}
.font-motion-orbit{position:absolute;left:-16%;top:-18%;width:138%;height:125%;border:1px solid #ffffff3d;border-radius:50%;z-index:-1;animation:orbit-breathe 16s ease-in-out infinite}
.font-motion-orbit.second{left:14%;top:-18%;width:82%;height:150%;opacity:.55;animation-duration:21s;animation-direction:reverse}
.font-motion-foot{position:absolute;bottom:9px;left:28px;font-size:8px;letter-spacing:.11em;color:#ffffffb3}
.font-motion-toggle{position:absolute;right:15px;bottom:0;display:flex;align-items:center;gap:6px;min-height:30px;padding:6px 10px;border:1px solid #ffffff55;border-radius:20px;background:transparent;color:#fff;font-size:8px;z-index:1}
.font-motion-toggle i{font-style:normal;width:10px;text-align:center}
.font-motion-toggle:focus-visible{outline:2px solid #c8f18b;outline-offset:3px}
html.breez-motion-paused .font-hero-art *,body:not([data-page=fonts]) .font-hero-art *{animation-play-state:paused!important}
@media(max-width:1100px){
  body[data-page=fonts] #font-page .font-hero.wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;padding-block:32px}
  .font-hero-art{height:245px}
  .font-motion-aa{font-size:185px;left:16px;top:40px}
  .font-motion-ko{font-size:150px;right:30px;bottom:35px}
  .font-motion-star{width:44px;height:44px;top:36px;right:12px}
  .font-motion-top{left:17px;right:17px;font-size:6px}
  .font-motion-foot{left:17px;font-size:6px}
}
@media(max-width:760px){
  .font-hero.lab-hero h1{font-size:clamp(32px,5.4vw,41px)}
  .font-hero.lab-hero .eyebrow{font-size:8px;letter-spacing:.05em;line-height:1.6}
  .font-hero.lab-hero p{font-size:12px}
  .font-motion-aa{font-size:155px;left:12px;top:53px}
  .font-motion-ko{font-size:125px;right:22px;bottom:38px}
  .font-motion-star{width:36px;height:36px;top:40px;right:12px}
}
@media(max-width:620px){
  body[data-page=fonts] #font-page .font-hero.wrap{grid-template-columns:minmax(0,1fr);gap:6px;padding-top:26px;padding-bottom:12px;margin-bottom:22px}
  .font-hero.lab-hero h1{font-size:clamp(32px,8.5vw,44px);margin-top:18px}
  .font-hero.lab-hero p{margin-top:14px}
  .font-hero-visual{max-width:460px;justify-self:center}
  .font-hero-art{height:166px}
  .font-motion-top,.font-motion-foot{display:none}
  .font-motion-aa{font-size:130px;left:24px;top:13px}
  .font-motion-ko{font-size:118px;right:58px;bottom:19px}
  .font-motion-star{width:34px;height:34px;right:16px;top:22px}
  .font-motion-toggle{right:0;bottom:0}
}
@media(prefers-reduced-motion:reduce){.font-hero-art *{animation:none!important}.font-motion-toggle{display:none}}

/* Give the introduction its own breathing room within the wide blue band. */
@media(min-width:1101px){
 body[data-page=fonts] #font-page .font-hero.wrap{grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);padding:40px clamp(40px,4vw,112px);gap:clamp(28px,3vw,64px)}
 .font-hero-copy{width:max-content;max-width:100%;justify-self:center}
 .font-hero.lab-hero h1{font-size:clamp(32px,2.85vw,62px);line-height:1.3;letter-spacing:-.055em;white-space:nowrap;margin-top:22px}
 .font-hero-break{display:none}
 .font-hero.lab-hero p{font-size:clamp(12px,.94vw,15px);line-height:1.85;margin-top:18px;max-width:650px;text-wrap:pretty}
 .font-hero.lab-hero .eyebrow{font-size:10px;letter-spacing:.08em}
}
@media(min-width:621px) and (max-width:1100px){body[data-page=fonts] #font-page .font-hero.wrap{padding-inline:32px}.font-hero-copy{padding-left:4px}}
@media(max-width:620px){body[data-page=fonts] #font-page .font-hero.wrap{padding-inline:24px;padding-top:32px}.font-hero-copy{padding-inline:4px}.font-hero.lab-hero h1{font-size:clamp(30px,8vw,42px)}}