@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

* { box-sizing: border-box; }
body { margin: 0; background: #fafaf7; color: #111; font-family: 'Pretendard Variable', Pretendard, sans-serif; line-height: 1.65; }
a { color: inherit; text-underline-offset: .2em; }
.shell { width: min(100% - 40px, 760px); margin-inline: auto; }
.site-header { display: flex; align-items: center; padding-block: 25px; border-bottom: 1px solid #deded8; }
.site-header a { font-size: 13px; font-weight: 750; text-decoration: none; }
.site-header > a:first-child { display: block; width: 42px; height: 42px; flex: none; overflow: hidden; background: url('/hypeup-logo.svg') center / contain no-repeat; font-size: 0; line-height: 0; }
main { padding-block: 56px 40px; }
.eyebrow { margin: 0 0 12px; font-size: 11px; letter-spacing: .08em; }
h1 { margin: 0 0 20px; font-size: clamp(32px, 7vw, 48px); line-height: 1.15; letter-spacing: -.055em; }
.lead { max-width: 600px; margin: 0 0 24px; font-size: 17px; }
.button { display: inline-block; padding: 11px 20px; border-radius: 6px; background: #111; color: #fff; font-size: 14px; font-weight: 650; text-decoration: none; }
section { margin-top: 40px; padding-top: 25px; border-top: 1px solid #deded8; }
.intro { margin-top: 0; padding-top: 0; border-top: 0; }
h2 { margin: 0 0 14px; font-size: 21px; letter-spacing: -.03em; }
ul { margin: 0; padding-left: 20px; }
li { margin-block: 6px; }
.work-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.work-list > a, .work-list > figure { min-width: 0; margin: 0; }
.work-list a { display: block; text-decoration: none; }
.work-list img { display: block; width: 100%; max-height: 240px; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; }
.work-list strong { display: block; margin-top: 9px; font-size: 15px; }
.work-list span, .work-list figcaption { display: block; font-size: 14px; }
.note { margin-top: 14px; color: #62625e; font-size: 12px; }
footer { padding-block: 24px 36px; border-top: 1px solid #deded8; font-size: 13px; }
footer strong { display: block; margin-bottom: 8px; }
footer p { margin: 0 0 8px; }
a:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
@media (max-width: 480px) { main { padding-top: 38px; } .lead { font-size: 16px; } section { margin-top: 30px; } }