.blog-article-page{background:transparent;min-height:100svh;padding:clamp(6.5rem,7vw,7rem) var(--gutter-end) clamp(5rem,9vw,8rem) var(--gutter-start)}.article-shell{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);margin-inline:auto;max-width:72rem}.article-topbar{align-items:center;display:flex;gap:1rem;justify-content:space-between}.article-back,.article-icon-link{align-items:center;border:1px solid var(--color-line-2);border-radius:999px;color:var(--color-paper);display:inline-flex;flex:none;font-size:.875rem;font-weight:560;gap:.5rem;height:2.75rem;justify-content:center;letter-spacing:-.01em;padding-inline:.95rem 1.2rem;text-decoration:none;transition:background-color .3s var(--ease-quart),border-color .3s var(--ease-quart)}.article-icon-link{padding:0;width:2.75rem}.article-back svg{transition:transform .5s var(--ease-expo)}.article-back:focus-visible,.article-icon-link:focus-visible{background:var(--color-ink-3);border-color:var(--color-paper)}.article-back:focus-visible svg{transform:translate(-3px)}@media(hover:hover){.article-back:hover,.article-icon-link:hover{background:var(--color-ink-3);border-color:var(--color-paper)}.article-back:hover svg{transform:translate(-3px)}}@media(hover:none){.article-back,.article-icon-link{transition:background-color .3s var(--ease-quart),border-color .3s var(--ease-quart),transform .25s var(--ease-quart)}.article-back:active,.article-icon-link:active{background:var(--color-ink-3);border-color:var(--color-paper);transform:scale(.97);transition-duration:.08s}.article-back:active svg{transform:translate(-3px)}}.article-feedback{color:var(--color-mute);font-size:.875rem;line-height:1.5}.article-feedback:empty{display:none}.article-feedback[data-tone=success]{color:var(--color-ok)}.article-feedback[data-tone=error]{color:#ff8a80}.article-view{display:grid;grid-template-columns:minmax(0,1fr)}.article-editor,.article-empty{background:var(--color-ink-2);border:1px solid var(--color-line);border-radius:1rem}.article-hero{align-items:end;display:grid;gap:clamp(1.75rem,4vw,4rem);grid-template-columns:minmax(0,1fr);padding-bottom:clamp(2rem,4vw,3rem)}.article-hero-copy{align-content:end;display:grid;gap:1.25rem;min-width:0}.article-meta{align-items:center;color:var(--color-faint);display:flex;flex-wrap:wrap;font-family:var(--font-mono);font-size:.75rem;gap:.5rem;letter-spacing:.06em;line-height:1.35;text-transform:uppercase}.article-meta span:not(:last-child):after{color:var(--color-line-2);content:"/";margin-left:.5rem}.post-category{color:var(--color-paper)}.post-status{color:var(--color-mute)}.article-hero h1,.article-empty h1{color:var(--color-paper);font-family:var(--font-display);font-stretch:108%;font-weight:620;overflow-wrap:break-word}.article-hero h1{font-size:clamp(2.25rem,1.2rem + 3.6vw,4.75rem);letter-spacing:-.042em;line-height:.98}.article-hero p{color:var(--color-mute);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;max-width:40rem;overflow-wrap:break-word}.article-visual{aspect-ratio:1;background-color:var(--color-ink-3);background-image:linear-gradient(var(--color-line) 1px,transparent 1px),linear-gradient(90deg,var(--color-line) 1px,transparent 1px);background-position:center;background-size:2.5rem 2.5rem;border:1px solid var(--color-line);justify-self:start;max-width:30rem;overflow:hidden;position:relative;width:100%}.article-visual img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.article-visual-fallback{display:grid;inset:0;place-items:center;position:absolute}.visual-mark{aspect-ratio:1;background:var(--color-ink-2);border:1px solid var(--color-line-2);justify-self:center;position:relative;rotate:45deg;width:4.5rem}.visual-mark:after{background:var(--color-accent);content:"";height:.375rem;left:50%;position:absolute;top:50%;translate:-50% -50%;width:.375rem}.visual-line{border:1px solid var(--color-line);inset:22%;position:absolute;transform:rotate(45deg)}.article-body{border-top:1px solid var(--color-line);color:var(--color-paper);display:grid;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);gap:1.25em;grid-template-columns:minmax(0,1fr);line-height:1.75;padding-block:clamp(2rem,4vw,3rem) clamp(2.5rem,5vw,4rem)}.article-body p{max-width:42rem;overflow-wrap:anywhere}.article-comments-panel{border-top:1px solid var(--color-line);display:grid;gap:1.25rem;max-width:42rem;padding-top:clamp(2.5rem,5vw,4rem)}.article-section-heading{align-items:center;display:flex;gap:1rem}.article-section-heading:after{background:var(--color-line);content:"";flex:1 1 2rem;height:1px;order:1}.article-section-heading span{color:var(--color-faint);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;line-height:1.35;order:2}.article-section-heading h2{color:var(--color-paper);font-size:clamp(1.375rem,1.15rem + .8vw,1.75rem);font-stretch:104%;font-weight:600;letter-spacing:-.03em;line-height:1.1}.article-comments-list{display:grid}.comment-row{display:grid;gap:.5rem;padding-block:1.125rem}.comment-row:first-child{padding-top:.25rem}.comment-row+.comment-row{border-top:1px solid var(--color-line)}.comment-row-header{align-items:center;display:flex;gap:.75rem;justify-content:space-between;min-height:1.5rem}.comment-row strong{color:var(--color-paper);font-size:.9375rem;font-weight:560;min-width:0;overflow-wrap:anywhere}.comment-row p,.muted-copy{color:var(--color-mute);line-height:1.65;overflow-wrap:anywhere}.comment-row p{color:var(--color-paper)}.comment-row small{color:var(--color-faint);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;margin-left:auto;text-transform:uppercase}.comment-delete-button{align-items:center;background:transparent;border:1px solid rgb(255 107 107 / .35);border-radius:999px;color:#ff8a80;cursor:pointer;display:inline-flex;flex:0 0 auto;height:2.75rem;justify-content:center;margin-block:-.625rem;padding:0;transition:background-color .3s var(--ease-quart),border-color .3s var(--ease-quart),color .3s var(--ease-quart);width:2.75rem}.comment-delete-button svg{fill:none;height:1rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75;width:1rem}.comment-delete-button:focus-visible{background:#ff6b6b14;border-color:#ff6b6b;color:#ffb4ab}@media(hover:hover){.comment-delete-button:hover{background:#ff6b6b14;border-color:#ff6b6b;color:#ffb4ab}}.comment-pagination{align-items:center;border-top:1px solid var(--color-line);display:flex;gap:.75rem;justify-content:space-between;padding-top:1.25rem}.comment-pagination span{color:var(--color-faint);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}.comment-pagination button{align-items:center;background:transparent;border:1px solid var(--color-line-2);border-radius:999px;color:var(--color-paper);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:.875rem;font-weight:560;height:2.75rem;justify-content:center;letter-spacing:-.01em;padding-inline:1.125rem;transition:background-color .3s var(--ease-quart),border-color .3s var(--ease-quart),opacity .3s var(--ease-quart)}.comment-pagination button:focus-visible{background:var(--color-ink-3);border-color:var(--color-paper)}@media(hover:hover){.comment-pagination button:hover:not(:disabled){background:var(--color-ink-3);border-color:var(--color-paper)}}.comment-pagination button:disabled{cursor:not-allowed;opacity:.4}.article-comment-form{display:grid;gap:.625rem;grid-template-columns:minmax(0,1fr);margin-top:.25rem}.article-editor{margin-top:clamp(1.5rem,3vw,2.5rem);padding:clamp(1.25rem,3vw,2rem)}.article-editor form{display:grid;gap:1.125rem}.article-editor label,.cover-field{color:var(--color-mute);display:grid;font-family:var(--font-mono);font-size:.75rem;font-weight:450;gap:.625rem;letter-spacing:.06em;line-height:1.35;text-transform:uppercase}.editor-row{display:grid;gap:1.125rem;grid-template-columns:minmax(0,1fr)}.editor-row-bottom{align-items:end}.article-editor input,.article-editor textarea,.article-editor select,.article-comment-form input{background:var(--color-ink-2);border:1px solid var(--color-line-2);border-radius:.75rem;color:var(--color-paper);font-family:var(--font-sans);font-size:1rem;font-weight:400;letter-spacing:normal;line-height:1.4;min-height:3rem;padding:.75rem 1rem;text-transform:none;transition:background-color .3s var(--ease-quart),border-color .3s var(--ease-quart);width:100%}.article-editor input,.article-editor textarea,.article-editor select{background:var(--color-ink)}.article-comment-form input{border-radius:999px;padding-inline:1.25rem}.article-editor input::placeholder,.article-editor textarea::placeholder,.article-comment-form input::placeholder{color:var(--color-faint);opacity:1}@media(hover:hover){.article-editor input:hover,.article-editor textarea:hover,.article-editor select:hover,.article-comment-form input:hover{background-color:var(--color-ink-3)}}.article-editor input:focus,.article-editor textarea:focus,.article-editor select:focus,.article-comment-form input:focus{background-color:var(--color-ink-3);border-color:var(--color-faint)}.article-editor textarea{line-height:1.7;resize:vertical}.article-editor select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a7a39b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .9rem center;background-repeat:no-repeat;cursor:pointer;padding-right:2.5rem}.cover-input-row{align-items:stretch;display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr)}.cover-upload-button{align-items:center;border:1px solid var(--color-line-2);border-radius:999px;color:var(--color-paper)!important;cursor:pointer;display:inline-flex!important;font-family:var(--font-sans)!important;font-size:.875rem!important;font-weight:560;justify-content:center;letter-spacing:-.01em!important;min-height:3rem;min-width:5.5rem;padding:.75rem 1.125rem;position:relative;text-transform:none!important;transition:background-color .3s var(--ease-quart),border-color .3s var(--ease-quart)}.cover-upload-button:focus-within{background:var(--color-ink-3);border-color:var(--color-paper)}@media(hover:hover){.cover-upload-button:hover{background:var(--color-ink-3);border-color:var(--color-paper)}}.cover-upload-button input{block-size:1px;inline-size:1px;opacity:0;position:absolute}.featured-toggle{align-items:center;border:1px solid var(--color-line-2);border-radius:.75rem;color:var(--color-paper)!important;cursor:pointer;display:flex!important;font-family:var(--font-sans)!important;font-size:.9375rem!important;gap:.75rem!important;letter-spacing:normal!important;min-height:3rem;padding:.65rem 1rem;text-transform:none!important;transition:border-color .3s var(--ease-quart)}@media(hover:hover){.featured-toggle:hover{border-color:var(--color-faint)}}.featured-toggle input{accent-color:var(--color-accent);flex:none;height:1.125rem;min-height:auto!important;padding:0!important;width:1.125rem!important}.editor-actions{align-items:stretch;border-top:1px solid var(--color-line);display:flex;flex-direction:column;flex-wrap:wrap;gap:.625rem;justify-content:flex-end;margin-top:.25rem;padding-top:1.25rem}.article-comment-form button,.editor-actions button,.article-login-link,.article-empty a{align-items:center;background:transparent;border:1px solid var(--color-line-2);border-radius:999px;color:var(--color-paper);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:.9375rem;font-weight:560;justify-content:center;letter-spacing:-.01em;min-height:3rem;padding:.7rem 1.375rem;text-decoration:none;transition:background-color .35s var(--ease-quart),border-color .35s var(--ease-quart),color .35s var(--ease-quart);white-space:nowrap}.article-login-link,.article-empty a{justify-self:start}.article-comment-form button,.editor-actions button{width:100%}.article-comment-form button,.editor-actions button[type=submit]{background:var(--color-paper);border-color:var(--color-paper);color:var(--color-ink)}.article-login-link:focus-visible,.article-empty a:focus-visible{background:var(--color-ink-3);border-color:var(--color-paper)}.editor-actions button.danger{border-color:#ff6b6b66;color:#ff8a80}@media(hover:hover){.article-comment-form button:hover,.editor-actions button[type=submit]:hover{background:#fff;border-color:#fff}.editor-actions button:not([type=submit]):not(.danger):hover,.article-login-link:hover,.article-empty a:hover{background:var(--color-ink-3);border-color:var(--color-paper)}.editor-actions button.danger:hover{background:#ff6b6b14;border-color:#ff6b6b;color:#ffb4ab}}@media(hover:none){.article-comment-form button,.editor-actions button,.article-login-link,.article-empty a{transition:background-color .35s var(--ease-quart),border-color .35s var(--ease-quart),color .35s var(--ease-quart),transform .25s var(--ease-quart)}.article-comment-form button:active:not(:disabled),.editor-actions button:active:not(:disabled),.article-login-link:active,.article-empty a:active{transform:scale(.97);transition-duration:.08s}.article-comment-form button:active:not(:disabled),.editor-actions button[type=submit]:active:not(:disabled){background:#fff;border-color:#fff}.editor-actions button:not([type=submit]):not(.danger):active:not(:disabled),.article-login-link:active,.article-empty a:active{background:var(--color-ink-3);border-color:var(--color-paper)}.editor-actions button.danger:active:not(:disabled){background:#ff6b6b14;border-color:#ff6b6b;color:#ffb4ab}}.article-empty{align-content:end;display:grid;gap:1.5rem;justify-items:start;min-height:20rem;padding:clamp(1.5rem,4vw,2.5rem)}.article-empty h1{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.75rem);letter-spacing:-.035em;line-height:1.02}.is-hidden{display:none!important}@media(min-width:561px){.article-comment-form,.cover-input-row{grid-template-columns:minmax(0,1fr) auto}.editor-actions{align-items:center;flex-direction:row}.article-comment-form button,.editor-actions button{width:auto}}@media(min-width:641px){.article-hero{grid-template-columns:minmax(0,1fr) minmax(15rem,.42fr)}.article-visual{justify-self:stretch;max-width:none}.editor-row{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}}@media(max-width:640px){.comment-row-header{flex-wrap:wrap;row-gap:.125rem}.comment-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comment-row small{white-space:nowrap}}@media(max-width:920px)and (max-height:500px){.blog-article-page{padding-top:5.5rem}}
