*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0}
img{max-width:100%;height:auto;display:block}a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1em;height:1em;vertical-align:-.12em;fill:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}

.sf{--board:#6f6559;--chalk:#f4f1ea;--tape:#efe3b8;--char:#1c1a17;--cob:#2449c2;position:relative;background:var(--board);color:var(--chalk);font:16px/1.5 'Anybody',sans-serif;font-variation-settings:'wdth' 100;min-height:100vh}
.sf ::selection{background:var(--tape);color:var(--char)}
.sf canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sf .in{position:relative}
.sf .hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 20px;padding:20px max(16px,4%) 8px}
.sf .lock{display:inline-flex;align-items:center;gap:10px;color:var(--chalk);text-decoration:none;margin-bottom:14px;font:700 15px/1.15 'Anybody',sans-serif;font-variation-settings:'wdth' 90}
.sf .lock small{display:block;font-weight:400;font-size:12px;opacity:.9}
.sf .lock svg{flex:none;width:46px;height:46px;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.sf .hd h1,.sf .hd .t{display:block;margin:0;font:900 clamp(38px,10.5vw,98px)/.82 'Anybody',sans-serif;font-variation-settings:'wdth' 150;letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.sf .hd nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-weight:600;font-size:15px;font-variation-settings:'wdth' 75}
.sf .hd nav a{color:var(--chalk);text-underline-offset:3px}
.sf .hd nav a[aria-current]{text-decoration-color:var(--tape);text-decoration-thickness:3px}
.sf .sub{padding:0 max(16px,4%) 18px;font-size:16px;font-variation-settings:'wdth' 80;max-width:70ch}
.sf .floor{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 16px;padding:6px max(16px,4%) 34px}
.sf .work{position:relative;display:block;color:var(--char);text-decoration:none;box-shadow:0 14px 22px -10px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sf .work .pic{display:block;height:100%;min-height:150px}
.sf .w1{grid-column:span 3;aspect-ratio:4/3;transform:rotate(-1.5deg)}.sf .w1 .pic{background:linear-gradient(160deg,#b45a2e,#e2a650 55%,#3d5a7a)}
.sf .w2{grid-column:span 2;aspect-ratio:3/4;transform:rotate(2deg);margin-top:30px}.sf .w2 .pic{background:linear-gradient(200deg,#2c3e58,#8aa1b8 60%,#e8e2d2)}
.sf .w3{grid-column:span 1;aspect-ratio:1;transform:rotate(-3deg);align-self:end}.sf .w3 .pic{background:repeating-linear-gradient(45deg,#7b1f2a 0 10px,#c9a24a 10px 20px)}
.sf .w4{grid-column:span 2;aspect-ratio:1;transform:rotate(1deg)}.sf .w4 .pic{background:radial-gradient(circle at 40% 40%,#8c8c84,#3a3936)}
.sf .w5{grid-column:span 4;aspect-ratio:16/7;transform:rotate(-.6deg)}.sf .w5 .pic{background:linear-gradient(90deg,#d9cbb0,#a6b48c 40%,#5b6f4b)}
.sf .w6{grid-column:span 2;aspect-ratio:4/5;transform:rotate(-2deg)}.sf .w6 .pic{background:linear-gradient(180deg,#1d2a4d,#5b6f9a 50%,#e6d3a0)}
.sf .w7{grid-column:span 2;aspect-ratio:1;transform:rotate(2.5deg);margin-top:20px}.sf .w7 .pic{background:conic-gradient(from 30deg,#a8322a,#efe3b8,#2449c2,#a8322a)}
.sf .w8{grid-column:span 2;aspect-ratio:3/2;transform:rotate(-1deg)}.sf .w8 .pic{background:linear-gradient(135deg,#e9e6df,#9d968a 60%,#24211d)}
@media (max-width:640px){.sf .floor{grid-template-columns:repeat(2,minmax(0,1fr))}.sf .w1,.sf .w5{grid-column:span 2}.sf .w2,.sf .w3,.sf .w4,.sf .w6,.sf .w7,.sf .w8{grid-column:span 1;margin-top:0}}
.sf .lbl{position:absolute;left:10px;bottom:-14px;background:var(--tape);color:var(--char);padding:2px 10px 4px;transform:rotate(-2deg);box-shadow:0 2px 3px rgba(0,0,0,.3);max-width:calc(100% - 20px)}
.sf .lbl b{display:block;font:400 22px/1 'Nanum Pen Script',cursive}
.sf .lbl span{font:400 17px/1 'Nanum Pen Script',cursive;color:#4a443d}
.sf .work:hover,.sf .work:focus-visible{transform:rotate(0) translateY(-6px) scale(1.02)}
@media (prefers-reduced-motion:reduce){.sf .work{transition:none}}
.sf .info{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;padding:18px max(16px,4%) 26px;background:rgba(28,26,23,.86);font-size:15px;font-variation-settings:'wdth' 85}
.sf .info b{display:block;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tape)}
.sf .info a{color:var(--chalk)}
.sf .sheet{position:relative;margin:6px max(16px,4%) 34px;background:var(--chalk);color:var(--char);padding:26px clamp(18px,4vw,40px) 30px;max-width:900px;box-shadow:0 18px 30px -12px rgba(0,0,0,.55);transform:rotate(-.4deg)}
.sf .sheet h2{font:800 26px/1.1 'Anybody',sans-serif;font-variation-settings:'wdth' 120;text-transform:uppercase;margin:24px 0 8px}
.sf .sheet h2:first-child{margin-top:0}
.sf .sheet p{margin:0 0 12px;max-width:66ch}
.sf .sheet ul{margin:0 0 12px;padding-left:20px}
.sf .sheet .hand{font:400 26px/1.2 'Nanum Pen Script',cursive;color:#3b3530}
.sf .sheet .big{aspect-ratio:4/3;max-width:520px;box-shadow:0 10px 18px -8px rgba(0,0,0,.4);margin:0 0 18px}
.sf .sheet dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;margin:0 0 14px}
.sf .sheet dt{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#6a6258}
.sf .sheet dd{margin:0}
.sf .sheet a{color:var(--cob)}
.sf .tape{position:absolute;top:-12px;left:40px;width:110px;height:26px;background:rgba(239,227,184,.85);transform:rotate(-4deg)}
.sf footer{position:relative;background:rgba(28,26,23,.92);padding:20px max(16px,4%);font-size:14px;display:grid;gap:4px;font-variation-settings:'wdth' 85}
.sf footer a{color:var(--chalk)}