:root {

  
  --color-bg:         #ffffff;  
  --color-surface:    #f8f8f8;  
  --color-border:     #eeeeee;  
  --color-text:       #333333;  
  --color-text-muted: #959595;  
  --color-link:       #00c6be;  

  
  --color-border-strong: #dddddd;  
  --color-text-strong:   #111111;  
  --color-text-meta:     #666666;  
  --color-caption:       #909090;  
  --color-on-cover:      #ffffff;  
  --color-cover-scrim:   rgba(0, 0, 0, 0.3);        
  --color-header-bg:     rgba(255, 255, 255, 0.95); 

  

  
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  
  --font-heading: "Nanum Myeongjo", "Apple SD Gothic Neo", Batang, Georgia, "Times New Roman", serif;

  
  --text-base:     17px;       
  --text-base-ref: 14.6667px;  

  --leading-body:  2;          
  --tracking-body: 0.8px;      

  
  --text-cover-title: 45.3333px;  
  --text-h2:          28px;       
  --text-h3:          22px;       
  --text-quote:       20px;       
  --text-list-title:  20px;       
  --text-sm:          14px;       
  --text-xs:          13px;       
  --text-caption:     13.3333px;  
  --text-meta:        12px;       
  --text-search:      30px;       

  --leading-cover-title: 53.3333px; 
  --leading-h2:          1.405;     
  --leading-quote:       1.533;     
  --leading-list-title:  1.5;       
  --leading-tight:       1.5;       

  --tracking-cover-title: -0.4533px; 
  --tracking-subtitle:    -0.48px;   
  --tracking-title:       -1px;      
  --tracking-chip:        -0.5px;    

  --weight-body:       400;  
  --weight-strong:     700;  
  
  --weight-list-title: 600;  
  --weight-heading:    400;  

  
  --measure: 700px;  

  
  --page-max:    700px;  
  --page-gutter: 20px;   

  --header-height: 60px; 

  
  --post-nav-height:    59px;   
  --post-nav-pad-x:     30px;   
  --post-nav-gap:       13px;   
  --post-nav-title-max: 350px;  
  --text-post-nav-title: 15px;  

  
  --space-body-top:    40px;  
  --space-item-pad:    29px;  
  --space-row-pad:     30px;  
  --space-tags:        32px;  
  --space-chip-pad:    10px;  
  --space-nav-pad:     30px;  
  --space-caption-top:  7px;  
  --space-figure-top:  13px;  

  
  --space-para:    1.15em;  
  --space-block:   40px;    
  --space-section: 64px;    

  
  --thumb-size:    120px;  
  --thumb-gap:      40px;  
  --thumb-size-sm:  60px;  

  
  --cover-height: 100vh;    
  --cover-height: 100svh;   

  --cover-overlay-bottom: min(96px, 12svh);
                            

  
  --border-hairline: 1px;   
  --radius-chip:     28px;  
  --radius-book:     4px 6px 6px 4px;  
  --shadow-book:     0 10px 20px rgba(0, 0, 0, 0.1); 
  --tab-active-line: 2px;   

  
  --bp-tablet:  740px;   
  --bp-desktop: 1024px;  
}





*, *::before, *::after { box-sizing: border-box; }

:root {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  
  -webkit-font-smoothing: antialiased;

  
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  
  font-weight: var(--weight-heading);
  color: var(--color-text);
  letter-spacing: var(--tracking-title);
  margin: 0;
}

p, ul, ol, figure, blockquote, table, pre { margin: 0; }

a {
  color: var(--color-link);  
  text-decoration: none;     
}

a:hover { text-decoration: underline; }


a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: var(--border-hairline) solid var(--color-border);
}

img { max-width: 100%; height: auto; display: block; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

input { font: inherit; color: inherit; }

table { border-collapse: collapse; }


.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}



.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
  padding-block-end: var(--space-section);
}


.container {
  width: 100%;
  max-width: calc(var(--page-max) + var(--page-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}


.measure { max-width: var(--measure); }


.site-main > section,
.site-main > .container > header,
.site-main > article > .container {
  margin-block-start: var(--space-section);
}

.site-main > section:first-child,
.site-main > .container > header:first-child { margin-block-start: 0; }


.site-main > section:first-of-type { padding-block-start: var(--space-section); }

.site-main h1 {
  font-size: var(--text-h2);          
  line-height: 39px;                  
  color: var(--color-text-strong);    
  letter-spacing: normal;             
}



.site-main > .container > header { margin-block-end: var(--space-block); }

.site-main :not(.post-header) > h1 + .measure {
  margin-block-start: 5px;            
  font-size: var(--text-xs);          
  line-height: 20px;                  
  letter-spacing: normal;
  color: var(--color-text-muted);     
}


.site-main section > h2,
.related-posts > h2 {
  font-size: var(--text-meta);        
  letter-spacing: normal;
  color: var(--color-text-muted);
  padding-block-end: 12px;
  margin-block-end: 4px;
  border-block-end: var(--border-hairline) solid var(--color-border);
}




.site-main:has(.post-cover) {
  
  padding-block-start: calc(var(--cover-height) - var(--header-height));
  padding-block-end: 0;                      
}

.post-cover {
  height: var(--cover-height);
  margin: 0;
  overflow: hidden;
  background: var(--color-surface);
}

.post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;          
  object-position: 50% 50%;   
}

.post-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-cover-scrim);  
}




.site-main:has(.post-cover) > article > .post-cover {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 0;
}


.site-main:has(.post-cover) > article > .post-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1;
  height: var(--cover-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   
  padding-block: var(--header-height) var(--cover-overlay-bottom);
                               
  margin-block: 0;
  color: var(--color-on-cover);
  overflow: hidden;            
}



.site-main:has(.post-cover) > article > .post-body,
.site-main:has(.post-cover) > article > footer,
.site-main:has(.post-cover) > .related-posts {
  position: relative;
  z-index: 2;
  max-width: none;                 
  margin-block: 0;                 
  background: var(--color-bg);
  
  padding-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
}


.site-main:has(.post-cover) > .bd-footer--minimal {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
}


.site-main:has(.post-cover) > article > .post-body {
  padding-block-start: var(--space-body-top);
  
  padding-inline: max(var(--page-gutter), calc((100% - var(--b-layout-column-width)) / 2));
}
.site-main:has(.post-cover) > article > footer {
  display: flow-root;   
}
.site-main:has(.post-cover) > .related-posts {
  padding-block: var(--space-section);   
}



.site:has(.post-cover) > .bd-footer {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  padding-block-end: calc(var(--space-row-pad) + var(--post-nav-height));
}


.post-header { padding-block: var(--space-section) 0; }


.post-body { padding-block-start: var(--space-body-top); } 

.page-header { padding-block-start: var(--space-section); }

.page-header h1 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  color: var(--color-text-strong);
}


.empty-state {
  padding-block: calc(var(--space-section) * 1.5);
  text-align: center;
}

.empty-state h1 {
  font-family: var(--font-heading);   
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}

.empty-state .measure { margin-inline: auto; }

.empty-state p { margin-block-start: 12px; color: var(--color-text-muted); }






.bd-topbar {
  
  --bd-topbar-h:            64px;   
  --bd-topbar-max:        1280px;   
  --bd-topbar-gutter:       20px;
  --bd-topbar-gap:           8px;
  --bd-topbar-z:              50;
  --bd-topbar-bg:           var(--color-bg, #fff);
  --bd-topbar-border:       var(--color-border, transparent);
  --bd-topbar-border-width:  0px;
  --bd-topbar-brand-font:   var(--font-heading, inherit);
  --bd-topbar-brand-size:   18px;
  --bd-topbar-brand-weight:  600;
  --bd-topbar-brand-lh:      1.2;
  --bd-topbar-brand-tracking: normal;
  --bd-topbar-brand-color:  var(--color-text, inherit);
  --bd-topbar-nav-font:     var(--font-body, inherit);
  --bd-topbar-nav-size:     14px;
  --bd-topbar-nav-gap:      24px;
  --bd-topbar-nav-color:    var(--color-text-muted, inherit);
  --bd-topbar-nav-hover:    var(--color-text, inherit);
  --bd-topbar-btn:          44px;   
  --bd-topbar-btn-radius:    6px;
  --bd-topbar-btn-hover-bg: var(--color-surface, transparent);
  --bd-topbar-menu-icon-size:   24px;   
  --bd-topbar-menu-icon-stroke:    2;

  position: sticky;
  top: 0;
  z-index: var(--bd-topbar-z);
  display: flex;
  align-items: center;
  min-height: var(--bd-topbar-h);
  background: var(--bd-topbar-bg);
  border-block-end: var(--bd-topbar-border-width) solid var(--bd-topbar-border);
}

.bd-topbar__inner {
  width: 100%;
  max-width: var(--bd-topbar-max);
  margin-inline: auto;
  padding-inline: var(--bd-topbar-gutter);
  display: flex;
  align-items: center;
  gap: var(--bd-topbar-gap);
  min-height: var(--bd-topbar-btn);
}


.bd-topbar__brand {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--bd-topbar-brand-font);
  font-size: var(--bd-topbar-brand-size);
  font-weight: var(--bd-topbar-brand-weight);
  line-height: var(--bd-topbar-brand-lh);
  letter-spacing: var(--bd-topbar-brand-tracking);
  color: var(--bd-topbar-brand-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-topbar__brand:hover { text-decoration: none; }


.bd-topbar__end {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}


.bd-topbar__nav { display: none; }
.bd-topbar__nav ul {
  display: flex;
  gap: var(--bd-topbar-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-topbar__nav a {
  font-family: var(--bd-topbar-nav-font);
  font-size: var(--bd-topbar-nav-size);
  color: var(--bd-topbar-nav-color);
  text-decoration: none;
  white-space: nowrap;
}
.bd-topbar__nav a:hover { color: var(--bd-topbar-nav-hover); }


.bd-topbar__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bd-topbar-btn);
  min-height: var(--bd-topbar-btn);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--bd-topbar-btn-radius);
  color: var(--bd-topbar-brand-color);
}
.bd-topbar__menu:hover { background: var(--bd-topbar-btn-hover-bg); }
.bd-topbar__menu-icon {
  --bd-icon-size:   var(--bd-topbar-menu-icon-size);
  --bd-icon-stroke: var(--bd-topbar-menu-icon-stroke);
}

.bd-topbar__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


@media (min-width: 1024px) {
  .bd-topbar__nav  { display: flex; }
  .bd-topbar__menu { display: none; }
}



.site .bd-topbar {
  --bd-topbar-h:            var(--header-height);       

  
  --bd-topbar-max:          none;                       
  --bd-topbar-gutter:       var(--page-gutter);         
  --bd-topbar-gap:          16px;                       
  --bd-topbar-z:            100;                        
  --bd-topbar-bg:           var(--color-header-bg);     
  --bd-topbar-border:       var(--color-border-strong); 
  --bd-topbar-border-width: var(--border-hairline);     

  
  --bd-topbar-brand-font:     var(--font-heading);
  --bd-topbar-brand-size:     var(--text-list-title);   
  --bd-topbar-brand-lh:       1;
  --bd-topbar-brand-tracking: var(--tracking-title);    
  --bd-topbar-brand-color:    var(--color-text-strong); 

  
  --bd-topbar-nav-size:  var(--text-sm);          
  --bd-topbar-nav-gap:   20px;                    
  --bd-topbar-nav-color: var(--color-text-muted); 
  --bd-topbar-nav-hover: var(--color-text);       

  
  --bd-topbar-menu-icon-size: 20px;
  --bd-topbar-btn-hover-bg:   transparent;   

  
  -webkit-backdrop-filter: saturate(180%) blur(6px);
          backdrop-filter: saturate(180%) blur(6px);
}


.site .bd-topbar__nav a { letter-spacing: var(--tracking-title); }


.site .bd-topbar__menu { margin-inline-end: -12px; }


.is-over-hero .site .bd-topbar {
  --bd-topbar-bg:          transparent;           
  --bd-topbar-border:      transparent;           
  --bd-topbar-brand-color: var(--color-on-cover); 
  --bd-topbar-nav-color:   var(--color-on-cover);
  --bd-topbar-nav-hover:   var(--color-on-cover);
  -webkit-backdrop-filter: none;   
          backdrop-filter: none;
}

.is-over-hero .site .bd-topbar__nav a:hover { opacity: 0.75; }



.category-nav:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  
  margin-block-start: var(--space-block);
}

.category-nav a {
  padding-block: 19px 10px;             
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-title);
  color: var(--color-text-muted);       
  border-block-end: var(--tab-active-line) solid transparent;
  
}

.category-nav a:hover { color: var(--color-text); text-decoration: none; }

.category-nav a[aria-current],
.category-nav a.is-active {
  color: var(--color-link);                                    
  border-block-end-color: var(--color-link);                   
}


.post-list {
  list-style: none;
  padding: 0;
}

.post-list-item {
  border-block-end: var(--border-hairline) solid var(--color-border); 
}


.post-list-item > a {
  position: relative;
  display: block;
  padding-block: var(--space-row-pad) var(--space-item-pad); 
  padding-inline-end: calc(var(--thumb-size) + var(--thumb-gap)); 
  color: inherit;
}
.post-list-item > a:hover { text-decoration: none; }

.post-list-item__thumb {
  position: absolute;
  inset-block-start: var(--space-row-pad);
  inset-inline-end: 0;
  width: var(--thumb-size);    
  height: var(--thumb-size);   
  object-fit: cover;
  background: var(--color-surface);
}


.post-list-item > a:has(.post-list-item__thumb) {
  min-block-size: calc(
    var(--space-row-pad) + var(--thumb-size) + var(--space-item-pad)
  );
}

.post-list-item__title {
  font-size: var(--text-list-title);      
  font-weight: var(--weight-list-title);  
  line-height: var(--leading-list-title); 
  letter-spacing: var(--tracking-title);  
  color: var(--color-text);               
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;                  
  overflow: hidden;
}

.post-list-item > a:hover .post-list-item__title { color: var(--color-text-strong); }

.post-list-item__excerpt {
  margin-block-start: 5px;              
  font-size: var(--text-sm);            
  line-height: var(--leading-tight);    
  letter-spacing: var(--tracking-title);
  color: var(--color-text-muted);       
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;                
  overflow: hidden;
}

.post-list-item .post-meta {
  padding-block-start: 19px;            
}


.post-meta {
  font-size: var(--text-meta);          
  line-height: 16px;                    
  letter-spacing: normal;
  color: var(--color-text-muted);       
}

.post-meta a { color: inherit; }
.post-meta a:hover { color: var(--color-text); }

.site-main > .container > header > .post-meta:first-child { padding-block-end: 12px; }


.featured-post { margin-block-start: var(--space-block); }

.featured-post > a { color: inherit; display: block; }
.featured-post > a:hover { text-decoration: none; }

.featured-post img {
  width: 100%;
  aspect-ratio: 16 / 9;   
  object-fit: cover;
  background: var(--color-surface);
}

.featured-post .post-meta:first-of-type { padding-block-start: 20px; }

.featured-post h3 {
  margin-block-start: 8px;
  font-family: var(--font-heading);   
  font-size: var(--text-h2);          
  
  font-weight: var(--weight-strong);  
  line-height: var(--leading-h2);     
  letter-spacing: var(--tracking-cover-title);
}

.featured-post > a > p:not(.post-meta) {
  margin-block-start: 12px;
  max-width: var(--measure);
  font-size: var(--text-sm);          
  line-height: var(--leading-tight);
  color: var(--color-text-muted);     
}

.featured-post .post-meta:last-of-type { padding-block-start: 16px; }


.related-posts { margin-block-start: var(--space-section); }


.post-nav {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 90;                    
  display: none;                  
  align-items: center;
  height: var(--post-nav-height); 
  margin: 0;
  background: var(--color-bg);    
  border-block-start: var(--border-hairline) solid var(--color-border); 
}

.is-scrolled .post-nav { display: flex; }

.post-nav a {
  display: flex;
  align-items: center;   
  gap: var(--post-nav-gap);       
  min-width: 0;                   
  height: 100%;
  padding-inline: var(--post-nav-pad-x);  
  color: inherit;
  overflow: hidden;
}
.post-nav a:hover { text-decoration: none; }
.post-nav a[rel="next"] { margin-inline-start: auto; }  


.post-nav__label,
.post-nav__title { line-height: calc(var(--post-nav-height) - var(--border-hairline)); }


.post-nav__label {
  flex: none;
  font-size: var(--text-meta);        
  color: var(--color-text-muted);     
  letter-spacing: normal;
}

.post-nav__title {
  min-width: 0;
  max-width: var(--post-nav-title-max);   
  font-size: var(--text-post-nav-title);  
  font-weight: var(--weight-body);        
  color: var(--color-text);               
  letter-spacing: var(--tracking-title);
  white-space: nowrap;                    
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-nav a:hover .post-nav__title { color: var(--color-text-strong); }



.post-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 var(--space-row-pad);
  margin-block: var(--space-tags);
  max-width: var(--measure);
}
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-tags a,
.post-tags__all a {
  display: inline-block;
  padding-inline: var(--space-chip-pad);     
  font-size: var(--text-meta);               
  line-height: 26px;                         
  letter-spacing: var(--tracking-chip);      
  color: var(--color-text-muted);            
  border: var(--border-hairline) solid var(--color-border-strong); 
  border-radius: var(--radius-chip);         
}
.post-tags a:hover,
.post-tags__all a:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  text-decoration: none;
}
.post-tags__all a,
.post-tags__all a:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }


.category-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                                 
  margin-block-start: var(--space-block);   
}

.category-badges a {
  display: inline-block;
  padding-inline: var(--space-chip-pad);    
  font-size: var(--text-meta);              
  line-height: 26px;                        
  letter-spacing: var(--tracking-chip);     
  color: var(--color-text-muted);           
  border: var(--border-hairline) solid var(--color-border-strong); 
  border-radius: var(--radius-chip);        
}
.category-badges a:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  text-decoration: none;
}


.list-more {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-section);
}

.list-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-chip-pad);
  min-height: 44px;                      
  padding-inline: var(--space-section);  
  font-size: var(--text-sm);             
  letter-spacing: var(--tracking-title); 
  color: var(--color-text-muted);        
  border: var(--border-hairline) solid var(--color-border); 
  border-radius: var(--radius-chip);     
  --bd-icon-size: 14px;                  
}
.list-more__btn:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  text-decoration: none;
}


.site-main > .container > header.search-head { margin-block-start: var(--space-section); }
.search-head h1 {
  font-size: var(--text-h3);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-title);
}
.search-head .post-meta { padding-block-start: 8px; }





:is(.bd-icon,.icon) {
  inline-size: var(--bd-icon-size, 16px);
  block-size:  var(--bd-icon-size, 16px);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--bd-icon-stroke, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}



.tags-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                                  
  margin-block: var(--space-block) var(--space-section);
}

.tags-index a {
  display: inline-block;
  padding-inline: var(--space-chip-pad);     
  font-size: var(--text-meta);               
  line-height: 26px;                         
  letter-spacing: var(--tracking-chip);      
  color: var(--color-text-muted);            
  border: var(--border-hairline) solid var(--color-border-strong); 
  border-radius: var(--radius-chip);         
}
.tags-index a:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  text-decoration: none;
}




.bd-footer {
  
  --bd-footer-max:         1280px;
  --bd-footer-gutter:        20px;
  --bd-footer-pad-top:       32px;
  --bd-footer-pad-bottom:    48px;
  --bd-footer-stack-gap:     16px;   
  --bd-footer-link-gap:      16px;   
  --bd-footer-feed-gap:      24px;   
  --bd-footer-feed-offset:   16px;   
  --bd-footer-bg:       transparent;
  --bd-footer-border:        var(--color-border, transparent);
  --bd-footer-border-width:   0px;
  --bd-footer-color:         var(--color-text-muted, inherit);
  --bd-footer-link-color:    inherit;
  --bd-footer-link-hover:    var(--color-text, inherit);
  --bd-footer-link-decoration-hover: underline;
  --bd-footer-font:          var(--font-body, inherit);
  --bd-footer-size:          14px;
  --bd-footer-lh:            20px;
  --bd-footer-tracking:      normal;
  --bd-footer-align:         center;
  --bd-footer-icon-size:     16px;   
  --bd-footer-icon-stroke:      2;
  --bd-footer-icon-gap:       8px;

  background: var(--bd-footer-bg);
  border-block-start: var(--bd-footer-border-width) solid var(--bd-footer-border);
  padding-block: var(--bd-footer-pad-top) var(--bd-footer-pad-bottom);
  color: var(--bd-footer-color);
  font-family: var(--bd-footer-font);
  font-size: var(--bd-footer-size);
  line-height: var(--bd-footer-lh);
}

.bd-footer__inner {
  width: 100%;
  max-width: var(--bd-footer-max);
  margin-inline: auto;
  padding-inline: var(--bd-footer-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bd-footer-stack-gap);
  text-align: var(--bd-footer-align);
}

.bd-footer__copyright { margin: 0; }

.bd-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bd-footer-link-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-footer__feeds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bd-footer-feed-gap);
  padding-block-start: var(--bd-footer-feed-offset);
}

.bd-footer__feeds a {
  display: inline-flex;
  align-items: center;
  gap: var(--bd-footer-icon-gap);
}
.bd-footer__feeds :is(.bd-icon,.icon) {
  --bd-icon-size:   var(--bd-footer-icon-size);
  --bd-icon-stroke: var(--bd-footer-icon-stroke);
}

.bd-footer a {
  color: var(--bd-footer-link-color);
  letter-spacing: var(--bd-footer-tracking);
  text-decoration: none;
}
.bd-footer a:hover {
  color: var(--bd-footer-link-hover);
  text-decoration: var(--bd-footer-link-decoration-hover);
}


.bd-footer__inner:empty { min-height: 0; }



.site .bd-footer {
  --bd-footer-border-width: var(--border-hairline);   
  --bd-footer-border:       var(--color-border);
  --bd-footer-pad-top:      var(--space-row-pad);
  --bd-footer-pad-bottom:   var(--space-row-pad);
  --bd-footer-size:         var(--text-meta);
  --bd-footer-lh:           20px;
  --bd-footer-color:        var(--color-text-muted);
  --bd-footer-link-hover:   var(--color-text);
  
  --bd-footer-max:          calc(var(--page-max) + var(--page-gutter) * 2);
  --bd-footer-gutter:       var(--page-gutter);
}


.site .bd-footer--minimal {
  --bd-footer-border-width: 0;                    
  --bd-footer-pad-top:      var(--space-item-pad); 
  --bd-footer-pad-bottom:   var(--space-item-pad);
}


.site .bd-footer--minimal .bd-footer__nav li + li::before {
  content: "\00B7" / "";
  margin-inline-end: var(--bd-footer-link-gap, 8px);
  color: var(--color-border);
}


.site:has(.bd-footer--minimal) .site-main {
  display: flex;
  flex-direction: column;
}


.site:has(.bd-footer--minimal) .bd-footer--minimal { margin-block-start: auto; }


.site .bd-footer--minimal { margin-block-end: var(--post-nav-height); }


.nav-drawer[hidden] { display: none; }

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-cover-scrim);  
}

.nav-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(84vw, 320px);
  background: var(--color-bg);
  border-inline-end: var(--border-hairline) solid var(--color-border);
  padding: 20px var(--page-gutter);
  overflow-y: auto;
}

.nav-drawer__panel > button {
  min-width: 44px;
  min-height: 44px;
  margin-inline-start: -12px;
  font-size: 18px;
  color: var(--color-text-muted);
}

.nav-drawer__panel ul {
  list-style: none;
  padding: 0;
  margin-block-start: 12px;
}

.nav-drawer__panel li { border-block-end: var(--border-hairline) solid var(--color-border); }

.nav-drawer__panel a {
  display: block;
  padding-block: 16px;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-title);
  color: var(--color-text);
}
.nav-drawer__panel a:hover { color: var(--color-link); text-decoration: none; }



.category-selector { position: relative; margin-block-start: var(--space-block); }

.category-selector > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: var(--text-list-title);      
  font-weight: var(--weight-list-title);  
  letter-spacing: var(--tracking-title);
  color: var(--color-text);
}

.category-selector ul[hidden] { display: none; }

.category-selector ul {
  position: absolute;
  z-index: 50;
  inset-inline-start: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--color-bg);
  border: var(--border-hairline) solid var(--color-border-strong);
  box-shadow: var(--shadow-book);   
}

.category-selector li a {
  display: block;
  padding: 10px 16px;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.category-selector li a:hover { background: var(--color-surface); text-decoration: none; }


.post-header h1 {
  font-family: var(--font-heading);            
  font-size: var(--text-cover-title);          
  font-weight: var(--weight-heading);          
  line-height: var(--leading-cover-title);     
  letter-spacing: var(--tracking-cover-title); 
  max-width: var(--measure);
}

.post-header .measure {
  margin-block-start: 6px;                 
  font-size: 16px;                         
  line-height: 24px;                       
  letter-spacing: var(--tracking-subtitle);
}

.post-header .post-meta { letter-spacing: normal; }
.post-header .post-meta:first-child { padding-block-end: 12px; }  
.post-header .post-meta:last-child  { padding-block-start: 14px; } 


.site-main > article:has(> .post-cover) > .post-header h1 { color: var(--color-on-cover); }

.site-main > article:has(> .post-cover) > .post-header .measure {
  color: var(--color-on-cover);
  opacity: 0.8;                             
}


.site-main > article:has(> .post-cover) > .post-header .post-meta,
.site-main > article:has(> .post-cover) > .post-header .post-meta a {
  color: rgba(255, 255, 255, 0.75);
}
.site-main > article:has(> .post-cover) > .post-header .post-meta a:hover {
  color: var(--color-on-cover);
}








.post-body {
  max-width: calc(var(--b-layout-column-width) + var(--page-gutter) * 2);
}  


.post-body .heading-anchor {
  float: inline-start;
  margin-inline-start: -1.1em;
  width: 1.1em;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity .15s ease;
}
.post-body h2:hover .heading-anchor,
.post-body h3:hover .heading-anchor,
.post-body .heading-anchor:focus-visible { opacity: 1; }
.post-body .heading-anchor:hover { text-decoration: none; }

.post-body .checkmark {
  flex: none;
  color: var(--color-link);           
  font-size: var(--text-sm);
}


.post-body a {
  color: var(--color-link);
  text-decoration: none;
  border-block-end: var(--border-hairline) solid transparent;  
}
.post-body a:hover { border-block-end-color: currentColor; text-decoration: none; }

.post-body strong, .post-body b { font-weight: var(--weight-strong); }
.post-body em { font-style: italic; }


.post-body blockquote {
  margin-block: var(--space-block);
  padding-block-start: 25px;              
  border: 0;                              
  font-size: var(--text-quote);           
  line-height: var(--leading-quote);      
  letter-spacing: var(--tracking-body);   
  text-align: center;                     
  color: var(--color-text);               
}


.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  background: var(--color-surface);
  border-radius: 3px;
}
.post-body pre {
  margin-block: var(--space-block);
  padding: var(--space-row-pad);
  background: var(--color-surface);
  overflow-x: auto;
  line-height: 1.7;
}
.post-body pre code { padding: 0; background: none; font-size: var(--text-sm); }


.post-body hr {
  margin-block: var(--space-block);
  border-block-start: var(--border-hairline) solid var(--color-border);
}













.category-nav[data-slot="categories.all"]:not(:empty) { display: none; }
.category-selector                                     { display: block; }


:root {
  --text-cover-title:    30px;
  --leading-cover-title: 1.28;
  --text-h2:             24px;
  --text-h3:             19px;
  --text-quote:          18px;
  --text-list-title:     17px;
  --space-section:       40px;
  --space-block:         28px;
}


.post-list-item > a {
  padding-block: 22px;
  padding-inline-end: calc(var(--thumb-size-sm) + 20px);
}
.post-list-item__thumb {
  inset-block-start: 22px;
  width: var(--thumb-size-sm);   
  height: var(--thumb-size-sm);
}
.post-list-item .post-meta { padding-block-start: 12px; }


.post-nav a {
  flex: 0 1 50%;
  padding-inline: var(--page-gutter);   
}
.post-nav a[rel="next"] { justify-content: flex-end; }
.post-nav__title { max-width: none; }   




.category-selector > button { min-block-size: 44px; min-inline-size: 44px; }


@media (min-width: 740px) {   

  :root {
    --text-cover-title:    45.3333px;  
    --leading-cover-title: 53.3333px;  
    --text-h2:             28px;       
    --text-h3:             22px;       
    --text-quote:          20px;       
    --text-list-title:     20px;       
    --space-section:       64px;       
    --space-block:         40px;       
  }

  
  .site .bd-topbar__nav     { display: flex; }
  .site .bd-topbar__menu    { display: none; }

  
  .site .bd-topbar         { --bd-topbar-gutter: 30px; }

  
  .site .bd-footer--minimal .bd-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site .bd-footer--minimal .bd-footer__copyright::before {
    content: "\00B7" / "";
    margin-inline-end: var(--bd-footer-link-gap, 8px);
    color: var(--color-border);
  }
  
  .category-nav[data-slot="categories.all"]:not(:empty) { display: flex; }
  .category-selector                                     { display: none; }

  
  .post-list-item > a {
    padding-block: var(--space-row-pad) var(--space-item-pad);      
    padding-inline-end: calc(var(--thumb-size) + var(--thumb-gap)); 
  }
  .post-list-item__thumb {
    inset-block-start: var(--space-row-pad);
    width: var(--thumb-size);    
    height: var(--thumb-size);   
  }
  .post-list-item .post-meta { padding-block-start: 19px; } 

  
  .post-nav a {
    flex: 0 0 auto;
    padding-inline: var(--post-nav-pad-x);   
  }
  .post-nav__title { max-width: var(--post-nav-title-max); }  

}


@media (min-width: 1024px) {   
  .site-main { padding-block-end: calc(var(--space-section) * 1.5); }
}

.site .post-ad{margin:40px auto;max-width:740px;padding:0 20px}
.site .post-ad:empty{display:none}
.site:has(.post-cover) > .bd-footer--minimal{padding-block-end:var(--bd-footer-pad-bottom)}