@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=DM+Sans:wght@500;700;800&display=swap');

:root { --ink:#17201b; --navy:#18233e; --blue:#4059e8; --sky:#79d9ed; --yellow:#ecff70; --coral:#ff9b7b; --pink:#f7b8d2; --paper:#fffaf0; --white:#fff; --line:#27322c; --shell:min(1180px,calc(100% - 48px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans","Malgun Gothic",sans-serif; word-break:keep-all; }
a { color:inherit; }
.skip { position:fixed; top:-70px; left:20px; z-index:100; padding:12px 18px; background:var(--ink); color:white; }
.skip:focus { top:12px; }
.special-header { width:var(--shell); min-height:94px; margin:auto; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:34px; border-bottom:1.5px solid var(--ink); }
.special-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.special-logo>span { display:grid; place-items:center; width:34px; height:34px; background:var(--yellow); border:1.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font-weight:900; }
.special-logo strong { font-size:18px; letter-spacing:-.03em; }
.special-logo small { padding:4px 7px; background:var(--pink); border:1px solid var(--ink); font-size:12px; font-weight:800; }
.special-header nav { display:flex; gap:5px; }
.special-header nav a { min-height:44px; padding:12px 13px; text-decoration:none; font-size:14px; font-weight:800; }
.special-header nav a:hover,.special-header nav a:focus-visible,.special-header nav a.active { background:var(--yellow); outline:1.5px solid var(--ink); }
.lab-link { min-height:46px; padding:12px 16px; background:var(--navy); color:white; border:1.5px solid var(--ink); box-shadow:4px 4px 0 var(--coral); text-decoration:none; font-size:14px; font-weight:800; }
.menu-button { display:none; min-height:44px; padding:10px 14px; border:1.5px solid var(--ink); background:var(--yellow); font:800 14px inherit; }

.special-hero,.student-hero { width:var(--shell); min-height:690px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; padding:72px 0 90px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 22px; font-size:14px; font-weight:900; letter-spacing:.12em; }
.eyebrow span { width:30px; height:9px; background:var(--coral); border:1px solid var(--ink); }
.hero-copy h1,.student-intro h1 { margin:0; font-family:"Black Han Sans","Malgun Gothic",sans-serif; font-size:clamp(62px,7vw,104px); line-height:.98; letter-spacing:-.06em; font-weight:400; }
.answer { margin:26px 0 30px; font-size:28px; font-weight:800; }
.answer strong { display:inline-block; padding:5px 13px; background:var(--yellow); border:1.5px solid var(--ink); box-shadow:4px 4px 0 var(--blue); font-size:38px; transform:rotate(-2deg); }
.hero-description,.student-intro>p:last-child { max-width:650px; font-size:18px; line-height:1.9; }
.primary-link { display:inline-flex; justify-content:space-between; gap:28px; min-height:52px; margin-top:18px; padding:14px 18px; background:var(--blue); color:white; border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--ink); text-decoration:none; font-size:16px; font-weight:900; }
.hero-playground { position:relative; min-height:520px; background:var(--sky); border:1.5px solid var(--ink); box-shadow:12px 12px 0 var(--navy); overflow:hidden; }
.maker-ticket { position:absolute; inset:80px 72px 74px; display:flex; flex-direction:column; justify-content:space-between; padding:30px; background:var(--paper); border:2px solid var(--ink); transform:rotate(3deg); }
.maker-ticket small,.maker-ticket span { font-size:14px; font-weight:900; letter-spacing:.1em; }
.maker-ticket strong { font-family:"Black Han Sans","Malgun Gothic",sans-serif; font-size:66px; line-height:.88; font-weight:400; }
.shape { position:absolute; z-index:2; padding:9px 15px; border:1.5px solid var(--ink); font-size:14px; font-weight:900; }
.shape-one { top:26px; left:27px; background:var(--yellow); transform:rotate(-6deg); }.shape-two { right:25px; top:44px; background:var(--pink); font-size:28px; transform:rotate(8deg); }.shape-three { left:35px; bottom:25px; background:var(--coral); transform:rotate(5deg); }
.spark { position:absolute; z-index:3; font-style:normal; font-size:48px; }.spark-one { right:20px; bottom:18px; }.spark-two { left:12px; top:43%; font-size:28px; color:var(--blue); }

.special-purpose { padding:100px max(24px,calc((100% - 1180px)/2)); background:var(--navy); color:white; border-block:1.5px solid var(--ink); }
.section-lead { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:48px; }
.section-lead p,.section-heading>div>p,.student-next>p,.special-note>p { color:var(--yellow); font-size:14px; font-weight:900; letter-spacing:.13em; }
.section-lead h2,.section-heading h2 { margin:0; font-size:clamp(40px,5vw,66px); line-height:1.05; letter-spacing:-.055em; }
.purpose-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1.5px solid white; }
.purpose-grid article { min-height:270px; padding:30px; border-right:1.5px solid white; }
.purpose-grid article:last-child { border-right:0; }
.purpose-grid span { display:grid; place-items:center; width:48px; height:48px; margin-bottom:55px; border-radius:50%; background:var(--yellow); color:var(--ink); font-size:15px; font-weight:900; }
.purpose-grid strong { display:block; margin-bottom:12px; font-size:28px; }
.purpose-grid p { margin:0; color:#dce2f0; font-size:16px; line-height:1.75; }

.makers,.student-projects { width:var(--shell); margin:auto; padding:110px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:45px; }
.section-heading>div>p { margin:0 0 11px; color:var(--blue); }
.section-heading>p { max-width:320px; margin:0; font-size:16px; line-height:1.7; }
.maker-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.name-tag { position:relative; min-height:410px; padding:54px 46px 40px; border:2px solid var(--ink); box-shadow:10px 10px 0 var(--ink); text-decoration:none; overflow:hidden; }
.name-tag.jihoo { background:var(--yellow); transform:rotate(-1deg); }.name-tag.next { background:var(--pink); transform:rotate(1deg); }
.tag-hole { position:absolute; top:18px; left:50%; width:64px; height:20px; border:1.5px solid var(--ink); border-radius:14px; background:var(--paper); transform:translateX(-50%); }
.name-tag small { display:block; margin-bottom:34px; font-size:14px; font-weight:900; letter-spacing:.1em; }
.name-tag strong { display:block; margin-bottom:18px; font-family:"Black Han Sans","Malgun Gothic",sans-serif; font-size:72px; line-height:1; font-weight:400; }
.name-tag p { max-width:420px; font-size:18px; line-height:1.65; }
.name-tag b { position:absolute; left:46px; bottom:38px; font-size:16px; }
.project-count { position:absolute; right:30px; bottom:30px; padding:9px 13px; background:var(--blue); color:white; border:1.5px solid var(--ink); transform:rotate(-3deg); font-size:14px; font-weight:900; }
.name-tag:hover,.name-tag:focus-visible { transform:translate(-4px,-4px) rotate(0); box-shadow:14px 14px 0 var(--blue); }
.special-note,.student-next { width:var(--shell); min-height:420px; margin:0 auto 100px; padding:58px; background:var(--coral); border:1.5px solid var(--ink); box-shadow:10px 10px 0 var(--blue); }
.special-note h2,.student-next h2 { max-width:900px; margin:30px 0 54px; font-size:clamp(40px,5.7vw,76px); line-height:1.08; letter-spacing:-.055em; }
.special-note a,.student-next a { display:inline-block; min-height:48px; padding:13px 17px; background:var(--ink); color:white; text-decoration:none; font-size:15px; font-weight:900; }

.student-hero { min-height:650px; grid-template-columns:1.2fr .8fr; }
.student-intro h1 em { color:var(--blue); font-style:normal; }
.student-labels { display:flex; flex-wrap:wrap; gap:9px; margin:28px 0; }
.student-labels span { padding:8px 12px; border:1.5px solid var(--ink); background:var(--yellow); font-size:14px; font-weight:900; }
.student-labels span:nth-child(2) { background:var(--sky); }.student-labels span:nth-child(3) { background:var(--pink); }
.student-badge { position:relative; min-height:480px; padding:38px; background:var(--yellow); border:2px solid var(--ink); box-shadow:13px 13px 0 var(--blue); transform:rotate(2deg); }
.student-badge small { font-size:14px; font-weight:900; letter-spacing:.1em; }.student-badge>span { display:block; margin:38px 0 24px; font-size:120px; line-height:.85; font-weight:900; letter-spacing:-.09em; }.student-badge strong { font-family:"Black Han Sans","Malgun Gothic",sans-serif; font-size:52px; line-height:.9; font-weight:400; }.student-badge i { position:absolute; right:35px; bottom:24px; font-style:normal; font-size:70px; color:var(--blue); }
.student-manifesto { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:30px; padding:80px max(24px,calc((100% - 1180px)/2)); background:var(--sky); border-block:1.5px solid var(--ink); }
.student-manifesto>span { font-size:90px; line-height:.6; }.student-manifesto p { margin:0; font-size:clamp(28px,4vw,52px); line-height:1.35; letter-spacing:-.045em; }.student-manifesto strong { background:var(--yellow); }
.project-card { display:grid; grid-template-columns:1.12fr .88fr; border:2px solid var(--ink); box-shadow:10px 10px 0 var(--ink); }
.student-projects .project-card + .project-card { margin-top:64px; }
.project-preview { position:relative; min-height:540px; padding:30px; background:var(--navy); display:grid; place-items:center; }
.project-preview img { display:block; width:100%; height:auto; max-height:475px; object-fit:contain; border:1px solid #5f6c88; }
.project-preview span { position:absolute; left:20px; top:18px; padding:7px 10px; background:var(--yellow); border:1px solid var(--ink); font-size:12px; font-weight:900; }
.project-copy { display:flex; flex-direction:column; align-items:flex-start; padding:48px; background:white; }
.project-kicker { color:var(--blue); font-size:13px!important; font-weight:900; letter-spacing:.08em; }
.project-copy h3 { margin:10px 0 18px; font-family:"Black Han Sans","Malgun Gothic",sans-serif; font-size:66px; font-weight:400; }
.project-copy>p { font-size:17px; line-height:1.8; }
.project-meta { width:100%; margin:20px 0 28px; border-top:1px solid var(--ink); }
.project-meta span { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid #bdc2ba; font-size:14px; }.project-meta b { font-size:12px; letter-spacing:.08em; }
.project-copy>a { width:100%; min-height:54px; display:flex; justify-content:space-between; padding:15px 18px; background:var(--blue); color:white; border:1.5px solid var(--ink); box-shadow:5px 5px 0 var(--yellow); text-decoration:none; font-size:16px; font-weight:900; }.project-copy>small { margin-top:14px; font-size:13px; }
.student-next { background:var(--pink); }

.special-footer { padding:58px max(24px,calc((100% - 1180px)/2)); display:grid; grid-template-columns:1fr 1fr; gap:16px; background:var(--ink); color:white; }
.special-footer strong { font-size:21px; }.special-footer strong small { margin-left:8px; color:var(--yellow); font-size:12px; }.special-footer p { grid-row:2; margin:0; color:#cbd1cc; }.special-footer div { grid-column:2; grid-row:1 / span 2; display:flex; justify-content:flex-end; gap:22px; }.special-footer div a { font-size:14px; }.special-footer>small { grid-column:1 / -1; margin-top:35px; padding-top:20px; border-top:1px solid #526057; color:#aeb8b1; font-size:12px; }

@media (max-width:900px) {
  :root { --shell:min(100% - 32px,1180px); }
  .special-header { grid-template-columns:1fr auto; min-height:80px; }
  .special-header nav { position:absolute; z-index:20; left:16px; right:16px; top:80px; display:none; flex-direction:column; padding:15px; background:var(--paper); border:1.5px solid var(--ink); box-shadow:7px 7px 0 var(--ink); }
  .special-header nav.open { display:flex; }.menu-button { display:block; }.lab-link { display:none; }
  .special-hero,.student-hero { min-height:auto; grid-template-columns:1fr; gap:55px; padding:62px 0 75px; }
  .hero-playground { min-height:470px; }.purpose-grid { grid-template-columns:1fr; }.purpose-grid article { min-height:auto; border-right:0; border-bottom:1.5px solid white; }.purpose-grid article:last-child { border-bottom:0; }.purpose-grid span { margin-bottom:30px; }
  .maker-grid,.project-card { grid-template-columns:1fr; }.project-preview { min-height:auto; }.project-copy { padding:38px 30px; }
}

@media (max-width:600px) {
  .special-logo small { display:none; }.special-logo strong { font-size:16px; }
  .hero-copy h1,.student-intro h1 { font-size:52px; }.answer { font-size:22px; }.answer strong { font-size:30px; }.hero-description,.student-intro>p:last-child { font-size:16px; line-height:1.8; }
  .hero-playground { min-height:390px; box-shadow:7px 7px 0 var(--navy); }.maker-ticket { inset:64px 35px 58px; padding:24px; }.maker-ticket strong { font-size:50px; }.shape-two { font-size:21px; }
  .special-purpose,.makers,.student-projects { padding-top:78px; padding-bottom:78px; }.section-lead,.section-heading { align-items:flex-start; flex-direction:column; gap:18px; }.section-lead h2,.section-heading h2 { font-size:42px; }
  .name-tag { min-height:390px; padding:52px 28px 34px; box-shadow:7px 7px 0 var(--ink); }.name-tag strong { font-size:59px; }.name-tag b { left:28px; bottom:35px; }.project-count { right:20px; bottom:76px; }
  .special-note,.student-next { width:calc(100% - 32px); min-height:360px; padding:35px 25px; box-shadow:7px 7px 0 var(--blue); }.special-note h2,.student-next h2 { font-size:40px; }
  .student-badge { min-height:390px; padding:30px; }.student-badge>span { font-size:96px; }.student-badge strong { font-size:44px; }
  .student-manifesto { grid-template-columns:1fr; gap:0; padding-block:60px; }.student-manifesto>span { font-size:70px; }.student-manifesto p { font-size:30px; }
  .project-preview { padding:50px 14px 22px; }.project-copy h3 { font-size:55px; }.project-copy>p { font-size:16px; }.project-meta span { align-items:flex-start; flex-direction:column; gap:4px; }
  .student-projects .project-card + .project-card { margin-top:44px; }
  .special-footer { grid-template-columns:1fr; }.special-footer div { grid-column:1; grid-row:auto; justify-content:flex-start; flex-wrap:wrap; }.special-footer p { grid-row:auto; }.special-footer>small { grid-column:1; }
}