@font-face{font-family:Libre Franklin;src:url('/assets/fonts/LibreFranklin-Regular.13836d60aa3e.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Libre Franklin;src:url('/assets/fonts/LibreFranklin-SemiBold.22ca09c38c96.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Libre Franklin;src:url('/assets/fonts/LibreFranklin-ExtraBold.09e31fb705e6.woff2') format('woff2');font-weight:800;font-display:swap}
:root{color-scheme:dark;--background:#222;--text:#eee;--muted:#8c8c8c;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px;-webkit-text-size-adjust:100%}body{margin:0;background:var(--background);color:var(--text);font:400 16px/1.5 'Libre Franklin',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer}a,button{touch-action:manipulation}button{border:0;background:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:5px}a,button{transition:color .2s}a:hover,button:hover,a:focus-visible,button:focus-visible{color:#fff}img{max-width:100%;height:auto;display:block}h1,h2,p,figure{margin:0}.skip{position:fixed;left:12px;top:-100px;background:#222;padding:12px;z-index:10}.skip:focus{top:12px}
.site-header{position:relative;overflow:hidden;min-height:87px;display:flex;align-items:center;margin-bottom:27px}.banner{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.2;transition:filter .3s,transform .3s}.header-inner{position:relative;width:min(1120px,calc(100% - 80px));margin:auto;padding-left:170px}.brand{font-size:58px;line-height:1;letter-spacing:-1px;font-weight:800;color:#7a7a7a;display:inline-block}.menu-toggle{display:none}
.post-layout{display:grid;grid-template-columns:90px minmax(0,650px) minmax(160px,1fr);column-gap:80px;row-gap:20px;max-width:1120px;margin:0 auto;padding-bottom:70px}.post-heading{grid-column:2;grid-row:1}.post-heading h1{font-size:35px;line-height:1.1;font-weight:600;letter-spacing:0;margin-bottom:4px}.post-heading p{font-size:16px;color:#ccc}.article{grid-column:2;grid-row:2;min-width:0}.share-rail{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px;align-self:start;position:sticky;top:25px;margin-top:15px;color:var(--muted);font-size:21px;font-weight:600}.share-rail a,.share-rail button{padding:0;min-height:32px}.recent{grid-column:3;grid-row:2;align-self:start;position:sticky;top:25px;margin-top:15px;padding-left:22px;max-height:calc(100dvh - 50px);overflow-y:auto;color:var(--muted)}.recent h2,.recent-mobile h2{font-size:21px;line-height:1.2;font-weight:600;margin:0 0 20px}.recent ul,.recent-mobile ul{list-style:none;margin:0;padding:0}.recent li,.recent-mobile li{margin-bottom:15px}.recent a,.recent-mobile a{display:block;font-size:15px;line-height:1.25}.recent time,.recent-mobile time{display:block;font-size:14px;margin-top:2px;color:inherit}
.photo{display:block;overflow:hidden;isolation:isolate}.photo img{width:100%;transition:filter .3s,transform .3s}.cover{margin-bottom:20px}.post-body{overflow-wrap:anywhere}.post-body p{margin-bottom:14.4px}.post-body h2,.post-body h3,.post-body h4{font-size:16px;line-height:24px;font-weight:600;margin:20px 0 0;color:#fff}.post-body a:not(.photo),.about-content a:not(.photo){color:#eeeeee;text-decoration:none;border-bottom:1px solid #7a7a7a}.post-body a:not(.photo):hover,.post-body a:not(.photo):focus-visible,.about-content a:not(.photo):hover,.about-content a:not(.photo):focus-visible{color:#ffffff;font-weight:400;border-bottom:3px solid #ffffff}.post-body figure{margin:20px 0}.post-body figcaption{font-size:14px;color:#aaa;text-align:center;margin-top:8px}.post-body iframe{max-width:100%;width:100%;aspect-ratio:16/9;border:0}.post-body video{max-width:100%;width:100%;height:auto;border:0}.post-body table{display:block;overflow-x:auto;border-collapse:collapse}.post-body td,.post-body th{padding:8px;border:1px solid #555}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}.gallery img{aspect-ratio:1;object-fit:cover}.about,.social{border-top:1px solid #777;margin-top:30px;padding-top:20px}.about h2,.social h2{font-size:25px;line-height:1.2;font-weight:600;margin-bottom:15px}.about-content{display:grid;grid-template-columns:24% 1fr;gap:15px;align-items:start}.about-content p{margin:0}.social-links{display:flex;align-items:center;gap:25px;color:#888}.social-links a{display:flex;align-items:center;justify-content:center;min-width:30px;min-height:44px}.social-links svg{width:25px;height:25px}.social-links svg:not([fill="none"]){fill:currentColor}
.photo:focus-visible img{filter:brightness(1.08);transform:scale(1.01)}
@media(hover:hover){.photo:hover img,.site-header:hover .banner{filter:brightness(1.08);transform:scale(1.01)}}
dialog{border:1px solid #555;color:var(--text);background:#222;padding:25px;max-width:calc(100% - 32px)}dialog::backdrop{background:rgb(0 0 0 / .8)}.close{font-size:35px;line-height:1;min-width:44px;min-height:44px}.drawer{margin:0 0 0 auto;width:min(370px,100%);height:100dvh;max-height:100dvh;border:0;border-left:1px solid #444;overflow:auto}.drawer-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.drawer-heading h2{font-size:21px}.drawer nav{display:flex;flex-direction:column;align-items:start;gap:6px;margin-bottom:30px;font-size:21px;color:#aaa}.drawer nav a,.drawer nav button{padding:8px 0}.recent-mobile{color:#aaa}.recent-mobile li{margin-bottom:20px}/* Viewer controls share one layout; portrait screens move them below the credits. */
.lightbox{background:transparent;border:0;padding:52px 8px 24px;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;overflow:hidden}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox figure{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:center;max-width:100%;max-height:100%}
.lightbox-photo{grid-column:1;grid-row:1;min-width:0;line-height:0}
.lightbox img{max-height:calc(100dvh - 122px);max-width:100%;width:auto;object-fit:contain;margin:auto}
.lightbox figure:has(figcaption[hidden]) img{max-height:calc(100dvh - 76px)}
.lightbox figcaption{grid-column:1;grid-row:2;font-size:14px;line-height:18px;max-height:36px;overflow-y:auto;color:#ccc;text-align:center}
.lightbox .close{position:absolute;right:12px;top:4px;z-index:2}
.lightbox-navigation{display:contents}
.lightbox-navigation[hidden]{display:none}
.photo-count{display:none;font-size:14px;line-height:1.5;min-width:64px;text-align:center;color:#ccc;font-variant-numeric:tabular-nums}
.previous,.next{font-size:40px;line-height:1;padding:0;width:44px;height:44px;color:#ccc;border-radius:5px;grid-row:1}
.previous{grid-column:1}.next{grid-column:3}
.previous:hover,.next:hover,.previous:focus-visible,.next:focus-visible{color:#fff;background:rgb(255 255 255 / .08)}
.lightbox.is-gallery figure{grid-template-columns:44px minmax(0,1fr) 44px}
.lightbox.is-gallery .lightbox-photo,.lightbox.is-gallery figcaption{grid-column:2}
@media(max-width:1100px) and (orientation:portrait){
  .lightbox.is-gallery figure{grid-template-columns:minmax(0,1fr)}
  .lightbox.is-gallery .lightbox-photo,.lightbox.is-gallery figcaption{grid-column:1}
  .lightbox-navigation{display:flex;grid-column:1;grid-row:3;align-items:center;justify-content:center;gap:16px}
  .lightbox.is-gallery figure:has(figcaption[hidden]) .lightbox-navigation{grid-row:2}
  .photo-count{display:block}
  .lightbox.is-gallery img{max-height:calc(100dvh - 176px)}
  .lightbox.is-gallery figure:has(figcaption[hidden]) img{max-height:calc(100dvh - 130px)}
}
.share-fallback input{display:block;width:min(480px,70vw);margin:16px 0;padding:10px}.share-fallback button{border:1px solid #777;padding:8px 15px}.status{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);background:#eee;color:#111;padding:10px 18px;border-radius:3px;z-index:20}.status:empty{display:none}
@media(min-width:1000px) and (max-width:1199px){.post-layout{width:calc(100% - 50px);grid-template-columns:75px minmax(0,1fr) 180px;column-gap:35px}.recent{padding-left:0}.header-inner{width:calc(100% - 50px);padding-left:110px}.brand{font-size:50px}}
@media(max-width:999px){.site-header{min-height:90px;margin-bottom:24px}.header-inner{width:min(700px,calc(100% - 32px));padding:0;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:clamp(26px,5vw,40px);letter-spacing:-.5px;line-height:1.12}.menu-toggle{display:block;flex-shrink:0;width:44px;height:44px;padding:8px;color:#aaa}.menu-toggle svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2}.post-layout{display:block;width:min(700px,calc(100% - 32px));padding-bottom:40px}.post-heading{margin-bottom:20px}.post-heading h1{font-size:clamp(27px,5vw,35px)}.share-rail,.recent{display:none}.about h2,.social h2{font-size:23px}.about-content{grid-template-columns:24% 1fr}.social-links{gap:20px}}
@media(max-width:420px){.about-content{grid-template-columns:95px 1fr;font-size:14px;line-height:1.5}.social-links{justify-content:space-between;gap:8px}.gallery{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.photo:hover img,.photo:focus-visible img,.site-header:hover .banner{transform:none!important}}

/* Match non-link reference text while retaining the chosen link colors. */
.recent h2,.recent-mobile h2{color:var(--muted)}
.cover figcaption,.standalone-photo figcaption{font-size:14px;line-height:1.5;color:#ccc;text-align:center;margin-top:8px}
.gallery-notes{margin-top:20px}
.lightbox figcaption[hidden]{display:none}

.standalone-photo{margin-top:24px}

/* Match the live viewer overlay without dimming the image or its controls. */
.lightbox::backdrop{background:rgb(0 0 0 / .8)}
.lightbox-photo{overflow:hidden;touch-action:none;user-select:none;cursor:zoom-in}
.lightbox-photo img{transform-origin:center;user-select:none;-webkit-user-drag:none}
.lightbox.is-zoomed .lightbox-photo{cursor:grab}
.lightbox.is-zoomed .lightbox-photo:active{cursor:grabbing}
.viewer-toolbar{position:absolute;right:60px;top:4px;display:flex;gap:4px;z-index:2}
.viewer-toolbar button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#ccc;border-radius:4px}
.viewer-toolbar button[hidden]{display:none}
.viewer-toolbar button:hover,.viewer-toolbar button:focus-visible{color:#fff;background:rgb(255 255 255 / .08)}
.viewer-toolbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.viewer-zoom[aria-pressed="true"] .zoom-plus{display:none}
.viewer-status{position:absolute;top:8px;left:12px;max-width:calc(100% - 180px);font-size:13px;color:#eee;z-index:2}

/* Magnification is edge-to-edge; zooming out restores the fitted layout. */
.lightbox.is-zoomed .lightbox-photo{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;display:flex;align-items:center;justify-content:center;z-index:1}
#lightbox.is-zoomed .lightbox-photo img{flex:none;max-width:none;max-height:none;margin:0}
.lightbox.is-zoomed figcaption,.lightbox.is-zoomed .lightbox-navigation{visibility:hidden}
.lightbox.is-zoomed .viewer-toolbar,.lightbox.is-zoomed .close{background:rgb(0 0 0 / .35);border-radius:4px;color:#fff}

.post-footer{margin-top:30px;font-size:.82rem;line-height:1.5;color:var(--muted)}
.post-footer a{white-space:nowrap;border-bottom:1px solid #7a7a7a}
.post-footer a:hover,.post-footer a:focus-visible{color:#fff;border-bottom-color:#fff}

/* Keep the compact navigation header available wherever the drawer is used. */
@media(max-width:999px){
  html{scroll-padding-top:100px}
  .site-header{position:sticky;top:0;z-index:5;min-height:76px;background:#222}
  .header-inner{gap:12px;padding:6px 0}
  .brand{font-size:clamp(32px,5.5vw,42px);line-height:1.05}
  .banner{width:max(100%,1000px);max-width:none;left:50%;translate:-50% 0}
}
@media(max-width:480px){
  .site-header{min-height:80px}
  .brand{font-size:32px}
  .brand span{display:block}
}
@media(max-width:999px) and (max-height:500px) and (orientation:landscape){
  html{scroll-padding-top:84px}
  .site-header{min-height:64px}
  .brand{font-size:32px}
}

/* Compact navigation uses a simple YCN mark and one clear drawer hierarchy. */
@media(max-width:999px){
  .brand{font-size:0;line-height:1;letter-spacing:-1px;color:#e31b23}
  .brand::after{content:'YCN';font-size:clamp(34px,6vw,46px)}
  .brand-full{display:none}
  .brand-abbr{display:none}
  .drawer-heading h2,.drawer .recent-mobile h2{font-size:21px;line-height:1.2;font-weight:600;color:#fff}
  .drawer nav{font-weight:600}
  .recent-mobile{color:var(--text)}
  .recent-mobile a{font-size:16px;line-height:1.35;font-weight:400}
  .recent-mobile time{font-size:14px;line-height:1.35;color:var(--muted)}
}
@media(min-width:1000px){
  .brand-full{display:inline}
  .brand-abbr{display:none}
}

/* Credits are annotations to the image, so they align to its left edge. */
.post-body figcaption,.cover figcaption,.standalone-photo figcaption,.lightbox figcaption{text-align:left}
