/* ========================================================================== CG-O main stylesheet 1. Fonts 6. Home sections 11. Comments 2. Tokens + dark 7. Cards + archives 12. Forms + widgets 3. Base 8. Page heads 13. Motion 4. Components 9. Single post 14. Utilities 5. Shell 10. Prose ========================================================================== */ /* 1. Fonts (bundled, SIL Open Font License) ------------------------------- */ @font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../fonts/instrument-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Archivo Fallback";src:local(Arial);ascent-override:88.96%;descent-override:21.28%;line-gap-override:0%;size-adjust:98.7%} @font-face{font-family:"Instrument Sans Fallback";src:local(Arial);ascent-override:94.42%;descent-override:24.33%;line-gap-override:0%;size-adjust:102.74%} /* 2. Tokens --------------------------------------------------------------- */ :root{ --color-secondary:#f39a32; --font-archivo:"Archivo","Archivo Fallback"; --font-instrument:"Instrument Sans","Instrument Sans Fallback"; --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; /* Studio (always dark: plates, frames with photos) */ --color-studio:#080b10;--color-studio-2:#10141b;--color-studio-3:#181d26; --color-fog:#ffffff1a;--color-fog-2:#fff3; --color-chalk:#eef1f5;--color-chalk-2:#9aa3b1; /* Bench (follows light / dark mode) */ --color-bench:#f2f4f7;--color-bench-2:#e5e8ee;--color-card:#fff; --color-ink:#0b0e13;--color-ink-2:#3b414b;--color-muted:#6a717d; --color-line:#d9dde4;--color-line-2:#c2c8d1; /* Accent (the Customizer can override --color-signal / --color-signal-deep) */ --color-signal:#6dbced;--color-signal-deep:#1c74ab;--color-signal-weak:#e2f3fc; --color-led:#35e07a;--color-sky:#a3d6f5; --btn-ink-bg:var(--color-ink);--btn-ink-fg:var(--color-chalk);--btn-ink-hover:#1c212a; --shadow-card:0 18px 40px -22px #0b0e1338; --sidebar-w:256px;--topbar-h:56px; color-scheme:light; } /* Dark mode: chosen explicitly … */ :root[data-theme="dark"]{ --color-bench:#0b0e13;--color-bench-2:#151a22;--color-card:#10141b; --color-ink:#eef1f5;--color-ink-2:#b9c0cb;--color-muted:#8b93a0; --color-line:#222832;--color-line-2:#343c49; --color-signal-deep:var(--color-signal-deep-dark,#8ccff5);--color-signal-weak:#11314a; --btn-ink-bg:#eef1f5;--btn-ink-fg:#0b0e13;--btn-ink-hover:#ffffff; --shadow-card:0 18px 40px -22px #000000b3; color-scheme:dark; } /* … or following the operating system when no choice was stored. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme-lock="light"]){ --color-bench:#0b0e13;--color-bench-2:#151a22;--color-card:#10141b; --color-ink:#eef1f5;--color-ink-2:#b9c0cb;--color-muted:#8b93a0; --color-line:#222832;--color-line-2:#343c49; --color-signal-deep:var(--color-signal-deep-dark,#8ccff5);--color-signal-weak:#11314a; --btn-ink-bg:#eef1f5;--btn-ink-fg:#0b0e13;--btn-ink-hover:#ffffff; --shadow-card:0 18px 40px -22px #000000b3; color-scheme:dark; } } /* 3. Base ----------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid} html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;text-rendering:optimizeLegibility;background:var(--color-bench);-webkit-text-size-adjust:100%;tab-size:4} body{background:var(--color-bench);color:var(--color-ink);font-family:var(--font-instrument),ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;transition:background-color .25s,color .25s} img,svg,video,canvas,iframe,embed,object{display:block;vertical-align:middle} img,video{max-width:100%;height:auto} a{color:inherit;text-decoration:inherit} button,input,select,textarea{font:inherit;color:inherit;background:transparent;letter-spacing:inherit} button{cursor:pointer} ul,ol{list-style:none} h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit} hr{height:0;border-top-width:1px;border-color:var(--color-line)} :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:2px solid var(--color-signal);outline-offset:3px;border-radius:6px} ::selection{background:var(--color-signal);color:#0b0e13} [hidden]{display:none!important} .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important} .screen-reader-text:focus{background:var(--color-card);color:var(--color-ink);clip:auto!important;clip-path:none;display:block;height:auto;left:8px;top:8px;padding:12px 18px;width:auto;z-index:100000;border-radius:10px;box-shadow:var(--shadow-card)} .skip-link{position:absolute} /* 4. Components ----------------------------------------------------------- */ .wrap{width:100%;padding-left:16px;padding-right:16px} .section{padding-top:32px;padding-bottom:32px} @media (min-width:640px){.wrap{padding-left:24px;padding-right:24px}.section{padding-top:40px;padding-bottom:40px}} @media (min-width:768px){.wrap{padding-left:40px;padding-right:40px}} @media (min-width:1024px){.wrap{padding-left:48px;padding-right:48px}.section{padding-top:48px;padding-bottom:48px}} .bench{background:var(--color-bench);color:var(--color-ink)} .studio{background:var(--color-studio);color:var(--color-chalk)} .display{font-family:var(--font-archivo),ui-sans-serif,system-ui,sans-serif;font-variation-settings:"wdth" 125;font-stretch:125%;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance;font-weight:800;line-height:.94} .display-sc{font-family:var(--font-archivo),ui-sans-serif,system-ui,sans-serif;font-variation-settings:"wdth" 108;font-stretch:108%;letter-spacing:-.02em;text-wrap:balance;font-weight:700;line-height:1.04} .label{font-family:var(--font-archivo),ui-sans-serif,system-ui,sans-serif;font-variation-settings:"wdth" 80;font-stretch:80%;text-transform:uppercase;letter-spacing:.16em;font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:600;line-height:1} .meta{letter-spacing:.01em;font-variant-numeric:tabular-nums;font-size:12.5px} .t-hero{font-size:clamp(40px,10.5cqw,96px)} .hero-copy{max-width:calc(7.45*clamp(40px,10.5cqw,96px))} .t-page{font-size:clamp(38px,4.6vw,64px)} .t-section{font-size:clamp(28px,3vw,40px)} .t-card{font-size:21px} /* Heading style switch from the Customizer (body class) */ .headings-sentence .display.is-switchable{text-transform:none;letter-spacing:-.025em;font-variation-settings:"wdth" 112;font-stretch:112%;line-height:1} .section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:24px} @media (min-width:640px){.section-head{margin-bottom:40px}.section-head.is-row{flex-direction:row;align-items:flex-end;justify-content:space-between}} .card,.panel{background:var(--color-card);border:1px solid var(--color-line);border-radius:16px;transition:background-color .25s,border-color .22s,box-shadow .22s} .card-hover:hover,.card-hover:focus-visible,.card-hover:focus-within{border-color:var(--color-line-2);box-shadow:var(--shadow-card)} .plate{background:var(--color-studio);color:var(--color-chalk);border-radius:24px} :root[data-theme="dark"] .plate{box-shadow:0 0 0 1px var(--color-line)} .plate-photo{isolation:isolate;position:relative;overflow:hidden} .plate-img{position:absolute;inset:0;z-index:0} .plate-img img{width:100%;height:100%;object-fit:cover} .plate-scrim{z-index:1;pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#080b10f5 0%,#080b10e6 42%,#080b108c 72%,#080b1059 100%),linear-gradient(#080b1000 55%,#080b10d9 100%)} .plate-scrim-soft{z-index:1;pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#080b10f7 0%,#080b10e0 55%,#080b1099 100%)} .plate-inner{position:relative;z-index:2} .frame{position:relative;overflow:hidden;border:1px solid var(--color-line);background:var(--color-bench-2);color:var(--color-ink);border-radius:16px} .frame>img,.frame>a>img,.frame .frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(0,0,.2,1)} .frame-dark{border-color:var(--color-fog-2);background:var(--color-studio-2);color:var(--color-chalk)} .frame.has-photo{color:var(--color-chalk)} .frame-fade{z-index:2;pointer-events:none;position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(#080b1000,#080b10d1)} .frame-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 32px 24px;color:var(--color-chalk)} .frame-cap.is-tight{padding:0 20px 16px} .frame-tag{z-index:3;color:var(--color-chalk);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#080b10b8;border-radius:6px;display:inline-flex;align-items:center;gap:8px;padding:6px 9px;position:absolute;top:12px;left:12px} .frame-empty{position:absolute;inset:0;display:grid;place-items:center;background-color:var(--color-bench-2);background-image:radial-gradient(var(--color-line-2) 1px,transparent 1.2px);background-size:18px 18px;background-position:50%} .frame-empty svg{width:56px;height:56px;color:var(--color-line-2)} .ar-4-3{aspect-ratio:4/3}.ar-4-5{aspect-ratio:4/5}.ar-16-10{aspect-ratio:16/10}.ar-16-9{aspect-ratio:16/9}.ar-1-1{aspect-ratio:1/1}.ar-3-2{aspect-ratio:3/2}.ar-21-9{aspect-ratio:21/9} .corner{position:absolute;z-index:3;opacity:.85;pointer-events:none;--in:10px;width:16px;height:16px;border:0 solid var(--color-chalk);transition:top .28s cubic-bezier(.2,.7,.2,1),right .28s cubic-bezier(.2,.7,.2,1),bottom .28s cubic-bezier(.2,.7,.2,1),left .28s cubic-bezier(.2,.7,.2,1),border-color .2s,opacity .2s} .frame:not(.has-photo) .corner{border-color:var(--color-ink)} .corner.tl{top:var(--in);left:var(--in);border-top-width:1.5px;border-left-width:1.5px;border-top-left-radius:3px} .corner.tr{top:var(--in);right:var(--in);border-top-width:1.5px;border-right-width:1.5px;border-top-right-radius:3px} .corner.bl{bottom:var(--in);left:var(--in);border-bottom-width:1.5px;border-left-width:1.5px;border-bottom-left-radius:3px} .corner.br{bottom:var(--in);right:var(--in);border-bottom-width:1.5px;border-right-width:1.5px;border-bottom-right-radius:3px} :is(.card-hover,.lock):is(:hover,:focus-visible,:focus-within) .corner{--in:16px;opacity:1;border-color:var(--color-signal)} :is(.card-hover,.lock):hover .frame>img,:is(.card-hover,.lock):hover .frame>a>img{transform:scale(1.03)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.82rem 1.35rem;border-radius:10px;font-size:14.5px;font-weight:600;line-height:1;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:background-color .16s,color .16s,border-color .16s,transform .16s,box-shadow .16s} .btn:active{transform:scale(.98)} .btn-signal{background:var(--color-signal);color:#0b0e13;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--color-signal) 70%,transparent)} .btn-signal:hover{background:color-mix(in oklab,var(--color-signal),#0b0e13 12%);transform:translateY(-1px)} .btn-ghost{border:1px solid var(--color-chalk);color:var(--color-chalk);background:#ffffff0a} .btn-ghost:hover{background:#ffffff1a} .btn-ink{background:var(--btn-ink-bg);color:var(--btn-ink-fg)} .btn-ink:hover{background:var(--btn-ink-hover);transform:translateY(-1px)} .btn-outline{border:1px solid var(--color-line-2);color:var(--color-ink);background:var(--color-card)} .btn-outline:hover{border-color:var(--color-ink)} .btn-sm{padding:.55rem .95rem;font-size:13px} .btn-caps{text-transform:uppercase;letter-spacing:.04em} .chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border:1px solid var(--color-line-2);background:var(--color-card);color:var(--color-ink-2);border-radius:8px;font-size:13px;font-weight:500;transition:border-color .16s,color .16s,transform .16s} .chip:hover{border-color:var(--color-ink);color:var(--color-ink);transform:translateY(-1px)} .chip.is-current{background:var(--color-signal);border-color:var(--color-signal);color:#0b0e13} .chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:6px;background:var(--color-bench-2);color:var(--color-muted);font-size:12px;font-weight:600} .chip.is-current .chip-count{background:#0b0e131f;color:#0b0e13} .status{display:inline-flex;align-items:center;gap:7px;padding:6px 9px 6px 8px;border-radius:6px;color:var(--color-chalk);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#080b10c7} .status-light{color:#0b0e13;background:#ffffffdb;border:1px solid #ffffff80} .status-pos{position:absolute;z-index:3} .status-pos.tl{top:12px;left:12px}.status-pos.bl{bottom:12px;left:12px} .link-rule{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0% 1.5px;padding-bottom:2px;transition:background-size .22s,color .16s} .link-rule:hover{background-size:100% 1.5px} @keyframes ledPulse{0%,to{box-shadow:0 0 #35e07a73}60%{box-shadow:0 0 0 6px #35e07a00}} .led{display:inline-block;flex:none;width:8px;height:8px;border-radius:999px;background:var(--color-led);animation:2.2s ease-out infinite ledPulse} .led-off{display:inline-block;flex:none;width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.5} .icon-img{display:inline-flex;flex:none;align-items:center;justify-content:center} .icon-img img{max-width:none;border-radius:3px;object-fit:contain} .ext{margin-left:auto;font-size:11px;opacity:.4;transition:opacity .16s} a:hover>.ext{opacity:1} .glow{position:absolute;pointer-events:none;filter:blur(14px);border-radius:999px;background:radial-gradient(closest-side,color-mix(in srgb,var(--color-signal) 20%,transparent),transparent)} .dot-grid{background-color:var(--color-bench-2);background-image:radial-gradient(var(--color-line-2) 1px,transparent 1.2px);background-position:50%;background-size:18px 18px} .rule{height:1px;background:var(--color-line)} .vsep{display:inline-block;width:1px;height:12px;background:var(--color-line-2)} /* 5. Shell: sidebar, topbar, drawer, footer -------------------------------- */ .site{display:flex;min-height:100vh} .site-main{display:flex;flex:1;flex-direction:column;min-width:0;padding-top:var(--topbar-h)} .admin-bar .sidebar{top:32px;height:calc(100vh - 32px)} @media (min-width:1024px){.site-main{margin-left:var(--sidebar-w);padding-top:0}} .sidebar{position:fixed;left:0;top:0;z-index:40;display:none;flex-direction:column;width:var(--sidebar-w);height:100vh;overflow-y:auto;border-right:1px solid var(--color-line);background:var(--color-card);scrollbar-width:none;transition:background-color .25s,border-color .25s} .sidebar::-webkit-scrollbar,.drawer::-webkit-scrollbar{display:none} @media (min-width:1024px){.sidebar{display:flex}} .brand{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:32px 24px 24px} .brand-link{display:flex;flex-direction:column;align-items:center;gap:16px} .brand-mark{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;width:72px;height:72px;overflow:hidden;border-radius:999px;transition:transform .2s} .brand-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .brand-mark.is-logo{border-radius:0;width:auto;height:auto;max-width:180px;overflow:visible} .brand-mark.is-logo img{position:static;width:auto;max-width:100%;max-height:var(--logo-h,72px);object-fit:contain} .brand-link:hover .brand-mark{transform:scale(1.04)} .brand-text{display:flex;flex-direction:column;align-items:center;line-height:1.25} .brand-name{font-size:15.5px;color:var(--color-ink)} .brand-tag{margin-top:4px;font-size:12px;color:var(--color-muted)} .side-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px} .side-nav a{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;font-size:15px;color:var(--color-ink-2);transition:background-color .15s,color .15s} .side-nav a:hover{background:var(--color-bench);color:var(--color-ink)} .side-nav .nav-ico{display:inline-flex;color:currentColor} .side-nav .nav-ico svg{width:18px;height:18px} .side-nav .current-menu-item>a,.side-nav .current_page_item>a,.side-nav .current-menu-ancestor>a,.side-nav a[aria-current="page"]{background:var(--color-bench-2);color:var(--color-ink);font-weight:500} .side-nav .current-menu-item>a::before,.side-nav .current_page_item>a::before,.side-nav .current-menu-ancestor>a::before,.side-nav a[aria-current="page"]::before{content:"";position:absolute;left:0;top:50%;width:3px;height:20px;transform:translateY(-50%);border-radius:0 999px 999px 0;background:var(--color-signal)} .side-nav .current-menu-item>a .nav-ico,.side-nav .current_page_item>a .nav-ico,.side-nav .current-menu-ancestor>a .nav-ico,.side-nav a[aria-current="page"] .nav-ico{color:var(--color-signal)} .side-nav .sub-menu{padding-left:30px;display:flex;flex-direction:column;gap:2px} .side-nav .sub-menu a{font-size:14px;padding:7px 12px} .side-sep{height:1px;margin:20px 24px 0;background:var(--color-line)} .side-social{display:flex;flex-direction:column;gap:2px;padding:20px 12px} .side-social .label{padding:0 14px 12px;color:var(--color-muted)} .side-social a{display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:10px;font-size:14px;color:var(--color-ink-2);transition:background-color .15s,color .15s} .side-social a:hover{background:var(--color-bench);color:var(--color-ink)} .icon-img.ico-youtube img{margin:-3px -3.5px} .side-foot{margin-top:auto;padding:16px 16px 20px;display:flex;flex-direction:column;gap:12px} .side-panel{overflow:hidden;background:var(--color-bench);border-radius:16px;border:1px solid var(--color-line)} .side-panel a{display:flex;align-items:center;gap:12px;transition:background-color .15s} .side-panel a:hover{background:var(--color-card)} .side-panel .sp-feature{padding:12px} .side-panel .sp-status{padding:12px 16px;border-top:1px solid var(--color-line);font-size:13px;font-weight:500;color:var(--color-ink)} .sp-thumb{position:relative;flex:none;width:44px;height:44px;overflow:hidden;border-radius:8px;border:1px solid var(--color-line);background:var(--color-bench-2)} .sp-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s} .sp-feature:hover .sp-thumb img{transform:scale(1.06)} .sp-text{display:flex;flex-direction:column;gap:6px;min-width:0;line-height:1.25} .sp-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:500;color:var(--color-ink);transition:color .15s} .sp-feature:hover .sp-title{color:var(--color-signal-deep)} /* Theme toggle */ .theme-toggle{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-bench)} .theme-toggle button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 9px;border-radius:7px;color:var(--color-muted);font-size:12.5px;font-weight:500;transition:background-color .15s,color .15s} .theme-toggle button svg{width:15px;height:15px} .theme-toggle button:hover{color:var(--color-ink)} .theme-toggle button[aria-pressed="true"]{background:var(--color-card);color:var(--color-ink);box-shadow:0 1px 2px #0b0e131a,0 0 0 1px var(--color-line)} .side-foot .theme-toggle{display:flex} .side-foot .theme-toggle button{flex:1} .theme-quick{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--color-ink)} .theme-quick:hover{background:var(--color-bench)} .theme-quick svg{width:19px;height:19px} .theme-quick .i-sun{display:none} :root[data-theme="dark"] .theme-quick .i-sun{display:block} :root[data-theme="dark"] .theme-quick .i-moon{display:none} /* Mobile topbar + drawer */ .topbar{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);padding:0 16px;border-bottom:1px solid var(--color-line);background:var(--color-card);transition:background-color .25s} .admin-bar .topbar{top:46px} @media (min-width:783px){.admin-bar .topbar{top:32px}} @media (min-width:1024px){.topbar{display:none}} .topbar-brand{display:flex;align-items:center;gap:10px;min-width:0} .topbar-brand .brand-mark{width:32px;height:32px} .topbar-brand .brand-mark.is-logo{width:auto;height:auto} .topbar-brand .brand-mark.is-logo img{max-height:32px} .topbar-brand .brand-name{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar-actions{display:flex;align-items:center;gap:4px} .menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--color-ink)} .menu-btn:hover{background:var(--color-bench)} .menu-btn svg{width:20px;height:20px} .menu-btn .i-close{display:none} .menu-btn[aria-expanded="true"] .i-close{display:block} .menu-btn[aria-expanded="true"] .i-menu{display:none} .drawer{position:fixed;left:0;top:var(--topbar-h);bottom:0;z-index:40;display:flex;flex-direction:column;width:290px;max-width:88vw;overflow-y:auto;border-right:1px solid var(--color-line);background:var(--color-card);transform:translateX(-100%);transition:transform .2s,visibility .2s;visibility:hidden;scrollbar-width:none} .drawer.is-open{transform:none;visibility:visible} .admin-bar .drawer{top:calc(var(--topbar-h) + 46px)} @media (min-width:783px){.admin-bar .drawer{top:calc(var(--topbar-h) + 32px)}} @media (min-width:1024px){.drawer,.drawer-scrim{display:none!important}} .drawer-scrim{position:fixed;inset:var(--topbar-h) 0 0 0;z-index:39;background:#080b1066;opacity:0;pointer-events:none;transition:opacity .2s} .drawer-scrim.is-open{opacity:1;pointer-events:auto} body.drawer-open{overflow:hidden} /* Footer */ .site-footer{margin-top:auto} .footer-inner{padding-top:40px;padding-bottom:32px} @media (min-width:1024px){.footer-inner{padding-top:48px}} .footer-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px} @media (min-width:1024px){.footer-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:80px}} .footer-lead{display:flex;flex-direction:column;align-items:flex-start;gap:32px} .footer-title{font-size:clamp(34px,4.2vw,64px);color:var(--color-ink)} .footer-title .accent{color:var(--color-signal)} .footer-text{max-width:44ch;font-size:15.5px;line-height:1.65;color:var(--color-ink-2)} .footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px} @media (min-width:640px){.footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1024px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}} .footer-col{display:flex;flex-direction:column;gap:20px} .footer-col>.label{color:var(--color-muted)} .footer-col ul{display:flex;flex-direction:column;gap:10px} .footer-col li a{font-size:15px;font-weight:500;color:var(--color-ink)} .footer-col .social-row{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-width:0} .footer-col .social-row .meta{display:none;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (min-width:1536px){.footer-col .social-row .meta{display:inline}} .footer-status{grid-column:span 2} @media (min-width:640px){.footer-status{grid-column:span 1}} @media (min-width:1024px){.footer-status{grid-column:span 2;border-top:1px solid var(--color-line);padding-top:32px}} .footer-status li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--color-ink)} .footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:64px;padding-top:24px;border-top:1px solid var(--color-line);color:var(--color-muted)} .footer-bottom .group{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px} .footer-bottom a{color:var(--color-ink)} /* 6. Home sections -------------------------------------------------------- */ .banner{display:flex;align-items:center;column-gap:12px;padding:10px 14px} @media (min-width:640px){.banner{column-gap:16px;padding:10px 14px 10px 10px}} .banner-thumb{position:relative;display:none;flex:none;width:40px;height:40px;overflow:hidden;border-radius:8px;border:1px solid var(--color-line)} .banner-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s} .banner:hover .banner-thumb img{transform:scale(1.08)} @media (min-width:640px){.banner-thumb{display:block}} .banner-state{display:flex;flex:none;align-items:center;gap:10px} .banner-state .label{display:none;color:var(--color-muted)} @media (min-width:640px){.banner-state .label{display:inline}} .banner-text{display:flex;flex:1;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0} .banner-title{font-size:14px;line-height:1.375;color:var(--color-ink)} @media (min-width:640px){.banner-title{font-size:17px}} .banner-desc{display:none;font-size:14px;color:var(--color-muted)} @media (min-width:768px){.banner-desc{display:inline}} .hero-sec{padding-top:16px;padding-bottom:24px} @media (min-width:640px){.hero-sec{padding-top:20px;padding-bottom:32px}} @media (min-width:1024px){.hero-sec{padding-top:24px;padding-bottom:40px}} .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:28px;padding:28px 20px 24px} @media (min-width:640px){.hero-grid{gap:40px;padding:48px 40px 40px}} @media (min-width:1024px){.hero-grid{min-height:600px;grid-template-columns:minmax(0,1fr) 340px;gap:56px;padding:56px}} @media (min-width:1280px){.hero-grid{grid-template-columns:minmax(0,1fr) 400px;gap:80px}} .hero-copybox{container-type:inline-size;display:flex;flex-direction:column;justify-content:center} .hero-eyebrow{color:var(--color-chalk-2)} .hero-title{margin-top:16px;color:var(--color-chalk)} .hero-title span{display:block} @media (min-width:640px){.hero-title{margin-top:24px}} .hero-text{margin-top:20px;font-size:15px;line-height:1.55;color:var(--color-chalk)} @media (min-width:640px){.hero-text{margin-top:28px;font-size:18px;line-height:1.6}} .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px} @media (min-width:640px){.hero-actions{margin-top:36px}} .hero-mini{display:flex;align-items:center;gap:16px} .hero-mini .frame{width:88px;flex:none} .hero-mini-text{display:flex;flex:1;flex-direction:column;min-width:0;line-height:1.25} .hero-portrait{display:none;width:100%} @media (min-width:1024px){.hero-mini{display:none}.hero-portrait{display:block}} .hero-strip{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding:16px 24px;border-top:1px solid var(--color-fog)} @media (min-width:640px){.hero-strip{padding:16px 40px}} @media (min-width:1024px){.hero-strip{padding:16px 56px}} .hero-strip .is-wide{display:none} @media (min-width:768px){.hero-strip .is-wide{display:inline}} .make-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px 24px} @media (min-width:768px){.make-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .make-item{display:flex;flex-direction:column;gap:16px;width:100%;border-radius:16px} .make-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px} .make-foot .label{color:var(--color-ink);transition:color .15s} a.make-item:hover .make-foot .label{color:var(--color-signal-deep)} .watch-list{display:flex;align-items:center;gap:4px;margin-left:4px} .watch-list a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--color-line-2);background:var(--color-card);transition:border-color .15s,transform .15s} .watch-list a:hover{border-color:var(--color-ink);transform:translateY(-1px)} .feature{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;padding:10px} @media (min-width:1024px){.feature{grid-template-columns:minmax(0,560px) minmax(0,440px);gap:16px;width:fit-content;max-width:100%}} .feature .frame{aspect-ratio:16/10} @media (min-width:1024px){.feature .frame{aspect-ratio:4/3;min-height:320px}} .feature-body{display:flex;flex-direction:column;gap:24px;padding:16px 12px 12px} @media (min-width:640px){.feature-body{padding:16px 20px 12px}} @media (min-width:1024px){.feature-body{padding:28px 28px 28px 12px}} .feature-copy{display:flex;flex-direction:column;gap:16px} .feature-copy .excerpt{max-width:46ch;font-size:16px;line-height:1.6;color:var(--color-ink-2)} .feature-box{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;border:1px solid var(--color-line);background:var(--color-bench)} .feature-box p{font-size:14px;line-height:1.55;color:var(--color-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .feature .actions{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px} .about{display:flex;flex-direction:column;gap:32px} .about-text{display:flex;flex-direction:column;gap:20px;max-width:58ch;font-size:16.5px;line-height:1.7;color:var(--color-ink-2)} .about-text a{color:var(--color-signal-deep);text-decoration:underline;text-underline-offset:3px} .find{display:flex;flex-direction:column;gap:14px} .find ul{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .cta{padding:48px 28px} @media (min-width:640px){.cta{padding:64px 48px}} @media (min-width:1024px){.cta{padding:80px 64px}} .cta-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:40px} @media (min-width:1024px){.cta-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:64px}} .cta-grid p{max-width:46ch;font-size:16.5px;line-height:1.65;color:var(--color-chalk)} /* 7. Cards + archives ----------------------------------------------------- */ .post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px} @media (min-width:768px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1536px){.post-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .post-grid.cols-3{} @media (min-width:1280px){.post-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}} .post-grid>li{display:flex} .post-card{display:flex;flex-direction:column;width:100%;padding:10px} .post-card-body{display:flex;flex:1;flex-direction:column;gap:16px;padding:20px 16px 16px} @media (min-width:640px){.post-card-body{padding:20px 20px 16px}} .post-card-title a{transition:color .15s} .post-card:hover .post-card-title a{color:var(--color-signal-deep)} .post-card-excerpt{font-size:15px;line-height:1.65;color:var(--color-ink-2)} .post-card-dl{margin-top:auto;display:grid;grid-template-columns:88px 1fr;gap:12px 16px;padding-top:20px;border-top:1px solid var(--color-line)} .post-card-dl dt{padding-top:3px;color:var(--color-muted)} .post-card-dl dd{font-size:13.5px;color:var(--color-ink)} .post-card-dl dd a:hover{color:var(--color-signal-deep)} .post-card .more{align-self:flex-start;padding-top:4px;color:var(--color-signal-deep)} .post-card.is-sticky{border-color:var(--color-signal)} /* Horizontal list variant */ .post-list{display:flex;flex-direction:column;gap:16px} .post-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px} @media (min-width:768px){.post-row{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px}} .post-row .post-card-body{padding:12px 8px 8px} @media (min-width:768px){.post-row .post-card-body{padding:16px 16px 12px 4px}} .filters{display:flex;flex-wrap:wrap;gap:8px} .pagination{margin-top:40px} .pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--color-line-2);background:var(--color-card);font-size:14px;font-weight:600;color:var(--color-ink);transition:border-color .15s} .pagination a.page-numbers:hover{border-color:var(--color-ink)} .pagination .page-numbers.current{background:var(--color-signal);border-color:var(--color-signal);color:#0b0e13} .pagination .page-numbers.dots{border:0;background:none} .empty-state{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:40px 28px} .empty-state p{max-width:52ch;color:var(--color-ink-2)} /* 8. Page heads ----------------------------------------------------------- */ .page-head-wrap{position:relative;overflow:hidden} .page-head-wrap .glow{right:-128px;top:-80px;width:480px;height:480px;display:none} @media (min-width:1024px){.page-head-wrap .glow{display:block}} .board{position:absolute;inset:0;pointer-events:none;display:none;-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 80%);mask-image:linear-gradient(90deg,transparent 35%,#000 80%)} @media (min-width:1024px){.board{display:block}} .board svg{position:absolute;right:0;top:0;width:1200px;height:100%;min-height:420px} .board .tr{fill:none;stroke:var(--color-line-2);stroke-width:1.25px;stroke-linejoin:round} .board .tr2{fill:none;stroke:var(--color-line);stroke-width:2.5px;stroke-linejoin:round} .board .via{fill:var(--color-bench);stroke:var(--color-line-2);stroke-width:1.25px} .board .via-s{fill:var(--color-signal)} .board .pad{fill:var(--color-line)} .board .pulse{fill:none;stroke:var(--color-signal);stroke-width:1.75px;stroke-linecap:round;stroke-dasharray:.08 1;stroke-dashoffset:1.08;animation:boardPulse var(--dur,4s) cubic-bezier(.45,0,.55,1) var(--delay,0s) infinite alternate} @keyframes boardPulse{0%{stroke-dashoffset:1.08}to{stroke-dashoffset:0}} .page-head{position:relative;display:flex;flex-direction:column;gap:20px;padding-top:32px} @media (min-width:640px){.page-head{padding-top:40px}} @media (min-width:1024px){.page-head{padding-top:48px}} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--color-ink-2)} .crumbs a{color:var(--color-muted)} .crumbs a:hover{color:var(--color-ink)} .crumbs .here{display:inline-flex;align-items:center;gap:10px;color:var(--color-ink)} .page-title{color:var(--color-ink)} .page-intro{max-width:54ch;font-size:17px;line-height:1.65;color:var(--color-ink-2)} .page-intro p+p{margin-top:.8em} /* 9. Single post ---------------------------------------------------------- */ .post-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-top:40px;padding-bottom:32px} @media (min-width:640px){.post-hero{padding-top:56px;padding-bottom:40px}} @media (min-width:1024px){.post-hero{padding-top:64px;padding-bottom:48px}.post-hero.has-media{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:64px}} .post-hero-copy{display:flex;flex-direction:column;gap:24px} .post-title{max-width:16ch;color:var(--color-ink)} .post-title.is-long{max-width:22ch} .post-sub{max-width:54ch;font-size:17px;line-height:1.65;color:var(--color-ink-2)} .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;color:var(--color-muted)} .post-meta .byline{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--color-ink)} .post-meta .byline img{width:28px;height:28px;border-radius:999px} .post-meta .meta{font-size:13px} .post-meta .dot{width:3px;height:3px;border-radius:999px;background:var(--color-line-2)} .post-cats{display:flex;flex-wrap:wrap;gap:8px} /* Plate header variant */ .post-plate-sec{padding-top:16px;padding-bottom:8px} @media (min-width:1024px){.post-plate-sec{padding-top:24px}} .post-plate{padding:40px 24px 32px} @media (min-width:640px){.post-plate{padding:64px 40px 40px}} @media (min-width:1024px){.post-plate{padding:96px 56px 48px;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end}} .post-plate .post-title{color:var(--color-chalk);max-width:18ch} .post-plate .post-sub{color:var(--color-chalk)} .post-plate .crumbs,.post-plate .crumbs .here{color:var(--color-chalk)} .post-plate .crumbs a{color:var(--color-chalk-2)} .post-plate .crumbs a:hover{color:var(--color-chalk)} .post-plate .post-meta{color:var(--color-chalk-2)} .post-plate .post-meta .byline{color:var(--color-chalk)} .post-plate .vsep{background:var(--color-fog-2)} .post-plate .post-meta .dot{background:var(--color-fog-2)} /* Wide image variant */ .post-wide-media{padding-bottom:8px} /* Reading bar */ .readbar{position:sticky;top:var(--topbar-h);z-index:30;border-bottom:1px solid var(--color-line);background:color-mix(in srgb,var(--color-bench) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .admin-bar .readbar{top:calc(var(--topbar-h) + 46px)} @media (min-width:783px){.admin-bar .readbar{top:calc(var(--topbar-h) + 32px)}} @media (min-width:1024px){.readbar{top:0}.admin-bar .readbar{top:32px}} .readbar-inner{display:flex;align-items:center;gap:24px;min-height:48px} .readbar-title{display:none;flex:none;max-width:28ch;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:var(--color-ink)} .readbar-title:hover{color:var(--color-signal-deep)} @media (min-width:1280px){.readbar-title{display:inline}} .toc-links{display:flex;gap:26px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-bottom:-1px} .toc-links::-webkit-scrollbar{display:none} .toc-links a{position:relative;flex:none;padding:15px 0;font-size:13.5px;font-weight:500;line-height:1;white-space:nowrap;color:var(--color-muted);transition:color .16s} .toc-links a:hover,.toc-links a[aria-current="true"]{color:var(--color-ink)} .toc-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--color-signal);transform:scaleX(0);transition:transform .22s cubic-bezier(.2,.7,.2,1)} .toc-links a[aria-current="true"]::after{transform:scaleX(1)} .readbar-meta{margin-left:auto;display:none;flex:none;align-items:center;gap:16px} @media (min-width:1024px){.readbar-meta{display:flex}} .readbar-meta .meta{font-size:13px;color:var(--color-muted)} .progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--color-signal)} .post-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:40px} @media (min-width:1280px){.post-layout.has-aside{grid-template-columns:minmax(0,1fr) 280px;gap:64px}} .post-aside{display:none} @media (min-width:1280px){.post-aside{display:block}.post-aside-inner{position:sticky;top:80px;display:flex;flex-direction:column;gap:16px}} .aside-card{padding:20px} .aside-card .label{display:block;margin-bottom:14px;color:var(--color-muted)} .aside-card ul{display:flex;flex-direction:column;gap:10px} .aside-card li a{font-size:14px;color:var(--color-ink-2)} .aside-card li a:hover{color:var(--color-ink)} .post-footer{display:flex;flex-direction:column;gap:28px;max-width:72ch;margin-top:48px} .tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .tags .label{margin-right:6px;color:var(--color-muted)} .share{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .share .label{margin-right:6px;color:var(--color-muted)} .author-box{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:24px} .author-box img{width:64px;height:64px;border-radius:999px} .author-box .label{color:var(--color-muted)} .author-box h2{margin:8px 0 8px;font-size:19px} .author-box p{font-size:15px;line-height:1.65;color:var(--color-ink-2)} .post-nav{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} @media (min-width:768px){.post-nav{grid-template-columns:repeat(2,minmax(0,1fr))}} .post-nav a{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:16px;padding:10px 16px 10px 10px} .post-nav .next a{grid-template-columns:minmax(0,1fr) 72px;text-align:right;padding:10px 10px 10px 16px} .post-nav .next .frame{order:2} .post-nav .frame{aspect-ratio:1/1;border-radius:10px} .post-nav .label{display:block;margin-bottom:8px;color:var(--color-muted)} .post-nav .display-sc{font-size:16px;color:var(--color-ink);transition:color .15s} .post-nav a:hover .display-sc{color:var(--color-signal-deep)} /* 10. Prose (post + page content) ----------------------------------------- */ .prose{max-width:72ch;font-size:17px;line-height:1.75;color:var(--color-ink-2)} .prose>*+*{margin-top:1.15em} .prose h2,.prose h3,.prose h4,.prose h5,.prose h6{color:var(--color-ink);font-family:var(--font-archivo),ui-sans-serif,system-ui,sans-serif;scroll-margin-top:120px} .prose h2{margin-top:2em;font-size:clamp(24px,2.4vw,32px);font-weight:800;font-variation-settings:"wdth" 125;font-stretch:125%;text-transform:uppercase;line-height:1;letter-spacing:-.005em} .headings-sentence .prose h2{text-transform:none;letter-spacing:-.02em;font-variation-settings:"wdth" 110;font-stretch:110%} .prose h3{margin-top:1.8em;font-size:21px;font-weight:700;font-variation-settings:"wdth" 108;font-stretch:108%;letter-spacing:-.02em;line-height:1.15} .prose h4{margin-top:1.6em;font-size:18px;font-weight:700;line-height:1.25} .prose h5,.prose h6{margin-top:1.6em;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-variation-settings:"wdth" 80;font-stretch:80%} .prose h2+*,.prose h3+*,.prose h4+*{margin-top:.75em} .prose a{color:var(--color-signal-deep);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .15s} .prose a:hover{color:var(--color-ink)} .prose strong{color:var(--color-ink);font-weight:600} .prose ul,.prose ol{padding-left:1.4em} .prose ul{list-style:none} .prose ul>li{position:relative} .prose ul>li::before{content:"";position:absolute;left:-1.1em;top:.72em;width:6px;height:6px;border-radius:2px;background:var(--color-signal)} .prose ol{list-style:decimal} .prose ol>li::marker{color:var(--color-muted);font-weight:600;font-variant-numeric:tabular-nums} .prose li+li{margin-top:.45em} .prose li>ul,.prose li>ol{margin-top:.45em} .prose blockquote{position:relative;padding:22px 26px;border-radius:16px;border:1px solid var(--color-line);background:var(--color-card);color:var(--color-ink);font-size:19px;line-height:1.55} .prose blockquote::before{content:"";position:absolute;left:-1px;top:22px;bottom:22px;width:3px;border-radius:0 999px 999px 0;background:var(--color-signal)} .prose blockquote cite,.prose blockquote footer{display:block;margin-top:12px;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted)} .prose code{font-family:var(--font-mono);font-size:.86em;padding:.15em .4em;border-radius:6px;background:var(--color-bench-2);color:var(--color-ink)} .prose pre{overflow-x:auto;padding:20px 22px;border-radius:14px;background:var(--color-studio);color:var(--color-chalk);font-size:14px;line-height:1.65;border:1px solid var(--color-line)} .prose pre code{padding:0;background:none;color:inherit;font-size:inherit} .prose hr{margin:2.4em 0;border-color:var(--color-line)} .prose img{border-radius:14px} .prose figure{margin-top:1.6em;margin-bottom:1.6em} .prose figcaption,.prose .wp-caption-text,.wp-element-caption{margin-top:10px;font-size:13px;color:var(--color-muted);text-align:left} .prose table{width:100%;border-collapse:collapse;font-size:15px} .prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--color-line);text-align:left} .prose th{font-family:var(--font-archivo);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted);font-weight:600} .prose iframe,.prose video{max-width:100%;border-radius:14px} .prose .wp-block-embed__wrapper iframe{width:100%;aspect-ratio:16/9;height:auto} .prose .alignwide{max-width:none} .prose .alignleft{float:left;margin:.3em 1.4em 1em 0;max-width:50%} .prose .alignright{float:right;margin:.3em 0 1em 1.4em;max-width:50%} .prose .aligncenter{margin-left:auto;margin-right:auto} .prose::after{content:"";display:table;clear:both} .prose .wp-block-button__link{display:inline-flex;align-items:center;padding:.82rem 1.35rem;border-radius:10px;background:var(--color-signal);color:#0b0e13;text-decoration:none;font-size:14.5px;font-weight:600;line-height:1} .prose .wp-block-button.is-style-outline .wp-block-button__link{background:var(--color-card);border:1px solid var(--color-line-2);color:var(--color-ink)} .prose .wp-block-separator{border-top:1px solid var(--color-line)} .prose .wp-block-pullquote{padding:32px 0;border-top:2px solid var(--color-ink);border-bottom:2px solid var(--color-ink)} .prose .wp-block-pullquote blockquote{border:0;background:none;padding:0;font-family:var(--font-archivo);font-weight:800;font-variation-settings:"wdth" 125;font-stretch:125%;text-transform:uppercase;font-size:clamp(22px,2.6vw,32px);line-height:1.05} .prose .wp-block-pullquote blockquote::before{display:none} .prose .wp-block-gallery{gap:12px} .prose .wp-block-image img{border-radius:14px} .prose .has-drop-cap:not(:focus)::first-letter{float:left;margin:.08em .12em 0 0;font-family:var(--font-archivo);font-weight:800;font-size:4.2em;line-height:.8;color:var(--color-ink)} .page-links{display:flex;gap:8px;align-items:center;margin-top:32px} .page-links a,.page-links>span:not(.label){display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:8px;border:1px solid var(--color-line-2);background:var(--color-card)} .sticky{} .bypostauthor{} .gallery-caption{} .alignwide{} .alignfull{} /* 11. Comments ------------------------------------------------------------ */ .comments{max-width:72ch;margin-top:56px} .comments-title{margin-bottom:28px} .comment-list{display:flex;flex-direction:column;gap:16px} .comment-list .children{margin-top:16px;padding-left:20px;border-left:1px solid var(--color-line);display:flex;flex-direction:column;gap:16px} @media (min-width:640px){.comment-list .children{padding-left:32px}} .comment-body{padding:20px 22px;border-radius:16px;border:1px solid var(--color-line);background:var(--color-card)} .comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:12px} .comment-author{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--color-ink)} .comment-author img{width:36px;height:36px;border-radius:999px} .comment-author .says{display:none} .comment-metadata{font-size:12.5px;color:var(--color-muted)} .comment-metadata a:hover{color:var(--color-ink)} .comment-content{font-size:15.5px;line-height:1.7;color:var(--color-ink-2)} .comment-content p+p{margin-top:.8em} .comment-content a{color:var(--color-signal-deep);text-decoration:underline} .reply{margin-top:12px} .reply a{font-family:var(--font-archivo);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-signal-deep)} .bypostauthor>.comment-body{border-color:var(--color-signal)} .comment-awaiting-moderation{display:block;margin-top:6px;font-size:13px;color:var(--color-muted)} .comment-respond{margin-top:40px;padding:24px;border-radius:16px;border:1px solid var(--color-line);background:var(--color-card)} @media (min-width:640px){.comment-respond{padding:32px}} .comment-reply-title{font-family:var(--font-archivo);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--color-ink);font-variation-settings:"wdth" 108;font-stretch:108%} .comment-reply-title small{margin-left:10px;font-size:12px} .comment-reply-title small a{color:var(--color-signal-deep)} .comment-form{display:flex;flex-direction:column;gap:16px;margin-top:20px} .comment-form p{display:flex;flex-direction:column;gap:8px} .comment-form label{font-family:var(--font-archivo);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted);font-variation-settings:"wdth" 80;font-stretch:80%} .comment-form .comment-form-cookies-consent{flex-direction:row;align-items:center;gap:10px} .comment-form .comment-form-cookies-consent label{letter-spacing:0;text-transform:none;font-family:inherit;font-size:14px;font-weight:400;color:var(--color-ink-2)} .comment-notes,.logged-in-as{font-size:14px;color:var(--color-muted)} .logged-in-as a{color:var(--color-signal-deep)} .no-comments{margin-top:24px;color:var(--color-muted)} /* 12. Forms + widgets ----------------------------------------------------- */ .field,input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="number"],input[type="tel"],textarea,select{width:100%;height:48px;padding:0 16px;border-radius:10px;border:1px solid var(--color-line-2);background:var(--color-bench);color:var(--color-ink);font-size:15px;transition:border-color .16s,box-shadow .16s,background-color .16s} textarea{height:auto;min-height:150px;padding:14px 16px;resize:vertical} input[type="checkbox"],input[type="radio"]{width:auto;height:auto;accent-color:var(--color-signal)} :is(.field,input,textarea,select)::placeholder{color:var(--color-muted)} :is(.field,input,textarea,select):hover{border-color:var(--color-muted)} :is(.field,input,textarea,select):focus{outline:none;border-color:var(--color-signal);background:var(--color-card);box-shadow:0 0 0 4px var(--color-signal-weak)} input[type="submit"],button[type="submit"],.wp-block-search__button{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;padding:.82rem 1.35rem;border-radius:10px;border:0;background:var(--color-signal);color:#0b0e13;font-size:14.5px;font-weight:600;line-height:1;cursor:pointer;transition:background-color .16s,transform .16s;align-self:flex-start} input[type="submit"]:hover,button[type="submit"]:hover{background:color-mix(in oklab,var(--color-signal),#0b0e13 12%);transform:translateY(-1px)} .search-form{display:flex;gap:8px;width:100%;max-width:520px} .search-form label{flex:1} .search-form .search-submit{flex:none} .widget-area{display:grid;grid-template-columns:minmax(0,1fr);gap:20px} @media (min-width:768px){.widget-area{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1280px){.widget-area{grid-template-columns:repeat(3,minmax(0,1fr))}} .widget{padding:24px;border-radius:16px;border:1px solid var(--color-line);background:var(--color-card);font-size:15px;color:var(--color-ink-2)} .widget-title,.widget .wp-block-heading{margin-bottom:16px;font-family:var(--font-archivo);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted);font-variation-settings:"wdth" 80;font-stretch:80%} .widget ul{display:flex;flex-direction:column;gap:10px} .widget a{color:var(--color-ink)} .widget a:hover{color:var(--color-signal-deep)} .post-aside .widget{padding:20px} /* 404 */ .lost{display:flex;flex-direction:column;gap:24px;align-items:flex-start} .lost .big{font-size:clamp(96px,18vw,220px);color:var(--color-signal);line-height:.8} /* 13. Motion -------------------------------------------------------------- */ @keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} .rise{animation:.72s cubic-bezier(.2,.7,.2,1) both rise;animation-delay:var(--d,0s)} @keyframes settle{0%{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}} .settle{animation:1.4s cubic-bezier(.2,.7,.2,1) both settle} @keyframes sweep{0%{opacity:0;background-position:0 0}8%{opacity:1}92%{opacity:1}to{opacity:0;background-position:0 100%}} .sweep{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-signal) 85%,transparent) 30% 70%,transparent);background-repeat:no-repeat;background-size:100% 1px;animation:1.8s cubic-bezier(.4,0,.2,1) .3s both sweep} .js [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .22s ease-out,transform .26s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0s)/2)} .js [data-reveal="in"]{opacity:1;transform:none} .no-motion .rise,.no-motion .settle{animation:none} .no-motion .sweep{display:none} .no-motion [data-reveal]{opacity:1!important;transform:none!important;transition:none!important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important} [data-reveal]{opacity:1!important;transform:none!important} .sweep{display:none} } /* 14. Utilities ----------------------------------------------------------- */ .text-ink{color:var(--color-ink)}.text-ink-2{color:var(--color-ink-2)}.text-muted{color:var(--color-muted)} .text-chalk{color:var(--color-chalk)}.text-chalk-2{color:var(--color-chalk-2)}.text-signal{color:var(--color-signal)}.text-signal-deep{color:var(--color-signal-deep)} .flex-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .gap-sm{gap:10px} .mt-0{margin-top:0}.mb-0{margin-bottom:0} .max-18{max-width:18ch} .w-full{width:100%} .relative{position:relative} .nowrap{white-space:nowrap} .hide-sm{display:none} @media (min-width:768px){.hide-sm{display:inline}} .block{display:block} .t-title-s{font-size:clamp(30px,3.2vw,44px)} .t-title-m{font-size:clamp(34px,4vw,54px)} .t-title-l{font-size:clamp(38px,4.6vw,64px)} .t-title-xl{font-size:clamp(44px,6.2vw,92px)} .frame.wide-frame{aspect-ratio:16/9} @media (min-width:1024px){.frame.wide-frame{aspect-ratio:21/9}} /* Caracas (from the 0x8 theme), self-hosted, for h1, h3, h4 and block headings in post content */ @font-face{font-family:"caracas";font-style:normal;font-weight:normal;font-display:swap;src:url(../fonts/caracas-webfont.woff2) format("woff2"),url(../fonts/caracas-webfont.woff) format("woff")} h1,h1.display,h3,h4,.prose h3,.prose h4,.prose .wp-block-heading{font-family:"caracas",var(--font-archivo),ui-sans-serif,system-ui,sans-serif;font-weight:normal;font-stretch:normal;font-variation-settings:normal} /* Sidebar + mobile drawer on the right (matches the old 0x8 layout and the menu button position) */ .sidebar{left:auto;right:0;border-right:0;border-left:1px solid var(--color-line)} @media (min-width:1024px){.site-main{margin-left:0;margin-right:var(--sidebar-w)}} .drawer{left:auto;right:0;border-right:0;border-left:1px solid var(--color-line);transform:translateX(100%)} .drawer.is-open{transform:none} /* Pages: no sidebar, full width, mobile topbar + drawer at every width (body.no-sidebar, see cgo_body_class) */ @media (min-width:1024px){ .no-sidebar .sidebar{display:none} .no-sidebar .site-main{margin-right:0;padding-top:var(--topbar-h)} .no-sidebar .topbar{display:flex} body.no-sidebar .drawer{display:flex!important} body.no-sidebar .drawer-scrim{display:block!important} } /* Posts and pages: content uses the full available width (theme default caps text at 72ch) */ .single .prose,.single .post-footer,.single .comments,.page .prose,.page .comments{max-width:none} /* Featured image as faded header background (replaces the circuit drawing, see cgo_board()) */ .board.board-photo{display:block;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,#000 70%)} .board-photo .board-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.22} @media (min-width:1024px){.board.board-photo{-webkit-mask-image:linear-gradient(90deg,transparent 25%,#000 85%);mask-image:linear-gradient(90deg,transparent 25%,#000 85%)}.board-photo .board-img{left:auto;width:65%;opacity:.35}} /* Tag chips in the post reading bar (replaces "Back to top") */ .readbar-tags{flex-wrap:nowrap;gap:6px;max-width:420px;overflow:hidden} .readbar-tags .chip{padding:4px 9px;font-size:12px;white-space:nowrap} /* TEMPORARY: alternative chart board (assets/images/board-chart.svg), same placement as the inline drawing */ .board-alt img{position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;min-height:0;object-fit:contain;object-position:right center} /* Home: page content in a card with the animated board behind it */ .home-card{position:relative;overflow:hidden;padding:clamp(20px,3vw,40px)} .home-card .board{bottom:auto;height:min(100%,360px)} .home-card .prose{position:relative;z-index:1} /* Footer: the original single line from the 0x8 theme */ .site-footer-line{margin-top:auto;border-top:1px solid var(--color-line);background:var(--color-bench)} .footer-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;padding:14px 0;margin:0;font-size:13px;line-height:1.5;color:var(--color-muted);text-align:center} .footer-badges{display:inline-flex;align-items:center;gap:6px} .footer-badges img{display:block;width:80px;height:15px;image-rendering:pixelated} /* Single post footer: tags | share on one row (author box removed) */ .post-footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px} .post-footer-row .tags,.post-footer-row .share{margin:0} .post-footer-sep{color:var(--color-line-2);font-size:20px;line-height:1} /* Bootstrap button classes used in imported content (old 0x8 theme), mapped to CG-O button styles */ .prose a.btn,.prose a.btn:hover{text-decoration:none} .btn-primary,.prose a.btn-primary{background:var(--color-signal);color:#0b0e13;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--color-signal) 70%,transparent)} .btn-primary:hover,.prose a.btn-primary:hover{background:color-mix(in oklab,var(--color-signal),#0b0e13 12%);color:#0b0e13;transform:translateY(-1px)} .btn-success,.prose a.btn-success{background:var(--btn-ink-bg);color:var(--btn-ink-fg)} .btn-success:hover,.prose a.btn-success:hover{background:var(--btn-ink-hover);color:var(--btn-ink-fg);transform:translateY(-1px)} .btn-lg,.btn-square-lg{padding:1rem 1.7rem;font-size:16px;border-radius:12px} .prose .btn{margin:.25rem .35rem .25rem 0;vertical-align:middle} /* Latest Posts block: corner brackets on thumbnails */ .lp-frame{position:relative;overflow:hidden;border:1px solid var(--color-line);border-radius:10px;line-height:0} .lp-frame img{display:block;border-radius:0;transition:transform .5s cubic-bezier(0,0,.2,1)} .lp-frame .corner{--in:6px;width:11px;height:11px;border-color:var(--color-chalk)} .lp-item:is(:hover,:focus-within) .lp-frame .corner{--in:10px;opacity:1;border-color:var(--color-signal)} .lp-item:hover .lp-frame img{transform:scale(1.04)} /* Tag cloud block: theme colours (overrides the nullx8 plugin's black tags) */ .prose .wp-block-tag-cloud{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline} .prose .wp-block-tag-cloud a{margin:0;padding:2px 9px;border:1px solid var(--color-line-2);border-radius:6px;background:var(--color-card);color:var(--color-ink-2);text-decoration:none;line-height:1.5;transition:border-color .16s,color .16s,transform .16s} .prose .wp-block-tag-cloud a:hover{border-color:var(--color-signal);color:var(--color-ink);transform:translateY(-1px)} /* Post header meta: date (updated as tooltip) · reading time · tags; bar appears after the header */ .post-meta abbr[data-title]{cursor:help;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:var(--color-line-2)} .post-meta .meta-tags{display:inline-flex;flex-wrap:wrap;gap:6px} .post-meta .meta-tags .chip{padding:3px 9px;font-size:12px} .readbar{margin-bottom:-49px;transition:opacity .25s,transform .25s} .readbar.is-concealed{opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden} /* Titles use the full header width (featured image sits behind, no column to avoid) */ .post-hero .post-title,.post-hero .post-title.is-long{max-width:none;text-wrap:pretty} /* data-title tooltips (abbr/a): left-anchored and wrapping so containers with overflow:hidden never clip them; overrides the nullx8 plugin tooltip */ body :is(a,abbr)[data-title]{position:relative;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:var(--color-muted);cursor:help} body a[data-title]{cursor:pointer} body :is(a,abbr)[data-title]:is(:hover,:focus)::after{content:attr(data-title);position:absolute;left:0;top:auto;bottom:calc(100% + 8px);transform:none;z-index:40;width:max-content;max-width:min(360px,80vw);white-space:normal;padding:5px 10px;border:0;border-radius:6px;background:var(--color-secondary,#f39a32);color:#0b0e13;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--color-secondary,#f39a32) 70%,transparent),0 2px 6px #0000004d;font-size:14px;font-weight:500;font-style:normal;line-height:1.45;letter-spacing:0;text-transform:none;text-align:left;pointer-events:none} /* Blog archive: 2 per row (col-12 col-md-6), horizontal cards like the old theme when there is room */ .post-grid.cols-2{grid-template-columns:minmax(0,1fr)} @media (min-width:768px){.post-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}} .post-grid.cols-2>li{container-type:inline-size} .post-grid.cols-2 .post-row{width:100%;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start} .post-grid.cols-2 .post-row .post-card-body{padding:12px 8px 8px;gap:12px} @container (min-width:520px){ .post-grid.cols-2 .post-row{grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:18px} .post-grid.cols-2 .post-row .post-card-body{padding:8px 10px 8px 0} } .post-row .post-card-excerpt{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .post-row-meta{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:13px;color:var(--color-muted)} .post-row-meta .dot{width:3px;height:3px;border-radius:999px;background:var(--color-line-2)} .post-row-tags{gap:6px} .post-row-tags .chip{padding:3px 9px;font-size:12px} .post-row:hover .post-card-title a{color:var(--color-signal-deep)} .post-row-meta{flex-wrap:wrap;gap:6px 10px;white-space:nowrap} .post-row-meta .post-row-tags{display:inline-flex;flex-wrap:wrap} .post-row .post-card-excerpt{-webkit-line-clamp:3} /* Archive: the head wrapper also holds the post list, so keep the board in the top-right header area */ div.page-head-wrap>.board{bottom:auto;height:360px;-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 80%),linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent 35%,#000 80%),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect} /* Centered pagination */ .pagination .nav-links{justify-content:center} /* Side menu widget area (status block from the old theme) */ .side-extras{padding:20px 12px 0;display:flex;flex-direction:column;gap:12px} .side-widget-title{display:block;padding:0 14px 6px;color:var(--color-muted)} .side-extras ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .side-extras li{padding:7px 14px;border-radius:10px;font-size:13px;line-height:1.45;color:var(--color-ink-2);transition:background-color .15s} .side-extras li:hover{background:var(--color-bench)} .side-extras li small{font-size:inherit} .side-extras li small small{font-size:.92em} .side-extras a{color:inherit;text-decoration:none} .side-extras a:hover{color:var(--color-ink)} .side-extras img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--color-line)} .side-extras abbr[data-title]{display:block;text-decoration:none} body .side-extras abbr[data-title]:is(:hover,:focus)::after{max-width:220px} /* Side menu: sub entries only open under the current section */ .side-nav .menu-item-has-children>.sub-menu{display:none} .side-nav :is(.current-menu-item,.current-menu-ancestor,.current-menu-parent,.current_page_item,.current_page_ancestor,.current_page_parent).menu-item-has-children>.sub-menu{display:flex} /* Live status card (side menu widget) in the old "Now building" panel */ .side-live{overflow:visible} .side-live ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .side-live li{padding:11px 14px;font-size:13px;line-height:1.45;color:var(--color-ink-2);border-top:1px solid var(--color-line)} .side-live li:first-child{border-top:0} .side-live li small{font-size:inherit} .side-live a{display:block;color:inherit;text-decoration:none} .side-live .side-panel a:hover,.side-live a:hover{background:none;color:var(--color-ink)} .side-live abbr[data-title]{display:block;text-decoration:none} .side-live li:has(img){padding:0} .side-live img{display:block;width:100%;height:auto;border-radius:0 0 15px 15px} .side-live li:has(img):first-child img{border-radius:15px} .side-widget-title{display:block;padding:10px 14px 0;color:var(--color-muted)} body .side-live abbr[data-title]:is(:hover,:focus)::after{max-width:200px} .side-live font[color="green"]{color:var(--color-led)} .side-live font[color="red"]{color:#ff5a5f} /* Tighter side footer so the trade status fits on one line */ .side-foot{padding-left:8px;padding-right:8px} .side-live li{padding:10px 10px;font-size:12.5px} /* Code blocks: a that stands on its own (not inside a sentence) or spans lines renders as a terminal window */ .prose code:is(:has(br),:not(:is(p,li,td,th,h1,h2,h3,h4,h5,h6,a,pre,span,strong,em,small,label,dt,dd,figcaption,summary) code)){display:block;position:relative;margin:1.4em 0;padding:42px 20px 18px;overflow-x:auto;border:1px solid var(--color-line-2);border-radius:12px;background:var(--color-studio);color:var(--color-chalk);font-size:13.5px;line-height:1.75;white-space:normal;box-shadow:0 18px 40px -24px #000000b3} .prose code:is(:has(br),:not(:is(p,li,td,th,h1,h2,h3,h4,h5,h6,a,pre,span,strong,em,small,label,dt,dd,figcaption,summary) code))::before{content:"";position:absolute;left:0;right:0;top:0;height:28px;border-bottom:1px solid #ffffff14;background:radial-gradient(circle,#ff5f57 4px,transparent 4.5px) 14px 50%/12px 12px no-repeat,radial-gradient(circle,#febc2e 4px,transparent 4.5px) 32px 50%/12px 12px no-repeat,radial-gradient(circle,#28c840 4px,transparent 4.5px) 50px 50%/12px 12px no-repeat,#ffffff08;border-radius:11px 11px 0 0} .prose code:has(br) em,.prose code:has(br) i{font-style:normal;color:var(--color-secondary,#f39a32)} .prose code:has(br) strong,.prose code:has(br) b{font-weight:500;color:var(--color-chalk)} .prose code:has(br) small{font-size:1em} .prose code:has(br) a{color:#8ccff5} /* Logo: swap to the dark variant in dark mode */ .brand-mark .logo-dark{display:none} :root[data-theme="dark"] .brand-mark .logo-dark{display:block} :root[data-theme="dark"] .brand-mark [data-logo-light]{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme-lock="light"]) .brand-mark .logo-dark{display:block} :root:not([data-theme="light"]):not([data-theme-lock="light"]) .brand-mark [data-logo-light]{display:none} } /* Latest Posts block on content pages: one compact split card per row */ .post-grid.post-stack{grid-template-columns:minmax(0,1fr)!important;gap:12px;margin:1.2em 0;padding:0;list-style:none} .prose .post-stack>li{margin:0;padding:0} .prose .post-stack>li::before{content:none} .post-stack .post-row{padding:8px} .post-stack .post-card-body{gap:8px} .post-stack .post-card-title{font-size:18px;margin:0} .post-stack .post-card-excerpt{-webkit-line-clamp:2;margin:0} .prose .post-stack a{text-decoration:none} .prose .post-stack .post-card-title a{color:var(--color-ink)} .prose .post-stack .post-row-meta{margin:0} .prose .post-stack .post-card-body>*{margin:0} .prose .post-stack .post-card-title{font-family:"caracas",var(--font-archivo),ui-sans-serif,sans-serif;font-weight:normal;font-size:18px;line-height:1.25;letter-spacing:0} /* Latest Posts cards: fixed 220x149 image box, image keeps its ratio, overflow cropped on the left */ .post-stack .post-row .frame{aspect-ratio:auto;width:220px;height:149px;max-width:100%} .post-stack .post-row .frame>img,.post-stack .post-row .frame .frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center} @container (min-width:520px){.post-grid.cols-2.post-stack .post-row{grid-template-columns:220px minmax(0,1fr);align-items:center;gap:16px}.post-grid.cols-2.post-stack .post-row .post-card-body{padding:4px 8px 4px 0}} .footer-line .footer-name{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}.footer-line .footer-name:hover{color:var(--color-ink)} /* Archive/tag header: intro text uses 75% of the width (10 of 12 columns would be 83%) */ .page-head .page-intro,.page-head .page-title{max-width:75%} @media (max-width:767px){.page-head .page-intro,.page-head .page-title{max-width:none}} /* Floated content images: lift them above list items (li are position:relative), so links/lightbox on the image stay clickable */ .prose .alignleft,.prose .alignright,.prose .aligncenter{position:relative;z-index:1!important} /* Keep content z-index tricks (e.g. inline z-index:-1 on images) inside the content layer instead of behind the section background */ .prose{isolation:isolate} /* Galleries in the full-width content: 4 columns on wide screens (core default is 3) */ @media (min-width:1024px){.prose .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image){width:calc(25% - 9px)}} .prose .wp-block-gallery.has-nested-images{justify-content:center} /* Responsive Lightbox "Basic Grid" galleries: even 4:3 tiles (a gallery's own "Force height" setting still wins) */ .prose .rl-basicgrid-gallery .rl-gallery-item a{display:block;overflow:hidden;border-radius:10px} .prose .rl-basicgrid-gallery .rl-gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;transition:transform .4s} .prose .rl-basicgrid-gallery .rl-gallery-item a:hover img{transform:scale(1.03)} /* Cards in content (Bootstrap-style markup: .card > .card-header / .card-body / img) */ .prose .card{overflow:hidden;margin:0 0 16px} .prose .card-header{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--color-line);background:var(--color-bench-2);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-ink-2)} .prose .card-body{padding:16px} .prose .card>img,.prose .card>a>img,.prose .card .card-img,.prose .card .card-img-top{display:block;width:100%;height:auto;border-radius:0;margin:0} .prose .card .card-header+.card-header,.prose .card img+.card-header,.prose .card a+.card-header{border-top:1px solid var(--color-line)} /* No extra space above the first element of content (e.g. a page that starts with a heading) */ .prose>:first-child{margin-top:0} /* Classic-editor content: images flow inline (side by side, centred by text-align) like in the editor; centred images stay blocks. :where() keeps this weaker than any gallery/card/frame image rule. */ .prose :where(img){display:inline-block;vertical-align:middle} .prose :where(img.aligncenter){display:block} /* Bootstrap-style alerts (content and tag/category descriptions): tinted box with an accent bar */ .alert{--a:var(--color-signal);display:flow-root;position:relative;margin:0 0 1.2em;padding:14px 18px 14px 20px;border:1px solid color-mix(in srgb,var(--a) 45%,transparent);border-radius:12px;background:color-mix(in srgb,var(--a) 12%,var(--color-card));color:var(--color-ink);font-size:15px;line-height:1.6} .alert::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:0 999px 999px 0;background:var(--a)} .alert>:first-child{margin-top:0}.alert>:last-child{margin-bottom:0} .alert :is(h1,h2,h3,h4,h5,h6){margin:0 0 .4em;color:var(--color-ink);font-size:1.05em;line-height:1.35} .alert a:not(.btn){color:inherit;text-decoration:underline;text-decoration-color:var(--a);text-underline-offset:3px} .alert-primary{--a:var(--color-signal)} .alert-info{--a:#3db8e0} .alert-success{--a:#35c46a} .alert-warning{--a:var(--color-secondary,#f39a32)} .alert-danger{--a:#ff5a5f} .alert-secondary,.alert-light,.alert-dark{--a:var(--color-muted)} /* Contact Form 7 (theme markup: .cf-head / .cf-grid / .cf-field / .cf-foot) */ .wpcf7{margin-top:4px} .wpcf7 form{padding:clamp(18px,3vw,32px);border:1px solid var(--color-line);border-radius:16px;background:var(--color-card)} .wpcf7 p{margin:0} .wpcf7 .cf-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--color-line);font-size:14px;color:var(--color-muted)} .wpcf7 .cf-alt{display:flex;align-items:center;gap:6px} .wpcf7 .cf-alt>span{margin-right:6px;white-space:nowrap;font-size:12px;letter-spacing:.08em;text-transform:uppercase} .wpcf7 .cf-ico{display:inline-flex;width:36px;height:36px;border:1px solid var(--color-line-2);border-radius:10px;background:var(--color-bench);transition:border-color .16s,background-color .16s} .wpcf7 .cf-ico::before{content:"";margin:auto;width:17px;height:17px;background:var(--color-ink-2);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;transition:background-color .16s} .wpcf7 .cf-ico:hover{border-color:var(--color-signal)} .wpcf7 .cf-ico:hover::before{background:var(--color-signal)} .wpcf7 .cf-req{color:#ff5a5f} .wpcf7 .cf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 20px} @media (min-width:768px){.wpcf7 .cf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wpcf7 .cf-full{grid-column:1/-1}} .wpcf7 .cf-field{display:flex;flex-direction:column;gap:8px;min-width:0} .wpcf7 .cf-field br{display:none} .wpcf7 .cf-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-ink-2)} .wpcf7 .cf-hint{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--color-muted)} .wpcf7 .cf-hint b{color:var(--color-led)} .wpcf7-form-control-wrap{display:block} .wpcf7 .wpcf7-radio{display:flex;flex-wrap:wrap;gap:8px} .wpcf7 .wpcf7-radio .wpcf7-list-item{margin:0} .wpcf7 .wpcf7-radio label{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 14px;border:1px solid var(--color-line-2);border-radius:10px;background:var(--color-bench);font-size:14px;cursor:pointer;transition:border-color .16s} .wpcf7 .wpcf7-radio label:hover{border-color:var(--color-muted)} .wpcf7 .wpcf7-radio label:has(input:checked){border-color:var(--color-signal);color:var(--color-ink)} .wpcf7 input[type="file"]{width:100%;height:auto;padding:8px;border:1px dashed var(--color-line-2);border-radius:10px;background:var(--color-bench);font-size:14px;color:var(--color-muted)} .wpcf7 input[type="file"]::file-selector-button{margin-right:12px;height:34px;padding:0 14px;border:0;border-radius:8px;background:var(--btn-ink-bg);color:var(--btn-ink-fg);font:inherit;font-weight:600;cursor:pointer} .wpcf7 .cf-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-top:4px;padding-top:18px;border-top:1px solid var(--color-line)} .wpcf7 .cf-check{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px;color:var(--color-ink-2)} .wpcf7 .cf-check .wpcf7-form-control-wrap{display:inline-block} .wpcf7 .cf-check .wpcf7-list-item{margin:0} .wpcf7 .cf-check label{display:inline-flex;align-items:center;gap:8px} .wpcf7 .wpcf7-quiz-label{margin-left:4px;font-weight:600;color:var(--color-ink)} .wpcf7 input.wpcf7-quiz{width:84px;height:40px;margin-left:8px;padding:0 10px;text-align:center} .wpcf7 .wpcf7-submit{min-width:200px;justify-content:center} @media (max-width:639px){.wpcf7 .wpcf7-submit{width:100%}} .wpcf7 .wpcf7-submit:disabled{opacity:.45;cursor:not-allowed;transform:none} .wpcf7 .wpcf7-spinner{margin:0 0 0 10px} .wpcf7 .wpcf7-not-valid-tip{margin-top:6px;font-size:13px;color:#ff5a5f} .wpcf7 .wpcf7-not-valid{border-color:#ff5a5f} .wpcf7 form .wpcf7-response-output{margin:18px 0 0;padding:12px 16px;border:1px solid var(--color-line-2);border-radius:10px;font-size:14px} .wpcf7 form.sent .wpcf7-response-output{border-color:#35c46a;background:color-mix(in srgb,#35c46a 12%,var(--color-card))} .wpcf7 form:is(.invalid,.unaccepted,.payment-required) .wpcf7-response-output{border-color:var(--color-secondary,#f39a32);background:color-mix(in srgb,var(--color-secondary,#f39a32) 12%,var(--color-card))} .wpcf7 form:is(.failed,.aborted,.spam) .wpcf7-response-output{border-color:#ff5a5f;background:color-mix(in srgb,#ff5a5f 12%,var(--color-card))} /* Icons: Font Awesome Free 6 (CC BY 4.0, https://fontawesome.com/license/free), embedded as SVG masks */ .wpcf7 .cf-ico-mail{--ico:url("data:image/svg+xml,")} .wpcf7 .cf-ico-linkedin{--ico:url("data:image/svg+xml,")} .wpcf7 .cf-ico-discord{--ico:url("data:image/svg+xml,")} .wpcf7 .cf-ico-mastodon{--ico:url("data:image/svg+xml,")} /* Terminal title: shows the text in the window bar next to the three dots */ .prose code:is(:has(br),:not(:is(p,li,td,th,h1,h2,h3,h4,h5,h6,a,pre,span,strong,em,small,label,dt,dd,figcaption,summary) code))::before{content:attr(data-label);box-sizing:border-box;padding:0 16px 0 72px;font:500 12px/28px var(--font-mono);letter-spacing:.02em;color:#ffffff8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}