/* Theme Name: Type Library Theme URI: Author: Maxdiamond Author URI: https://maxdiamondhead.com Description: Typography based minimal layout. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: type-library /* ========================================================================== TYPE LIBRARY: MASTER STYLESHEET TABLE OF CONTENTS: I. BASE & SETUP 01. Astro / Tailwind Compiled Defaults 02. Tailwind Compiler Fallbacks II. GLOBAL TYPOGRAPHY & CONTENT 03. Base Typography & Headings 04. Article & Case Study Spacing 05. Inline Text Links & Captions 06. Excerpt Typography 07. Global Date Removal III. LAYOUT & ARCHITECTURE 08. Bulletproof Layouts 09. Architectural Blueprint Animations 10. Native View Transitions 11. Global Page Progress Bar IV. HEADER, NAVIGATION & SEARCH 12. Navigation & Active States 13. Expanding SVG Header Search 14. Theme Toggle Icon Logic 15. Theme Menu Control V. UI COMPONENTS & BLOCKS 16. Minimal Buttons 17. Forms & Inputs 18. Brutalist Info / Alert Blocks 19. Brutalist Project Metadata Grid 20. Brutalist Blockquotes & Tables 21. Brutalist Lists & Code Blocks 22. Brutalist Separator Lines 23. Mac OS Dock Tooltips VI. MEDIA & GALLERIES 24. Brutalist Media (Single Images, Videos, Embeds) 25. Brutalist Gallery Hover Effects 26. Brutalist Gallery Instructional Text 27. Brutalist Vanilla Lightbox 28. Audio Players (Cue & Native) 29. Dynamic Hero Images VII. ARCHIVES, CARDS & SIDEBAR 30. Custom Sidebar Portfolio Grid 31. Media Cards & Hover States 32. Templates, Archives & Pagination 33. Custom UI / View All Utilities VIII. GLOBAL DARK MODE OVERRIDES 34. Tailwind Card Protectors & WordPress Fixes ========================================================================== */ /* ========================================================================== GLOBAL VIEWPORT LOCK (IOS SAFARI SAFE) ========================================================================== */ html { max-width: 100vw !important; -webkit-font-smoothing: antialiased; /* CRITICAL: No overflow rules here, or Safari's address bar breaks */ } body { max-width: 100vw !important; overflow-x: clip !important; /* 'clip' safely cuts off horizontal blowout without killing native scroll UI */ } /* Forces all media and code blocks to safely stay inside the grid */ img, video, iframe, canvas, svg { max-width: 100% !important; height: auto; } pre, code { white-space: pre-wrap !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* Forces long URLs or unbreakable words in headings/paragraphs to wrap */ h1, h2, h3, h4, h5, h6, p, a, li { overflow-wrap: break-word !important; word-break: break-word !important; } /* ========================================================================== I. BASE & SETUP ========================================================================== */ /* --- 01. Astro / Tailwind Compiled Defaults --- */ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--color-border-primary)}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}@font-face{font-family:"Instrument Serif";src:url('./fonts/InstrumentSerif-Regular.woff2') format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Instrument Serif";src:url('./fonts/InstrumentSerif-Italic.woff2') format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Instrument Sans;src:url('./fonts/InstrumentSans-VariableFont_wdth,wght.woff2') format("woff2");font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:Instrument Sans;src:url('./fonts/InstrumentSans-Italic-VariableFont_wdth,wght.woff2') format("woff2");font-weight:400 700;font-style:italic;font-display:swap}@font-face{font-family:JetBrains Mono;src:url('./fonts/JetBrainsMono-VariableFont_wght.woff2') format("woff2");font-weight:100 800;font-style:normal;font-display:swap}@font-face{font-family:Adjusted Georgia Fallback;src:local(Georgia);size-adjust:75%;ascent-override:normal;descent-override:normal;line-gap-override:60%}:root{color:var(--color-text-primary);background-color:var(--color-bg-primary);scroll-behavior:smooth;--grid-display-size: calc((100vw - 3rem - 1px) / 24);--fade-size: 24px;--color-bg-primary: #f7f5f2;--color-bg-highlight: #fff;--color-bg-secondary: #e2dfdb;--color-bg-highlight-invert: #1f1d1d;--color-text-primary: #4a4846;--color-text-secondary: #726f6d;--color-text-highlight: #1f1d1d;--color-text-highlight-invert: #f7f5f2;--color-text-decoration: #5f5d5b;--color-border-primary: #ccc9c5;--color-border-highlight: #1f1d1d;--color-gradient-highlight-1: #8b8885;--color-gradient-highlight-2: #343232;--color-gradient-background: #eceae6}@media (prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-bg-primary: #343232;--color-bg-highlight: #1f1d1d;--color-bg-secondary: #4a4846;--color-bg-highlight-invert: #fff;--color-text-primary: #ccc9c5;--color-text-highlight: #e2dfdb;--color-text-highlight-invert: #1f1d1d;--color-text-secondary: #a09d9a;--color-text-decoration: #b6b3af;--color-border-primary: #8b8885;--color-border-highlight: #f7f5f2;--color-gradient-highlight-1: #a09d9a;--color-gradient-highlight-2: #ccc9c5;--color-gradient-background: #292827}}:root[class~=dark]{--color-bg-primary: #343232;--color-bg-highlight: #1f1d1d;--color-bg-secondary: #4a4846;--color-bg-highlight-invert: #fff;--color-text-primary: #ccc9c5;--color-text-highlight: #e2dfdb;--color-text-highlight-invert: #1f1d1d;--color-text-secondary: #a09d9a;--color-text-decoration: #8b8885;--color-border-primary: #8b8885;--color-border-highlight: #f7f5f2;--color-gradient-highlight-1: #a09d9a;--color-gradient-highlight-2: #ccc9c5;--color-gradient-background: #292827}@media (min-width: 768px){:root{--fade-size: 48px;--grid-display-size: calc((100vw - 6rem - 1px) / 24)}}@media (min-width: 1024px){:root{--fade-size: 72px;--grid-display-size: calc((100vw - 9rem - 1px) / 36)}}@media (min-width: 1680px){:root{--grid-display-size: calc(1534px / 36)}}@view-transition{navigation: auto;}button:hover{cursor:auto}kbd{display:flex;justify-content:center;border-radius:.125rem;border-width:1px;border-color:var(--color-border-primary);background-color:var(--color-bg-primary);font-size:clamp(.7901rem,.7758rem + .0714vw,.833rem);line-height:.875rem;color:var(--color-text-secondary);box-shadow:0 1px 0 0 var(--color-border-primary)}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.body-text *+*{margin-top:var(--space, 1.5rem)}.body-text--tight{--space: .25rem}@media (min-width: 1024px){.body-text--constrain-width>:not(.astro-code){max-width:calc(77.77778% - .777778 * 1rem)}}@media (min-width: 1280px){.body-text--constrain-width>:not(.astro-code){max-width:calc(66.66667% - .6666667 * 1rem)}}.body-text a{text-decoration-line:underline;text-decoration-color:var(--color-text-decoration);text-underline-offset:2px;text-decoration-thickness:.07em}.body-text h2{--space: 3.5rem;scroll-margin-top:1rem;font-size:clamp(1.125rem,.9896rem + .6771vw,1.5313rem);line-height:1.33;text-transform:uppercase;letter-spacing:.025em;font-variation-settings:"wdth" 83}.body-text h3{--space: 2.5rem;scroll-margin-top:1rem;font-family:Instrument Serif,Adjusted Georgia Fallback,ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;font-size:clamp(1.125rem,.9896rem + .6771vw,1.5313rem);line-height:1.33;color:var(--color-text-secondary)}.body-text h2+h3{--space: 1.25rem}.body-text h4{scroll-margin-top:1rem;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-size:clamp(1rem,.9167rem + .4167vw,1.25rem);font-weight:500}.body-text figcaption{--space: .5rem;font-size:clamp(.8889rem,.845rem + .2192vw,1.0204rem);color:var(--color-text-secondary)}.body-text ul{list-style-type:disc;padding-left:1.5rem}.body-text ol{list-style-type:decimal;padding-left:1.5rem}.body-text li{--space: .75rem}.body-text strong{font-weight:590;letter-spacing:.01em}.body-text code{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.92em;font-weight:300;font-variant-ligatures:none}.body-text kbd{display:inline;font-size:.92em;font-weight:300;padding:.1em .4em}.body-text [data-footnote-ref]{border-radius:.25rem;background-color:transparent;padding-left:.25rem;padding-right:.25rem;text-decoration-line:none;transition-duration:.2s}.body-text [data-footnote-ref]:hover{background-color:var(--color-bg-secondary)}.footnotes{margin-bottom:1rem;display:block;border-top-width:1px;border-color:var(--color-border-primary);font-size:clamp(.8889rem,.845rem + .2192vw,1.0204rem);color:var(--color-text-secondary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-right-2{right:-.5rem}.-top-1{top:-.25rem}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:.5rem}.left-\[calc\(var\(--grid-display-size\)\*2\)\]{left:calc(var(--grid-display-size) * 2)}.left-\[calc\(var\(--grid-display-size\)\*4\)\]{left:calc(var(--grid-display-size) * 4)}.right-2{right:.5rem}.right-\[calc\(var\(--grid-display-size\)\*3\)\]{right:calc(var(--grid-display-size) * 3)}.right-\[var\(--grid-display-size\)\]{right:var(--grid-display-size)}.top-0{top:0}.top-0\.5{top:.125rem}.top-1{top:.25rem}.top-1\/2{top:50%}.top-\[calc\(var\(--grid-display-size\)\*3\)\]{top:calc(var(--grid-display-size) * 3)}.top-\[calc\(var\(--grid-display-size\)\*4\.5\)\]{top:calc(var(--grid-display-size) * 4.5)}.top-\[calc\(var\(--grid-display-size\)\*8\)\]{top:calc(var(--grid-display-size) * 8)}.top-\[var\(--grid-display-size\)\]{top:var(--grid-display-size)}.z-10{z-index:10}.z-20{z-index:20}.col-span-12{grid-column:span 12 / span 12}.col-span-4{grid-column:span 4 / span 4}.col-span-8{grid-column:span 8 / span 8}.col-span-full{grid-column:1 / -1}.row-span-full{grid-row:1 / -1}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.mx-auto{margin-left:auto;margin-right:auto}.-ml-1{margin-left:-.25rem}.-mr-2{margin-right:-.5rem}.mb-1{margin-bottom:.25rem}.mb-3{margin-bottom:.75rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-4\/3{aspect-ratio:4 / 3}.aspect-\[4\/3\]{aspect-ratio:4/3}.size-4{width:1rem;height:1rem}.size-6{width:1.5rem;height:1.5rem}.h-4{height:1rem}.h-72{height:18rem}.h-\[0\.9em\]{height:.9em}.h-\[1em\]{height:1em}.h-\[calc\(var\(--grid-display-size\)\*4\)\]{height:calc(var(--grid-display-size) * 4)}.h-\[calc\(var\(--grid-display-size\)\*8\)\]{height:calc(var(--grid-display-size) * 8)}.h-auto{height:auto}.h-full{height:100%}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.min-h-\[60vh\]{min-height:60vh}.min-h-\[calc\(var\(--grid-display-size\)\*12\)\]{min-height:calc(var(--grid-display-size) * 12)}.w-1\/2{width:50%}.w-4{width:1rem}.w-\[0\.9em\]{width:.9em}.w-\[1em\]{width:1em}.w-auto{width:auto}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.min-w-4{min-width:1rem}.max-w-full{max-width:100%}.max-w-screen-2xl{max-width:1536px}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.resize{resize:both}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-subgrid{grid-template-columns:subgrid}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.gap-px{gap:1px}.gap-x-px{-moz-column-gap:1px;column-gap:1px}.gap-y-px{row-gap:1px}.overflow-y-auto{overflow-y:auto}.text-pretty{text-wrap:pretty}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.border{border-width:1px}.border-dotted{border-style:dotted}.border-border-highlight{border-color:var(--color-border-highlight)}.border-border-primary{border-color:var(--color-border-primary)}.border-grey-9\.5{--tw-border-opacity: 1;border-color:rgb(41 40 39 / var(--tw-border-opacity, 1))}.bg-background-highlight{background-color:var(--color-bg-highlight)}.bg-background-primary{background-color:var(--color-bg-primary)}.bg-border-primary{background-color:var(--color-border-primary)}.bg-grey-0{--tw-bg-opacity: 1;background-color:rgb(247 245 242 / var(--tw-bg-opacity, 1))}.bg-grey-0\.5{--tw-bg-opacity: 1;background-color:rgb(236 234 230 / var(--tw-bg-opacity, 1))}.bg-grey-10{--tw-bg-opacity: 1;background-color:rgb(31 29 29 / var(--tw-bg-opacity, 1))}.bg-grey-9{--tw-bg-opacity: 1;background-color:rgb(52 50 50 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.object-contain{-o-object-fit:contain;object-fit:contain}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-\[var\(--grid-display-size\)\]{padding:var(--grid-display-size)}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-\[1px\]{padding-left:1px;padding-right:1px}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-\[calc\(var\(--grid-display-size\)\*1\.5\)\]{padding-top:calc(var(--grid-display-size) * 1.5);padding-bottom:calc(var(--grid-display-size) * 1.5)}.pb-2{padding-bottom:.5rem}.pb-8{padding-bottom:2rem}.pb-\[calc\(var\(--grid-display-size\)\*2\)\]{padding-bottom:calc(var(--grid-display-size) * 2)}.pb-\[var\(--grid-display-size\)\]{padding-bottom:var(--grid-display-size)}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-4{padding-left:1rem}.pl-\[var\(--grid-display-size\)\]{padding-left:var(--grid-display-size)}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pr-6{padding-right:1.5rem}.pt-0{padding-top:0}.pt-\[calc\(var\(--grid-display-size\)\*0\.5\)\]{padding-top:calc(var(--grid-display-size) * .5)}.pt-\[calc\(var\(--grid-display-size\)\*1\.3333\)\]{padding-top:calc(var(--grid-display-size) * 1.3333)}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.font-serif{font-family:Instrument Serif,Adjusted Georgia Fallback,ui-serif,Georgia,Cambria,"Times New Roman",Times,serif}.text-2xl{font-size:clamp(1.4238rem,1.1325rem + 1.4567vw,2.2978rem);line-height:1.125}.text-\[calc\(var\(--grid-display-size\)\*2\)\]{font-size:calc(var(--grid-display-size) * 2)}.text-\[calc\(var\(--grid-display-size\)\*3\)\]{font-size:calc(var(--grid-display-size) * 3)}.text-base{font-size:clamp(1rem,.9167rem + .4167vw,1.25rem)}.text-lg{font-size:clamp(1.125rem,.9896rem + .6771vw,1.5313rem);line-height:1.33}.text-sm{font-size:clamp(.8889rem,.845rem + .2192vw,1.0204rem)}.text-xs{font-size:clamp(.7901rem,.7758rem + .0714vw,.833rem)}.font-\[550\]{font-weight:550}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-\[calc\(var\(--grid-display-size\)\*2\)\]{line-height:calc(var(--grid-display-size) * 2)}.leading-\[calc\(var\(--grid-display-size\)\*3\)\]{line-height:calc(var(--grid-display-size) * 3)}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-\[-0\.004em\]{letter-spacing:-.004em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-grey-2{--tw-text-opacity: 1;color:rgb(204 201 197 / var(--tw-text-opacity, 1))}.text-grey-7{--tw-text-opacity: 1;color:rgb(95 93 91 / var(--tw-text-opacity, 1))}.text-red{--tw-text-opacity: 1;color:rgb(217 81 81 / var(--tw-text-opacity, 1))}.text-text-highlight{color:var(--color-text-highlight)}.text-text-secondary{color:var(--color-text-secondary)}.underline{text-decoration-line:underline}.decoration-inherit{text-decoration-color:inherit}.decoration-text-decoration{text-decoration-color:var(--color-text-decoration)}.decoration-\[0\.07em\]{text-decoration-thickness:.07em}.underline-offset-2{text-underline-offset:2px}.underline-offset-\[0\.15em\]{text-underline-offset:.15em}.shadow-border{--tw-shadow: 0 0 0 1px var(--color-border-primary);--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.variable-font-wdth-83{font-variation-settings:"wdth" 83}.variable-font-wdth-90{font-variation-settings:"wdth" 90}[class*=border-fade]{position:relative}.border-fade-l:before{content:"";position:absolute;top:-1px;right:100%;display:block;width:var(--fade-size);height:calc(100% + 2px);-o-border-image:linear-gradient(to left,var(--color-border-primary) 30%,rgba(0,0,0,0) 100%) 1 100%;border-image:linear-gradient(to left,var(--color-border-primary) 30%,rgba(0,0,0,0) 100%) 1 100%;border-image-slice:1;border-top-width:1px;border-bottom-width:1px;pointer-events:none}.border-fade-r:after{content:"";position:absolute;top:-1px;left:100%;display:block;width:var(--fade-size);height:calc(100% + 2px);-o-border-image:linear-gradient(to right,var(--color-border-primary) 30%,rgba(0,0,0,0) 100%) 1 100%;border-image:linear-gradient(to right,var(--color-border-primary) 30%,rgba(0,0,0,0) 100%) 1 100%;border-image-slice:1;border-top-width:1px;border-bottom-width:1px;pointer-events:none}.squared-bg{background-color:var(--color-bg-primary);background-image:linear-gradient(to bottom,var(--color-bg-primary) 0,rgba(255,255,255,0) calc(var(--grid-display-size) * 3),rgba(255,255,255,0) calc(100% - var(--grid-display-size)),var(--color-bg-primary) 100%),linear-gradient(to right,var(--color-bg-primary) 0,rgba(255,255,255,0) calc(var(--grid-display-size) * 2),rgba(255,255,255,0) calc(100% - var(--grid-display-size)),var(--color-bg-primary) 100%),linear-gradient(105deg,var(--color-bg-primary),rgba(255,255,255,0)),linear-gradient(var(--color-border-primary) 1px,transparent 1px),linear-gradient(to right,var(--color-border-primary) 1px,var(--color-bg-primary) 1px);background-size:100% 100%,100% 100%,100% 100%,var(--grid-display-size) var(--grid-display-size),var(--grid-display-size) var(--grid-display-size);background-position:top left}.astro-code{padding:1rem;margin-inline:-1rem}:root[class~=dark] .astro-code,:root[class~=dark] .astro-code span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration)!important;text-decoration:var(--shiki-dark-text-decoration)!important}.data-footnote-backref{margin-top:0;display:inline-flex;width:1lh;align-items:center;justify-content:center;border-radius:.25rem;background-color:transparent;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;transition-duration:.2s}.data-footnote-backref:hover{background-color:var(--color-bg-secondary)}.data-footnote-backref{text-decoration:none!important}.hover\:rounded-xl:hover{border-radius:.75rem}.hover\:bg-background-highlight-invert:hover{background-color:var(--color-bg-highlight-invert)}.hover\:bg-background-secondary:hover{background-color:var(--color-bg-secondary)}.hover\:bg-grey-0\.5:hover{--tw-bg-opacity: 1;background-color:rgb(236 234 230 / var(--tw-bg-opacity, 1))}.hover\:bg-grey-8:hover{--tw-bg-opacity: 1;background-color:rgb(74 72 70 / var(--tw-bg-opacity, 1))}.hover\:text-grey-1:hover{--tw-text-opacity: 1;color:rgb(226 223 219 / var(--tw-text-opacity, 1))}.hover\:text-grey-8:hover{--tw-text-opacity: 1;color:rgb(74 72 70 / var(--tw-text-opacity, 1))}.hover\:text-text-highlight:hover{color:var(--color-text-highlight)}.hover\:text-text-highlight-invert:hover{color:var(--color-text-highlight-invert)}.group:hover .group-hover\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.aria-expanded\:bg-background-secondary[aria-expanded=true]{background-color:var(--color-bg-secondary)}@media (min-width: 640px){.sm\:not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.sm\:absolute{position:absolute}.sm\:left-auto{left:auto}.sm\:right-4{right:1rem}.sm\:top-4{top:1rem}.sm\:col-span-6{grid-column:span 6 / span 6}.sm\:max-w-\[calc\(var\(--grid-display-size\)\*18\)\]{max-width:calc(var(--grid-display-size) * 18)}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-2{gap:.5rem}.sm\:gap-6{gap:1.5rem}.sm\:p-2{padding:.5rem}.sm\:pb-0{padding-bottom:0}.sm\:pr-4{padding-right:1rem}}@media (min-width: 768px){.md\:col-span-12{grid-column:span 12 / span 12}.md\:col-span-3{grid-column:span 3 / span 3}.md\:col-span-6{grid-column:span 6 / span 6}.md\:col-span-9{grid-column:span 9 / span 9}.md\:mx-12{margin-left:3rem;margin-right:3rem}.md\:flex{display:flex}.md\:grid{display:grid}.md\:items-end{align-items:flex-end}.md\:justify-end{justify-content:flex-end}.md\:gap-px{gap:1px}.md\:before\:hidden:before{content:var(--tw-content);display:none}}@media (min-width: 1024px){.lg\:static{position:static}.lg\:col-span-4{grid-column:span 4 / span 4}.lg\:col-span-6{grid-column:span 6 / span 6}.lg\:col-span-8{grid-column:span 8 / span 8}.lg\:mx-18{margin-left:72px;margin-right:72px}.lg\:ml-4{margin-left:1rem}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:h-96{height:24rem}.lg\:w-auto{width:auto}.lg\:flex-row{flex-direction:row}.lg\:flex-row-reverse{flex-direction:row-reverse}.lg\:items-center{align-items:center}.lg\:justify-end{justify-content:flex-end}.lg\:justify-between{justify-content:space-between}.lg\:gap-4{gap:1rem}.lg\:py-\[var\(--grid-display-size\)\]{padding-top:var(--grid-display-size);padding-bottom:var(--grid-display-size)}.lg\:pt-2{padding-top:.5rem}.lg\:text-xl{font-size:clamp(1.2656rem,1.0622rem + 1.0169vw,1.8758rem);line-height:1.25}}@media (min-width: 1280px){.xl\:col-span-3{grid-column:span 3 / span 3}.xl\:col-span-4{grid-column:span 4 / span 4}.xl\:pt-6{padding-top:1.5rem}.xl\:before\:hidden:before{content:var(--tw-content);display:none}.xl\:after\:hidden:after{content:var(--tw-content);display:none}}.\[\&\>\*\]\:h-auto>*{height:auto}.\[\&\>\*\]\:h-full>*{height:100%}.\[\&\>\*\]\:w-full>*{width:100%}.\[\&\>\*\]\:border>*{border-width:1px}.\[\&\>\*\]\:border-border-primary>*{border-color:var(--color-border-primary)}.sun[data-astro-cid-tcsrer47]{stroke:currentColor}.moon[data-astro-cid-tcsrer47],.dark .sun[data-astro-cid-tcsrer47]{stroke:transparent}.dark .moon[data-astro-cid-tcsrer47]{stroke:currentColor}@media (prefers-color-scheme: dark){:root:not(.light):not(.dark) .sun[data-astro-cid-tcsrer47]{stroke:transparent}:root:not(.light):not(.dark) .moon[data-astro-cid-tcsrer47]{stroke:currentColor}}#theme-menu[data-astro-cid-tcsrer47]{position:absolute;right:-1px;top:100%;background-color:var(--color-bg-primary);color:var(--color-text-primary);border:1px solid var(--color-border-primary);box-shadow:0 2px 10px #0000001a}#theme-menu[data-astro-cid-tcsrer47] button[data-astro-cid-tcsrer47]:hover,#theme-menu[data-astro-cid-tcsrer47] button[data-astro-cid-tcsrer47]:focus-visible{background:var(--color-bg-secondary)}#theme-menu[data-astro-cid-tcsrer47] button[data-astro-cid-tcsrer47][aria-checked=true]:after{content:"";position:absolute;top:50%;right:5px;transform:translateY(-50%);width:6px;height:6px;background-color:#d95151;border-radius:50%}html[data-modifier-key=command] .control,html[data-modifier-key=control] .command{display:none}.search-dialog{background:transparent}.search-dialog::backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0000004d}.search-container{display:flex;flex-direction:column;height:calc(100vh - 6rem);width:calc(100vw - 3rem);max-width:600px;color:var(--color-text-primary);border-radius:8px;pointer-events:none}@media (min-width: 768px){.search-container{height:60vh;width:80vw}}.search-combobox{position:relative;background-color:var(--color-bg-highlight);border-radius:8px;pointer-events:auto}.search-combobox[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.search-icon{position:absolute;left:.4rem;top:0;height:100%}.search-input{width:100%;padding:.5rem 3rem .5rem 2.5rem;border-radius:8px;color:var(--color-text-primary);background:transparent}.search-input:focus-visible{outline:none}.search-close{position:absolute;top:0;right:0;display:flex;align-items:center;height:100%;padding-inline:.66rem}.search-close kbd{cursor:default}.search-results{overflow-y:scroll;display:grid;background-color:var(--color-bg-highlight);border-bottom-left-radius:8px;border-bottom-right-radius:8px;cursor:pointer;pointer-events:auto}.search-result{display:flex;flex-direction:column-reverse;color:var(--color-text-primary);border-top:1px solid var(--color-border-primary);padding:1rem}.search-result[aria-selected=true]{border-color:var(--color-border-highlight);color:var(--color-text-primary);background:var(--color-bg-primary)}.search-result[aria-selected=true]+.search-result{border-color:var(--color-border-highlight)}.here[data-astro-cid-3ef6ksr2]{position:relative}.here[data-astro-cid-3ef6ksr2]:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:6px;height:6px;background-color:#d95151;border-radius:50%} /* --- 02. Tailwind Compiler Fallbacks --- */ @media (min-width: 768px){ .md\:hidden { display: none !important; } .md\:flex { display: flex !important; } .md\:col-span-3 { grid-column: span 3 / span 3 !important; } .md\:col-span-9 { grid-column: span 9 / span 9 !important; } .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } } /* ========================================================================== II. GLOBAL TYPOGRAPHY & CONTENT ========================================================================== */ /* --- 03. Base Typography & Headings --- */ @font-face { font-family: 'Instrument Sans'; /* MUST match Tailwind's compiled name */ font-style: italic; font-weight: 100 900; font-stretch: 75% 100%; src: url('./fonts/InstrumentSans-VariableFont_wdth,wght.woff2') format('woff2'); /* Forces the base file to handle italics */ font-display: swap; } html { font-size: 100%; } body { transition: background-color 0.3s ease, color 0.3s ease !important; } body, p, li, blockquote { font-size: 1.2rem; line-height: 1.8; letter-spacing: 0.012em; } /* Primary Architecture (H1, H2): Structural & Punchy */ h1 { font-weight: 300 !important; color: var(--color-text-primary, #020617) !important; } /* Secondary Architecture (H3 - H6): Elegant & Editorial */ h2, h3, h4, h5, h6 { font-weight: 500 !important; color: var(--color-text-primary, #020617) !important; } h1 { font-size: 2.488rem !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; } h2 { font-size: 2.074rem !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; } h3 { font-size: 1.728rem !important; line-height: 1.25 !important; } h4 { font-size: 1.44rem !important; line-height: 1.3 !important; } h5 { font-size: 1.2rem !important; line-height: 1.4 !important; } h6 { font-size: 1rem !important; line-height: 1.5 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Meta Data */ small, .wp-block-latest-posts__post-date, .post-metadata, .entry-meta { font-size: 0.875rem !important; color: var(--color-text-secondary, #475569) !important; font-family: "Instrument Sans", sans-serif !important; } /* --- 04. Article & Case Study Spacing --- */ .entry-content p:first-of-type { font-size: 1.25rem; font-weight: 500; } .wp-content > *:first-child { margin-top: 0; } .wp-content h1, .wp-content h2, .wp-content h3, .wp-content h4 { font-family: "Instrument Serif", serif; font-weight: 400; line-height: 1.2; margin-top: 3rem; margin-bottom: 1.25rem; color: var(--text-primary, #000); } .wp-content h2 { font-size: 2.5rem; } .wp-content h3 { font-size: 2rem; } .wp-content h4 { font-size: 1.5rem; } .wp-content p { margin-bottom: 1.75rem; line-height: 1.7; } .wp-content ul, .wp-content ol { margin-bottom: 1.75rem; padding-left: 1.5rem; } .wp-content ul { list-style-type: square; } .wp-content ol { list-style-type: decimal; } .wp-content li { margin-bottom: 0.5rem; } /* --- 05. Inline Text Links & Captions --- */ .entry-content p a:not(.wp-block-button__link):not(.brutalist-sidebar-btn):not(.btn), .entry-content li a:not(.wp-block-button__link):not(.brutalist-sidebar-btn):not(.btn), .wp-block-post-content p a:not(.wp-block-button__link), .wp-block-post-content li a:not(.wp-block-button__link), footer p a, footer li a, figcaption a, .brutalist-info a, .spec-value a, :not(h1, h2, h3, h4, h5, h6) > a:not([class]):not(:has(*)) { color: var(--color-text-primary, #4a4846) !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; text-decoration-color: var(--color-text-highlight, #1f1d1d) !important; background-color: transparent !important; padding: 0 0.15rem !important; transition: all 0.2s ease !important; box-shadow: none !important; } .entry-content p a:not(.wp-block-button__link):not(.brutalist-sidebar-btn):not(.btn):hover, .entry-content li a:not(.wp-block-button__link):not(.brutalist-sidebar-btn):not(.btn):hover, .wp-block-post-content p a:not(.wp-block-button__link):hover, .wp-block-post-content li a:not(.wp-block-button__link):hover, footer p a:hover, footer li a:hover, figcaption a:hover, .brutalist-info a:hover, .spec-value a:hover, :not(h1, h2, h3, h4, h5, h6) > a:not([class]):not(:has(*)):hover { background-color: var(--color-text-highlight, #1f1d1d) !important; color: var(--color-text-highlight-invert, #f7f5f2) !important; text-decoration-color: transparent !important; } /* Link Protector (Safeguard for images/icons) */ a:has(img), a:has(svg), .wp-block-social-link-anchor { text-decoration: none !important; background-color: transparent !important; } figcaption, .wp-element-caption { display: block !important; font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--color-text-secondary, #726f6d) !important; text-align: left !important; margin-top: 0.75rem !important; padding-bottom: 0.5rem !important; border-bottom: 1px solid var(--color-border-primary, #ccc9c5) !important; } .brutalist-lightbox .bl-caption { text-align: center !important; border-bottom: none !important; font-family: "Instrument Serif", serif !important; font-size: 1.5rem !important; text-transform: none !important; letter-spacing: normal !important; } /* --- 06. Excerpt Typography --- */ .entry-summary p { font-size: clamp(0.8889rem, 0.845rem + 0.2192vw, 1.0204rem) !important; line-height: 1.6 !important; margin-bottom: 0 !important; opacity: 0.7; } /* --- 07. Global Date Removal --- */ .ils-results-wrapper .ils-date, .ils-results-wrapper .ils-meta, .ils-item-date, .ils-info, .posted-on, .post-date, .entry-date, .published, .updated, time.entry-date { display: none !important; } /* ========================================================================== III. LAYOUT & ARCHITECTURE ========================================================================== */ /* --- 08. Bulletproof Layouts --- */ .custom-sidebar-layout { display: flex; flex-direction: column; } .custom-sidebar-aside { border-top: 1px solid var(--border-primary, #e5e7eb); } @media (min-width: 1024px) { .custom-sidebar-layout { flex-direction: row; align-items: stretch; } .custom-sidebar-content { width: 75%; border-right: 1px solid var(--border-primary, #e5e7eb); } .custom-sidebar-aside { width: 25%; border-top: none; } } /* --- 09. Architectural Blueprint Animations --- */ @keyframes blueprintContent { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } .site-header nav, .site-header .justify-between > *, .squared-bg, .wp-content > *, .custom-sidebar-grid > *, .site-footer .grid > *, .site-footer .flex { opacity: 0; animation: blueprintContent 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .site-header nav, .site-header .justify-between > * { animation-delay: 0.1s; } .squared-bg { animation-delay: 0.2s; } .wp-content > *:nth-child(-n+3), .custom-sidebar-grid h3 { animation-delay: 0.4s; } .wp-content > *:nth-child(n+4), .custom-sidebar-grid .sidebar-portfolio-list { animation-delay: 0.5s; } .site-footer .grid > * { animation-delay: 0.6s; } .site-footer .flex { animation-delay: 0.7s; } /* Interactive Blueprint Illustrations */ .illustration { opacity: 0; transform: translateY(20px); animation: fadeIn 1.6s linear(0, .0024, .0145, .0355, .0644, .1, .142, .189, .241, .296, .354, .414, .474, .535, .596, .656, .715, .772, .826, .878, .927, .973, 1.02, 1.05, 1.09, 1.12, 1.15, 1.17, 1.19, 1.21, 1.22, 1.23, 1.24, 1.24, 1.25, 1.24, 1.24, 1.23, 1.23, 1.22, 1.21, 1.19, 1.18, 1.17, 1.15, 1.14, 1.12, 1.11, 1.09, 1.08, 1.07, 1.05, 1.04, 1.03, 1.01, 1, .993, .984, .976, .968, .962, .956, .951, .947, .944, .942, .941, .94, .94, .94, .941, .943, .945, .947, .95, .953, .956, .96, .963, .967, .971, .974, .978, .981, .985, .988, .991, .995, .997, 1, 1, 1, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1, 1, 1, 1, 1, 1, 1) forwards; } .illustration:nth-of-type(1) { animation-delay: .8s; } .illustration:nth-of-type(2) { animation-delay: 1.6s; } .illustration:nth-of-type(3) { animation-delay: 2.4s; } .illustration:nth-of-type(4) { animation-delay: 3.2s; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .illustration { animation: none; opacity: 1; transform: translateY(0); } } /* --- 10. Native View Transitions --- */ .site-header { view-transition-name: main-header; } .site-footer { view-transition-name: main-footer; } #main { view-transition-name: core-content; } ::view-transition-old(core-content) { animation: fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; } ::view-transition-new(core-content) { animation: fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes fade-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* --- 11. Global Page Progress Bar --- */ .global-progress-bar { width: 100%; /* Give it full physical width immediately */ transform-origin: left; /* Anchor the animation to the left side */ transform: scaleX(0); /* Visually shrink it down to 0% */ transition: transform 0.4s ease; /* Only animate the transform */ will-change: transform; /* Tells the browser to prep the GPU */ } .global-progress-bar.is-loading { opacity: 1; width: 85%; transition: width 5s cubic-bezier(0.1, 0.8, 0.2, 1); } .global-progress-bar.is-complete { transform: scaleX(1); /* Visually scale it back up to 100% */ } /* ========================================================================== IV. HEADER, NAVIGATION & SEARCH ========================================================================== */ /* --- 12. Navigation & Active States --- */ header, .site-header, nav { overflow: visible !important; } .custom-header-nav-menu .menu-item a { text-decoration: none !important; } .custom-header-nav-menu li > a { position: relative; } /* The Active Indicator */ .custom-header-nav-menu .current-menu-item > a::after, .custom-header-nav-menu .current_page_item > a::after, .custom-header-nav-menu .current-menu-ancestor > a::after, .custom-header-nav-menu .current-menu-parent > a::after, .custom-header-nav-menu .current_page_parent > a::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 6px; height: 6px; background-color: var(--color-text-primary, #020617) !important; border-radius: 0 !important; } /* The Hover Indicator */ .custom-header-nav-menu li:not(.current-menu-item):not(.current_page_item):not(.current-menu-parent):not(.current_page_parent) > a:hover::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 6px; height: 6px; background-color: var(--color-text-primary, #020617); opacity: 0.75; border-radius: 0 !important; } a:focus { outline: 2px solid var(--color-text-primary, #020617) !important; outline-offset: 4px; } .custom-header-nav-menu { display: flex !important; flex-direction: column; gap: 1rem !important; } @media (min-width: 768px) { /* 1. Forces the wrapper to fill the