:root{--ink:#111;--paper:#fff;--muted:#666;--line:#cfcfcf;--max:1040px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Gaegu","Comic Sans MS",cursive;font-size:19px;line-height:1.55}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}::selection{background:#111;color:#fff}.shell{width:min(calc(100% - 36px),var(--max));margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:3px solid var(--ink)}.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:26px}.brand{display:flex;align-items:center;gap:11px;font-size:30px;font-weight:700;transform:rotate(-.5deg)}.brand-mark img{width:30px;height:30px;object-fit:contain}.brand-mark{width:44px;height:44px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;box-shadow:3px 3px 0 var(--ink);background:#fff;font-size:25px}
.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.nav a{padding:7px 13px;font-weight:700;border:2px solid transparent;border-radius:225px 15px 255px 15px/15px 255px 15px 225px}.nav a:hover,.nav a.active{border-color:var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff;transform:translate(-1px,-1px)}
.hero{padding:68px 0 48px;display:block;border-bottom:2px dashed var(--line)}.eyebrow{display:inline-block;margin-bottom:15px;padding:3px 11px;border:2px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;font-size:15px;font-weight:700;transform:rotate(-1deg)}.hero h1{margin:0;font-size:clamp(52px,8vw,94px);line-height:.94;letter-spacing:-2px;font-weight:700}.hero-universe-title{margin:0 0 24px;font-size:clamp(52px,8vw,94px);line-height:.94;letter-spacing:-2px;font-weight:700;text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:3px;text-underline-offset:10px}.hero-logo-image{max-width:620px}.hero-logo-image img{display:block;width:100%;height:auto;object-fit:contain}.hero-logo-image{min-height:150px}.hero-logo-image.missing{display:grid;place-items:center;border:3px dashed #111;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;padding:28px;font-size:26px;font-weight:700}.hero-logo-image.missing::after{content:"대문 타이틀 이미지 영역";}.hero h1 span{display:inline-block;text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:3px;text-underline-offset:10px}.hero-copy{max-width:650px;margin:28px 0 0;font-size:24px;color:#333}.signature-wrap{position:relative;min-height:280px;display:grid;place-items:center}.signature-card{width:min(100%,280px);aspect-ratio:1;border:3px solid var(--ink);border-radius:15px 255px 15px 225px/225px 15px 255px 15px;box-shadow:8px 8px 0 var(--ink);display:grid;place-items:center;text-align:center;padding:24px;background:#fff;transform:rotate(2deg)}.signature-card .emoji{font-size:82px;line-height:1}.signature-card strong{display:block;font-size:24px;margin-top:12px}
.section{padding:56px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}.section-kicker{color:var(--muted);font-size:16px;font-weight:700}.section-title{margin:0;font-size:43px;line-height:1;font-weight:700;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:8px}
.tag-filter{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0}.tag-btn{padding:5px 12px;border:2px solid var(--ink);background:#fff;border-radius:15px 255px 15px 225px/225px 15px 255px 15px;font-weight:700;cursor:pointer}.tag-btn:hover,.tag-btn.active{background:#111;color:#fff;box-shadow:2px 2px 0 #777;transform:translate(-1px,-1px)}
.posts{display:grid;gap:22px}.post-card{position:relative;display:grid;grid-template-columns:150px 1fr auto;gap:26px;align-items:start;padding:25px 27px;border:2.5px solid var(--ink);border-radius:15px 255px 15px 225px/225px 15px 255px 15px;box-shadow:4px 4px 0 var(--ink);background:#fff;transition:.13s ease}.post-card:nth-child(even){border-radius:255px 15px 225px 15px/15px 225px 15px 255px;transform:rotate(-.15deg)}.post-card:hover{transform:translate(2px,2px) rotate(0);box-shadow:2px 2px 0 var(--ink)}.post-card.hidden{display:none}.post-date{font-weight:700;color:#444;white-space:nowrap}.post-category{display:inline-block;padding:2px 10px;margin-bottom:7px;border:2px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;font-size:13px;font-weight:700}.post-title{margin:0 0 6px;font-size:29px;line-height:1.15;font-weight:700}.post-excerpt{margin:0;color:#4d4d4d}.post-meta{text-align:right;color:#666;font-size:15px;white-space:nowrap}
.page-hero{padding:64px 0 24px}.page-hero h1{margin:0;font-size:62px;line-height:1;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:10px}.page-hero p{font-size:23px;color:#444;max-width:720px}
.sketch-box{padding:25px;border:2.5px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;box-shadow:4px 4px 0 var(--ink);background:#fff}.sketch-box h2,.sketch-box h3{margin-top:0;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:6px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}.archive-list{display:grid;gap:12px}.archive-row{display:flex;justify-content:space-between;border-bottom:1.5px dashed #bbb;padding:8px 0}.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}.tag-link{padding:5px 12px;border:2px solid var(--ink);border-radius:15px 255px 15px 225px/225px 15px 255px 15px;font-weight:700}
footer{margin-top:38px;padding:30px 0 44px;border-top:3px solid var(--ink)}.footer-inner{display:flex;justify-content:space-between;gap:25px;align-items:center;color:#444}
@media(max-width:820px){body{font-size:18px}.header-inner{min-height:auto;padding:16px 0;align-items:flex-start}.nav{gap:2px}.nav a{padding:5px 8px}.hero{grid-template-columns:1fr;padding-top:48px;gap:40px}.signature-wrap{min-height:230px}.signature-card{width:220px}.post-card{grid-template-columns:1fr;gap:10px}.post-meta{text-align:left}.grid-2{grid-template-columns:1fr}}
@media(max-width:560px){.shell{width:min(calc(100% - 24px),var(--max))}.header-inner{display:block}.brand{margin-bottom:13px}.nav{justify-content:flex-start}.hero h1{font-size:54px}.hero-copy{font-size:21px}.section-title{font-size:37px}.page-hero h1{font-size:48px}.post-card{padding:21px}.footer-inner{display:block}}

/* Readability pass */
.page-hero{
  max-width:860px;
  margin:0 auto;
  padding-top:72px;
}
.page-hero h1{
  font-size:clamp(42px,6vw,64px);
  letter-spacing:-1px;
}
.page-hero p{
  margin-top:18px;
  font-size:20px;
  line-height:1.65;
}
.posts{
  max-width:900px;
  margin:0 auto;
  gap:18px;
}
.post-card{
  grid-template-columns:120px minmax(0,1fr);
  gap:22px;
  padding:24px 26px;
  border-radius:18px;
  box-shadow:3px 3px 0 var(--ink);
  transform:none !important;
}
.post-card:nth-child(even){
  border-radius:18px;
  transform:none;
}
.post-card:hover{
  transform:translate(1px,1px) !important;
  box-shadow:2px 2px 0 var(--ink);
}
.post-date{
  font-size:16px;
  line-height:1.4;
  padding-top:3px;
}
.post-category{
  margin-bottom:10px;
  font-size:12px;
  letter-spacing:.04em;
}
.post-title{
  font-size:28px;
  line-height:1.3;
  margin-bottom:10px;
}
.post-excerpt{
  font-size:18px;
  line-height:1.7;
  max-width:680px;
}
.post-meta{
  grid-column:2;
  text-align:left;
  font-size:14px;
  line-height:1.5;
  margin-top:10px;
  color:#777;
}
.sketch-box{
  max-width:860px;
  margin:0 auto;
  border-radius:18px;
  box-shadow:3px 3px 0 var(--ink);
  padding:30px 34px;
}
.sketch-box h2,.sketch-box h3{
  line-height:1.3;
}
.grid-2{
  max-width:900px;
  margin:0 auto;
}
.archive-row{
  font-size:18px;
  padding:11px 0;
}
.tag-cloud{
  gap:12px;
}
.tag-link{
  border-radius:12px;
  padding:7px 13px;
  font-size:16px;
}
article.sketch-box{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.85;
  color:#222;
}
article.sketch-box h2,
article.sketch-box h3{
  font-family:"Gaegu","Comic Sans MS",cursive;
  color:#111;
  margin-top:2.2em;
  margin-bottom:.7em;
}
article.sketch-box h2{
  font-size:32px;
}
article.sketch-box p{
  margin:1.1em 0;
}
article.sketch-box pre{
  font-size:14px;
  line-height:1.7;
  border-radius:10px !important;
  padding:20px !important;
}
@media(max-width:820px){
  .post-card{
    grid-template-columns:1fr;
    gap:8px;
  }
  .post-meta{
    grid-column:1;
  }
  .sketch-box{
    padding:24px 22px;
  }
}





.hero-brand-block{
  display:block;
  width:100%;
}
.hero-logo-image{
  position:relative;
  width:100%;
  max-width:760px;
  min-height:300px;
  margin:0;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.hero-logo-image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.hero-universe-title{
  position:relative;
  z-index:2;
  margin:0;
  padding:18px 28px;
  color:#fff;
  font-size:clamp(46px,7vw,84px);
  line-height:1;
  letter-spacing:-2px;
  font-weight:700;
  text-align:center;
  text-shadow:
    3px 3px 0 #111,
    -1px -1px 0 #111,
    1px -1px 0 #111,
    -1px 1px 0 #111;
  text-decoration:underline;
  text-decoration-style:wavy;
  text-decoration-thickness:3px;
  text-underline-offset:9px;
}
.hero-logo-image.missing .hero-universe-title{
  color:#111;
  text-shadow:none;
}


/* Fix decorative underline scope */
.sketch-box h2,
.sketch-box h3{
  text-decoration:none !important;
}
.page-hero h1,
.section-title,
.hero-universe-title{
  text-decoration:underline;
  text-decoration-style:wavy;
  text-decoration-thickness:3px;
  text-underline-offset:8px;
}
.tag-link,
.tag-btn,
.post-category{
  text-decoration:none !important;
}

/* Jekyll Rouge-compatible syntax highlighting */
.highlight{
  margin:1.5rem 0;
  border:2px solid #111;
  border-radius:12px;
  overflow:hidden;
  box-shadow:3px 3px 0 #111;
  background:#111827;
}
.highlight pre{
  margin:0 !important;
  padding:20px 22px !important;
  overflow-x:auto;
  background:#111827 !important;
  color:#e5e7eb !important;
  border:0 !important;
  border-radius:0 !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace !important;
  font-size:14px !important;
  line-height:1.75 !important;
  tab-size:4;
}
.highlight code{
  font-family:inherit !important;
  color:inherit;
}
.highlight .c,
.highlight .cm,
.highlight .c1,
.highlight .cs{color:#6b7280;font-style:italic}
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt{color:#c084fc;font-weight:700}
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx{color:#86efac}
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo{color:#fca5a5}
.highlight .na,
.highlight .nc,
.highlight .nd,
.highlight .ne,
.highlight .nf,
.highlight .nl,
.highlight .nn,
.highlight .nt{color:#93c5fd}
.highlight .o,
.highlight .ow{color:#f9a8d4}
.highlight .p{color:#d1d5db}
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi{color:#fde68a}
.highlight .bp{color:#67e8f9}
.highlight .err{color:#fff;background:#dc2626}
.highlight .gd{color:#fca5a5;background:#450a0a}
.highlight .gi{color:#86efac;background:#052e16}
.highlight .gh,
.highlight .gu{color:#facc15;font-weight:700}
.highlight .lineno{
  color:#6b7280;
  user-select:none;
  padding-right:16px;
  border-right:1px solid #374151;
  margin-right:16px;
}
code.highlighter-rouge{
  padding:.15em .45em;
  border:1px solid #aaa;
  border-radius:5px;
  background:#f3f4f6;
  color:#b91c1c;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.9em;
}



/* Consolidated title underline rules */
.page-hero h1,
.section-title,
.hero-universe-title{
  position:static;
  display:inline;
  padding-bottom:0;
  text-decoration-line:underline;
  text-decoration-style:wavy;
  text-decoration-thickness:3px;
  text-underline-offset:.22em;
}

/* Give descenders such as the g in Tags more breathing room */
.page-hero h1{
  line-height:1.15;
  text-underline-offset:.30em;
}


/* Center the hero title over the image */
.hero-logo-image{
  margin-left:auto;
  margin-right:auto;
}
.hero-universe-title{
  display:block;
  width:100%;
  text-align:center;
}


/* Smaller post detail title */
.post-detail-hero h1{
  font-size:clamp(34px,5vw,52px) !important;
  line-height:1.2 !important;
  letter-spacing:-.5px !important;
  max-width:860px;
}

/* Secret post UI */
.secret-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:8px;
  padding:2px 8px;
  border:2px solid #111;
  border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;
  background:#111;
  color:#fff;
  font-size:12px;
  font-weight:700;
  vertical-align:middle;
}
.secret-card{
  background:#fafafa;
}
.secret-lock{
  width:min(100%,520px);
  margin:60px auto;
  padding:32px;
  border:2.5px solid #111;
  border-radius:18px;
  box-shadow:4px 4px 0 #111;
  background:#fff;
  text-align:center;
}
.secret-lock h1{
  margin:0 0 12px;
  font-size:38px;
}
.secret-lock p{
  margin:0 0 22px;
  color:#555;
}
.secret-form{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.secret-input{
  min-width:240px;
  padding:10px 14px;
  border:2px solid #111;
  border-radius:12px;
  font:inherit;
  outline:none;
}
.secret-input:focus{
  box-shadow:0 0 0 2px #111;
}
.secret-submit{
  padding:10px 18px;
  border:2px solid #111;
  border-radius:225px 15px 255px 15px / 15px 255px 15px 225px;
  background:#111;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.secret-error{
  min-height:24px;
  margin-top:12px;
  color:#b91c1c;
  font-weight:700;
}
.secret-content[hidden]{
  display:none;
}


/* Post labels above titles */
.post-labels{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.post-labels .post-category,
.post-labels .secret-badge{
  margin:0;
}
.post-detail-hero .post-labels{
  margin-bottom:16px;
}
.post-detail-hero .post-category{
  font-size:13px;
  padding:3px 10px;
}


/* More space between the Latest Posts title and its wavy underline */
.section-title{
  text-underline-offset:.34em !important;
  line-height:1.12;
}


/* Final mascot and grayscale pattern application */
.brand-mark{
  overflow:hidden;
  padding:2px;
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  transform:scale(1.1);
}
.hero-logo-image{
  max-width:none;
  width:100%;
  min-height:340px;
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:6px 6px 0 var(--ink);
  background:#f4f2ed;
}
.hero-logo-image img{
  object-fit:cover;
  object-position:center;
  filter:grayscale(1) contrast(.92);
}
.hero-logo-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(255,255,255,.10);
  pointer-events:none;
}
.hero-universe-title{
  z-index:2;
  color:#111;
  text-shadow:
    3px 3px 0 rgba(255,255,255,.95),
    -1px -1px 0 rgba(255,255,255,.95),
    1px -1px 0 rgba(255,255,255,.95),
    -1px 1px 0 rgba(255,255,255,.95);
}
@media(max-width:700px){
  .hero-logo-image{
    min-height:260px;
    border-radius:18px;
  }
  .hero-logo-image img{
    object-fit:cover;
    object-position:center;
  }
  .hero-universe-title{
    padding:16px;
    font-size:clamp(42px,14vw,66px);
  }
}


/* Full-width hero image without title block */
.hero,
.hero .shell,
.hero-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
.hero-logo-image{
  position:relative;
  width:100vw !important;
  max-width:none !important;
  min-height:0 !important;
  height:auto !important;
  margin-left:calc(50% - 50vw) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  overflow:hidden;
}
.hero-logo-image img{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  object-fit:cover;
  object-position:center;
  filter:grayscale(1) contrast(.92);
}
.hero-logo-image::after{
  display:none !important;
}
@media(max-width:700px){
  .hero-logo-image{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
  }
  .hero-logo-image img{
    width:100%;
    height:auto;
    min-height:180px;
    object-fit:cover;
  }
}


/* Taller full-width hero banner */
.hero-logo-image{
  height:460px !important;
}
.hero-logo-image img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover !important;
  object-position:center !important;
}
@media(max-width:700px){
  .hero-logo-image{
    height:300px !important;
  }
  .hero-logo-image img{
    height:100% !important;
    min-height:0 !important;
    object-fit:cover !important;
  }
}


/* Home pagination matches POSTS page */
.pagination{
  max-width:900px;
  margin:34px auto 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pagination a,
.pagination span{
  min-width:42px;
  height:42px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid #111;
  background:#fff;
  border-radius:225px 15px 255px 15px / 15px 255px 15px 225px;
  font-weight:700;
}
.pagination a:hover{
  transform:translate(1px,1px);
  box-shadow:1px 1px 0 #111;
}
.pagination .current{
  background:#111;
  color:#fff;
  box-shadow:2px 2px 0 #777;
}
.pagination .disabled{
  color:#aaa;
  border-color:#bbb;
  cursor:default;
}
@media(max-width:560px){
  .pagination{
    gap:6px;
    margin-top:28px;
  }
  .pagination a,
  .pagination span{
    min-width:38px;
    height:38px;
    padding:0 10px;
    font-size:14px;
  }
}



/* ===== Deployment build overrides ===== */
img{max-width:100%}
.hero{
  width:100%;
  max-width:none;
  padding:0;
  border-bottom:2px dashed var(--line);
}
.hero-banner{
  width:100%;
  height:460px;
  overflow:hidden;
  background:#f3f1ec;
}
.hero-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:grayscale(1) contrast(.92);
}
.post-labels{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.post-labels .post-category,
.post-labels .secret-badge{margin:0}
.secret-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border:2px dashed #111;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
}
.empty-state{
  max-width:900px;
  margin:0 auto;
  padding:38px 30px;
  text-align:center;
}
.pagination{
  max-width:900px;
  margin:34px auto 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pagination a,.pagination span{
  min-width:42px;
  height:42px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid #111;
  background:#fff;
  border-radius:225px 15px 255px 15px/15px 255px 15px 225px;
  font-weight:700;
}
.pagination .current{background:#111;color:#fff}
.pagination .disabled{color:#aaa;border-color:#bbb}
.tag-section{
  max-width:900px;
  margin:30px auto 0;
  scroll-margin-top:110px;
}
.tag-section + .tag-section{margin-top:24px}
.tag-post-list{display:grid;gap:8px}
.tag-post{
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:16px;
  padding:10px 0;
  border-bottom:1px dashed #bbb;
}
.archive-list{max-width:900px;margin:0 auto}
.archive-group{
  border:3px solid #111;
  border-radius:18px;
  background:#fff;
  box-shadow:5px 5px 0 #111;
  overflow:hidden;
}
.archive-group + .archive-group{margin-top:18px}
.archive-group summary{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  cursor:pointer;
  font-size:28px;
  font-weight:700;
  list-style:none;
}
.archive-group summary::-webkit-details-marker{display:none}
.archive-group summary::after{content:"+";font-size:30px}
.archive-group[open] summary::after{content:"−"}
.archive-count{margin-left:auto;font-size:15px;opacity:.6}
.archive-posts{border-top:2px dashed #111;padding:8px 18px 14px}
.archive-post{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:14px;
  padding:13px 4px;
  border-bottom:1px solid #ddd;
}
.archive-post:last-child{border-bottom:0}
.about-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:34px;
  align-items:stretch;
}
.about-portrait{
  margin:0;
  overflow:hidden;
  border:3px solid #111;
  border-radius:255px 18px 225px 18px/18px 225px 18px 255px;
  box-shadow:7px 7px 0 #111;
  min-height:560px;
}
.about-portrait img{
  width:100%;
  height:100%;
  min-height:560px;
  object-fit:cover;
  object-position:center 44%;
  filter:grayscale(1) contrast(.96);
}
.unified-about-card h2{margin-bottom:6px}
.unified-about-card .about-list{margin-top:0}
.unified-about-card .subsection-title{margin-top:34px}
.contact-list{list-style:none;padding-left:0}
.post-detail-hero .post-labels{margin-bottom:16px}
.post-navigation{
  max-width:820px;
  margin:28px auto 0;
  display:flex;
  justify-content:space-between;
  gap:16px;
}
.post-navigation a{
  padding:8px 14px;
  border:2px solid #111;
  border-radius:12px;
}
.status-page{
  min-height:calc(100vh - 160px);
  display:grid;
  place-items:center;
  padding:60px 20px;
}
.status-card{
  width:min(100%,720px);
  text-align:center;
  padding:44px 34px;
  border:3px solid #111;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  box-shadow:7px 7px 0 #111;
}
.status-code{font-size:clamp(76px,18vw,170px);line-height:.8;margin:0}
.status-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.status-action{padding:9px 16px;border:2px solid #111;border-radius:12px}
.status-action.primary{background:#111;color:#fff}
@media(max-width:900px){
  .about-layout{grid-template-columns:1fr}
  .about-portrait,.about-portrait img{min-height:500px}
}
@media(max-width:700px){
  .hero-banner{height:300px}
  .site-header{position:relative}
  .nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .nav a{white-space:nowrap}
  .tag-post{grid-template-columns:72px minmax(0,1fr)}
}
@media(max-width:560px){
  .hero-banner{height:260px}
  .about-portrait,.about-portrait img{min-height:420px}
  .archive-group summary{font-size:22px;padding:15px}
  .archive-post{grid-template-columns:52px minmax(0,1fr);gap:8px}
  .post-navigation{display:grid}
  article.sketch-box pre{font-size:13px!important}
}


/* ===== Illustrated status pages ===== */
.status-card-image{
  width:min(100%,780px);
  padding:26px 28px 34px;
}
.status-illustration{
  display:block;
  width:100%;
  max-height:620px;
  object-fit:contain;
  object-position:center;
  border:0;
  border-radius:14px;
  margin:0 auto 18px;
  filter:grayscale(1) contrast(.96);
}
.status-title{
  margin:10px 0 10px;
  font-size:clamp(34px,6vw,54px);
}
.status-copy{
  margin:0 auto;
  max-width:560px;
  font-size:19px;
  line-height:1.65;
}
@media(max-width:700px){
  .status-page{
    padding:32px 14px;
  }
  .status-card-image{
    padding:18px 16px 26px;
    border-radius:20px;
    box-shadow:5px 5px 0 #111;
  }
  .status-illustration{
    max-height:520px;
    margin-bottom:14px;
  }
  .status-copy{
    font-size:17px;
  }
}

/* ===== Code blocks ===== */
.post-content pre,
.post-content .highlight {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 2px solid #111;
  border-radius: 14px;
  background: #161616;
  box-shadow: 4px 4px 0 #111;
  -webkit-overflow-scrolling: touch;
}

.post-content pre {
  padding: 20px;
}

.post-content .highlight pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.post-content pre code,
.post-content code,
.post-content .highlight code {
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    Monaco,
    monospace !important;
}

.post-content pre code,
.post-content .highlight code {
  display: block;
  min-width: max-content;
  padding: 0;
  color: #f3f3f3;
  background: transparent;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  tab-size: 4;
}

.post-content :not(pre) > code {
  padding: 2px 6px;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #f0f0f0;
  color: #111;
  font-size: 0.9em;
  white-space: break-spaces;
}

/* Rouge syntax highlighting */
.highlight .c,
.highlight .cm,
.highlight .c1,
.highlight .cs {
  color: #8b949e;
}

.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #ff7b72;
}

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx {
  color: #a5d6ff;
}

.highlight .nf,
.highlight .fm {
  color: #d2a8ff;
}

.highlight .na,
.highlight .nb,
.highlight .nc,
.highlight .no,
.highlight .nd,
.highlight .ne,
.highlight .ni,
.highlight .nl,
.highlight .nn,
.highlight .nt,
.highlight .nv {
  color: #79c0ff;
}

.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.highlight .il {
  color: #a5d6ff;
}

.highlight .o,
.highlight .ow {
  color: #ff7b72;
}

@media (max-width: 700px) {
  .post-content pre {
    margin-left: 0;
    margin-right: 0;
    padding: 16px;
    border-radius: 10px;
  }

  .post-content pre code,
  .post-content .highlight code {
    font-size: 12.5px;
    line-height: 1.55;
  }
}