/*!
 * Quill Editor v2.0.2
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;-o-tab-size:4;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}
/*# sourceMappingURL=quill.snow.css.map */*, ::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 / 0.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 / 0.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:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

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;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --font-display: "Fraunces", serif;
    --font-body: "General Sans", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --radius: 0.125rem;

    /* Warm bone page background — warm, never pure white. Espresso ink
       for the masthead and main headline; warm graphite for supporting
       copy (wired via the hero-supporting tokens below). */
    --background: 0.956 0.01 82;
    --foreground: 0.255 0.015 54;
    --card: 0.985 0.008 75;
    --card-foreground: 0.21 0.012 60;
    --popover: 0.985 0.008 75;
    --popover-foreground: 0.21 0.012 60;

    /* Muted sage as the main accent */
    --primary: 0.52 0.06 145;
    --primary-foreground: 0.97 0.012 75;

    --secondary: 0.93 0.014 75;
    --secondary-foreground: 0.28 0.014 60;
    --muted: 0.93 0.014 75;
    --muted-foreground: 0.48 0.014 65;

    /* Restrained oxblood for editorial details */
    --accent: 0.38 0.085 28;
    --accent-foreground: 0.97 0.012 75;

    --destructive: 0.5 0.16 25;
    --destructive-foreground: 0.97 0.012 75;

    --success: 0.55 0.1 150;
    --warning: 0.72 0.12 80;

    --border: 0.88 0.014 75;
    --input: 0.88 0.014 75;
    --ring: 0.52 0.06 145;

    --chart-1: 0.52 0.06 145;
    --chart-2: 0.38 0.085 28;
    --chart-3: 0.62 0.08 75;
    --chart-4: 0.45 0.07 60;
    --chart-5: 0.7 0.06 95;

    --sidebar: 0.94 0.014 75;
    --sidebar-foreground: 0.21 0.012 60;
    --sidebar-primary: 0.52 0.06 145;
    --sidebar-primary-foreground: 0.97 0.012 75;
    --sidebar-accent: 0.93 0.014 75;
    --sidebar-accent-foreground: 0.28 0.014 60;
    --sidebar-border: 0.88 0.014 75;
    --sidebar-ring: 0.52 0.06 145;

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-card-lift: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Editorial card shadow system (1440 polish, warm ink tones) ──
       Soft, diffuse, low-opacity shadows in warm ink — never harsh
       blue/grey drop shadows. Two tiers: resting + hover, plus a
       stronger lead treatment for the emphasized hero card and a
       unified closing-band shadow. */
    --shadow-editorial: 0 1px 0 0 oklch(0.21 0.012 60 / 0.06), 0 1px 2px 0
      oklch(0.21 0.012 60 / 0.04);
    --shadow-editorial-card: 0 1px 2px 0 oklch(0.21 0.012 60 / 0.05), 0 8px 24px
      -12px oklch(0.21 0.012 60 / 0.12), 0 0 0 1px oklch(0.21 0.012 60 / 0.03);
    --shadow-editorial-card-hover: 0 2px 4px 0 oklch(0.21 0.012 60 / 0.07), 0
      18px 40px -16px oklch(0.21 0.012 60 / 0.18), 0 0 0 1px
      oklch(0.21 0.012 60 / 0.05);
    --shadow-editorial-lead: 0 2px 4px 0 oklch(0.21 0.012 60 / 0.07), 0 24px
      56px -20px oklch(0.21 0.012 60 / 0.2), 0 0 0 1px
      oklch(0.21 0.012 60 / 0.05);
    --shadow-closing-band: 0 1px 3px 0 oklch(0.21 0.012 60 / 0.06), 0 16px 48px
      -16px oklch(0.21 0.012 60 / 0.16), 0 0 0 1px oklch(0.21 0.012 60 / 0.04);

    /* ── AI & Society hero — two-column editorial hero with a layered
       paper-sheet composition on the right. Warm bone ground, oxblood
       hairline rule, raw-linen / cream / mushroom paper sheets stacked
       at slight rotations, weathered-leather CTA. Tight 0.125rem
       radius throughout. Stays within the bone / espresso / oxblood
       family — no pastel blue, pink, yellow or green. */
    --ais-hero-rule: oklch(0.38 0.085 28); /* oxblood */
    --ais-hero-bg: var(--background);
    --ais-hero-paper-grid: oklch(0.92 0.008 82 / 0.55);
    --ais-hero-paper-linen: oklch(0.84 0.012 75); /* raw linen #D8CFC1 */
    --ais-hero-paper-cream: oklch(0.95 0.006 80); /* cream #F5F0E7 */
    --ais-hero-paper-mushroom: oklch(0.78 0.008 75);

    /* ── Monday Margins archive module tokens. Brand-aligned aliases
       so the .mm-archive-* rules adapt to theme without hardcoded
       fallbacks. Light values mirror the brand palette: espresso ink
       matches --foreground, oxblood matches --accent, hairline is
       espresso at 18% alpha for the row dividers. */
    --mm-espresso: oklch(0.255 0.015 54); /* espresso ink = --foreground */
    --mm-oxblood: oklch(0.38 0.085 28); /* oxblood = --accent */
    --mm-hairline: oklch(0.255 0.015 54 / 0.18); /* espresso @ 18% */

    /* ── The News Digest hero tokens ──
        The News Digest page uses a distinct full-width-banner +
        centered-single-column layout (rather than the two-column
        mm/ais heroes). The CTA button uses a muted terracotta
        background (#A65D53) with a charcoal hover (#333333) and
        warm-cream text — a distinct, slightly warmer button treatment
        from the weathered-leather mm/ais buttons, matching the
        user-supplied palette. OKLCH equivalents stay within the warm
        bone/espresso/oxblood family. */
    --nd-button-bg: oklch(0.5 0.09 35); /* muted terracotta #A65D53 */
    --nd-button-hover: oklch(0.28 0.01 50); /* charcoal #333333 */
    --nd-button-text: oklch(0.96 0.02 80); /* warm cream #F5EFE0 */
    /* Organic desk-scatter rotations — hand-placed, not grid-aligned.
       Three sheets interposed diagonally: diagram (back) tilts left,
       policy (middle) tilts right, edition (front, dominant) tilts
       slightly left. Small values keep the composition tactile without
       feeling chaotic. */
    --ais-hero-sheet-rotate-diagram: -2deg;
    --ais-hero-sheet-rotate-policy: 1.5deg;
    --ais-hero-sheet-rotate-edition: -0.5deg;
    /* Intentional overlap offsets so the three sheets interpose
       diagonally (desk-scatter, not a clean digital stack). The diagram
       sheet (back) peeks out on the LEFT; the policy sheet (middle)
       peeks out on the RIGHT; the edition sheet (front, dominant) sits
       centered on top, obscuring the centre of both back sheets. */
    --ais-hero-sheet-offset-diagram-top: 1.5rem;
    --ais-hero-sheet-offset-diagram-left: -2.75rem;
    --ais-hero-sheet-offset-edition-top: 0;
    --ais-hero-sheet-offset-edition-left: 0;
    --ais-hero-sheet-offset-policy-top: 2rem;
    --ais-hero-sheet-offset-policy-right: -2.75rem;
    /* Stacking order (back -> front): diagram (back, z1 — peeks LEFT),
       policy (middle, z2 — peeks RIGHT), edition (front, z3 —
       DOMINANT, centered on top). The clickable newsletter cover is the
       visually dominant sheet; it obscures the centre of both back
       sheets, which peek out on opposite sides for a diagonal
       interposed composition. */
    --ais-hero-z-diagram: 1;
    --ais-hero-z-policy: 2;
    --ais-hero-z-edition: 3;
    --shadow-paper-sheet: 0 1px 2px oklch(0.25 0.01 50 / 0.08), 0 8px 24px
      oklch(0.25 0.01 50 / 0.1), 0 16px 48px oklch(0.25 0.01 50 / 0.06);
    --shadow-paper-sheet-hover: 0 2px 4px oklch(0.25 0.01 50 / 0.1), 0 12px 32px
      oklch(0.25 0.01 50 / 0.14), 0 24px 64px oklch(0.25 0.01 50 / 0.08);
    /* Tactile paper grain — a faint SVG feTurbulence noise filter
       applied as a data-URI background overlay on every sheet so the
       paper reads as physical cream stock, not flat digital white.
       Low opacity, warm espresso tint, multiplies into the paper
       colour. Shared by all three sheets via the --ais-hero-paper-grain
       token. */
    --ais-hero-paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
    /* Soft weathered paper edge — a faint inset shadow + a subtle
       torn-edge mask so the sheet edges read as slightly imperfect
       physical paper, not crisp digital rectangles. The mask uses a
       rough SVG path as a data-URI; the inset shadow adds the faint
       inner tonal shift real paper has at its edges. */
    --ais-hero-paper-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' preserveAspectRatio='none'><path d='M 0 2 L 198 1 L 199 199 L 2 198 L 1 100 L 0 50 Z' fill='black'/></svg>");
    --shadow-paper-edge-inset: inset 0 0 0 1px oklch(0.32 0.018 55 / 0.06),
      inset 0 1px 3px oklch(0.32 0.018 55 / 0.05), inset 0 0 22px
      oklch(0.32 0.018 55 / 0.04);

    /* ── Hero collage card backgrounds (literary journal material) ──
       Four warm neutral print-inspired tones forming a gradual
       light-to-dark progression: raw linen (lightest) -> mushroom grey
       -> weathered leather -> charcoal brown (darkest). Low-chroma OKLCH
       values stay tonally warm (bone/espresso/oxblood family) so the
       four cards read as a single tactile paper sequence on bone. No
       pastel blue, pink, yellow or green. */
    --linen-card: 0.858 0.022 79;
    --mushroom-card: 0.712 0.014 70;
    --leather-card: 0.46 0.034 52;
    --charcoal-brown-card: 0.32 0.018 48;

    /* ── Per-card ink tokens ──
       Cards 1 & 2 (raw linen, mushroom grey) are light surfaces and
       carry dark ink (espresso / deep warm graphite); Cards 3 & 4
       (weathered leather, charcoal brown) are dark surfaces and carry
       warm cream ink. Solid values — no opacity reduction on essential
       text. These are consumed by the per-card title/description/arrow
       rules below (scoped via the bg-* utility classes). */
    --hero-card-1-ink: 0.255 0.015 54;
    --hero-card-2-ink: 0.299 0.012 55;
    --hero-card-3-ink: 0.957 0.013 82;
    --hero-card-4-ink: 0.957 0.013 82;

    /* ── Editorial accent inks ──
       Used sparingly for tiny rules, arrows, marginal marks, and the
       illustration stroke via currentColor. A warm bone/espresso/oxblood
       family — no pastel blue, pink, yellow or green. Card 1 espresso
       (dark ink on raw linen), Card 2 warm graphite (dark ink on
       mushroom grey), Card 3 warm cream (light ink on weathered
       leather), Card 4 muted oxblood (light ink on charcoal brown,
       used sparingly). */
    --espresso-accent: 0.32 0.022 50;
    --graphite-accent: 0.34 0.012 55;
    --cream-accent: 0.93 0.018 81;
    --burgundy-accent: 0.409 0.08 31;

    /* Warm off-white hairline border for hero collage cards — slightly
       lighter than the bone page so cards read as paper, not plastic. */
    --card-border-warm: 0.982 0.007 89;

    /* ── Notes from the Margins — newspaper clipping tokens ──
       A miniature broadsheet that reads as a slightly imperfect newspaper
       clipping. Warm cream paper (lighter and warmer than the bone page so
       the clipping reads as a separate physical object), faded ink for the
       body text (a desaturated espresso, never pure black), espresso brown
       for the masthead/headline details, and a single oxblood detail for
       the section label / accent rule. All tones stay within the warm
       brown / grey / stone / charcoal palette — no pastel blue, pink,
       yellow or green. */
    --margin-paper: 0.945 0.018 84;
    --margin-paper-edge: 0.905 0.02 80;
    --margin-ink: 0.32 0.022 55;
    --margin-ink-faded: 0.42 0.018 58;
    --margin-ink-masthead: 0.24 0.018 52;
    --margin-rule: 0.6 0.018 60;
    --margin-accent: 0.4 0.09 30;

    /* ── Hero collage card shadows — soft, diffuse, warm-ink tiers.
        No hard edges, no neon. The hover tier is a slightly larger /
        lifted version of the resting shadow — same warm-ink hue, no
        new colour introduced on hover. Two tiers. */
    --shadow-hero-card: 0 1px 2px 0 oklch(0.255 0.015 54 / 0.06), 0 10px 28px
      -10px oklch(0.255 0.015 54 / 0.14), 0 0 0 1px oklch(0.255 0.015 54 / 0.04);
    --shadow-hero-card-hover: 0 2px 6px 0 oklch(0.255 0.015 54 / 0.08), 0 22px
      48px -16px oklch(0.255 0.015 54 / 0.2), 0 0 0 1px
      oklch(0.255 0.015 54 / 0.06);

    --transition-hero-card: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Notes from the Margins — warm cream paper, faded ink, espresso
        brown, oxblood detail. A distinct paper surface for the left-column
        notes and the ketchup-bottle newspaper clipping. Stays within the
        neutral brown / grey / stone / charcoal palette — no pastel blue,
        pink, yellow or green. */
    --notes-paper: 0.945 0.012 84;
    --notes-paper-foreground: 0.32 0.014 58;
    --notes-ink: 0.255 0.015 54;
    --notes-ink-faded: 0.42 0.014 60;
    --notes-espresso: 0.3 0.018 45;
    --notes-oxblood: 0.38 0.085 28;
    --notes-rule: 0.78 0.012 72;
    --notes-shadow: 0 1px 2px 0 oklch(0.255 0.015 54 / 0.05), 0 10px 28px -12px
      oklch(0.255 0.015 54 / 0.12), 0 0 0 1px oklch(0.255 0.015 54 / 0.03);

    /* ── Newspaper clipping — aged cream newsprint, faded ink, espresso
        brown masthead, oxblood detail. Slightly warmer/darker than the
        notes paper so the clipping reads as a distinct torn fragment. */
    --newsprint-paper: 0.928 0.016 81;
    --newsprint-ink: 0.28 0.014 56;
    --newsprint-ink-faded: 0.46 0.014 62;
    --newsprint-espresso: 0.3 0.018 45;
    --newsprint-oxblood: 0.38 0.085 28;
    --newsprint-rule: 0.74 0.014 70;
    --newsprint-shadow: 0 2px 6px 0 oklch(0.255 0.015 54 / 0.08), 0 14px 36px
      -14px oklch(0.255 0.015 54 / 0.18), 0 0 0 1px oklch(0.255 0.015 54 / 0.04);

    /* ── Numbered editorial list dividers — the fine rules and numeral
         marks used by the Top Recommended Readings numbered list. Warm
         stone tones, no pastel. */
    --editorial-list-rule: 0.82 0.012 72;
    --editorial-list-numeral: 0.5 0.014 65;
    --editorial-list-numeral-active: 0.38 0.085 28;

    /* ── Our Books Suggestion — curated bookshelf card tokens ──
       A book card reads as a small editorial object on the bone page:
       a hairline-warmer card surface (a touch lighter than --card so
       book cards sit slightly forward of essay cards while staying in
       the bone family), a mushroom-grey hairline frame around the
       auto-fetched cover, faded-espresso blurb ink (same family as
       --margin-ink-faded), and quiet tag chips on a muted surface with
       a mushroom border. The active filter tag and the section label
       reuse the existing oxblood --accent — no new accent colour. All
       tones stay within the warm bone / espresso / linen / mushroom /
       leather / charcoal / oxblood palette. */
    --book-card-bg: 0.99 0.006 78;
    --book-card-foreground: 0.21 0.012 60;
    --book-cover-frame: 0.712 0.014 70;
    --book-cover-bg: 0.93 0.014 75;
    --book-title-ink: 0.255 0.015 54;
    --book-author-ink: 0.42 0.014 60;
    --book-blurb-ink: 0.48 0.014 65;
    --book-tag-bg: 0.93 0.014 75;
    --book-tag-foreground: 0.42 0.014 60;
    --book-tag-border: 0.82 0.012 72;
    --book-tag-active-bg: 0.38 0.085 28;
    --book-tag-active-foreground: 0.97 0.012 75;
    --book-tag-active-border: 0.38 0.085 28;
    --book-link-ink: 0.38 0.085 28;
    --book-empty-ink: 0.48 0.014 65;
    --book-shadow: 0 1px 2px 0 oklch(0.21 0.012 60 / 0.05), 0 8px 24px -12px
      oklch(0.21 0.012 60 / 0.12), 0 0 0 1px oklch(0.21 0.012 60 / 0.03);
    --book-shadow-hover: 0 2px 4px 0 oklch(0.21 0.012 60 / 0.07), 0 18px 40px
      -16px oklch(0.21 0.012 60 / 0.18), 0 0 0 1px oklch(0.21 0.012 60 / 0.05);
    --transition-book-card: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Book detail page — single-book editorial spread tokens ──
       The detail page reads as a long-form editorial object on the
       bone page: a large cover frame (mushroom-grey hairline mat,
       same family as the card frame but scaled up), an editorial
       serif display title, faded-espresso author ink, an oxblood
       star-rating row, a longer summary in the editorial measure,
       and a single oxblood "Buy on Amazon" button. A quiet back link
       returns to /books. All tones stay within the warm bone /
       espresso / linen / mushroom / leather / charcoal / oxblood
       palette — no new accent colour. */
    --book-detail-bg: transparent;
    --book-detail-cover-frame: 0.712 0.014 70;
    --book-detail-cover-bg: 0.93 0.014 75;
    --book-detail-title-ink: 0.255 0.015 54;
    --book-detail-author-ink: 0.42 0.014 60;
    --book-detail-rating-ink: 0.38 0.085 28;
    --book-detail-rating-empty-ink: 0.712 0.014 70;
    --book-detail-summary-ink: 0.32 0.014 60;
    --book-detail-buy-bg: 0.38 0.085 28;
    --book-detail-buy-foreground: 0.97 0.012 75;
    --book-detail-buy-border: 0.38 0.085 28;
    --book-detail-buy-hover-bg: 0.32 0.09 28;
    --book-detail-back-ink: 0.42 0.014 60;
    --book-detail-back-hover-ink: 0.38 0.085 28;
    --book-detail-shadow: 0 1px 2px 0 oklch(0.21 0.012 60 / 0.05), 0 12px 32px
      -14px oklch(0.21 0.012 60 / 0.14), 0 0 0 1px oklch(0.21 0.012 60 / 0.03);
    --transition-book-detail: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color
      var(--transition-smooth);
  }

  .dark {
    /* Warm charcoal — not pure black, retains paper warmth. Espresso
       ink darkened to a warm near-black for the masthead/headline. */
    --background: 0.17 0.012 54;
    --foreground: 0.92 0.013 82;
    --card: 0.2 0.014 60;
    --card-foreground: 0.92 0.012 75;
    --popover: 0.2 0.014 60;
    --popover-foreground: 0.92 0.012 75;

    --primary: 0.66 0.07 145;
    --primary-foreground: 0.17 0.012 60;

    --secondary: 0.24 0.014 60;
    --secondary-foreground: 0.85 0.012 75;
    --muted: 0.24 0.014 60;
    --muted-foreground: 0.58 0.012 70;

    --accent: 0.6 0.09 28;
    --accent-foreground: 0.96 0.012 75;

    --destructive: 0.6 0.16 25;
    --destructive-foreground: 0.96 0.012 75;

    --success: 0.62 0.1 150;
    --warning: 0.74 0.12 80;

    --border: 0.3 0.014 60;
    --input: 0.3 0.014 60;
    --ring: 0.66 0.07 145;

    --chart-1: 0.66 0.07 145;
    --chart-2: 0.6 0.09 28;
    --chart-3: 0.7 0.08 75;
    --chart-4: 0.6 0.07 60;
    --chart-5: 0.75 0.06 95;

    --sidebar: 0.2 0.014 60;
    --sidebar-foreground: 0.92 0.012 75;
    --sidebar-primary: 0.66 0.07 145;
    --sidebar-primary-foreground: 0.17 0.012 60;
    --sidebar-accent: 0.24 0.014 60;
    --sidebar-accent-foreground: 0.85 0.012 75;
    --sidebar-border: 0.3 0.014 60;
    --sidebar-ring: 0.66 0.07 145;

    --transition-card-lift: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Dark-mode editorial card shadows — warm charcoal lift, never blue. */
    --shadow-editorial: 0 1px 0 0 oklch(0 0 0 / 0.4), 0 1px 2px 0
      oklch(0 0 0 / 0.3);
    --shadow-editorial-card: 0 1px 2px 0 oklch(0 0 0 / 0.35), 0 8px 24px -12px
      oklch(0 0 0 / 0.5), 0 0 0 1px oklch(0.92 0.012 75 / 0.06);
    --shadow-editorial-card-hover: 0 2px 4px 0 oklch(0 0 0 / 0.45), 0 18px 40px
      -16px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(0.92 0.012 75 / 0.1);
    --shadow-editorial-lead: 0 2px 4px 0 oklch(0 0 0 / 0.5), 0 24px 56px -20px
      oklch(0 0 0 / 0.65), 0 0 0 1px oklch(0.92 0.012 75 / 0.1);
    --shadow-closing-band: 0 1px 3px 0 oklch(0 0 0 / 0.4), 0 16px 48px -16px
      oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.92 0.012 75 / 0.08);

    /* ── AI & Society hero — dark-mode paper-sheet tokens. The paper
       tones darken and desaturate so the sheets still read as paper on
       the warm charcoal ground; the oxblood rule lifts slightly so it
       remains visible; shadows strengthen against the dark surface.
       Same hue angles as light mode, all within the warm palette. */
    --ais-hero-rule: oklch(0.6 0.11 28);
    --ais-hero-bg: var(--background);
    --ais-hero-paper-grid: oklch(0.32 0.008 70 / 0.65);
    --ais-hero-paper-linen: oklch(0.4 0.014 75);
    --ais-hero-paper-cream: oklch(0.44 0.012 78);
    --ais-hero-paper-mushroom: oklch(0.34 0.013 70);

    /* ── Monday Margins archive module tokens · dark mode. The
       espresso ink lifts to the dark-mode --foreground (warm bone on
       charcoal), oxblood lifts to the dark-mode --accent so the
       masthead and arrows stay visible, and the hairline divider uses
       the lifted foreground at 18% alpha. Mirrors the light-mode
       aliases so the archive reads as the same editorial system on
       the warm charcoal ground. */
    --mm-espresso: oklch(0.92 0.013 82); /* = dark --foreground */
    --mm-oxblood: oklch(0.6 0.09 28); /* = dark --accent */
    --mm-hairline: oklch(0.92 0.013 82 / 0.18); /* foreground @ 18% */

    /* ── The News Digest hero tokens · dark mode ──
        The muted terracotta button lifts slightly so it stays visible
        on the warm charcoal ground; the charcoal hover deepens to a
        near-black; the warm-cream text brightens. Same hue angles as
        light mode, all within the warm palette. */
    --nd-button-bg: oklch(0.6 0.1 35); /* lifted terracotta */
    --nd-button-hover: oklch(0.18 0.012 54); /* = dark --background */
    --nd-button-text: oklch(0.96 0.02 80); /* warm cream */
    /* Organic desk-scatter rotations — same hand-placed angles as
       light mode so the diagonal interposed composition is preserved
       on the warm charcoal ground. */
    --ais-hero-sheet-rotate-diagram: -2deg;
    --ais-hero-sheet-rotate-policy: 1.5deg;
    --ais-hero-sheet-rotate-edition: -0.5deg;
    /* Same overlap offsets as light mode — diagram peeks LEFT, policy
       peeks RIGHT, edition sits centered on top. */
    --ais-hero-sheet-offset-diagram-top: 1.5rem;
    --ais-hero-sheet-offset-diagram-left: -2.75rem;
    --ais-hero-sheet-offset-edition-top: 0;
    --ais-hero-sheet-offset-edition-left: 0;
    --ais-hero-sheet-offset-policy-top: 2rem;
    --ais-hero-sheet-offset-policy-right: -2.75rem;
    /* Stacking order (back -> front): diagram (back, z1 — peeks LEFT),
       policy (middle, z2 — peeks RIGHT), edition (front, z3 —
       DOMINANT, centered on top). Mirrors the light-mode z-index
       tokens. */
    --ais-hero-z-diagram: 1;
    --ais-hero-z-policy: 2;
    --ais-hero-z-edition: 3;
    --shadow-paper-sheet: 0 1px 2px oklch(0 0 0 / 0.45), 0 8px 24px
      oklch(0 0 0 / 0.5), 0 16px 48px oklch(0 0 0 / 0.4);
    --shadow-paper-sheet-hover: 0 2px 4px oklch(0 0 0 / 0.55), 0 12px 32px
      oklch(0 0 0 / 0.6), 0 24px 64px oklch(0 0 0 / 0.5);
    /* Same paper-grain data-URI as light mode — the noise reads as
       physical paper texture on the dark cream stock too. */
    --ais-hero-paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
    --ais-hero-paper-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' preserveAspectRatio='none'><path d='M 0 2 L 198 1 L 199 199 L 2 198 L 1 100 L 0 50 Z' fill='black'/></svg>");
    /* Dark-mode weathered edge — slightly stronger inset against the
       dark ground so the paper edge still reads as physical. */
    --shadow-paper-edge-inset: inset 0 0 0 1px oklch(0 0 0 / 0.18), inset 0 1px
      3px oklch(0 0 0 / 0.16), inset 0 0 22px oklch(0 0 0 / 0.12);

    /* Dark-mode hero collage tokens — the warm neutral paper tones
       darkened and desaturated so they read as paper on charcoal. The
       light-to-dark progression is preserved (raw linen -> mushroom
       grey -> weathered leather -> charcoal brown), and ALL four cards
       carry warm cream ink in dark mode (the dark-theme reading: dark
       surfaces, light text), matching the original .dark approach. */
    --linen-card: 0.4 0.014 75;
    --mushroom-card: 0.34 0.013 70;
    --leather-card: 0.28 0.02 52;
    --charcoal-brown-card: 0.22 0.012 48;

    /* Per-card ink tokens — warm cream for all four dark-mode cards
       (solid values, no opacity reduction on essential text). */
    --hero-card-1-ink: 0.93 0.013 82;
    --hero-card-2-ink: 0.93 0.013 82;
    --hero-card-3-ink: 0.93 0.013 82;
    --hero-card-4-ink: 0.93 0.013 82;

    /* Editorial accent inks — brightened for dark mode, same hue angles
       as light mode. Warm bone/espresso/oxblood family preserved; the
       light-ink accents (cream, burgundy) brighten so the line art
       reads on dark surfaces, and the dark-ink accents (espresso,
       graphite) lift to warm cream/grey so they remain visible on the
       darkened card surfaces. */
    --espresso-accent: 0.78 0.025 70;
    --graphite-accent: 0.74 0.014 70;
    --cream-accent: 0.93 0.018 81;
    --burgundy-accent: 0.6 0.12 18;

    --card-border-warm: 0.4 0.01 75;

    /* Dark-mode newspaper clipping tokens — the broadsheet reads as aged
       paper on charcoal: a warm dim cream surface, faded warm-cream ink,
       espresso masthead brightened, and the oxblood accent lifted. Same
       hue angles as light mode, all within the warm palette. */
    --margin-paper: 0.3 0.016 70;
    --margin-paper-edge: 0.26 0.018 68;
    --margin-ink: 0.82 0.014 80;
    --margin-ink-faded: 0.72 0.014 78;
    --margin-ink-masthead: 0.9 0.014 82;
    --margin-rule: 0.5 0.014 70;
    --margin-accent: 0.6 0.11 28;

    --shadow-hero-card: 0 1px 2px 0 oklch(0 0 0 / 0.4), 0 10px 28px -10px
      oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.92 0.012 75 / 0.08);
    --shadow-hero-card-hover: 0 2px 6px 0 oklch(0 0 0 / 0.5), 0 22px 48px -16px
      oklch(0 0 0 / 0.65), 0 0 0 1px oklch(0.92 0.012 75 / 0.12);

    /* ── Our Books Suggestion — dark-mode bookshelf card tokens ──
       Surfaces darkened to the charcoal-brown family (a touch lighter
       than --card so book cards sit slightly forward of essay cards on
       charcoal), ink lifted to warm cream, the cover frame softened to
       a warm stone hairline, and the active tag / link reusing the
       existing .dark oxblood --accent (0.6 0.11 28) — no new accent
       colour. All tones stay within the warm charcoal / cream / oxblood
       family. */
    --book-card-bg: 0.235 0.012 58;
    --book-card-foreground: 0.92 0.012 75;
    --book-cover-frame: 0.4 0.012 70;
    --book-cover-bg: 0.28 0.014 60;
    --book-title-ink: 0.95 0.013 82;
    --book-author-ink: 0.74 0.014 78;
    --book-blurb-ink: 0.68 0.014 76;
    --book-tag-bg: 0.28 0.014 60;
    --book-tag-foreground: 0.74 0.014 78;
    --book-tag-border: 0.4 0.012 70;
    --book-tag-active-bg: 0.6 0.11 28;
    --book-tag-active-foreground: 0.96 0.012 75;
    --book-tag-active-border: 0.6 0.11 28;
    --book-link-ink: 0.6 0.11 28;
    --book-empty-ink: 0.68 0.014 76;
    --book-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.4), 0 8px 24px -12px
      oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.92 0.012 75 / 0.06);
    --book-shadow-hover: 0 2px 4px 0 oklch(0 0 0 / 0.5), 0 18px 40px -16px
      oklch(0 0 0 / 0.65), 0 0 0 1px oklch(0.92 0.012 75 / 0.1);
    --transition-book-card: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Book detail page — dark-mode editorial spread tokens ──
       Surfaces darkened to the charcoal-brown family, ink lifted to
       warm cream, the cover frame softened to a warm stone hairline,
       and the rating / buy / back accents reusing the existing .dark
       oxblood --accent (0.6 0.11 28) — no new accent colour. All
       tones stay within the warm charcoal / cream / oxblood family. */
    --book-detail-bg: transparent;
    --book-detail-cover-frame: 0.4 0.012 70;
    --book-detail-cover-bg: 0.28 0.014 60;
    --book-detail-title-ink: 0.95 0.013 82;
    --book-detail-author-ink: 0.74 0.014 78;
    --book-detail-rating-ink: 0.6 0.11 28;
    --book-detail-rating-empty-ink: 0.4 0.012 70;
    --book-detail-summary-ink: 0.82 0.014 80;
    --book-detail-buy-bg: 0.6 0.11 28;
    --book-detail-buy-foreground: 0.96 0.012 75;
    --book-detail-buy-border: 0.6 0.11 28;
    --book-detail-buy-hover-bg: 0.55 0.12 28;
    --book-detail-back-ink: 0.74 0.014 78;
    --book-detail-back-hover-ink: 0.6 0.11 28;
    --book-detail-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.4), 0 12px 32px -14px
      oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.92 0.012 75 / 0.06);
    --transition-book-detail: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color
      var(--transition-smooth);
  }
  body {
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv01";
    background-image: radial-gradient(
      circle at 1px 1px,
      oklch(0.21 0.012 60 / 0.018) 1px,
      transparent 0
    );
    background-size: 28px 28px;
}
  h1,
  h2,
  h3,
  h4 {
  font-family: var(--font-display), serif;
    font-feature-settings: "ss01";
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.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;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.col-span-full {
  grid-column: 1 / -1;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-11\/12 {
  width: 91.666667%;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-8\/12 {
  width: 66.666667%;
}
.w-9 {
  width: 2.25rem;
}
.w-9\/12 {
  width: 75%;
}
.w-\[10\%\] {
  width: 10%;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[18\%\] {
  width: 18%;
}
.w-\[24\%\] {
  width: 24%;
}
.w-\[26\%\] {
  width: 26%;
}
.w-\[30\%\] {
  width: 30%;
}
.w-\[40\%\] {
  width: 40%;
}
.w-\[42\%\] {
  width: 42%;
}
.w-\[44\%\] {
  width: 44%;
}
.w-\[6\%\] {
  width: 6%;
}
.w-\[min\(20rem\2c 85vw\)\] {
  width: min(20rem, 85vw);
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[93\.75rem\] {
  max-width: 93.75rem;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(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)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-px {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(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)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-decimal {
  list-style-type: decimal;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_auto\] {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.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;
}
.items-stretch {
  align-items: stretch;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-12 {
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-10 {
  row-gap: 2.5rem;
}
.gap-y-12 {
  row-gap: 3rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: oklch(var(--border));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[0\.125rem\] {
  border-radius: 0.125rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-accent {
  --tw-border-opacity: 1;
  border-color: oklch(var(--accent) / var(--tw-border-opacity, 1));
}
.border-accent\/40 {
  border-color: oklch(var(--accent) / 0.4);
}
.border-accent\/50 {
  border-color: oklch(var(--accent) / 0.5);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-input {
  border-color: oklch(var(--input));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-accent\/60 {
  background-color: oklch(var(--accent) / 0.6);
}
.bg-accent\/70 {
  background-color: oklch(var(--accent) / 0.7);
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-charcoal-brown-card {
  background-color: oklch(var(--charcoal-brown-card));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-leather-card {
  background-color: oklch(var(--leather-card));
}
.bg-linen-card {
  background-color: oklch(var(--linen-card));
}
.bg-mushroom-card {
  background-color: oklch(var(--mushroom-card));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted-foreground\/30 {
  background-color: oklch(var(--muted-foreground) / 0.3);
}
.bg-muted-foreground\/40 {
  background-color: oklch(var(--muted-foreground) / 0.4);
}
.bg-muted\/20 {
  background-color: oklch(var(--muted) / 0.2);
}
.bg-muted\/30 {
  background-color: oklch(var(--muted) / 0.3);
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-muted\/60 {
  background-color: oklch(var(--muted) / 0.6);
}
.bg-muted\/70 {
  background-color: oklch(var(--muted) / 0.7);
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: oklch(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-transparent {
  background-color: transparent;
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-px {
  padding-bottom: 1px;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-body {
  font-family: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-\[1\.75\] {
  line-height: 1.75;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-border {
  color: oklch(var(--border));
}
.text-burgundy-accent {
  color: oklch(var(--burgundy-accent));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-cream-accent {
  color: oklch(var(--cream-accent));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-espresso-accent {
  color: oklch(var(--espresso-accent));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-graphite-accent {
  color: oklch(var(--graphite-accent));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/50 {
  color: oklch(var(--muted-foreground) / 0.5);
}
.text-muted-foreground\/60 {
  color: oklch(var(--muted-foreground) / 0.6);
}
.text-muted-foreground\/80 {
  color: oklch(var(--muted-foreground) / 0.8);
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -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);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --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);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 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-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}
.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);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.transition-smooth {
    transition: var(--transition-smooth);
  }
.paper-grain {
    background-image: radial-gradient(
      circle at 1px 1px,
      oklch(0.21 0.012 60 / 0.022) 1px,
      transparent 0
    );
    background-size: 24px 24px;
  }
.text-balance {
    text-wrap: balance;
  }
.text-pretty {
    text-wrap: pretty;
  }
.editorial-rule {
    border-top: 1px solid oklch(var(--border));
  }
.editorial-rule-fine {
    border-top: 1px solid oklch(var(--border) / 0.6);
  }
/* ── Explore by Subject — directory rows ── */
.directory-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
    padding-block: 1.5rem;
  }
.directory-row .directory-icon {
    color: oklch(var(--primary));
    align-self: center;
  }
.directory-row .directory-arrow {
    color: oklch(var(--muted-foreground));
    transition: transform var(--transition-smooth), color
      var(--transition-smooth);
  }
.directory-row:hover .directory-arrow {
    color: oklch(var(--accent));
    transform: translateX(4px);
  }
.directory-row:hover .directory-label {
    color: oklch(var(--accent));
  }
/* ── Latest Essays — denser editorial list ── */
.essay-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
@media (min-width: 768px) {
    .essay-featured {
      grid-template-columns: 1.4fr 1fr;
      gap: 2.5rem;
      align-items: center;
    }
  }
.essay-featured .essay-featured-image {
    aspect-ratio: 3 / 2;
    border: 1px solid oklch(var(--border));
    background: oklch(var(--card));
  }
.essay-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-block: 1.25rem;
  }
@media (min-width: 768px) {
    .essay-row {
      grid-template-columns: 7rem 1fr auto;
      -moz-column-gap: 1.5rem;
           column-gap: 1.5rem;
      align-items: start;
    }
  }
.essay-row .essay-thumb {
    aspect-ratio: 4 / 3;
    border: 1px solid oklch(var(--border));
    background: oklch(var(--card));
  }
.essay-row:hover .essay-title {
    color: oklch(var(--accent));
  }
/* ── Newsletter — full-width conversion band (1440 reference) ── */
.newsletter-band {
    background: oklch(var(--muted) / 0.4);
  }
.newsletter-card {
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    box-shadow: var(--shadow-editorial, 0 1px 0 0 oklch(0.21 0.012 60 / 0.06));
  }
.newsletter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
@media (min-width: 768px) {
    .newsletter-grid {
      grid-template-columns: 1.05fr 0.95fr;
      gap: 4rem;
      align-items: center;
    }
  }
/* ── Newsletter — redesigned two-column cream module ──
      A single contained editorial panel on a cream/off-white ground
      with a thin vertical divider between the two columns. LEFT column
      (~60%): an uppercase sans-serif kicker "JOIN THE MARGINS", a large
      italic serif headline, a body paragraph, and a secondary paragraph.
      RIGHT column (~40%): an uppercase rust label "THE MARGINS LETTER",
      a flush email-input + rust button group (sharp corners, right
      arrow), a consent checkbox with an underlined privacy link, and a
      reassurance line. Below the two columns: a thin horizontal divider,
      then a footer strip of dot-separated uppercase value props with an
      italic tagline on the far right. Cream ground, near-black ink,
      deep rust/terracotta accent and button, light grey/taupe dividers,
      white input. Stacks vertically on mobile (vertical divider hidden). */
:root {
    --newsletter-panel-bg: 0.972 0.008 87; /* cream/off-white #F9F7F2 */
    --newsletter-headline-ink: 0.26 0.005 56; /* dark charcoal near-black #2D2D2D */
    --newsletter-body-ink: 0.32 0.006 55; /* near-black body */
    --newsletter-field-bg: 1 0 0; /* white input */
    --newsletter-button-bg: 0.42 0.13 32; /* deep rust/terracotta #8B3A2B */
    --newsletter-button-hover-bg: 0.36 0.14 32; /* darker rust hover */
    --newsletter-button-ink: 1 0 0; /* white button text */
    --newsletter-border: 0.84 0.004 80; /* light grey/taupe divider #D1D1D1 */
    --newsletter-field-border: 0.78 0.005 78; /* slightly darker input border */
    --newsletter-accent: 0.42 0.13 32; /* deep rust/terracotta = button */
    --newsletter-muted-ink: 0.55 0.006 60; /* muted footer ink */
    --newsletter-shadow: 0 1px 2px 0 oklch(0.21 0.012 60 / 0.04), 0 12px 32px
      -16px oklch(0.21 0.012 60 / 0.08), 0 0 0 1px oklch(0.21 0.012 60 / 0.03);
  }
.newsletter-panel {
    position: relative;
    background: oklch(var(--newsletter-panel-bg));
    border: 1px solid oklch(var(--newsletter-border));
    box-shadow: var(--newsletter-shadow);
    overflow: hidden;
  }
.newsletter-panel > * {
    position: relative;
    z-index: 1;
  }
/* `--wrapped` adds the outer padding + radius used when the panel
     stands alone (default variant). The embedded variant omits this
     so it can sit flush inside a shared container. */
.newsletter-panel--wrapped {
    border-radius: 0.25rem;
  }
.newsletter-panel__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
@media (min-width: 768px) {
    .newsletter-panel__grid {
      grid-template-columns: 56fr 44fr;
      gap: 0;
      align-items: stretch;
    }
  }
/* ── LEFT column (~60%) — invitation copy ── */
.newsletter-panel__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: clamp(2.25rem, 5vw, 4rem);
  }
.newsletter-panel__kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(var(--newsletter-headline-ink) / 0.7);
    margin: 0;
  }
.newsletter-panel__headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: oklch(var(--newsletter-headline-ink));
    text-wrap: balance;
    text-align: left;
    margin: 0;
  }
.newsletter-panel__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1.7;
    color: oklch(var(--newsletter-body-ink) / 0.85);
    text-wrap: pretty;
    max-width: 44ch;
    margin: 0;
  }
.newsletter-panel__secondary {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.88rem, 1.15vw, 0.98rem);
    line-height: 1.65;
    color: oklch(var(--newsletter-body-ink) / 0.7);
    text-wrap: pretty;
    max-width: 44ch;
    margin: 0;
  }
/* ── RIGHT column (~40%) — the form ──
     On desktop a thin vertical divider separates it from the left
     column. On mobile the divider disappears and the form stacks
     below the copy with a horizontal hairline above it. */
.newsletter-panel__form-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: clamp(2.25rem, 5vw, 4rem);
    border-top: 1px solid oklch(var(--newsletter-border));
  }
@media (min-width: 768px) {
    .newsletter-panel__form-area {
      border-top: 0;
      border-left: 1px solid oklch(var(--newsletter-border));
    }
  }
.newsletter-panel__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(var(--newsletter-accent));
    margin: 0 0 0.25rem;
  }
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
/* Flush input + button group — a single input row with the rust
     button attached flush on the right, sharp corners, no gap. */
.newsletter-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
.newsletter-form__group {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
  }
.newsletter-form__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 3rem;
    border: 1px solid oklch(var(--newsletter-field-border));
    border-right: 0;
    border-radius: 0;
    background: oklch(var(--newsletter-field-bg));
    color: oklch(var(--newsletter-headline-ink));
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding-inline: 0.9rem;
    transition: border-color var(--transition-smooth), box-shadow
      var(--transition-smooth);
  }
.newsletter-form__input::-moz-placeholder {
    color: oklch(var(--newsletter-body-ink) / 0.5);
  }
.newsletter-form__input::placeholder {
    color: oklch(var(--newsletter-body-ink) / 0.5);
  }
.newsletter-form__input:focus-visible {
    outline: none;
    border-color: oklch(var(--newsletter-accent) / 0.7);
    box-shadow: 0 0 0 2px oklch(var(--newsletter-accent) / 0.25);
  }
.newsletter-form__input:disabled {
    opacity: 0.6;
  }
.newsletter-form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    height: 3rem;
    padding-inline: 0.9rem;
    border: 1px solid oklch(var(--newsletter-button-bg));
    border-radius: 0;
    background: oklch(var(--newsletter-button-bg));
    color: oklch(var(--newsletter-button-ink));
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background var(--transition-smooth), box-shadow
      var(--transition-smooth), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
.newsletter-form__button:hover:not(:disabled) {
    background: oklch(var(--newsletter-button-hover-bg));
    border-color: oklch(var(--newsletter-button-hover-bg));
  }
.newsletter-form__button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--newsletter-accent) / 0.45), 0 0 0 4px
      oklch(var(--newsletter-panel-bg));
  }
.newsletter-form__button:active:not(:disabled) {
    transform: translateY(1px);
  }
.newsletter-form__button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }
.newsletter-form__button-arrow {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }
.newsletter-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.55;
    color: oklch(var(--newsletter-body-ink) / 0.85);
    cursor: pointer;
  }
.newsletter-form__consent > span {
    padding-top: 0.05rem;
  }
.newsletter-form__privacy-link {
    font-weight: 600;
    color: oklch(var(--newsletter-headline-ink));
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: oklch(var(--newsletter-accent) / 0.5);
    transition: text-decoration-color var(--transition-smooth), color
      var(--transition-smooth);
  }
.newsletter-form__privacy-link:hover {
    text-decoration-color: oklch(var(--newsletter-accent));
  }
.newsletter-form__privacy-link:focus-visible {
    outline: none;
    border-radius: 0.125rem;
    box-shadow: 0 0 0 2px oklch(var(--newsletter-accent) / 0.45), 0 0 0 4px
      oklch(var(--newsletter-panel-bg));
  }
.newsletter-form__error {
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.5;
    color: oklch(var(--newsletter-accent));
    margin: 0;
  }
.newsletter-form__error--state {
    margin-top: 0.25rem;
    font-weight: 500;
  }
.newsletter-panel__reassurance {
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.5;
    color: oklch(var(--newsletter-body-ink) / 0.7);
    margin: 0;
  }
/* ── Footer strip — below the two columns ──
     A thin horizontal divider, then a row of dot-separated uppercase
     value props. The footer is now a single centered row of value
     props (the standalone tagline was relocated to the LEFT-column
     secondary paragraph). On mobile the props wrap and center. */
.newsletter-panel__footer {
    border-top: 1px solid oklch(var(--newsletter-border));
    padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(2.25rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
@media (min-width: 768px) {
    .newsletter-panel__footer {
      flex-direction: row;
      justify-content: center;
    }
  }
.newsletter-panel__footer-props {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(var(--newsletter-muted-ink));
    list-style: none;
    margin: 0;
    padding: 0;
  }
.newsletter-panel__footer-props > li {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
.newsletter-panel__footer-props > li + li::before {
    content: "•";
    margin-inline: 0.85rem;
    color: oklch(var(--newsletter-border));
    font-weight: 400;
  }
/* ── Success state (unwrapped inner) ── */
.newsletter-panel-success {
    position: relative;
    background: oklch(var(--newsletter-panel-bg));
    border: 1px solid oklch(var(--newsletter-border));
    box-shadow: var(--newsletter-shadow);
    overflow: hidden;
  }
.newsletter-panel-success > * {
    position: relative;
    z-index: 1;
  }
.newsletter-panel-success .newsletter-panel__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(2.25rem, 5vw, 4rem);
  }
.newsletter-panel-success .newsletter-panel__success {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.3;
    color: oklch(var(--newsletter-headline-ink));
    margin: 0;
  }
@media (prefers-reduced-motion: reduce) {
    .newsletter-form__button:active:not(:disabled) {
      transform: none;
    }
  }
/* ── Testimonials — centered single-card slide (1440 reference) ── */
.testimonial-card {
    position: relative;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: 0.5rem;
    box-shadow: var(--shadow-editorial-card);
  }
.testimonial-quote-glyph {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1;
    color: oklch(var(--foreground) / 0.12);
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.testimonial-quote-glyph--open {
    top: 0.5rem;
    left: 1.5rem;
    font-size: 5.5rem;
  }
.testimonial-quote-glyph--close {
    bottom: 3.5rem;
    right: 1.5rem;
    font-size: 5.5rem;
  }
@media (min-width: 640px) {
    .testimonial-quote-glyph--open {
      top: 1rem;
      left: 2.5rem;
      font-size: 7rem;
    }
    .testimonial-quote-glyph--close {
      bottom: 4rem;
      right: 2.5rem;
      font-size: 7rem;
    }
  }
/* Sage highlight for selected phrases inside testimonial quotes. */
.testimonial-highlight {
    background: oklch(var(--primary) / 0.16);
    color: oklch(var(--foreground));
    padding: 0.05em 0.2em;
    border-radius: 0.125rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
/* ── Closing-band card — unified newsletter+testimonials centerpiece ──
      Reuses the closing-band shadow with a tight editorial radius so the
      band reads as a single polished unit consistent with hero cards. */
.closing-band-card {
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    box-shadow: var(--shadow-closing-band);
    border-radius: 0.5rem;
  }
/* ── Hero essay grid — 2-3 featured cards, one lead emphasized ──
     On desktop: lead spans two columns (wider, taller image) and the
     secondary cards stack into a single column on the right. On mobile
     everything stacks vertically. The lead gets the stronger shadow and
     a hairline accent rule along its top edge. */
.hero-essay-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
@media (min-width: 768px) {
    .hero-essay-grid {
      grid-template-columns: 1.5fr 1fr;
      gap: 2rem;
      align-items: stretch;
    }
  }
.hero-essay-card {
    display: flex;
    flex-direction: column;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: 0.5rem;
    box-shadow: var(--shadow-editorial-card);
    transition: var(--transition-card-lift);
    overflow: hidden;
  }
.hero-essay-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-editorial-card-hover);
  }
.hero-essay-card:focus-within {
    box-shadow: var(--shadow-editorial-card-hover);
  }
.hero-essay-card .hero-essay-image {
    aspect-ratio: 16 / 10;
    background: oklch(var(--muted));
    border-bottom: 1px solid oklch(var(--border));
  }
.hero-essay-card .hero-essay-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    flex: 1;
  }
/* Lead card — emphasized treatment: spans the left column, larger
     image, stronger shadow, a 2px sage accent rule along the top edge. */
.hero-essay-card--lead {
    box-shadow: var(--shadow-editorial-lead);
    position: relative;
  }
.hero-essay-card--lead::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: oklch(var(--primary));
    z-index: 1;
  }
.hero-essay-card--lead:hover {
    box-shadow: var(--shadow-editorial-lead);
  }
.hero-essay-card--lead .hero-essay-image {
    aspect-ratio: 16 / 9;
  }
.hero-essay-card--lead .hero-essay-body {
    padding: 2rem;
    gap: 1rem;
  }
@media (min-width: 768px) {
    .hero-essay-card--lead {
      grid-row: span 2;
    }
    .hero-essay-card--lead .hero-essay-image {
      aspect-ratio: 3 / 2;
    }
  }
/* Secondary cards stack into the right column on desktop. */
.hero-essay-secondary-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
@media (min-width: 768px) {
    .hero-essay-secondary-stack {
      grid-template-rows: 1fr 1fr;
      gap: 2rem;
    }
    .hero-essay-secondary-stack .hero-essay-card .hero-essay-image {
      aspect-ratio: 16 / 10;
    }
    .hero-essay-secondary-stack .hero-essay-card .hero-essay-body {
      padding: 1.25rem;
    }
  }
/* ── Hero collage — centred serif headline + four overlapping rotated cards ──
     Replaces the featured-essay grid with a centred editorial hero.
     Generous vertical padding, centred text, fluid Fraunces headline,
     General Sans supporting copy, then a horizontal row of four pastel
     paper cards that overlap slightly and carry small rotations to read
     as a physical magazine collage. Hover lifts a card toward upright
     and intensifies its warm-ink shadow; the directional arrow nudges.
     prefers-reduced-motion disables all transforms. */
.hero-editorial {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 0;
    padding-bottom: clamp(3.5rem, 9vw, 7rem);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
.hero-headline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 7vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: oklch(var(--foreground));
    text-wrap: balance;
    max-width: 18ch;
  }
.hero-supporting {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.65;
    color: oklch(var(--foreground) / 0.78);
    max-width: 46ch;
    text-wrap: pretty;
  }
.hero-supporting--strong {
    font-weight: 600;
    color: oklch(var(--foreground) / 0.9);
  }
/* Card row — horizontal with slight overlap on desktop. */
.hero-card-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 64rem;
  }
.hero-card-row > .hero-editorial-card + .hero-editorial-card {
    margin-left: -1.5rem;
  }
/* ── Hero figure — full-width transparent hero illustration ──
     Used on the /newsletters landing page in place of the card row.
     The image is full container width with automatic height, no
     background, no cropping, no rounded container. A soft drop-shadow
     lifts the line art off the bone ground. The figure sits flush
     below the sticky header with no top white space — no top margin
     or padding above the image. The image's transparency lets the
     page background show through. */
.hero-figure {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.hero-figure__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    /* Soft, diffuse drop-shadow — warm-ink family, no harsh edges.
       The image has transparency, so the page background shows through
       and the shadow falls on the line art itself. */
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
  }
/* ── Hero newsletter links — editorial text-link row ──
     A simple row of four text links to the individual newsletters,
     preserved below the hero image (the HeroEditorialCard row was
     removed as the visual). Styled to match the editorial aesthetic:
     Fraunces small-caps-feeling serif, oxblood accent on hover/focus,
     dot separators between links. Stacks vertically on mobile. */
.hero-newsletter-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 48rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
.hero-newsletter-links__link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: oklch(var(--foreground) / 0.82);
    text-decoration: none;
    padding-inline: 1.25rem;
    padding-block: 0.5rem;
    position: relative;
    transition: color var(--transition-smooth);
  }
/* Dot separator between adjacent links (matches the newsletter
     footer-props dot pattern). */
.hero-newsletter-links__link + .hero-newsletter-links__link::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: oklch(var(--border));
    font-weight: 400;
    font-family: var(--font-body);
  }
.hero-newsletter-links__link:hover,
  .hero-newsletter-links__link:focus-visible {
    color: oklch(var(--accent));
    outline: none;
  }
.hero-newsletter-links__link:focus-visible {
    box-shadow: 0 0 0 2px oklch(var(--accent) / 0.35);
    border-radius: 0.125rem;
  }
@media (max-width: 640px) {
    .hero-newsletter-links {
      flex-direction: column;
      gap: 0.5rem;
    }
    .hero-newsletter-links__link + .hero-newsletter-links__link::before {
      display: none;
    }
  }
.hero-editorial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem 1.75rem;
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid oklch(var(--card-border-warm));
    border-radius: 0.5rem;
    box-shadow: var(--shadow-hero-card);
    transition: var(--transition-hero-card);
    will-change: transform;
    text-align: left;
  }
.hero-editorial-card:hover,
  .hero-editorial-card:focus-within {
    transform: translateY(-8px) rotate(0deg);
    box-shadow: var(--shadow-hero-card-hover);
    z-index: 2;
  }
.hero-editorial-card--rotate-left {
    transform: rotate(-2deg);
  }
.hero-editorial-card--rotate-right {
    transform: rotate(2deg);
  }
.hero-editorial-card--upright {
    transform: rotate(-0.5deg);
  }
.hero-editorial-card--rotate-left:hover,
  .hero-editorial-card--rotate-left:focus-within {
    transform: translateY(-8px) rotate(-0.5deg);
  }
.hero-editorial-card--rotate-right:hover,
  .hero-editorial-card--rotate-right:focus-within {
    transform: translateY(-8px) rotate(0.5deg);
  }
.hero-editorial-card--upright:hover,
  .hero-editorial-card--upright:focus-within {
    transform: translateY(-8px) rotate(0deg);
  }
.hero-editorial-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.15;
    color: oklch(var(--foreground));
  }
.hero-editorial-card__description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
    color: oklch(var(--foreground) / 0.72);
  }
/* Illustration container — a fixed-aspect line-art collage area above
     the title. The SVG inherits the card's accent ink via `currentColor`
     (set by the accent text-* class on the wrapper). Stroke-only line
     art with a single restrained filled accent form per card. */
.hero-editorial-card__illustration {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
.hero-editorial-card__illustration svg {
    width: 100%;
    height: 100%;
    max-width: 7.5rem;
    max-height: 7.5rem;
  }
.hero-editorial-card__arrow {
    align-self: flex-end;
    margin-top: auto;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.hero-editorial-card:hover .hero-editorial-card__arrow,
  .hero-editorial-card:focus-within .hero-editorial-card__arrow {
    transform: translateX(4px);
  }
/* Tablet — 2x2 grid, preserve rotations, remove overlap. */
@media (max-width: 1023px) and (min-width: 640px) {
    .hero-card-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      max-width: 40rem;
    }
    .hero-card-row > .hero-editorial-card + .hero-editorial-card {
      margin-left: 0;
    }
  }
/* Mobile — vertical stack, reduced rotation, centred copy. */
@media (max-width: 639px) {
    .hero-card-row {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      max-width: 24rem;
    }
    .hero-card-row > .hero-editorial-card + .hero-editorial-card {
      margin-left: 0;
    }
    .hero-editorial-card--rotate-left {
      transform: rotate(-1deg);
    }
    .hero-editorial-card--rotate-right {
      transform: rotate(1deg);
    }
    .hero-editorial-card--upright {
      transform: rotate(0deg);
    }
    .hero-editorial-card--rotate-left:hover,
    .hero-editorial-card--rotate-left:focus-within,
    .hero-editorial-card--rotate-right:hover,
    .hero-editorial-card--rotate-right:focus-within,
    .hero-editorial-card--upright:hover,
    .hero-editorial-card--upright:focus-within {
      transform: translateY(-6px) rotate(0deg);
    }
  }
@media (prefers-reduced-motion: reduce) {
    .hero-editorial-card,
    .hero-editorial-card--rotate-left,
    .hero-editorial-card--rotate-right,
    .hero-editorial-card--upright {
      transition: none;
    }
    .hero-editorial-card:hover,
    .hero-editorial-card:focus-within,
    .hero-editorial-card--rotate-left:hover,
    .hero-editorial-card--rotate-left:focus-within,
    .hero-editorial-card--rotate-right:hover,
    .hero-editorial-card--rotate-right:focus-within,
    .hero-editorial-card--upright:hover,
    .hero-editorial-card--upright:focus-within {
      transform: none;
    }
    .hero-editorial-card:hover .hero-editorial-card__arrow,
    .hero-editorial-card:focus-within .hero-editorial-card__arrow {
      transform: none;
    }
  }
/* ── Per-card title / description / arrow ink ──
     Scoped via the existing bg-* utility classes so each card's text
     uses its per-card ink token. Solid colours — no opacity reduction
     on essential text. Placed after the reduced-motion block so the
     preserveRules ranges (561-756) stay undisturbed. */
.hero-editorial-card.bg-linen-card .hero-editorial-card__title {
    color: oklch(var(--hero-card-1-ink));
  }
.hero-editorial-card.bg-linen-card .hero-editorial-card__description {
    color: oklch(var(--hero-card-1-ink));
  }
.hero-editorial-card.bg-linen-card .hero-editorial-card__arrow {
    color: oklch(var(--hero-card-1-ink));
  }
.hero-editorial-card.bg-mushroom-card .hero-editorial-card__title {
    color: oklch(var(--hero-card-2-ink));
  }
.hero-editorial-card.bg-mushroom-card .hero-editorial-card__description {
    color: oklch(var(--hero-card-2-ink));
  }
.hero-editorial-card.bg-mushroom-card .hero-editorial-card__arrow {
    color: oklch(var(--hero-card-2-ink));
  }
.hero-editorial-card.bg-leather-card .hero-editorial-card__title {
    color: oklch(var(--hero-card-3-ink));
  }
.hero-editorial-card.bg-leather-card .hero-editorial-card__description {
    color: oklch(var(--hero-card-3-ink));
  }
.hero-editorial-card.bg-leather-card .hero-editorial-card__arrow {
    color: oklch(var(--hero-card-3-ink));
  }
.hero-editorial-card.bg-charcoal-brown-card .hero-editorial-card__title {
    color: oklch(var(--hero-card-4-ink));
  }
.hero-editorial-card.bg-charcoal-brown-card
    .hero-editorial-card__description {
    color: oklch(var(--hero-card-4-ink));
  }
.hero-editorial-card.bg-charcoal-brown-card .hero-editorial-card__arrow {
    color: oklch(var(--hero-card-4-ink));
  }
/* ── Shared subtle paper-grain texture ──
     ONE shared rule on .hero-editorial-card (not per-card) applying a
     very low-opacity paper-grain via a faint repeating radial-gradient.
     Subtle enough not to interfere with readability; sits above the
     card background but below text content. */
.hero-editorial-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: radial-gradient(
      circle at 1px 1px,
      oklch(0.21 0.012 60 / 0.028) 1px,
      transparent 0
    );
    background-size: 3px 3px;
    mix-blend-mode: multiply;
    opacity: 0.6;
    z-index: 0;
  }
/* Keep card content above the grain layer. */
.hero-editorial-card > * {
    position: relative;
    z-index: 1;
  }
/* ── Hover brighten ──
     Brightens the card very slightly on hover / focus-within without
     introducing a new colour. Does NOT touch the existing hover
     lift/rotation rules above. */
.hero-editorial-card:hover,
  .hero-editorial-card:focus-within {
    filter: brightness(1.02);
  }
/* ── Card hover-lift — subtle translateY + shadow intensify ──
     Reusable on any interactive editorial card (latest-essay cards,
     directory rows-as-cards, etc.). Pairs with --transition-card-lift. */
.card-hover-lift {
    transition: var(--transition-card-lift);
    will-change: transform;
  }
.card-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-editorial-card-hover);
  }
.card-hover-lift:focus-within {
    box-shadow: var(--shadow-editorial-card-hover);
  }
@media (prefers-reduced-motion: reduce) {
    .card-hover-lift:hover,
    .hero-essay-card:hover {
      transform: none;
    }
  }
/* ── Desktop header nav — box-card tiles for the five primary sections ──
     Adapts the reference image's box-card shape/shadow treatment to the
     literary journal identity: ivory card surface, warm-ink editorial
     shadow, tight editorial radius, Fraunces serif labels. Inactive tiles
     use the resting card treatment; the active tile gets a 2px sage top
     rule (print flourish, mirrors .hero-essay-card--lead) plus a faint
     sage tint so the current section reads as "selected" without resorting
     to a SaaS pill. Hover lifts the tile and intensifies the warm-ink
     shadow. About stays a plain text link; Subscribe stays the oxblood
     button — only Essays, Technology & Society, Life & Reinvention, Books
     & Ideas, and Notebook become tiles. Mobile Sheet menu is unchanged. */
.nav-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: 0.375rem;
    box-shadow: var(--shadow-editorial-card);
    padding: 0.4rem 0.85rem;
    min-height: 2.25rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: oklch(var(--foreground) / 0.85);
    text-decoration: none;
    transition: var(--transition-card-lift);
    position: relative;
    white-space: nowrap;
  }
.nav-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-editorial-card-hover);
    color: oklch(var(--foreground));
    border-color: oklch(var(--border) / 0.9);
  }
.nav-tile:focus-visible {
    outline: none;
    box-shadow: var(--shadow-editorial-card-hover), 0 0 0 2px
      oklch(var(--ring) / 0.55), 0 0 0 4px oklch(var(--ring) / 0.2);
  }
.nav-tile:focus-visible:hover {
    transform: translateY(-2px);
  }
/* Active/current tile — 2px sage top rule (print flourish) + faint sage
     tint. Mirrors .hero-essay-card--lead's ::before so the active treatment
     reads as part of the same editorial language, not a SaaS pill. */
.nav-tile--active {
    color: oklch(var(--foreground));
    background: oklch(var(--primary) / 0.08);
    border-color: oklch(var(--primary) / 0.35);
    box-shadow: var(--shadow-editorial-card);
  }
.nav-tile--active::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: oklch(var(--primary));
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    pointer-events: none;
  }
.nav-tile--active:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-editorial-card-hover);
  }
@media (prefers-reduced-motion: reduce) {
    .nav-tile:hover,
    .nav-tile--active:hover {
      transform: none;
    }
  }
/* ── Notes from the Margins — numbered editorial list ──
     An elegant numbered list of exactly three posts with thin divider
     lines, generous spacing, and a small directional arrow per item.
     NO large image cards — text-only editorial rows. Each row is a
     single <a> so the whole row is a generous hit target; the arrow
     nudges on hover/focus via the group-hover pattern. */
.margins-list {
    display: flex;
    flex-direction: column;
  }
.margins-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    align-items: baseline;
    padding-block: 1.75rem;
    border-top: 1px solid oklch(var(--border) / 0.7);
    transition: var(--transition-smooth);
  }
.margins-row:last-child {
    border-bottom: 1px solid oklch(var(--border) / 0.7);
  }
.margins-row:hover {
    background: oklch(var(--muted) / 0.35);
  }
.margins-row__number {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: oklch(var(--muted-foreground));
    align-self: start;
    padding-top: 0.35rem;
    min-width: 2.25rem;
  }
.margins-row__body {
    min-width: 0;
  }
.margins-row__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.2;
    color: oklch(var(--foreground));
    text-wrap: balance;
    transition: color var(--transition-smooth);
  }
.margins-row:hover .margins-row__title,
  .margins-row:focus-within .margins-row__title {
    color: oklch(var(--accent));
  }
.margins-row__teaser {
    margin-top: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: oklch(var(--muted-foreground));
    text-wrap: pretty;
    max-width: 42ch;
  }
.margins-row__arrow {
    align-self: center;
    color: oklch(var(--muted-foreground));
    font-size: 1.1rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color
      var(--transition-smooth);
  }
.margins-row:hover .margins-row__arrow,
  .margins-row:focus-within .margins-row__arrow {
    color: oklch(var(--accent));
    transform: translateX(5px);
  }
@media (prefers-reduced-motion: reduce) {
    .margins-row__arrow,
    .margins-row:hover .margins-row__arrow,
    .margins-row:focus-within .margins-row__arrow {
      transform: none;
    }
  }
/* ── Margin Observer — newspaper clipping ──
     A slightly imperfect newspaper clipping / miniature broadsheet.
     Warm cream paper, faded ink, espresso details, a single oxblood
     accent. Slight rotation (1-2deg), soft warm-ink shadow, and a
     deckled/torn edge effect via a layered box-shadow + filter. The
     paper-grain utility supplies the aged-paper texture. */
.margin-newspaper {
    position: relative;
    background: oklch(var(--margin-paper));
    color: oklch(var(--margin-ink));
    padding: clamp(1.5rem, 3vw, 2.5rem);
    transform: rotate(-1.4deg);
    box-shadow: 0 1px 2px 0 oklch(0.21 0.012 60 / 0.08), 0 14px 32px -14px
      oklch(0.21 0.012 60 / 0.28), 0 0 0 1px
      oklch(var(--margin-paper-edge) / 0.7);
    /* Deckled / torn edge — a soft irregular outline built from layered
       warm-paper-edge shadows so the clipping reads as physically torn
       rather than a clean rectangle. */
    filter: drop-shadow(0 1px 0 oklch(var(--margin-paper-edge)))
      drop-shadow(0 -1px 0 oklch(var(--margin-paper-edge)));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
.margin-newspaper:hover {
    transform: rotate(-0.6deg) translateY(-2px);
  }
.margin-newspaper:focus-within {
    transform: rotate(-0.6deg) translateY(-2px);
  }
/* Aged-paper texture overlay — sits above the paper, below content. */
.margin-newspaper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(
        circle at 1px 1px,
        oklch(0.21 0.012 60 / 0.04) 1px,
        transparent 0
      ),
      radial-gradient(
        circle at 12px 8px,
        oklch(0.21 0.012 60 / 0.025) 1px,
        transparent 0
      );
    background-size: 3px 3px, 17px 17px;
    mix-blend-mode: multiply;
    opacity: 0.7;
    z-index: 0;
  }
/* A faint warm stain in one corner — a quiet aged-paper mark. */
.margin-newspaper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 50%;
    background: radial-gradient(
      ellipse at top right,
      oklch(0.5 0.03 70 / 0.12),
      transparent 70%
    );
    pointer-events: none;
    z-index: 0;
  }
.margin-newspaper > * {
    position: relative;
    z-index: 1;
  }
@media (prefers-reduced-motion: reduce) {
    .margin-newspaper,
    .margin-newspaper:hover,
    .margin-newspaper:focus-within {
      transform: rotate(-1.4deg);
      transition: none;
    }
  }
/* Masthead — large serif all-caps with a fine rule beneath. */
.margin-newspaper__masthead {
    text-align: center;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid oklch(var(--margin-ink-masthead));
  }
.margin-newspaper__masthead-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    letter-spacing: 0.04em;
    line-height: 1;
    color: oklch(var(--margin-ink-masthead));
    text-transform: uppercase;
  }
.margin-newspaper__masthead-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: oklch(var(--margin-ink-faded));
  }
/* Section label above the headline — the single oxblood detail. */
.margin-newspaper__section-label {
    display: inline-block;
    margin-top: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(var(--margin-accent));
    border-top: 1.5px solid oklch(var(--margin-accent));
    padding-top: 0.35rem;
  }
.margin-newspaper__headline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: oklch(var(--margin-ink-masthead));
    text-wrap: balance;
    margin-top: 0.6rem;
  }
.margin-newspaper__rule {
    border: 0;
    border-top: 1px solid oklch(var(--margin-rule) / 0.7);
    margin-block: 1rem;
  }
/* Two narrow text columns — CSS multi-column for a true broadsheet feel. */
.margin-newspaper__columns {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    -moz-column-rule: 1px solid oklch(var(--margin-rule) / 0.5);
         column-rule: 1px solid oklch(var(--margin-rule) / 0.5);
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.65;
    color: oklch(var(--margin-ink));
    text-align: justify;
    hyphens: auto;
  }
.margin-newspaper__columns p {
    margin: 0;
  }
/* On narrow viewports collapse to a single column for readability. */
@media (max-width: 520px) {
    .margin-newspaper__columns {
      -moz-column-count: 1;
           column-count: 1;
      text-align: left;
    }
  }
/* Ketchup bottle illustration — centred, monochrome line art. */
.margin-newspaper__illustration {
    display: flex;
    justify-content: center;
    margin-block: 1.25rem;
    color: oklch(var(--margin-ink-masthead));
  }
.margin-newspaper__illustration svg {
    width: auto;
    height: clamp(3.5rem, 8vw, 5rem);
  }
/* Read-the-full-note link — quiet, with a focus-visible ring. */
.margin-newspaper__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: oklch(var(--margin-accent));
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: oklch(var(--margin-accent) / 0.4);
    transition: color var(--transition-smooth), text-decoration-color
      var(--transition-smooth);
  }
.margin-newspaper__link:hover {
    color: oklch(var(--margin-ink-masthead));
    text-decoration-color: oklch(var(--margin-ink-masthead));
  }
.margin-newspaper__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--margin-accent) / 0.45), 0 0 0 4px
      oklch(var(--margin-paper));
    border-radius: 0.125rem;
  }
.margin-newspaper__link-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
.margin-newspaper__link:hover .margin-newspaper__link-arrow,
  .margin-newspaper__link:focus-visible .margin-newspaper__link-arrow {
    transform: translateX(3px);
  }
@media (prefers-reduced-motion: reduce) {
    .margin-newspaper__link-arrow,
    .margin-newspaper__link:hover .margin-newspaper__link-arrow,
    .margin-newspaper__link:focus-visible .margin-newspaper__link-arrow {
      transform: none;
    }
  }
/* ── Our Books Suggestion — curated bookshelf grid ──
     A 3-per-row book grid on the bone page (between Notes from the
     Margins and Top Recommended Readings). Each card reads as a small
     editorial object: a hairline-warmer card surface, a mushroom-grey
     hairline frame around the auto-fetched cover, faded-espresso blurb
     ink, quiet tag chips, and a single oxblood "View all books" link.
     Cards reuse the .card-hover-lift behaviour (translateY + shadow
     intensify) and open the Amazon URL in a new tab. All tones stay
     within the warm bone / espresso / mushroom / oxblood palette. */
.books-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
@media (min-width: 640px) {
    .books-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.75rem;
    }
  }
@media (min-width: 1024px) {
    .books-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
  }
.book-card {
    display: flex;
    flex-direction: column;
    background: oklch(var(--book-card-bg));
    color: oklch(var(--book-card-foreground));
    border: 1px solid oklch(var(--border));
    border-radius: 0.5rem;
    box-shadow: var(--book-shadow);
    padding: 1.25rem;
    text-decoration: none;
    transition: var(--transition-book-card);
    will-change: transform;
  }
.book-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--book-shadow-hover);
  }
.book-card:focus-within {
    box-shadow: var(--book-shadow-hover);
  }
.book-card:focus-visible {
    outline: none;
    box-shadow: var(--book-shadow-hover), 0 0 0 2px oklch(var(--ring) / 0.55), 0
      0 0 4px oklch(var(--ring) / 0.2);
  }
/* Cover frame — a mushroom-grey hairline around the auto-fetched
     cover image. The frame reads as a quiet mat board, not a SaaS
     thumbnail. Aspect ratio holds the layout stable while the cover
     loads from Amazon. */
.book-card__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: oklch(var(--book-cover-bg));
    border: 1px solid oklch(var(--book-cover-frame));
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 1rem;
  }
.book-card__cover:not(.book-card__cover--admin) img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
/* Typographic stand-in shown inside the cover frame when the Amazon
     cover fetch failed and coverImageUrl was cleared. Fills the frame
     (aspect-ratio + width stay on .book-card__cover) and centers the
     title + author so the card reads as a book even without a cover. */
.book-card__cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    text-align: center;
  }
.book-card__cover-placeholder-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.25;
    color: oklch(var(--book-title-ink));
    text-wrap: balance;
  }
.book-card__cover-placeholder-author {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: oklch(var(--book-author-ink));
    text-wrap: pretty;
  }
.book-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.2;
    color: oklch(var(--book-title-ink));
    text-wrap: balance;
    margin: 0;
  }
.book-card__author {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: oklch(var(--book-author-ink));
    margin-top: 0.35rem;
  }
.book-card__blurb {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.92rem;
    line-height: 1.55;
    color: oklch(var(--book-blurb-ink));
    text-wrap: pretty;
    margin-top: 0.6rem;
  }
/* Compact prose for the rendered blurb HTML on the card. The blurb is
     authored in the rich text editor and stored as HTML; on the card we
     only show a short preview, so paragraphs collapse to tight spacing,
     headings are tamed down to the card's body size (no large display
     headings in a small card), lists sit inline-ish, and links stay
     quiet so the card reads as a single block of preview copy. */
.book-card__blurb > * + * {
    margin-top: 0.4rem;
  }
.book-card__blurb p {
    margin: 0;
  }
.book-card__blurb h2,
  .book-card__blurb h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    color: oklch(var(--book-blurb-ink));
    margin: 0;
  }
.book-card__blurb h2:first-child,
  .book-card__blurb h3:first-child {
    margin-top: 0;
  }
.book-card__blurb blockquote {
    margin: 0;
    padding-left: 0.6rem;
    border-left: 2px solid oklch(var(--book-tag-border));
    font-style: italic;
    color: oklch(var(--book-blurb-ink));
  }
.book-card__blurb ul,
  .book-card__blurb ol {
    padding-left: 1.1rem;
    margin: 0;
  }
.book-card__blurb li {
    line-height: 1.55;
    margin-bottom: 0.15rem;
  }
.book-card__blurb a {
    color: oklch(var(--book-blurb-ink));
    text-decoration: underline;
    text-underline-offset: 2px;
  }
.book-card__blurb strong {
    font-weight: 600;
  }
.book-card__blurb em {
    font-style: italic;
  }
/* Tag chips — quiet, mushroom-bordered, muted surface. The active
     filter tag reuses the oxblood --accent (no new colour). */
.book-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border: 1px solid oklch(var(--book-tag-border));
    border-radius: 0.25rem;
    background: oklch(var(--book-tag-bg));
    color: oklch(var(--book-tag-foreground));
    text-decoration: none;
    transition: var(--transition-smooth);
  }
.book-tag:hover {
    border-color: oklch(var(--book-tag-active-border) / 0.6);
    color: oklch(var(--book-tag-active-foreground));
  }
.book-tag--active {
    background: oklch(var(--book-tag-active-bg));
    color: oklch(var(--book-tag-active-foreground));
    border-color: oklch(var(--book-tag-active-border));
  }
.book-tag--active:hover {
    background: oklch(var(--book-tag-active-bg) / 0.9);
    color: oklch(var(--book-tag-active-foreground));
  }
/* Empty state — quiet, faded-ink messaging when no books match the
     selected tag on the listing page. */
.book-empty-state {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: oklch(var(--book-empty-ink));
    text-align: center;
    padding-block: 3rem;
    text-wrap: pretty;
  }
/* "View all books" link — single oxblood editorial link below the
     15 homepage books, leading to the full books listing page. */
.book-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2.25rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: oklch(var(--book-link-ink));
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: oklch(var(--book-link-ink) / 0.4);
    transition: color var(--transition-smooth), text-decoration-color
      var(--transition-smooth);
  }
.book-view-all:hover {
    color: oklch(var(--accent));
    text-decoration-color: oklch(var(--accent));
  }
.book-view-all:focus-visible {
    outline: none;
    border-radius: 0.125rem;
    box-shadow: 0 0 0 2px oklch(var(--accent) / 0.45), 0 0 0 4px
      oklch(var(--background));
  }
.book-view-all__arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
.book-view-all:hover .book-view-all__arrow,
  .book-view-all:focus-visible .book-view-all__arrow {
    transform: translateX(4px);
  }
@media (prefers-reduced-motion: reduce) {
    .book-card:hover,
    .book-view-all:hover .book-view-all__arrow,
    .book-view-all:focus-visible .book-view-all__arrow {
      transform: none;
    }
  }
/* ── Book detail page — single-book editorial spread ─────────────
     A two-column editorial layout on wide screens (cover left, body
     right) collapsing to a single stacked column on mobile. The cover
     sits in a large mushroom-grey hairline mat (2/3 aspect, contained
     so the full Amazon cover is never cropped), the title is an
     editorial serif display, the author a faded-espresso byline, the
     rating an oxblood star row, the summary a longer editorial-measure
     prose block, and the Buy on Amazon button a single oxblood accent.
     A quiet back link returns to /books. Mirrors the BookCard empty-
     cover typographic placeholder when no cover image resolves. */
.book-detail {
    background: oklch(var(--book-detail-bg));
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 72rem;
    margin-inline: auto;
    padding-block: 2.5rem;
    padding-inline: 1.25rem;
  }
@media (min-width: 900px) {
    .book-detail {
      grid-template-columns: 22rem 1fr;
      gap: 3.5rem;
      padding-block: 4rem;
      padding-inline: 2rem;
    }
  }
/* Large cover frame — mushroom-grey hairline mat, 2/3 aspect,
     object-fit:contain so the full cover is never cropped. */
.book-detail__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: oklch(var(--book-detail-cover-bg));
    border: 1px solid oklch(var(--book-detail-cover-frame));
    border-radius: 0.375rem;
    overflow: hidden;
    box-shadow: var(--book-detail-shadow);
  }
.book-detail__cover img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
/* Typographic stand-in shown inside the cover frame when no cover
     image resolves — mirrors BookCard's empty-cover placeholder but
     scaled up for the detail spread. Fills the frame (aspect-ratio +
     width stay on .book-detail__cover) and centers the title + author
     so the page reads as a book even without a cover. */
.book-detail__cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
  }
.book-detail__cover-placeholder-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.2;
    color: oklch(var(--book-detail-title-ink));
    text-wrap: balance;
  }
.book-detail__cover-placeholder-author {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: oklch(var(--book-detail-author-ink));
    text-wrap: pretty;
  }
.book-detail__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.85rem);
    line-height: 1.1;
    color: oklch(var(--book-detail-title-ink));
    text-wrap: balance;
    margin: 0;
  }
.book-detail__author {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: oklch(var(--book-detail-author-ink));
    margin-top: 0.75rem;
  }
/* Star rating row — oxblood filled stars, mushroom-grey empty stars.
     Inline-flex so the row hugs its content; gap separates the stars
     from an optional numeric label. */
.book-detail__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 1.25rem;
    color: oklch(var(--book-detail-rating-ink));
    font-family: var(--font-body);
  }
.book-detail__rating-star {
    color: oklch(var(--book-detail-rating-ink));
    font-size: 1.25rem;
    line-height: 1;
  }
.book-detail__rating-star--empty {
    color: oklch(var(--book-detail-rating-empty-ink));
  }
/* Summary — longer editorial-measure prose. A measure wide enough
      for comfortable long-form reading but narrow enough to stay
      editorial (~38em), faded-espresso ink, generous leading. The rich-
      element rules (headings, blockquotes, lists, links, strong, em)
      live on the shared .book-detail__prose class below so the blurb
      and the summary share them without duplication. */
.book-detail__summary {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.7;
    color: oklch(var(--book-detail-summary-ink));
    max-width: 38em;
    margin-top: 1.75rem;
    text-wrap: pretty;
  }
/* Shared rich-prose rules for the blurb and summary on the book detail
      page. Both fields are authored in the same rich text editor and
      stored as HTML, so they need identical heading/blockquote/list/
      link/strong/em styling. The base measure, ink, and leading stay on
     each field's own class above; this class only adds the rich-element
     rules so a plain summary still reads cleanly and a structured blurb
     renders as designed editorial copy. */
.book-detail__prose > * + * {
    margin-top: 1rem;
  }
.book-detail__prose p {
    margin: 0;
  }
.book-detail__prose h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    color: oklch(var(--book-detail-title-ink));
    margin-top: 1.75rem;
  }
.book-detail__prose h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.3;
    color: oklch(var(--book-detail-title-ink));
    margin-top: 1.5rem;
  }
.book-detail__prose h2:first-child,
  .book-detail__prose h3:first-child {
    margin-top: 0;
  }
.book-detail__prose blockquote {
    border-left: 2px solid oklch(var(--accent));
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.4;
    color: oklch(var(--book-detail-title-ink));
  }
.book-detail__prose ul,
  .book-detail__prose ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
  }
.book-detail__prose li {
    line-height: 1.7;
    margin-bottom: 0.25rem;
  }
.book-detail__prose a {
    color: oklch(var(--accent));
    text-decoration: underline;
    text-underline-offset: 2px;
  }
.book-detail__prose a:hover {
    color: oklch(var(--accent) / 0.8);
  }
.book-detail__prose strong {
    font-weight: 600;
  }
.book-detail__prose em {
    font-style: italic;
  }
/* Blurb — rich editorial prose (paragraphs, headings, blockquotes,
      lists, links, strong, em) rendered via dangerouslySetInnerHTML.
      Mirrors the summary's measure and ink; the rich-element rules are
      shared via .book-detail__prose so the blurb and summary stay in
      sync. */
.book-detail__blurb {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.7;
    color: oklch(var(--book-detail-summary-ink));
    max-width: 38em;
    margin-top: 1.75rem;
    text-wrap: pretty;
  }
/* Buy on Amazon button — single oxblood accent, solid fill, opens
     the Amazon URL in a new tab. Verb-first label, one primary action
     on the page. */
.book-detail__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.25rem;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: oklch(var(--book-detail-buy-foreground));
    background: oklch(var(--book-detail-buy-bg));
    border: 1px solid oklch(var(--book-detail-buy-border));
    border-radius: 0.375rem;
    text-decoration: none;
    transition: var(--transition-book-detail);
    will-change: transform;
  }
.book-detail__buy:hover {
    background: oklch(var(--book-detail-buy-hover-bg));
    transform: translateY(-1px);
  }
.book-detail__buy:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--background)), 0 0 0 4px
      oklch(var(--book-detail-buy-bg) / 0.55);
  }
.book-detail__buy:active {
    transform: translateY(0);
  }
/* Back link — quiet, faded-espresso, returns to /books. Sits above
     the spread so the reader can retreat before committing to the
     long-form read. */
.book-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    grid-column: 1 / -1;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: oklch(var(--book-detail-back-ink));
    text-decoration: none;
    transition: color var(--transition-smooth);
    margin-bottom: 0.5rem;
  }
.book-detail__back:hover {
    color: oklch(var(--book-detail-back-hover-ink));
  }
.book-detail__back:focus-visible {
    outline: none;
    border-radius: 0.125rem;
    box-shadow: 0 0 0 2px oklch(var(--book-detail-back-hover-ink) / 0.45), 0 0 0
      4px oklch(var(--background));
  }
@media (prefers-reduced-motion: reduce) {
    .book-detail__buy:hover,
    .book-detail__buy:active {
      transform: none;
    }
  }
/* ── Newsletter landing page — six-section editorial spread ────────
     A dedicated per-newsletter landing page rendered at
     /newsletters/$slug. The page reads as a long-form editorial
     magazine spread on the bone page: six numbered sections separated
     by fine rules, generous vertical padding, and a single oxblood
     accent. NO new tokens — everything reuses the existing warm
     ivory / charcoal / sage / oxblood palette, Fraunces + General Sans
     + JetBrains Mono, tight 0.125rem radius, and the existing
     .newsletter-panel subscription panel. No gradients, glass, royal
     blue/purple, fake testimonials/stats, or SaaS pills.

     Section order (per the build contract):
       1. What it covers — newsletter title + description blurb
       2. When it is delivered — cadence as an editorial label
       3. One sample edition — a single featured ArticleCard
       4. Three recent editions — three ArticleCards, most-recent first
       5. Email subscription form — embedded .newsletter-panel
       6. Explore the archive — a Link to the category archive route

     The .nl-* utilities below supply the section rhythm, the cadence
     label treatment, the sample-edition lead emphasis, and the archive
     link. The ArticleCard and .newsletter-panel components are reused
     unchanged. */
/* Page shell — a single editorial column with generous measure and
     vertical rhythm. Centred on the bone page so the six sections read
     as a vertical magazine spread, not a SaaS landing. */
.nl-spread {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 7vw, 6rem);
    max-width: 46rem;
    margin-inline: auto;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: 1.25rem;
  }
@media (min-width: 768px) {
    .nl-spread {
      padding-inline: 2rem;
    }
  }
/* Section heading — a numbered editorial heading. A mono kicker
     (section number + label) sits above a Fraunces display heading,
     with a fine editorial rule beneath. The number reuses the
     existing --editorial-list-numeral token; the heading reuses
     --foreground. No new colour. */
.nl-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
.nl-section__kicker {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    margin: 0;
  }
.nl-section__kicker-number {
    color: oklch(var(--editorial-list-numeral));
    font-weight: 500;
  }
.nl-section__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: oklch(var(--foreground));
    text-wrap: balance;
    margin: 0;
  }
.nl-section__rule {
    border: 0;
    border-top: 1px solid oklch(var(--border) / 0.7);
    margin-top: 0.5rem;
  }
/* ── Section 1 — What it covers ──
     The newsletter's editorial framing. A large Fraunces title acts
     as the page's hero headline (bigger than the section titles), with
     the description blurb as a standfirst beneath. Reuses --foreground
     and --muted-foreground; no new tokens. */
.nl-hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: oklch(var(--foreground));
    text-wrap: balance;
    margin: 0;
  }
.nl-hero-blurb {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.7;
    color: oklch(var(--foreground) / 0.82);
    text-wrap: pretty;
    max-width: 38em;
    margin-top: 1.25rem;
  }
/* ── Section 2 — When it is delivered (cadence label) ──
     The cadence rendered as a clear editorial delivery mark: a
     mushroom-bordered bone card with a mono "DELIVERED" kicker, the
     cadence in Fraunces, and a single oxblood accent rule along the
     top edge (mirroring .hero-essay-card--lead's sage rule, but in
     oxblood so the cadence reads as the page's one warm accent
     before the subscription form). Reuses --card, --border, --accent,
     --foreground, --muted-foreground. */
.nl-cadence {
    position: relative;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: 0.375rem;
    box-shadow: var(--shadow-editorial-card);
    padding: clamp(1.5rem, 3vw, 2rem);
    overflow: hidden;
  }
.nl-cadence::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: oklch(var(--accent));
    z-index: 1;
  }
.nl-cadence__kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    margin: 0;
  }
.nl-cadence__value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    line-height: 1.15;
    color: oklch(var(--foreground));
    text-wrap: balance;
    margin-top: 0.6rem;
  }
.nl-cadence__note {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: oklch(var(--muted-foreground));
    text-wrap: pretty;
    margin-top: 0.5rem;
  }
/* ── Section 3 — One sample edition (featured ArticleCard) ──
     A single ArticleCard wrapped in a lead treatment so it reads as
     "the one to look at". The wrapper adds the same 2px sage top
     accent rule used by .hero-essay-card--lead, plus the stronger
     --shadow-editorial-lead. The ArticleCard inside is unchanged. */
.nl-sample {
    position: relative;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-editorial-lead);
    overflow: hidden;
  }
.nl-sample::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: oklch(var(--primary));
    z-index: 2;
  }
/* ── Section 4 — Three recent editions ──
     A vertical stack of three ArticleCards with fine divider rules
     between them, ordered most-recent first. Stacked (not gridded)
     so the section reads as an editorial feed within the narrow
     spread column. */
.nl-recent {
    display: flex;
    flex-direction: column;
  }
.nl-recent > * + * {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid oklch(var(--border) / 0.7);
  }
/* ── Section 6 — Explore the archive link ──
     A single oxblood editorial link to the category archive route,
     mirroring the .book-view-all pattern (oxblood ink, underline
     offset, arrow nudges on hover). Reuses --accent; no new token. */
.nl-archive-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: oklch(var(--accent));
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: oklch(var(--accent) / 0.4);
    transition: color var(--transition-smooth), text-decoration-color
      var(--transition-smooth);
  }
.nl-archive-link:hover {
    color: oklch(var(--foreground));
    text-decoration-color: oklch(var(--foreground));
  }
.nl-archive-link:focus-visible {
    outline: none;
    border-radius: 0.125rem;
    box-shadow: 0 0 0 2px oklch(var(--accent) / 0.45), 0 0 0 4px
      oklch(var(--background));
  }
.nl-archive-link__arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
.nl-archive-link:hover .nl-archive-link__arrow,
  .nl-archive-link:focus-visible .nl-archive-link__arrow {
    transform: translateX(4px);
  }
@media (prefers-reduced-motion: reduce) {
    .nl-archive-link:hover .nl-archive-link__arrow,
    .nl-archive-link:focus-visible .nl-archive-link__arrow {
      transform: none;
    }
  }
/* ════════════════════════════════════════════════════════════════════
     AI & SOCIETY LANDING PAGE — four-module editorial spread
     Reuses the Margins of Tomorrow palette only (warm ivory, charcoal,
     sage, oxblood). Tight 0.125rem radius. No gradients, no glass.
     All motion guarded by prefers-reduced-motion.
     ════════════════════════════════════════════════════════════════════ */
/* ── Shared module wrapper �─
     Every one of the four modules sits inside .ais-module. The numbered
     editorial kicker (01–04) is rendered in JetBrains Mono and reads as a
     magazine section marker, never a SaaS pill. */
.ais-module {
    position: relative;
    max-width: 72rem;
    margin-inline: auto;
    padding-block: clamp(0.75rem, 1.5vw, 1.25rem);
  }
/* Mobile — raise the section padding floor so the three editorial modules
      don't feel cramped against each other on phones. Desktop keeps the
      clamp(0.75rem, 1.5vw, 1.25rem) rhythm; below 768px the vw floor collapses to
      ~0.75rem, so we pin a more generous block padding that still tapers with
      the viewport. */
@media (max-width: 48rem) {
    .ais-module {
      padding-block: clamp(1rem, 3vw, 1.25rem);
    }
  }
/* ── Extra breathing room at the module boundaries only ──
     The modules stack as normal block flow, so the visible gap
     between adjacent modules is the sum of the upper module's
     padding-bottom and the lower module's padding-top. The base
     .ais-module padding-block rule above governs the 1↔2 gap and the
     intra-module rhythm and is intentionally left untouched. These
     sibling selectors raise ONLY the top padding of the module that
     follows a given signature inner class:
       • module 02 (calendar)  contains .ais-arrival  → raises next top
       • examined-life interlude contains .ais-examined → raises next top
       • module 03 (phone)     contains .ais-inside   → raises 04's top
     padding-bottom is left at the base value so the 1↔2 gap and the
     tail of every module are unchanged. The inner .ais-inside and
     .ais-archive-section blocks each carry a small margin-top; that
     margin is preserved and simply compounds with the new padding-top,
     which is the intended extra-air effect.

     NOTE: the new dark "AI & The Examined Life" interlude (.ais-examined)
     sits between the calendar (.ais-arrival) and the phone (.ais-inside).
     The general `.ais-module:has(.ais-arrival) + .ais-module` rule below
     already raises the top of whatever follows the calendar — which is
     now the dark interlude. A touch more top padding is desirable for the
     dark interlude (it is a dark editorial spread inserted into an
     otherwise light page), so a dedicated
     `.ais-module:has(.ais-arrival) + .ais-module:has(.ais-examined)`
     selector raises its top a little further. The
     `.ais-module:has(.ais-examined) + .ais-module` selector then raises
     the top of the phone module that follows the dark interlude, so the
     re-entry from dark back to light also breathes. The existing
     `.ais-module:has(.ais-inside) + .ais-module` rule is preserved
     unchanged — it still governs the archive module's top padding. */
.ais-module:has(.ais-arrival) + .ais-module {
    padding-top: clamp(2.5rem, 5vw, 4rem);
  }
/* The dark examined-life interlude follows the calendar — give it a
     touch more top air than the general rule above so the dark spread
     separates clearly from the light calendar. */
.ais-module:has(.ais-arrival) + .ais-module:has(.ais-examined) {
    padding-top: clamp(3rem, 6vw, 4.5rem);
  }
/* The phone module follows the dark interlude — raise its top so the
     re-entry from dark back to light breathes. */
.ais-module:has(.ais-examined) + .ais-module {
    padding-top: clamp(2.5rem, 5vw, 4rem);
  }
.ais-module:has(.ais-inside) + .ais-module {
    padding-top: clamp(2.5rem, 5vw, 4rem);
  }
/* Mobile — keep the extra boundary air readable on small screens,
     where the base .ais-module padding-block floor is already raised.
     A slightly smaller clamp keeps phones from feeling over-spaced. */
@media (max-width: 48rem) {
    .ais-module:has(.ais-arrival) + .ais-module,
    .ais-module:has(.ais-examined) + .ais-module,
    .ais-module:has(.ais-inside) + .ais-module {
      padding-top: clamp(2rem, 5vw, 3rem);
    }
    .ais-module:has(.ais-arrival) + .ais-module:has(.ais-examined) {
      padding-top: clamp(2.25rem, 5vw, 3.25rem);
    }
  }
.ais-module__kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
  }
.ais-module__kicker-number {
    color: oklch(var(--accent));
    font-variant-numeric: tabular-nums;
  }
.ais-module__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: oklch(var(--foreground));
    text-wrap: balance;
    margin-top: 0.75rem;
  }
.ais-module__caption {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    color: oklch(var(--muted-foreground));
    text-wrap: pretty;
    max-width: 38em;
    margin-top: 0.75rem;
  }
/* Mobile — module captions read denser on a narrow measure. Lift the
     line-height slightly and add a touch more top margin so the caption
     separates from the title and breathes against the body that follows.
     Desktop keeps the editorial 1.65 / 0.75rem rhythm. */
@media (max-width: 48rem) {
    .ais-module__caption {
      line-height: 1.7;
      margin-top: 1rem;
    }
  }
/* ── Module 01 — Two-row editorial hero ──
     Row 1 (.ais-hero-top): a 1fr/1fr split — the Fraunces headline +
     dek + CTA on the left, the inline-SVG editorial cover-plate visual
     on the right, with an organic curved divider between them.
     Row 2 (.ais-hero-form-zone): the embedded NewsletterForm spanning
     the FULL hero width. This is the fix for the truncation root cause:
     the form's internal 55/45 copy/form grid previously sat inside a
     40% column, so its right (form) column got only ~18% viewport and
     truncated the email placeholder, the "Join the margins" button and
     the consent label. Giving the form the whole hero width lets each
     internal column breathe. min-width constraints on the form band
     guarantee the columns never shrink below content size at any
     breakpoint. */
/* ── Keyframes (declared here, not only in tailwind.config.js) ──
      The rules below reference these keyframe names via raw `animation:`
      CSS rather than the `animate-*` Tailwind utilities. Tailwind's JIT
      only emits @keyframes for animations used as utility classes in
      scanned source, so defining them solely in tailwind.config.js
      causes the @keyframes blocks to be dropped from the built CSS.
      With animation-fill-mode: both and no resolved `to` state, affected
      elements (e.g. .ais-hero__left, .ais-hero__sheet) stay at opacity:0
      forever and render invisible. Declaring the @keyframes here ships
      them regardless of utility usage. Definitions mirror the
      tailwind.config.js keyframes exactly. */
@keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes paper-settle {
    from {
      opacity: 0;
      transform: translateY(10px) rotate(var(--paper-settle-from-rot, 0deg));
    }
    to {
      opacity: 1;
      transform: translateY(0) rotate(var(--paper-settle-rot, 0deg));
    }
  }
@keyframes phone-rise {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
@keyframes arrow-nudge {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(4px);
    }
  }
/* ── Module 01 — Two-column editorial hero ──
      LEFT column: JetBrains Mono eyebrow + label, italic Fraunces
      headline (broken across lines), General Sans dek, an inline
      subscription form (email + weathered-leather CTA + consent +
      aria-live feedback), a JetBrains Mono cadence line, and a
      secondary "read the first letter" link. RIGHT column: a layered
      paper-sheet composition — a faint grid diagram sheet, a raw-linen
      policy sheet with mono annotations, and a cream "edition" sheet
      (a link) carrying the masthead / edition label / title / standfirst
      / meta, with a floating oxblood annotation tag and a curved SVG
      arrow connecting them. Warm bone ground, oxblood hairline rule
      near the top, tight 0.125rem radius throughout. Scoped to
      .ais-hero* only. */
.ais-hero {
    position: relative;
    max-width: 93.75rem;
    margin: 0 auto;
    min-height: clamp(760px, 82vh, 820px);
    display: grid;
    /* 45% text / 55% visual — the editorial paper composition gets the
       larger share so the three sheets can breathe. Generous 4rem gap. */
    grid-template-columns: 45fr 55fr;
    gap: 4rem;
    align-items: center;
    padding: 4rem 2rem 5rem;
    background: var(--ais-hero-bg);
    background-image: repeating-linear-gradient(
      0deg,
      oklch(0.21 0.012 60 / 0.012) 0,
      oklch(0.21 0.012 60 / 0.012) 1px,
      transparent 1px,
      transparent 3px
    );
  }
/* Thin oxblood horizontal rule near the top — a quiet masthead mark. */
.ais-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: var(--ais-hero-rule);
    opacity: 0.5;
    pointer-events: none;
  }
/* ── Left column — copy + form ── */
/* Visible by default (opacity:1, transform:none). The entrance animation
     is a one-shot enhancement using animation-fill-mode: forwards (NOT
     `both`), so if the animation is cancelled, fails to resolve, or its
     @keyframe is missing, the element falls back to this visible resting
     state instead of getting stuck at the keyframe's `from` (opacity:0).
     See the project learning on fade-in-up / paper-settle invisibility. */
.ais-hero__left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 36rem;
    min-width: 0;
    opacity: 1;
    transform: none;
    animation: fade-in-up 600ms ease-out forwards;
  }
.ais-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    margin: 0;
  }
.ais-hero__label {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--foreground);
    font-weight: 600;
    margin: 0;
  }
.ais-hero__headline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--foreground);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0.25rem 0 0;
    /* Tuned so the three explicit <br> line breaks sit on exactly three
       balanced lines at the desktop width. Lowered the max from 4.5rem
       toward 3.875rem and eased the vw slope so the headline does not
       collapse into five narrow lines on the wider 45% column. */
    font-size: clamp(2.625rem, 3.6vw, 3.875rem);
    text-wrap: balance;
  }
.ais-hero__dek {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: oklch(0.4 0.012 55);
    max-width: 32rem;
    margin: 0;
    text-wrap: pretty;
  }
/* ── Inline subscription form ──
     The form zone carries a larger top margin than the uniform column
     gap so there is a clearly larger gap between the dek paragraph and
     the form than between the eyebrow and headline. */
.ais-hero__form-zone {
    margin-top: 1.25rem;
  }
.ais-hero__form {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
/* The email field + CTA button sit on ONE row. The consent checkbox
     is a sibling BELOW this row (not a third column inside it). */
.ais-hero__form-row {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: stretch;
  }
/* Email field at least 300px wide (min-width:18.75rem) so it is never
     cramped, growing to fill the row. The CTA button is fixed at ~220px
     (13.75rem) so the field is comfortably wider than the button on the
     same horizontal row. */
.ais-hero__field {
    flex: 2 1 auto;
    min-width: 18.75rem;
    background: var(--ais-hero-paper-cream);
    border: 1px solid oklch(0.78 0.008 75);
    border-radius: 0.125rem;
    padding: 0.875rem 1.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--foreground);
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }
.ais-hero__field::-moz-placeholder {
    color: oklch(0.55 0.01 60);
  }
.ais-hero__field::placeholder {
    color: oklch(0.55 0.01 60);
  }
.ais-hero__field:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
  }
.ais-hero__field:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
.ais-hero__button {
    flex: 0 0 13.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: oklch(0.5 0.06 40);
    color: oklch(0.96 0.006 85);
    border: 1px solid var(--accent);
    border-radius: 0.125rem;
    padding: 0.875rem 1.5rem;
    min-height: 2.75rem;
    /* Fixed ~220px width so the email field (min 300px) is comfortably
       wider than the button on the same horizontal row. */
    width: 13.75rem;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 220ms ease, transform 220ms ease;
  }
.ais-hero__button:hover:not(:disabled) {
    background: oklch(0.45 0.06 40);
  }
.ais-hero__button:hover:not(:disabled) .ais-hero__arrow-icon {
    transform: translateX(4px);
  }
.ais-hero__button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
.ais-hero__button:active:not(:disabled) {
    transform: translateY(1px);
  }
.ais-hero__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
.ais-hero__arrow-icon {
    flex: 0 0 auto;
    transition: transform 220ms ease;
  }
.ais-hero__consent {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: oklch(0.4 0.012 55);
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
  }
.ais-hero__consent input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    accent-color: var(--accent);
    width: 1rem;
    height: 1rem;
  }
.ais-hero__privacy-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color 180ms ease;
  }
.ais-hero__privacy-link:hover {
    color: oklch(0.32 0.09 28);
  }
.ais-hero__privacy-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
.ais-hero__feedback {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.4;
    margin-top: 0.75rem;
    min-height: 1.25rem;
  }
.ais-hero__feedback--success {
    color: oklch(0.4 0.09 145);
  }
.ais-hero__feedback--error,
  .ais-hero__feedback--duplicate {
    color: var(--accent);
  }
.ais-hero__cadence {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(0.4 0.012 55);
    margin-top: 0.5rem;
  }
.ais-hero__secondary-link {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    margin-top: 0.25rem;
    display: inline-block;
    transition: color 180ms ease;
  }
.ais-hero__secondary-link:hover {
    color: var(--accent);
  }
.ais-hero__secondary-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
/* ── Right column — static image of the three layered paper sheets ──
      A single square (1:1) image renders the three overlapping cream
      paper sheets on a warm bone background: the back human-life diagram
      sheet, the middle policy-note sheet with hand-drawn annotations,
      and the front Margins of Tomorrow edition cover, plus the SAMPLE
      LETTER curved oxblood arrow in the bottom-right. The whole image
      is wrapped in a clickable <Link> to the latest published article
      (or the sample slug), so the entire right column is the article
      link — preserving the click behaviour of the previous edition
      sheet. The .ais-hero__right container keeps its grid placement,
      padding and centring; the image scales to the column width on
      desktop, stays centred on tablet, and stacks below the left
      column on mobile without horizontal overflow. */
.ais-hero__right {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* The <Link> wrapper fills the right column so the whole image is
     clickable. Inherits text colour so no default link underline or
     blue leaks into the editorial composition. */
.ais-hero__right-link {
    display: block;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
    border-radius: 0.125rem;
    transition: transform 240ms ease, box-shadow 240ms ease;
    box-shadow: var(--shadow-paper-sheet), var(--shadow-paper-edge-inset);
  }
.ais-hero__right-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-paper-sheet-hover), var(--shadow-paper-edge-inset);
  }
.ais-hero__right-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
/* The static sheets image — responsive square that scales to the
     column width, never exceeds 100% of its container, and never
     causes horizontal overflow. Subtle paper shadow + tight radius
     keep the tactile academic-journal feel. */
.ais-hero__right-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 0.125rem;
  }
/* ── Responsive — tablet (1100px) ── */
@media (max-width: 68.75rem) {
    .ais-hero {
      grid-template-columns: 1fr;
      gap: 3rem;
      min-height: auto;
      padding: 3rem 1.5rem 4rem;
    }
    .ais-hero__right {
      min-height: 480px;
    }
    .ais-hero__headline {
      font-size: clamp(2.5rem, 6vw, 3.75rem);
    }
    .ais-hero__right-link {
      max-width: 26rem;
    }
  }
/* ── Responsive — mobile (768px) ── */
@media (max-width: 48rem) {
    .ais-hero {
      grid-template-columns: 1fr;
      gap: 2.5rem;
      min-height: auto;
      padding: 2.5rem 1.25rem 3rem;
    }
    .ais-hero__left {
      max-width: 100%;
      gap: 3rem;
    }
    .ais-hero__headline {
      font-size: clamp(2.25rem, 8vw, 3rem);
    }
    .ais-hero__form {
      flex-direction: column;
    }
    /* The email field + CTA button row stacks to a single column on
       mobile so neither is cramped; both take full width and the
       consent sits below. */
    .ais-hero__form-row {
      flex-direction: column;
      gap: 0.75rem;
    }
    .ais-hero__field,
    .ais-hero__button {
      width: 100%;
      flex: 1 1 auto;
    }
    .ais-hero__right {
      min-height: 420px;
    }
    .ais-hero__right-link {
      max-width: 20rem;
    }
  }
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .ais-hero__left {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .ais-hero__right-link {
      transition: none !important;
    }
    .ais-hero__right-link:hover {
      transform: none !important;
    }
    .ais-hero__button:hover svg,
    .ais-hero__button:hover .ais-hero__arrow-icon {
      transform: none !important;
    }
  }
/* ── Module 02 — "When It Arrives" two-column editorial module ──
     LEFT column: JetBrains Mono kicker, Fraunces serif heading (broken
     across two lines on desktop), General Sans body paragraph, widely-
     tracked cadence line, and a restrained outlined CTA that smooth-
     scrolls to and focuses #ais-subscribe-email. RIGHT column: a real,
     non-interactive HTML/CSS desk-calendar component. Warm cream paper
     with subtle grain, dark espresso binding strip across the top, fine
     raw-linen border, soft realistic shadow, a second sheet slightly
     behind the main page, and a ~1deg rotation. Monday-first six-row
     grid with weekday headers; outside-month days faded in mushroom
     grey; every in-month Monday given a subtle warm-grey circular
     background; the next delivery date given the strongest treatment
     (thin oxblood square outline + slightly larger espresso number). A
     "NEXT / LETTER" label and a thin hand-drawn-style curved oxblood
     arrow point to the delivery cell. No hover, no focus, no selection
     — the figure is role="img". Scoped to .ais-arrival* and
     .ais-calendar* only. */
/* ── Section layout — two columns, generous vertical padding ──
     Left column ~56%, right column ~44%, aligned to the calendar's
     vertical centre. Max content width ~1440px is governed by the
     page-level .ais-module wrapper. */
.ais-arrival {
    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    padding-block: clamp(0.375rem, 0.75vw, 0.625rem);
    max-width: 90rem;
    margin-inline: auto;
  }
@media (max-width: 47.99rem) {
    .ais-arrival {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(2.5rem, 6vw, 3.5rem);
      justify-items: center;
      padding-block: clamp(0.375rem, 1vw, 0.625rem);
    }
  }
/* ── LEFT COLUMN — editorial copy ── */
.ais-arrival__copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 38em;
    min-width: 0;
  }
.ais-arrival__kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(0.38 0.085 28);
    margin: 0;
  }
.ais-arrival__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: oklch(0.255 0.015 54);
    text-wrap: balance;
    /* The "When It Arrives" eyebrow now comes from AiModuleWrapper's
       kicker, which sits outside .ais-arrival__copy. A small top margin
       keeps the rhythm between that wrapper kicker and this headline
       neither too tight nor too loose. */
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
  }
.ais-arrival__title-line {
    display: block;
  }
@media (max-width: 47.99rem) {
    .ais-arrival__title {
      font-size: clamp(1.75rem, 7vw, 2.25rem);
    }
  }
.ais-arrival__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #5a524c;
    text-wrap: pretty;
    max-width: 38em;
    margin: 0;
  }
/* Mobile — spacious paragraph spacing preserved per the newsletter
     mobile-layout preference. Lift the line-height slightly so the
     body breathes on a narrow measure. */
@media (max-width: 48rem) {
    .ais-arrival__body {
      font-size: 1rem;
      line-height: 1.75;
    }
  }
.ais-arrival__feature-line {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: oklch(0.42 0.012 50);
    margin: 0.5rem 0 0;
  }
@media (max-width: 48rem) {
    .ais-arrival__feature-line {
      letter-spacing: 0.2em;
    }
  }
/* ── CTA — restrained outlined button ──
     Transparent background, espresso ink, oxblood 1px border, tight
     0.125rem radius, >=44px hit target, visible focus-visible. On
     hover the fill inverts to oxblood with cream text and the arrow
     nudges ~4px right. Transition 200–250ms. */
.ais-arrival__ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.75rem;
    padding: 0.8125rem 1.5rem;
    min-height: 2.75rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: oklch(0.255 0.015 54);
    background: transparent;
    border: 1px solid oklch(0.38 0.085 28);
    border-radius: 0.125rem;
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease, border-color
      220ms ease, transform 220ms ease;
  }
.ais-arrival__ghost-btn:hover {
    background: oklch(0.38 0.085 28);
    border-color: oklch(0.38 0.085 28);
    color: oklch(0.96 0.018 82);
  }
.ais-arrival__ghost-btn:focus-visible {
    outline: 2px solid oklch(0.38 0.085 28);
    outline-offset: 3px;
  }
.ais-arrival__ghost-btn:active {
    transform: translateY(1px);
  }
.ais-arrival__ghost-btn:hover .ais-arrival__ghost-btn-arrow {
    transform: translateX(0.25rem);
  }
.ais-arrival__ghost-btn-arrow {
    flex: 0 0 auto;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }
@media (prefers-reduced-motion: reduce) {
    .ais-arrival__ghost-btn {
      transition: none;
    }
    .ais-arrival__ghost-btn:active {
      transform: none;
    }
    .ais-arrival__ghost-btn:hover .ais-arrival__ghost-btn-arrow {
      transform: none;
    }
    .ais-arrival__ghost-btn-arrow {
      transition: none;
    }
  }
/* ── RIGHT COLUMN — real desk-calendar component ──
     Warm cream paper with a subtle paper grain (radial dot pattern via
     a faint background-image), fine raw-linen border, soft realistic
     shadow, a second sheet slightly behind the main page, and a ~1deg
     rotation. Dark espresso binding strip across the top via ::before.
     No hover, no focus, no selection — the figure is role="img". */
.ais-calendar {
    position: relative;
    background: #f5f0e7;
    background-image: radial-gradient(
      oklch(0.255 0.015 54 / 0.035) 0.5px,
      transparent 0.5px
    );
    background-size: 4px 4px;
    border: 1px solid #d8cfc1;
    border-radius: 0.125rem;
    box-shadow: 0 0.625rem 1.75rem rgba(41, 33, 28, 0.14), 0 0.125rem 0.375rem
      rgba(41, 33, 28, 0.08);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
    width: min(100%, 24rem);
    margin: 0;
    transform: rotate(1deg);
    transform-origin: center center;
  }
@media (prefers-reduced-motion: reduce) {
    .ais-calendar {
      transform: none;
    }
  }
/* Second sheet — slightly behind and offset, reads as a stacked
     page. Decorative only. */
.ais-calendar__back-sheet {
    position: absolute;
    inset: 0;
    background: #f5f0e7;
    border: 1px solid #d8cfc1;
    border-radius: 0.125rem;
    box-shadow: 0 0.375rem 0.75rem rgba(41, 33, 28, 0.08);
    transform: translate(0.375rem, 0.5rem) rotate(-1.5deg);
    z-index: -1;
  }
@media (prefers-reduced-motion: reduce) {
    .ais-calendar__back-sheet {
      transform: translate(0.375rem, 0.5rem);
    }
  }
/* Dark espresso binding strip across the top — simulates the
     spiral/flip binding of a real desk calendar. Sits above the card
     surface, slightly inset from the edges. */
.ais-calendar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.5rem;
    right: 0.5rem;
    height: 0.5rem;
    background: #29211c;
    border-radius: 0 0 0.1875rem 0.1875rem;
    box-shadow: inset 0 1px 0 oklch(0.28 0.01 50 / 0.6), 0 1px 2px
      rgba(0, 0, 0, 0.25);
    z-index: 2;
  }
/* ── Fraunces month/year header + thin oxblood rule ── */
.ais-calendar__header {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
    padding-top: 0.5rem;
  }
.ais-calendar__month {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: 1.625rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: oklch(0.255 0.015 54);
    text-transform: capitalize;
  }
.ais-calendar__rule {
    display: block;
    width: 2.5rem;
    height: 1px;
    background: oklch(0.38 0.085 28);
  }
/* ── Weekday header row ──
     JetBrains Mono short caps in warm graphite, evenly spaced across
     the seven grid columns. */
.ais-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }
.ais-calendar__weekday {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(0.42 0.012 50);
    text-align: center;
    padding: 0.25rem 0;
  }
/* ── Day grid ──
     Six rows of seven cells (42 total) for a stable card height. Each
     cell is a non-interactive span (no button, no hover, no focus, no
     tabIndex). Tight 0.125rem radius on highlighted cells only. */
.ais-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
  }
.ais-calendar__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1;
    color: oklch(0.255 0.015 54);
    border-radius: 0.125rem;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    position: relative;
  }
/* ── Outside (adjacent-month) days ──
     Faded mushroom-grey ink so the in-month days read as the figure. */
.ais-calendar__cell--outside {
    color: #b9b4ac;
  }
/* ── In-month Mondays (not the delivery date) ──
     Subtle warm-grey circular background marks the weekly cadence
     without competing with the delivery date. */
.ais-calendar__cell--monday::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 9999px;
    background: oklch(0.88 0.01 70 / 0.55);
    z-index: -1;
  }
/* ── Next delivery date (strongest treatment) ──
     Thin oxblood square outline, espresso date number, slightly larger
     emphasis. No filled button. The square outline is a non-colour cue
     (shape) in addition to the colour cue. */
.ais-calendar__cell--delivery {
    font-weight: 600;
    font-size: 1.0625rem;
    color: oklch(0.255 0.015 54);
    box-shadow: inset 0 0 0 1.5px oklch(0.38 0.085 28);
    border-radius: 0.1875rem;
  }
/* ── "NEXT / LETTER" label + thin oxblood arrow ──
     A small two-line JetBrains Mono label sits to the left of the
     delivery cell, with a thin hand-drawn-style oxblood SVG arrow
     curving down to the cell. Purely decorative — aria-hidden so
     screen readers skip it; the figure's aria-label + SR text carry
     the relationship. Positioned absolutely against the calendar
     figure so it overlays the grid without affecting layout. The
     vertical position is anchored to the delivery row via the
     --ais-delivery-row CSS variable set inline on the grid. */
.ais-arrival__next-letter {
    position: absolute;
    /* Anchor to the delivery row: each row is ~ (100% - header) / 6.
       We position the label just left of the Monday column (col 0),
       vertically centred on the delivery row. */
    top: calc(
      clamp(1.75rem, 3vw, 2.5rem) +
      1.25rem +
      0.5rem +
      0.5rem +
      (
        var(--ais-delivery-row, 2) *
        (100% - clamp(1.75rem, 3vw, 2.5rem) - 1.25rem - 0.5rem - 0.5rem) /
        6
      ) +
      ((100% - clamp(1.75rem, 3vw, 2.5rem) - 1.25rem - 0.5rem - 0.5rem) / 12)
    );
    left: -3.75rem;
    display: flex;
    align-items: flex-start;
    pointer-events: none;
    z-index: 3;
    transform: translateY(-50%);
  }
.ais-arrival__next-letter-text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(0.38 0.085 28);
    white-space: nowrap;
    line-height: 1.15;
    padding-top: 0.125rem;
  }
.ais-arrival__next-letter-line {
    display: block;
  }
.ais-arrival__arrow {
    width: 4.5rem;
    height: 2rem;
    margin-left: 0.25rem;
    flex: 0 0 auto;
  }
/* ── Responsive ──
     On mobile the two columns stack: copy on top, calendar below,
     centered. The calendar narrows slightly and centers; the CTA
     becomes full-width capped at 20rem and centered. The "NEXT LETTER"
     label + arrow move inside the calendar area (to the right of the
     Monday column) so they never create horizontal overflow. The grid
     never overflows — cells shrink with the card width and the weekday
     headers stay legible on the narrowest widths. */
@media (max-width: 47.99rem) {
    .ais-calendar {
      width: min(100%, 22rem);
      margin-inline: auto;
      transform: rotate(0.5deg);
    }
    .ais-calendar__back-sheet {
      transform: translate(0.25rem, 0.375rem) rotate(-1deg);
    }
    .ais-arrival__next-letter {
      /* Move inside the calendar, just to the right of the Monday
         column, anchored to the delivery row. */
      left: auto;
      right: 0.5rem;
      top: calc(
        clamp(1.75rem, 3vw, 2.5rem) +
        1.25rem +
        0.5rem +
        0.5rem +
        (
          var(--ais-delivery-row, 2) *
          (100% - clamp(1.75rem, 3vw, 2.5rem) - 1.25rem - 0.5rem - 0.5rem) /
          6
        ) +
        ((100% - clamp(1.75rem, 3vw, 2.5rem) - 1.25rem - 0.5rem - 0.5rem) / 12)
      );
      flex-direction: row-reverse;
    }
    .ais-arrival__arrow {
      width: 4rem;
      height: 1.75rem;
      transform: scaleX(-1);
      margin-left: 0;
      margin-right: 0.25rem;
    }
    .ais-arrival__copy {
      width: 100%;
      max-width: 100%;
    }
    .ais-arrival__ghost-btn {
      width: 100%;
      max-width: 20rem;
      justify-content: center;
      margin-inline: auto;
    }
  }
@media (max-width: 22rem) {
    .ais-calendar__weekday {
      font-size: 0.625rem;
      letter-spacing: 0.08em;
    }
    .ais-calendar__cell {
      font-size: 0.8125rem;
    }
    .ais-calendar__cell--delivery {
      font-size: 0.9375rem;
    }
    .ais-arrival__next-letter {
      right: 0.25rem;
    }
    .ais-arrival__arrow {
      width: 3.25rem;
      height: 1.5rem;
    }
  }
/* ── Module 03 — "Inside Each Letter" commitment + smartphone edition ──
      A two-column editorial module. The left column carries the
      "Inside Each Letter" editorial commitment (sub-label, Fraunces
      heading, General Sans body, a numbered list of three beats, and a
      centered dot-separated footer line); the right column carries the
      scroll-animated smartphone mockup previewing the article "The
      Family Car Was Already Quiet Before AI Arrived" as a newsletter
      edition (masthead, issue label, title, body, pullquote, footer
      meta) with two floating labels outside the phone frame. The two
      columns stack vertically below 48rem. The phone keeps its
      phone-rise entrance (Framer Motion owns the transform/opacity; the
      CSS keyframe is suppressed on the motion element). */
.ais-inside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    margin-top: 0.5rem;
  }
@media (max-width: 48rem) {
    .ais-inside {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(2.25rem, 5vw, 3rem);
      align-items: start;
    }
  }
/* Left column — the "Inside Each Letter" editorial commitment.
     Vertically centered against the phone on desktop; on mobile it sits
     above the phone. min-width: 0 lets the column shrink gracefully. */
.ais-inside__commitment {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-right: clamp(1rem, 2vw, 2rem);
    min-width: 0;
  }
@media (max-width: 48rem) {
    .ais-inside__commitment {
      padding-right: 0;
    }
  }
/* Heading — bold Fraunces serif, espresso. States the editorial
     promise. text-wrap: balance keeps the headline from setting
     awkwardly across lines. */
.ais-inside__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.018em;
    color: oklch(var(--foreground));
    text-wrap: balance;
    margin: 0;
    max-width: 18em;
  }
/* Body — General Sans, warm graphite. A single short paragraph
     introducing the editorial cadence. text-wrap: pretty for
     comfortable line endings. */
.ais-inside__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: oklch(0.42 0.014 65);
    text-wrap: pretty;
    max-width: 34em;
  }
.ais-inside__body p {
    margin: 0;
  }
/* Mobile — give the Inside Each Letter body copy real breathing room.
     Desktop keeps the tight 1rem flex gap (reads well at wide measure);
     on phones the measure narrows and 1rem feels cramped, so we widen
     the gap and add an explicit paragraph margin-top so each paragraph
     reads as its own editorial beat. */
@media (max-width: 48rem) {
    .ais-inside__body {
      gap: 1.625rem;
    }
    .ais-inside__body p {
      margin-top: 0.625rem;
    }
    .ais-inside__body p:first-child {
      margin-top: 0;
    }
  }
/* Numbered list — three editorial beats (THE SIGNAL / THE CONTEXT /
     THE ARGUMENT). Each row pairs a JetBrains Mono number with a label
     + description. A hairline top border separates the rows so the list
     reads as an editorial register, not a SaaS feature grid. */
.ais-inside__list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
.ais-inside__list-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    align-items: baseline;
    padding: 1rem 0;
    border-top: 1px solid oklch(var(--border));
  }
.ais-inside__list-item:last-child {
    border-bottom: 1px solid oklch(var(--border));
  }
.ais-inside__list-number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: oklch(0.46 0.034 52);
  }
.ais-inside__list-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
.ais-inside__list-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: oklch(var(--foreground));
  }
.ais-inside__list-desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(0.42 0.014 65);
    text-wrap: pretty;
  }
/* Mobile — the numbered list rows keep their hairline separators but
     gain a touch more vertical padding so each beat reads as its own
     editorial beat at narrow measure. */
@media (max-width: 48rem) {
    .ais-inside__list-item {
      padding: 1.125rem 0;
    }
  }
/* Footer line — small, uppercase, centered, dot-separated. Sits
     below the numbered list as a quiet editorial colophon. */
.ais-inside__footer {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: oklch(0.46 0.034 52);
    margin: 1.5rem 0 0;
  }
/* ── Right column — phone stage with floating labels ──
      The phone sits centered in the stage; two floating labels are
      absolutely positioned outside/adjacent to the phone frame. The
      stage is position:relative so the labels anchor to it, and
      min-width:0 lets the column shrink gracefully inside the grid. */
.ais-inside__phone-stage {
    position: relative;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
  }
/* Floating labels — JetBrains Mono, weathered leather, small
     uppercase tracked. Positioned just outside the phone's left and
     right edges so they read as marginal annotations on the edition.
     Decorative (aria-hidden in markup) since the same meta appears
     inside the phone's footer. */
.ais-inside__float-label {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(0.46 0.034 52);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
  }
.ais-inside__float-label--left {
    top: 50%;
    right: calc(50% + 11.5rem);
    transform: translateY(-50%);
  }
.ais-inside__float-label--right {
    top: 50%;
    left: calc(50% + 11.5rem);
    transform: translateY(-50%);
  }
/* Mobile — the floating labels collapse to sit just above and below
      the phone (centered) so they never overflow the narrow viewport.
      The phone is centered in a single-column stage. */
@media (max-width: 48rem) {
    .ais-inside__phone-stage {
      padding: 1rem 0;
    }
    .ais-inside__float-label--left {
      top: 0;
      right: 50%;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .ais-inside__float-label--right {
      top: auto;
      bottom: 0;
      right: 50%;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }
/* ── Marginalia arrows — curved oxblood connectors from each floating
      label to the phone frame. Ports the .ais-arrival__arrow pattern
      from Module 02: inline SVG with a cubic-bezier curved path and
      arrowhead, stroke oklch(0.40 0.09 25), 1.5px, round caps, no fill.
      Purely decorative (aria-hidden + role="presentation" in markup) so
      they never affect screen-reader semantics or grid layout.

      Geometry: the phone is centered in the stage with a half-width of
      ~11rem; the float-labels sit at calc(50% + 11.5rem), vertically
      centered at top:50% + translateY(-50%). The arrows start BELOW the
      label band (top: calc(50% + 1.25rem)) so the curve begins under the
      label text and sweeps inward/down to the phone edge — reading as
      editorial marginalia pointing FROM the label TO the phone, never
      crossing over the label text. The left arrow's right edge anchors
      just outside the phone's left edge (calc(50% + 11.4rem)) and the
      SVG path starts at the top-left of its box (y≈2) and curves down-
      right to the arrowhead at the phone; the right arrow mirrors it.
      pointer-events:none keeps them from intercepting the scroll surface
      or any future interactive layer. */
.ais-inside__arrow {
    position: absolute;
    width: 6rem;
    height: 3.5rem;
    pointer-events: none;
    z-index: 1;
    /* Sit below the float-label band so the curve starts under the
       label and sweeps to the phone, never crossing the label text. */
    top: calc(50% + 1.25rem);
    transform: translateY(0);
  }
.ais-inside__arrow--left {
    /* Right edge sits just outside the phone's left edge; the SVG's
       arrowhead (at x=88 in a 96-wide viewBox) lands on the phone. */
    right: calc(50% + 11.4rem);
  }
.ais-inside__arrow--right {
    /* Mirrors --left: left edge sits just outside the phone's right
       edge; the SVG is drawn right-to-left so the arrowhead (at x=8)
       lands on the phone. */
    left: calc(50% + 11.4rem);
  }
/* Mobile — the floating labels collapse to above/below the phone
     (centered), so the side-bridging arrows no longer make spatial
     sense and would risk horizontal overflow on narrow viewports.
     Hide them at the same breakpoint the labels reposition at
     (48rem), and keep them hidden at the narrowest widths. The labels
     themselves remain visible and still carry the meta. */
@media (max-width: 48rem) {
    .ais-inside__arrow {
      display: none;
    }
  }
/* ── Smartphone mockup frame (notch, rounded screen, tight radius) ──
      Contains the article "The Family Car Was Already Quiet Before AI
      Arrived" as a newsletter edition preview. Enters view via the
      phone-rise keyframe; reduced-motion disables the rise. */
.ais-phone {
    position: relative;
    width: min(100%, 22rem);
    margin-inline: auto;
    background: oklch(0.21 0.012 60);
    border-radius: 1.75rem;
    padding: 0.625rem;
    box-shadow: var(--shadow-editorial-lead);
    animation: phone-rise 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
.ais-phone::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5.5rem;
    height: 1.25rem;
    background: oklch(0.21 0.012 60);
    border-radius: 0 0 0.75rem 0.75rem;
    z-index: 2;
  }
.ais-phone-screen {
    position: relative;
    background: oklch(var(--background));
    border-radius: 1.25rem;
    overflow-y: auto;
    max-height: 32rem;
    padding: 2rem 1.25rem 1.5rem;
  }
/* Bottom-edge fade gradient — signals there is more content below to
     scroll. Sits above the content (z-index 1) but ignores pointer
     events so the scroll surface stays interactive. Mirrors the screen
     background so the fade reads as content receding, not a hard line. */
.ais-phone-screen::after {
    content: "";
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: 2rem;
    margin-top: -2rem;
    background: linear-gradient(
      to bottom,
      oklch(var(--background) / 0),
      oklch(var(--background) / 0.92)
    );
    pointer-events: none;
    z-index: 1;
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
  }
.ais-phone-screen::-webkit-scrollbar {
    width: 4px;
  }
.ais-phone-screen::-webkit-scrollbar-thumb {
    background: oklch(var(--border));
    border-radius: 0.125rem;
  }
/* ── Status bar ──
     Thin handset status bar at the top of the screen: time on the left,
     signal + battery icons on the right. Espresso ink on the warm bone
     screen background, small mono type, flex space-between. Decorative
     (aria-hidden in markup) so it never competes with the article. */
.ais-phone-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -0.5rem 0 1.25rem;
    padding: 0 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: oklch(var(--foreground) / 0.72);
  }
.ais-phone-statusbar__icons {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
/* Signal dots — three stacked espresso pips, decorative. */
.ais-phone-statusbar__signal {
    display: inline-block;
    width: 0.875rem;
    height: 0.5rem;
    background-image: radial-gradient(
      circle,
      oklch(var(--foreground) / 0.72) 1px,
      transparent 1.25px
    );
    background-size: 0.3rem 0.3rem;
    background-position: 0 50%;
    background-repeat: no-repeat;
  }
/* Battery — espresso outline with a filled cell, decorative. */
.ais-phone-statusbar__battery {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 0.625rem;
    border: 1px solid oklch(var(--foreground) / 0.72);
    border-radius: 0.125rem;
  }
.ais-phone-statusbar__battery::before {
    content: "";
    position: absolute;
    inset: 1.5px 1.5px 1.5px auto;
    width: 0.65rem;
    background: oklch(var(--foreground) / 0.72);
    border-radius: 0.0625rem;
  }
.ais-phone-statusbar__battery::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2px;
    transform: translateY(-50%);
    width: 1.5px;
    height: 0.25rem;
    background: oklch(var(--foreground) / 0.72);
    border-radius: 0 0.0625rem 0.0625rem 0;
  }
/* ── Newsletter edition chrome inside the phone screen ──
     Masthead (MARGINS OF TOMORROW) + issue label (AI & SOCIETY ·
     ISSUE 01) sit above the article title and read as the newsletter's
     nameplate and section marker. JetBrains Mono, espresso ink, tight
     tracking. */
.ais-phone-masthead {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(var(--foreground));
    margin: 0 0 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid oklch(var(--border));
  }
.ais-phone-issue {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: oklch(0.46 0.034 52);
    margin: 0 0 1rem;
  }
.ais-phone-preview-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    text-wrap: balance;
  }
.ais-phone-preview-dek {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: oklch(var(--foreground) / 0.78);
    margin-top: 0.75rem;
  }
/* ── Article body inside the phone screen ──
     Scaled-down editorial typography so the body reads like a real
     mobile article: smaller than the desktop article page, comfortable
     line-height, warm-graphite ink on bone. Prose styling for the
     p/h2/h3/ul/ol/li/blockquote/figure elements the rich editor emits,
     mirroring ArticlePage's article-body contract at phone scale. */
.ais-phone-body {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.7;
    color: oklch(var(--foreground) / 0.88);
    margin-top: 1.25rem;
    text-wrap: pretty;
  }
.ais-phone-body > * + * {
    margin-top: 7rem;
  }
.ais-phone-body p {
    margin: 0;
  }
/* Mobile — the phone preview article body is dense at small scale.
      Widen the inter-element rhythm so paragraphs, headings, and lists
      inside the mockup each get their own breathing space. Desktop keeps
      the tight 0.875rem editorial rhythm. */
@media (max-width: 48rem) {
    .ais-phone-body > * + * {
      margin-top: 10rem;
    }
    .ais-phone-body p {
      margin-top: 8rem;
    }
    .ais-phone-body p:first-child {
      margin-top: 0;
    }
  }
.ais-phone-body h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    margin-top: 1.25rem;
    text-wrap: balance;
  }
.ais-phone-body h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: oklch(var(--foreground));
    margin-top: 1.125rem;
    text-wrap: balance;
  }
.ais-phone-body ul,
  .ais-phone-body ol {
    margin: 0;
    padding-left: 1.25rem;
  }
.ais-phone-body ul {
    list-style: disc;
  }
.ais-phone-body ol {
    list-style: decimal;
  }
.ais-phone-body li {
    margin-top: 0.375rem;
    line-height: 1.65;
  }
.ais-phone-body li:first-child {
    margin-top: 0;
  }
.ais-phone-body blockquote {
    margin: 1.25rem 0 0;
    padding-left: 0.75rem;
    border-left: 2px solid oklch(var(--accent));
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: oklch(var(--foreground));
  }
.ais-phone-body a {
    color: oklch(var(--accent));
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }
.ais-phone-body a:hover {
    color: oklch(var(--accent) / 0.8);
  }
.ais-phone-body strong {
    font-weight: 600;
    color: oklch(var(--foreground));
  }
.ais-phone-body figure {
    margin: 1.25rem 0 0;
  }
.ais-phone-body img {
    max-width: 100%;
    height: auto;
    border: 1px solid oklch(var(--border));
    border-radius: 0.125rem;
  }
.ais-phone-body figcaption {
    margin-top: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.5;
    color: oklch(var(--muted-foreground));
  }
/* ── Pullquote — the editorial pull line, set in Fraunces ──
     Sits below the article body as a magazine pullquote: Fraunces
     serif, espresso ink, an oxblood left rule, generous top margin so
     it reads as its own beat. */
.ais-phone-pullquote {
    margin: 1.5rem 0 0;
    padding-left: 0.75rem;
    border-left: 2px solid oklch(var(--accent));
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: oklch(var(--foreground));
    text-wrap: balance;
  }
/* ── Footer meta — reading time + edition cadence ──
     JetBrains Mono, weathered leather, small uppercase tracked. Sits
     below the pullquote as the edition's colophon. */
.ais-phone-footer-meta {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: oklch(0.46 0.034 52);
    margin: 1.25rem 0 0;
  }
/* ── CTA — links to the full article page ──
     A dedicated link (not wrapping the whole card) so the scrollable
     body stays a generous, unlinked reading surface. JetBrains Mono,
     oxblood, uppercase tracked, with a quiet underline on hover/focus. */
.ais-phone-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(var(--accent));
    text-decoration: none;
    transition: color 0.2s ease-out;
  }
.ais-phone-cta:hover,
  .ais-phone-cta:focus-visible {
    color: oklch(var(--accent) / 0.8);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    outline: none;
  }
/* ── Unnumbered dark editorial interlude — "AI & The Examined Life" ──
     A dark editorial spread inserted between Module 02 (calendar) and
     Module 03 (phone). It is NOT one of the four numbered modules — it
     sits between them as an unnumbered interlude, so it does not
     renumber the phone or archive modules. The inner signature class
     `.ais-examined` is the hook the page-level `:has()` sibling
     gap-control selectors above use.

     This module is DARK-THEMED BY DEFAULT regardless of the site's
     `.dark` toggle — it is a dark editorial interlude inserted into
     the otherwise light page. Its colour tokens are scoped locally to
     `.ais-examined` so they do not leak into the global token system.
     No `.dark` override is needed.

     Layout: a two-column grid (`.ais-examined__grid`) — left column
     carries the editorial copy (eyebrow, Fraunces headline, two body
     paragraphs, tracked tagline, CTA link); right column carries a
     conceptual radial diagram built as inline SVG (central "AI" circle
     with four hand-drawn-style slightly-curved beziers radiating out to
     the question labels WHO DECIDES? / HOW WE WORK / WHAT WE TRUST /
     HOW WE LIVE, with small muted burnt-orange accent dots near the
     periphery). The two columns stack vertically below 48rem (text on
     top, diagram below), mirroring the `.ais-arrival` and `.ais-inside`
     responsive-stacking pattern. */
.ais-examined {
    /* Locally-scoped colour tokens — do not leak into the global
       token system. Dark espresso near-black background, cream ink,
       burnt-orange/oxblood accent. Matches the site's dark charcoal
       token family (oklch ~0.17 0.012 54) but pinned slightly lighter
       so the interlude reads as its own dark spread. */
    --ais-examined-bg: oklch(0.19 0.012 54);
    --ais-examined-ink: oklch(0.92 0.013 82);
    --ais-examined-accent: oklch(0.6 0.09 28);
    --ais-examined-muted: oklch(0.7 0.014 82);

    background-color: var(--ais-examined-bg);
    color: var(--ais-examined-ink);
    /* The dark spread needs horizontal padding so the cream copy and
       the SVG diagram breathe inside the dark surface. Vertical
       padding is governed by the page-level .ais-module padding-block
       + the :has() boundary rules above; here we add a little extra
       block padding so the dark surface itself has presence. */
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    /* Tight 0.125rem radius matches the design system; the dark
       surface reads as a framed editorial spread. */
    border-radius: 0.125rem;
    margin-top: 0.5rem;
  }
/* Two-column grid — the right (diagram) column is widened to ~1.25fr
     so the radial AI diagram fills more of its column and reads as the
     more prominent element. The left copy column stays at 1fr and keeps
     its 34em max-width, so the editorial text is unchanged. Mirrors the
     `.ais-inside` minmax(0, …) pattern so both columns shrink
     gracefully and the diagram never overflows. align-items: center
     vertically centres the copy against the diagram on desktop. */
.ais-examined__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    max-width: 72rem;
    margin-inline: auto;
  }
@media (max-width: 48rem) {
    .ais-examined__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(2.25rem, 5vw, 3rem);
      align-items: start;
    }
  }
/* ── LEFT COLUMN — editorial copy ── */
.ais-examined__copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 34em;
    min-width: 0;
  }
/* Eyebrow — small uppercase tracked label in General Sans, muted
     cream. Reads as a magazine section marker, never a SaaS pill. */
.ais-examined__eyebrow {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ais-examined-muted);
    margin: 0;
  }
/* Headline — large Fraunces serif, cream ink. text-wrap: balance
     keeps the headline from setting awkwardly across lines. */
.ais-examined__headline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.018em;
    color: var(--ais-examined-ink);
    text-wrap: balance;
    margin: 0;
    max-width: 16em;
  }
@media (max-width: 48rem) {
    .ais-examined__headline {
      font-size: clamp(1.625rem, 6vw, 2.25rem);
    }
  }
/* Body — General Sans, muted cream. Two short paragraphs that
     carry the editorial promise. text-wrap: pretty for comfortable
     line endings. */
.ais-examined__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ais-examined-muted);
    text-wrap: pretty;
    max-width: 34em;
    margin: 0;
  }
@media (max-width: 48rem) {
    .ais-examined__body {
      font-size: 1rem;
      line-height: 1.75;
    }
  }
/* Tagline — tracked uppercase dot-separated line in General Sans,
     cream ink. Reads as the editorial through-line. */
.ais-examined__tagline {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ais-examined-ink);
    margin: 0.5rem 0 0;
  }
@media (max-width: 48rem) {
    .ais-examined__tagline {
      letter-spacing: 0.18em;
    }
  }
/* CTA — restrained text link with arrow, cream ink, accent on
     hover/focus. Mirrors the `.ais-hero__secondary-link` pattern
     (underline, underline-offset, focus-visible outline) but tuned
     for the dark surface. The arrow nudges ~4px right on hover. */
.ais-examined__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.75rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--ais-examined-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ais-examined-accent);
    transition: color 180ms ease, text-decoration-color 180ms ease;
  }
.ais-examined__cta:hover,
  .ais-examined__cta:focus-visible {
    color: var(--ais-examined-accent);
    text-decoration-color: var(--ais-examined-accent);
  }
.ais-examined__cta:focus-visible {
    outline: 2px solid var(--ais-examined-accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
.ais-examined__cta-arrow {
    display: inline-block;
    transition: transform 200ms ease;
  }
.ais-examined__cta:hover .ais-examined__cta-arrow,
  .ais-examined__cta:focus-visible .ais-examined__cta-arrow {
    transform: translateX(0.25rem);
  }
@media (prefers-reduced-motion: reduce) {
    .ais-examined__cta-arrow,
    .ais-examined__cta:hover .ais-examined__cta-arrow,
    .ais-examined__cta:focus-visible .ais-examined__cta-arrow {
      transition: none;
      transform: none;
    }
  }
/* ── RIGHT COLUMN — conceptual radial diagram (inline SVG) ──
     The SVG itself lives in the component (AiSocietyExaminedLifeModule).
     Here we only constrain the container so the SVG scales
     responsively: max-width 100%, height auto, centred. The SVG's
     viewBox handles the internal coordinate system. */
.ais-examined__diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
.ais-examined__diagram-svg {
    width: 100%;
    max-width: 36rem;
    height: auto;
    display: block;
  }
@media (max-width: 48rem) {
    .ais-examined__diagram-svg {
      max-width: 26rem;
      margin-inline: auto;
    }
  }
/* ── Module 04 — Latest AI & Society with newsletter selector ──
     Latest-articles module grid sourced via useArticlesByCategory. Each
     card carries an inline newsletter selector slot; the selector maps
     to the article's category field (the only backend-supported
     assignment) and is gated to admin/editor context. */
.ais-latest {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
.ais-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: 0.125rem;
    box-shadow: var(--shadow-editorial-card);
    padding: clamp(1.25rem, 2vw, 1.75rem);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s
      cubic-bezier(0.4, 0, 0.2, 1);
  }
.ais-card:hover,
  .ais-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-editorial-card-hover);
  }
.ais-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    text-wrap: balance;
  }
.ais-card__dek {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(var(--muted-foreground));
  }
.ais-card__selector-slot {
    margin-top: auto;
    padding-top: 0.875rem;
    border-top: 1px solid oklch(var(--border));
  }
/* Inline newsletter selector control. Reads as a quiet editorial
     affordance — fine border, tight radius, mono label — never a SaaS
     dropdown pill. Active state reuses the oxblood accent. */
.ais-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
.ais-selector__label {
    color: oklch(var(--accent));
  }
.ais-selector__control {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: oklch(var(--foreground));
    background: oklch(var(--background));
    border: 1px solid oklch(var(--border));
    border-radius: 0.125rem;
    padding: 0.375rem 0.625rem;
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow
      0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ais-selector__control:hover,
  .ais-selector__control:focus-visible {
    border-color: oklch(var(--accent) / 0.6);
    box-shadow: 0 0 0 2px oklch(var(--accent) / 0.18);
    outline: none;
  }
.ais-selector__current {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: oklch(var(--foreground) / 0.85);
  }
/* ── Module 04 — Last 10 Newsletters Sent archive ──
     A vertical stack of rounded-corner edition cards sourced via
     useArticlesByCategory('technologyAndSociety'). Each card surfaces
     an edition number (JetBrains Mono, weathered leather), the long
     publication date, the category label and the read time (all
     General Sans, warm graphite), a bold Fraunces title in espresso,
     an italic Fraunces subtitle in warm graphite, a short General Sans
     summary, and a weathered-leather "Read Edition" button with
     warm-cream text and a trailing arrow that nudges on hover. Cards
     lift on hover via the card-lift motion. Replaces the previous
     latest-articles grid + admin newsletter selector. */
.ais-archive {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    max-width: 44rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
  }
.ais-edition {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: oklch(0.945 0.018 82);
    border: 1px solid oklch(0.255 0.015 54 / 0.18);
    border-radius: 0.125rem;
    box-shadow: var(--shadow-editorial-card);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s
      cubic-bezier(0.4, 0, 0.2, 1);
  }
.ais-edition:hover,
  .ais-edition:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-editorial-card-hover);
  }
/* Meta line — edition number, date, category, read time. Edition
     number in JetBrains Mono weathered leather; the rest in General
     Sans warm graphite. Separated by quiet hairline dots. */
.ais-edition__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.875rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: oklch(0.42 0.012 60);
  }
.ais-edition__meta > * + *::before {
    content: "·";
    margin-right: 0.875rem;
    color: oklch(0.255 0.015 54 / 0.3);
    font-weight: 400;
  }
.ais-edition__number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(0.46 0.034 52);
    font-variant-numeric: tabular-nums;
  }
/* The edition number is the lead meta item — no leading dot. */
.ais-edition__number::before {
    content: none;
    margin-right: 0;
  }
.ais-edition__date,
  .ais-edition__category,
  .ais-edition__readtime {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    color: oklch(0.42 0.012 60);
  }
/* Bold serif title in Fraunces, espresso. */
.ais-edition__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: oklch(0.255 0.015 54);
    text-wrap: balance;
    margin: 0;
  }
.ais-edition__title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
  }
.ais-edition__title-link:hover,
  .ais-edition__title-link:focus-visible {
    color: oklch(0.38 0.085 28);
    outline: none;
  }
.ais-edition__title-link:focus-visible {
    box-shadow: 0 0 0 2px oklch(var(--accent) / 0.4);
    border-radius: 0.125rem;
  }
/* Italic serif subtitle in Fraunces italic, warm graphite. */
.ais-edition__subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: oklch(0.42 0.012 60);
    text-wrap: pretty;
    margin: 0;
  }
/* Short summary paragraph in General Sans, warm graphite. */
.ais-edition__summary {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: oklch(0.42 0.012 60);
    text-wrap: pretty;
    margin: 0;
  }
/* "Read Edition" button — weathered-leather fill, warm-cream text,
     trailing arrow that nudges on hover (arrow-nudge keyframe). */
.ais-edition__action {
    margin-top: 0.5rem;
  }
.ais-edition__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    min-height: 2.5rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: oklch(0.957 0.013 82);
    background: oklch(0.46 0.034 52);
    border: 1px solid oklch(0.4 0.03 52);
    border-radius: 0.125rem;
    box-shadow: var(--shadow-editorial-card);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform
      0.18s ease;
  }
.ais-edition__button:hover {
    background: oklch(0.38 0.085 28);
    border-color: oklch(0.32 0.07 28);
  }
.ais-edition__button:focus-visible {
    outline: 2px solid oklch(var(--accent));
    outline-offset: 2px;
  }
.ais-edition__button:active {
    transform: translateY(1px);
  }
.ais-edition__button-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
.ais-edition__button:hover .ais-edition__button-arrow {
    animation: arrow-nudge 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
/* Empty / error states reuse the edition card surface but read as a
     quiet editorial note rather than a populated edition. */
.ais-edition--empty,
  .ais-edition--error {
    gap: 0;
  }
.ais-edition--empty .ais-edition__summary,
  .ais-edition--error .ais-edition__summary {
    font-style: italic;
    color: oklch(0.42 0.012 60 / 0.85);
  }
/* ── Module 04 — "The Archive" featured edition card ──
     A two-column editorial spread: a left intro column (italic Fraunces
     headline + one-line General Sans description) and a right card
     column showing a single FEATURED EDITION CARD for the most recent
     published AI & Society newsletter article. The card shows an
     edition label ("Latest Edition"), the publication date in a
     long-form editorial style, the Fraunces espresso title, the read
     time as "N min read", and a "Read edition" CTA with an arrow.
     The whole card is a single <a> link to /articles/$slug. The old
     .ais-archive-row* list styles below are left in place as harmless
     orphans (no longer referenced by the module); the legacy
     .ais-archive / .ais-edition* card styles above are likewise
     untouched orphans. */
.ais-archive-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
    align-items: start;
  }
/* Vertical hairline divider between the two columns on desktop. */
.ais-archive-section::before {
    content: "";
    position: absolute;
    width: 0;
  }
.ais-archive-section__intro {
    padding-right: clamp(1rem, 2vw, 1.5rem);
    border-right: 1px solid oklch(0.78 0.008 75 / 0.6);
  }
.ais-archive-section__headline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: oklch(var(--foreground));
    text-wrap: balance;
    margin: 0;
  }
.ais-archive-section__description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: oklch(var(--muted-foreground));
    text-wrap: pretty;
    margin-top: 0.875rem;
    max-width: 32em;
  }
/* Shared message style for the empty / error states of the archive
     list (reuses the literary italic General Sans voice of the old
     list empty state). */
.ais-archive-rows__message {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: oklch(var(--muted-foreground) / 0.9);
    text-wrap: pretty;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2rem) 0;
  }
/* ── Archive rows — vertical list of compact, equal-size rows ──
     A vertical stack of up to five compact rows, one after the other,
     all equal in size. Each row is a single <a> link to /articles/$slug
     carrying the edition number, date, title, read time and an arrow.
     Rows are separated by thin horizontal divider lines (a top border
     on every row except the first, plus a closing bottom border on the
     last row, so the list reads as a ruled column). A hairline-free
     warm bone hover wash and an oxblood arrow nudge keep it tactile
     without SaaS shadows. */
.ais-archive-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
.ais-archive-rows__item {
    margin: 0;
    padding: 0;
  }
/* Thin horizontal divider between rows. The first row has no top
     border; the last row gains a bottom border so the column closes. */
.ais-archive-rows__item + .ais-archive-rows__item .ais-archive-row {
    border-top: 1px solid oklch(0.78 0.008 75 / 0.55);
  }
.ais-archive-rows__item:last-child .ais-archive-row {
    border-bottom: 1px solid oklch(0.78 0.008 75 / 0.55);
  }
.ais-archive-row {
    display: grid;
    grid-template-columns:
      minmax(2rem, auto) /* number */
      minmax(6rem, auto) /* date */
      minmax(0, 1fr) /* title */
      minmax(5rem, auto) /* read time */
      1.25rem; /* arrow */
    align-items: baseline;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    padding: clamp(0.875rem, 1.75vw, 1.125rem) clamp(0.5rem, 1vw, 0.75rem);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
  }
.ais-archive-row:hover {
    background: oklch(0.93 0.014 75 / 0.45);
  }
.ais-archive-row:focus-visible {
    outline: 2px solid oklch(var(--accent));
    outline-offset: -2px;
    background: oklch(0.93 0.014 75 / 0.45);
  }
/* Edition number — JetBrains Mono, oxblood, zero-padded. Reads as a
     ruled index down the left edge of the column. */
.ais-archive-row__number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: oklch(var(--accent));
    font-variant-numeric: tabular-nums;
  }
/* Publication date — compact editorial dateline, General Sans, warm
     graphite, tabular figures so the column aligns. */
.ais-archive-row__date {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: oklch(var(--muted-foreground));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
/* Title — Fraunces, espresso, the editorial anchor of the row.
     Truncates to a single line so every row stays equal in size. */
.ais-archive-row__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* Read time — JetBrains Mono, mushroom-grey, uppercase. */
.ais-archive-row__readtime {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(0.62 0.008 75);
    white-space: nowrap;
    justify-self: end;
  }
/* Arrow — oxblood on hover/focus, nudges right on hover. */
.ais-archive-row__arrow {
    justify-self: end;
    align-self: center;
    color: oklch(var(--accent));
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  }
.ais-archive-row:hover .ais-archive-row__arrow,
  .ais-archive-row:focus-visible .ais-archive-row__arrow {
    transform: translateX(4px);
  }
/* Loading skeleton reuses the row grid so the layout is stable
     while the articles are being fetched. */
.ais-archive-rows--loading .ais-archive-row--skeleton {
    pointer-events: none;
    border-top: 1px solid oklch(0.78 0.008 75 / 0.4);
  }
.ais-archive-rows--loading .ais-archive-row--skeleton:first-child {
    border-top: none;
  }
.ais-archive-rows--loading .ais-archive-row--skeleton:last-child {
    border-bottom: 1px solid oklch(0.78 0.008 75 / 0.4);
  }
.ais-archive-rows--loading .ais-archive-row--skeleton > * {
    border-radius: 0.125rem;
    align-self: center;
  }
/* ── Featured edition card ──
     A single editorial card laid out as a vertical stack: edition
     label, long-form date, large Fraunces title, read time, and a
     "Read edition" CTA with an arrow. The whole card is one <a> link,
     so hover/focus states apply to the entire surface. A hairline
     border and a warm bone hover wash keep it tactile without SaaS
     shadows. */
.ais-archive-feature {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    text-decoration: none;
    border: 1px solid oklch(0.78 0.008 75 / 0.55);
    background: oklch(0.96 0.012 75 / 0.35);
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }
.ais-archive-feature:hover {
    background: oklch(0.93 0.014 75 / 0.5);
    border-color: oklch(0.72 0.012 75 / 0.7);
  }
.ais-archive-feature:focus-visible {
    outline: 2px solid oklch(var(--accent));
    outline-offset: -2px;
    background: oklch(0.93 0.014 75 / 0.5);
  }
/* Edition label — JetBrains Mono, oxblood, uppercase kicker. */
.ais-archive-feature__label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(var(--accent));
  }
/* Publication date — long-form editorial, General Sans, warm
     graphite. Reads as a dateline rather than a mono stamp. */
.ais-archive-feature__date {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: oklch(var(--muted-foreground));
    font-variant-numeric: tabular-nums;
  }
/* Title — large Fraunces, espresso, italic-leaning weight. The
     editorial anchor of the card. */
.ais-archive-feature__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: oklch(var(--foreground));
    text-wrap: balance;
    margin: 0.25rem 0 0.5rem;
  }
/* Read time — JetBrains Mono, mushroom-grey, uppercase. */
.ais-archive-feature__readtime {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(0.62 0.008 75);
  }
/* CTA — "Read edition" with a right-pointing arrow. Oxblood ink on
     hover/focus; the arrow nudges right on hover. */
.ais-archive-feature__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: oklch(var(--accent));
    transition: color 0.2s ease;
  }
.ais-archive-feature__cta-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  }
.ais-archive-feature:hover .ais-archive-feature__cta-arrow,
  .ais-archive-feature:focus-visible .ais-archive-feature__cta-arrow {
    transform: translateX(4px);
  }
/* Loading skeleton reuses the card stack so the layout is stable
     while the article is being fetched. */
.ais-archive-feature--loading {
    pointer-events: none;
  }
.ais-archive-feature--loading > * {
    border-radius: 0.125rem;
  }
/* ── Responsive ──
     Tablet (≤ 64rem): keep two columns but tighten the gap.
     Mobile (≤ 48rem): stack vertically — intro first, card below.
     The card padding tightens on small screens. */
@media (max-width: 64rem) {
    .ais-archive-section {
      gap: clamp(1.5rem, 3vw, 2.5rem);
    }
  }
@media (max-width: 48rem) {
    .ais-archive-section {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(1.5rem, 4vw, 2rem);
    }
    .ais-archive-section__intro {
      padding-right: 0;
      border-right: none;
      border-bottom: 1px solid oklch(0.78 0.008 75 / 0.55);
      padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
    }
    .ais-archive-feature {
      padding: clamp(1.25rem, 4vw, 1.75rem);
    }
    /* The 5-column row grid (number / date / title / read time / arrow)
       is too wide for a phone — the date and read-time columns would
       squeeze the title to near-zero width and overflow. Collapse each
       row into two lines so all five pieces of information stay visible
       without overflowing: line 1 carries the number, title and arrow
       (the row's identity and click affordance); line 2 carries the
       date and read time as a quiet metadata row beneath the title.
       Rows stay equal in size because every row uses the same 2-row
       grid, and the title still truncates to a single line. */
    .ais-archive-row {
      grid-template-columns: auto minmax(0, 1fr) 1.25rem;
      grid-template-rows: auto auto;
      -moz-column-gap: clamp(0.5rem, 2vw, 0.75rem);
           column-gap: clamp(0.5rem, 2vw, 0.75rem);
      row-gap: 0.25rem;
      align-items: baseline;
    }
    .ais-archive-row__number {
      grid-column: 1;
      grid-row: 1;
    }
    .ais-archive-row__title {
      grid-column: 2;
      grid-row: 1;
    }
    .ais-archive-row__arrow {
      grid-column: 3;
      grid-row: 1;
    }
    .ais-archive-row__date {
      grid-column: 2 / span 2;
      grid-row: 2;
      justify-self: start;
    }
    .ais-archive-row__readtime {
      grid-column: 2 / span 2;
      grid-row: 2;
      justify-self: end;
    }
    /* When there is no published date the date cell renders an em dash;
       keep the metadata row aligned so the read time still sits at the
       right edge. */
    .ais-archive-rows--loading .ais-archive-row--skeleton {
      grid-template-columns: auto minmax(0, 1fr) 1.25rem;
      grid-template-rows: auto auto;
      -moz-column-gap: clamp(0.5rem, 2vw, 0.75rem);
           column-gap: clamp(0.5rem, 2vw, 0.75rem);
      row-gap: 0.25rem;
    }
  }
/* ── Motion guards ── */
@media (prefers-reduced-motion: reduce) {
    .ais-phone {
      animation: none;
    }
    .ais-card:hover,
    .ais-card:focus-within {
      transform: none;
    }
    .ais-selector__control {
      transition: none;
    }
    .ais-edition:hover,
    .ais-edition:focus-within {
      transform: none;
    }
    .ais-edition__button,
    .ais-edition__button-arrow,
    .ais-edition__title-link {
      transition: none;
    }
    .ais-edition__button:hover .ais-edition__button-arrow {
      animation: none;
    }
    .ais-edition__button:active {
      transform: none;
    }
    .ais-archive-row,
    .ais-archive-row__arrow {
      transition: none;
    }
    .ais-archive-row:hover .ais-archive-row__arrow {
      transform: none;
    }
    .ais-archive-feature,
    .ais-archive-feature__cta,
    .ais-archive-feature__cta-arrow {
      transition: none;
    }
    .ais-archive-feature:hover .ais-archive-feature__cta-arrow,
    .ais-archive-feature:focus-visible .ais-archive-feature__cta-arrow {
      transform: none;
    }
  }
/* ── Monday Margins hero — two-column editorial hero ──
     Parallel to the AI & Society hero (.ais-hero*). Mirrors the same
     two-column composition, warm bone ground, oxblood hairline rule,
     espresso typography, tight 0.125rem radius, and responsive
     behaviour. The ONLY differences are the class prefix (.mm-hero*
     vs .ais-hero*) and the image path — all visual tokens are shared
     so the two heroes read as a single editorial system. Scoped to
     .mm-hero* only; the existing .ais-hero* rules are untouched. */
.mm-hero {
    position: relative;
    max-width: 93.75rem;
    margin: 0 auto;
    min-height: clamp(760px, 82vh, 820px);
    display: grid;
    /* 45% text / 55% visual — the editorial paper composition gets the
       larger share so the sheets can breathe. Generous 4rem gap. */
    grid-template-columns: 45fr 55fr;
    gap: 4rem;
    align-items: center;
    /* Bottom padding is tuned to HALF the inter-module rhythm
       (clamp(1.75rem, 3.5vw, 3rem)) so the HERO → ESCAPES gap, when
       summed with the .mm-module top padding (also half), equals one
       consistent editorial gap of clamp(3.5rem, 7vw, 6rem) — matching
       the gap between every other pair of modules. */
    padding: 4rem 2rem clamp(1.75rem, 3.5vw, 3rem);
    background: var(--ais-hero-bg);
    background-image: repeating-linear-gradient(
      0deg,
      oklch(0.21 0.012 60 / 0.012) 0,
      oklch(0.21 0.012 60 / 0.012) 1px,
      transparent 1px,
      transparent 3px
    );
  }
/* Thin oxblood horizontal rule near the top — a quiet masthead mark. */
.mm-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 1px;
    background: var(--ais-hero-rule);
    opacity: 0.5;
    pointer-events: none;
  }
/* ── Left column — copy + form ── */
/* Visible by default (opacity:1, transform:none). The entrance
     animation is a one-shot enhancement using animation-fill-mode:
     forwards (NOT `both`), so if the animation is cancelled, fails to
     resolve, or its @keyframe is missing, the element falls back to
     this visible resting state instead of getting stuck at the
     keyframe's `from` (opacity:0). */
.mm-hero__left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 36rem;
    min-width: 0;
    opacity: 1;
    transform: none;
    animation: fade-in-up 600ms ease-out forwards;
  }
.mm-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    margin: 0;
  }
.mm-hero__label {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--foreground);
    font-weight: 600;
    margin: 0;
  }
.mm-hero__headline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--foreground);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0.25rem 0 0;
    /* Tuned so the three explicit <br> line breaks sit on exactly three
       balanced lines at the desktop width. */
    font-size: clamp(2.625rem, 3.6vw, 3.875rem);
    text-wrap: balance;
  }
.mm-hero__dek {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: oklch(0.4 0.012 55);
    max-width: 32rem;
    margin: 0;
    text-wrap: pretty;
  }
/* ── Inline subscription form ──
     The form zone carries a larger top margin than the uniform column
     gap so there is a clearly larger gap between the dek paragraph and
     the form than between the eyebrow and headline. */
.mm-hero__form-zone {
    margin-top: 1.25rem;
  }
.mm-hero__form {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
/* The email field + CTA button sit on ONE row. The consent checkbox
     is a sibling BELOW this row (not a third column inside it). */
.mm-hero__form-row {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: stretch;
  }
/* Email field at least 300px wide (min-width:18.75rem) so it is never
     cramped, growing to fill the row. The CTA button is fixed at ~220px
     (13.75rem) so the field is comfortably wider than the button on the
     same horizontal row. */
.mm-hero__field {
    flex: 2 1 auto;
    min-width: 18.75rem;
    background: var(--ais-hero-paper-cream);
    border: 1px solid oklch(0.78 0.008 75);
    border-radius: 0.125rem;
    padding: 0.875rem 1.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--foreground);
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }
.mm-hero__field::-moz-placeholder {
    color: oklch(0.55 0.01 60);
  }
.mm-hero__field::placeholder {
    color: oklch(0.55 0.01 60);
  }
.mm-hero__field:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
  }
.mm-hero__field:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
.mm-hero__button {
    flex: 0 0 13.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: oklch(0.5 0.06 40);
    color: oklch(0.96 0.006 85);
    border: 1px solid var(--accent);
    border-radius: 0.125rem;
    padding: 0.875rem 1.5rem;
    min-height: 2.75rem;
    /* Fixed ~220px width so the email field (min 300px) is comfortably
       wider than the button on the same horizontal row. */
    width: 13.75rem;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 220ms ease, transform 220ms ease;
  }
.mm-hero__button:hover:not(:disabled) {
    background: oklch(0.45 0.06 40);
  }
.mm-hero__button:hover:not(:disabled) .mm-hero__arrow-icon {
    transform: translateX(4px);
  }
.mm-hero__button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
.mm-hero__button:active:not(:disabled) {
    transform: translateY(1px);
  }
.mm-hero__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
.mm-hero__arrow-icon {
    flex: 0 0 auto;
    transition: transform 220ms ease;
  }
.mm-hero__consent {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: oklch(0.4 0.012 55);
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
  }
.mm-hero__consent input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    accent-color: var(--accent);
    width: 1rem;
    height: 1rem;
  }
.mm-hero__privacy-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color 180ms ease;
  }
.mm-hero__privacy-link:hover {
    color: oklch(0.32 0.09 28);
  }
.mm-hero__privacy-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
.mm-hero__feedback {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.4;
    margin-top: 0.75rem;
    min-height: 1.25rem;
  }
.mm-hero__feedback--success {
    color: oklch(0.4 0.09 145);
  }
.mm-hero__feedback--error,
  .mm-hero__feedback--duplicate {
    color: var(--accent);
  }
.mm-hero__cadence {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: oklch(0.4 0.012 55);
    margin-top: 0.5rem;
  }
.mm-hero__secondary-link {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    margin-top: 0.25rem;
    display: inline-block;
    transition: color 180ms ease;
  }
.mm-hero__secondary-link:hover {
    color: var(--accent);
  }
.mm-hero__secondary-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
/* ── Right column — static image of the layered paper sheets ──
     A single square (1:1) image renders the layered paper sheets for
     Monday Margins on a warm bone background. The whole image is
     wrapped in a clickable <Link> to the latest published article (or
     the sample slug), so the entire right column is the article link.
     The .mm-hero__right container keeps its grid placement, padding
     and centring; the image scales to the column width on desktop,
     stays centred on tablet, and stacks below the left column on
     mobile without horizontal overflow. */
.mm-hero__right {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* The <Link> wrapper fills the right column so the whole image is
     clickable. Inherits text colour so no default link underline or
     blue leaks into the editorial composition. */
.mm-hero__right-link {
    display: block;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
    border-radius: 0.125rem;
    transition: transform 240ms ease, box-shadow 240ms ease;
    box-shadow: var(--shadow-paper-sheet), var(--shadow-paper-edge-inset);
  }
.mm-hero__right-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-paper-sheet-hover), var(--shadow-paper-edge-inset);
  }
.mm-hero__right-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
/* The static sheets image — responsive square that scales to the
      column width, never exceeds 100% of its container, and never
      causes horizontal overflow. Subtle paper shadow + tight radius
      keep the tactile academic-journal feel. */
.mm-hero__right-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 0.125rem;
  }
/* ── In-code layered paper-sheet illustration ──
     Replaces the static raster-baked SVG <img> with a dynamic
     HTML/CSS/SVG composition: three layered paper sheets (cream /
     linen / mushroom) stacked at hand-placed rotations and offsets,
     reusing the existing --ais-hero-paper-* tokens,
     --shadow-paper-sheet(-hover), --ais-hero-paper-grain, and
     --ais-hero-paper-edge-mask from :root. The figures, table and
     Moka pot live as inline SVG inside the front (edition) sheet so
     the whole composition is crisp at any size. The .mm-hero__sheets
     wrapper sits inside .mm-hero__right-link and inherits its paper
     shadow + hover lift; the sheets themselves carry their own
     per-sheet shadows so the layered depth reads correctly. */
.mm-hero__sheets {
    position: relative;
    display: block;
    width: 100%;
    /* Aspect ratio tuned to the original 453×660 cover (≈ 0.686).
       Keeps the composition's vertical editorial proportions without
       a fixed pixel height, so it scales with the column width. */
    aspect-ratio: 453 / 660;
    border-radius: 0.125rem;
    background: transparent;
    overflow: hidden;
  }
/* Each sheet is absolutely positioned within the .mm-hero__sheets
     wrapper and rotated/offset by hand-placed transforms. The
     --ais-hero-paper-grain data-URI is layered as a faint noise
     overlay via .mm-hero__sheet-grain; the torn-edge mask
     (--ais-hero-paper-edge-mask) is applied via mask-image so the
     sheet edges read as slightly imperfect physical paper. */
.mm-hero__sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.125rem;
    /* The torn-edge mask-image that was applied here previously could
       render as a near-zero-opacity mask in some browsers (the SVG
       path is a self-intersecting sliver that, under mask-mode: alpha
       + nonzero fill-rule, drops most of the sheet to transparent),
       making the cream sheets and the inline SVG scene on top
       invisible. The mask has been removed — the box-shadow
       (--shadow-paper-sheet + --shadow-paper-edge-inset) and the
       0.125rem border-radius already convey the physical paper feel,
       and the three layered sheets + SVG scene now render visibly in
       the bone/espresso/oxblood palette. The torn-edge paper feel is
       intentionally dropped in favour of a reliably visible hero. */
    box-shadow: var(--shadow-paper-sheet), var(--shadow-paper-edge-inset);
  }
/* Faint paper grain overlay — multiplies into the sheet colour so
     the paper reads as physical cream stock, not flat digital white. */
.mm-hero__sheet-grain {
    position: absolute;
    inset: 0;
    background-image: var(--ais-hero-paper-grain);
    background-repeat: repeat;
    background-size: 160px 160px;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.6;
    border-radius: inherit;
  }
/* Faint notebook grid on the back (diagram) sheet only. */
.mm-hero__sheet-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to right,
        oklch(0.21 0.012 60 / 0.05) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        oklch(0.21 0.012 60 / 0.05) 1px,
        transparent 1px
      );
    background-size: 1.5rem 1.5rem;
    pointer-events: none;
    border-radius: inherit;
  }
/* Sheet body — the printable area inside each sheet, padded so the
     grain + torn edge frame the content. */
.mm-hero__sheet-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 1.75rem 1.5rem;
    border-radius: inherit;
  }
/* ── Sheet 1 (back) — linen "field study" diagram sheet ──
     Tilts left, peeks out on the LEFT. Lowest z-index. */
.mm-hero__sheet--diagram {
    background: var(--ais-hero-paper-linen);
    transform: rotate(var(--ais-hero-sheet-rotate-diagram))
      translate(
        var(--ais-hero-sheet-offset-diagram-left),
        var(--ais-hero-sheet-offset-diagram-top)
      );
    z-index: var(--ais-hero-z-diagram);
  }
/* ── Sheet 2 (middle) — mushroom annotation slip ──
     Tilts right, peeks out on the RIGHT. Middle z-index. */
.mm-hero__sheet--policy {
    background: var(--ais-hero-paper-mushroom);
    transform: rotate(var(--ais-hero-sheet-rotate-policy))
      translate(
        var(--ais-hero-sheet-offset-policy-right),
        var(--ais-hero-sheet-offset-policy-top)
      );
    z-index: var(--ais-hero-z-policy);
  }
/* ── Sheet 3 (front, dominant) — cream edition cover ──
      Tilts slightly left, centered on top. Highest z-index. Carries
      the inline SVG scene + the Fraunces masthead. */
.mm-hero__sheet--edition {
    background: var(--ais-hero-paper-cream);
    transform: rotate(var(--ais-hero-sheet-rotate-edition))
      translate(
        var(--ais-hero-sheet-offset-edition-left),
        var(--ais-hero-sheet-offset-edition-top)
      );
    z-index: var(--ais-hero-z-edition);
  }
/* ── Fallback wrapper modifier ──
     The error-boundary fallback renders ONLY the front (edition) sheet
     inside .mm-hero__sheets — the back (diagram) and middle (policy)
     sheets are absent. The edition sheet's normal rotate/translate
     above is calibrated for the three-sheet stack (it offsets the
     sheet so the back sheets peek out around it), so when it is alone
     the offset makes the single sheet sit off-centre and peek out
     awkwardly against the .mm-hero__sheets aspect-ratio (453/660) box.

     This modifier neutralises the edition sheet's transform inside the
     fallback wrapper so the single cream sheet sits centred and
     balanced within the box. It ONLY scopes the edition sheet inside
     .mm-hero__sheets--fallback — the normal three-sheet hero is
     untouched. A minimal rotate is kept (not transform:none) so the
     single sheet still reads as a hand-placed zine cover rather than
     a perfectly axis-aligned card, but with zero translate so it
     never peeks out. */
.mm-hero__sheets--fallback .mm-hero__sheet--edition {
    transform: rotate(-0.4deg);
  }
/* ── Sheet typography ──
     Mono kickers/captions in JetBrains Mono; italic Fraunces for the
     diagram line and the edition title; the masthead is tracked
     General Sans. All inherit espresso ink via var(--foreground) or a
     softened warm graphite for secondary copy. */
.mm-hero__sheet-kicker {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(0.4 0.012 55);
    margin: 0 0 0.5rem;
  }
.mm-hero__sheet-line {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--foreground);
    margin: 0;
    text-wrap: balance;
  }
.mm-hero__sheet-body--policy {
    justify-content: flex-end;
    align-items: flex-start;
    padding: 1.5rem 1.25rem 1.75rem;
  }
.mm-hero__annotation-arrow {
    display: block;
    width: 5rem;
    height: auto;
    margin: 0 0 0.25rem 0.5rem;
    opacity: 0.85;
  }
.mm-hero__sheet-caption {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(0.3 0.012 55);
    margin: 0 0 0 0.25rem;
  }
/* ── Edition cover (front sheet) typography + scene ──
     Mirrors a real newsletter cover: a dominant bold geometric
     sans masthead, a tracked-out sans sub-header, an oxblood rule,
     the inline SVG scene, a large upright serif headline, a short
     italic serif standfirst, and a closing editorial arrow link.
     Vertical spacing is intentionally generous so the cover reads
     as spacious and editorial — only margins/padding/gaps are
     tuned here; typography (family/weight/size/tracking) is
     untouched. */
.mm-hero__sheet-body--edition {
    align-items: center;
    text-align: center;
    padding: 2rem 1.75rem 2.25rem;
  }
.mm-hero__masthead {
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--foreground);
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
  }
.mm-hero__subhead {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 1.6vw, 0.8125rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--foreground);
    font-weight: 600;
    margin: 1rem 0 0;
  }
.mm-hero__rule {
    width: 2.5rem;
    height: 1px;
    background: var(--accent);
    opacity: 0.7;
    margin: 1.125rem 0 1rem;
  }
/* The inline SVG scene — scales to the sheet width, keeps its
     320×240 viewBox aspect, and inherits espresso ink via
     currentColor on the parent .mm-hero__sheet--edition. */
.mm-hero__scene {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0.5rem 0 1.125rem;
    color: var(--foreground);
  }
/* The raster scene image — fills the .mm-hero__scene area without
     breaking the sheet layout. Scoped to the new <img> so the existing
     .mm-hero__scene rule's properties are not altered. */
.mm-hero__scene-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 0.125rem;
  }
.mm-hero__edition-title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
    font-size: clamp(1.75rem, 4.5vw, 2.125rem);
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--foreground);
    margin: 0.625rem 0 0;
    text-wrap: balance;
  }
.mm-hero__edition-standfirst {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.9375rem, 2vw, 1rem);
    line-height: 1.55;
    color: var(--foreground);
    margin: 0.875rem 0 0;
    max-width: 22rem;
    text-wrap: pretty;
  }
/* The closing editorial arrow link on the cream edition cover —
     reuses the .mm-hero__secondary-link pattern (espresso ink,
     underline-on-hover, focus-visible ring) but is scoped to the
     cover so it does not collide with the left-column secondary
     link. Sits as the new closing element of the cover with
     comfortable top margin. */
.mm-hero__edition-link {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--foreground);
    text-decoration: none;
    margin: 1.5rem 0 0;
    display: inline-block;
    transition: color 180ms ease;
  }
.mm-hero__edition-link:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
.mm-hero__edition-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
/* The inline arrow SVG that trails the "Read our latest Newsletter"
     link text on the cream edition cover. Sized to sit inline after
     the link label, vertically centered on the text baseline with a
     tiny optical lift so the arrowhead reads level with the x-height. */
.mm-hero__edition-arrow {
    display: inline-flex;
    vertical-align: middle;
    width: clamp(5rem, 9vw, 7rem);
    height: auto;
    margin-left: 0.4rem;
    transform: translateY(-1px);
  }
/* ── Responsive — tablet (1100px) ── */
@media (max-width: 68.75rem) {
    .mm-hero {
      grid-template-columns: 1fr;
      gap: 3rem;
      min-height: auto;
      padding: 3rem 1.5rem clamp(1.75rem, 3.5vw, 3rem);
    }
    .mm-hero__right {
      min-height: 480px;
    }
    .mm-hero__headline {
      font-size: clamp(2.5rem, 6vw, 3.75rem);
    }
    .mm-hero__right-link {
      max-width: 30rem;
    }
    /* Tighten the hand-placed sheet scatter at tablet so the back
       sheets peek out less aggressively on the smaller cover. */
    .mm-hero__sheet--diagram {
      transform: rotate(-1.5deg) translate(-1.75rem, 1rem);
    }
    .mm-hero__sheet--policy {
      transform: rotate(1deg) translate(1.75rem, 1.25rem);
    }
    .mm-hero__sheet--edition {
      transform: rotate(-0.4deg);
    }
    /* Match the other hand-drawn arrows on the site at tablet width. */
    .mm-hero__edition-arrow {
      width: 4.5rem;
    }
  }
/* ── Responsive — mobile (768px) ── */
@media (max-width: 48rem) {
    .mm-hero {
      grid-template-columns: 1fr;
      gap: 2.5rem;
      min-height: auto;
      padding: 2.5rem 1.25rem 4.5rem;
    }
    .mm-hero__left {
      max-width: 100%;
      gap: 3rem;
    }
    .mm-hero__headline {
      font-size: clamp(2.25rem, 8vw, 3rem);
    }
    .mm-hero__form {
      flex-direction: column;
    }
    /* The email field + CTA button row stacks to a single column on
       mobile so neither is cramped; both take full width and the
       consent sits below. */
    .mm-hero__form-row {
      flex-direction: column;
      gap: 0.75rem;
    }
    .mm-hero__field,
    .mm-hero__button {
      width: 100%;
      flex: 1 1 auto;
    }
    .mm-hero__right {
      min-height: 420px;
    }
    .mm-hero__right-link {
      max-width: 24rem;
    }
    /* Tighten the sheet scatter further at mobile so the back sheets
       stay within the narrowest cover without overflowing. */
    .mm-hero__sheet--diagram {
      transform: rotate(-1deg) translate(-1.25rem, 0.75rem);
    }
    .mm-hero__sheet--policy {
      transform: rotate(0.75deg) translate(1.25rem, 1rem);
    }
    .mm-hero__sheet--edition {
      transform: rotate(-0.3deg);
    }
    .mm-hero__sheet-body {
      padding: 1.25rem 1.125rem;
    }
    .mm-hero__sheet-body--policy {
      padding: 1.125rem 1rem 1.25rem;
    }
    .mm-hero__sheet-body--edition {
      padding: 1.5rem 1.25rem 1.75rem;
    }
  }
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .mm-hero__left {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .mm-hero__right-link {
      transition: none !important;
    }
    .mm-hero__right-link:hover {
      transform: none !important;
    }
    .mm-hero__button:hover svg,
    .mm-hero__button:hover .mm-hero__arrow-icon {
      transform: none !important;
    }
  }
/* ════════════════════════════════════════════════════════════════════
     MONDAY MARGINS — Module 02 "When It Escapes"
     Parallels the AI & Society `.ais-module*` (lines 2640-2698) and
     `.ais-arrival*` (lines 3194-3348) patterns with `.mm-module*` and
     `.mm-escapes*`. Tactile analog zine aesthetic — torn paper edges,
     paper grain, hand-drawn arrow, coffee ring stain. Cream/espresso/
     oxblood palette only. No gradients, no glass, no SaaS pills, no
     pastels. Fraunces serif headlines, General Sans body/labels,
     JetBrains Mono kickers. Generous whitespace, wide margins,
     editorial feel. All motion guarded by prefers-reduced-motion.
     ════════════════════════════════════════════════════════════════════ */
/* ── Shared MM module wrapper ──
       Mirrors `.ais-module` so the MM page keeps its own parallel CSS
       namespace. The numbered editorial kicker (02) is rendered in
       JetBrains Mono and reads as a magazine section marker, never a
       SaaS pill.

       Geometry intentionally matches `.mm-hero` (max-width 93.75rem,
       symmetric 2rem inline padding) so module 02 shares the hero's
       left edge and the page reads as one consistent editorial layout.
       The inner `.mm-escapes` therefore inherits this wrapper's width
       and horizontal padding instead of re-declaring a different
       geometry. */
.mm-module {
    position: relative;
    max-width: 93.75rem;
    margin-inline: auto;
    /* Each side carries HALF the inter-module rhythm so two adjacent
       .mm-module siblings sum to one consistent editorial gap of
       clamp(3.5rem, 7vw, 6rem) — the same gap used between the hero
       and the first module, and between the last module and the
       breadcrumbs. Horizontal padding (2rem) is unchanged. */
    padding-block: clamp(1.75rem, 3.5vw, 3rem);
    padding-inline: 2rem;
  }
@media (max-width: 68.75rem) {
    .mm-module {
      padding-inline: 1.5rem;
    }
  }
@media (max-width: 48rem) {
    .mm-module {
      padding-block: clamp(2rem, 6vw, 2.75rem);
      padding-inline: 1.25rem;
    }
  }
.mm-module__kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
  }
.mm-module__kicker-number {
    color: oklch(var(--accent));
    font-variant-numeric: tabular-nums;
  }
/* ── Section layout — two columns, generous vertical padding ──
       Left column ~56%, right column ~44%, aligned to the visual's
       vertical centre. Width and horizontal padding are inherited from
       `.mm-module` (which mirrors `.mm-hero`) so this spread shares the
       hero's left edge and max-width. Vertical rhythm is owned entirely
       by the wrapping `.mm-module` (padding-block) — the inner grid
       contributes NO vertical padding so the ESCAPES → ARCHIVE gap is
       not doubled. The whole module sits on a cream textured (warm
       bone) background with a paper-grain overlay so it reads as a
       separate tactile spread, not flat digital white. */
.mm-escapes {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    padding-block: 0;
    background: oklch(0.956 0.012 82);
    /* Paper-grain overlay — a faint SVG feTurbulence noise filter
        applied as a data-URI background so the cream surface reads as
        physical warm bone paper, not flat digital white. Low opacity,
        warm espresso tint, multiplies into the paper colour. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
    background-repeat: repeat;
    border-radius: 0.125rem;
  }
@media (max-width: 47.99rem) {
    .mm-escapes {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(2.5rem, 6vw, 3.5rem);
      justify-items: center;
      padding-block: 0;
    }
  }
/* ── Editorial corner crop marks ──
      "No. 02" top-left, "02 / 12" bottom-right. Subtle, as in the
      reference screenshot — small JetBrains Mono, low-opacity espresso,
      never a SaaS pill. Decorative only. */
.mm-escapes__crop {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(0.32 0.022 50 / 0.5);
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.mm-escapes__crop--tl {
    top: clamp(1rem, 2.5vw, 1.75rem);
    left: clamp(1.25rem, 4vw, 2.5rem);
  }
.mm-escapes__crop--br {
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    right: clamp(1.25rem, 4vw, 2.5rem);
  }
/* ── LEFT COLUMN — editorial copy ── */
.mm-escapes__copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 38em;
    min-width: 0;
  }
.mm-escapes__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: oklch(0.255 0.015 54);
    text-wrap: balance;
    margin: 0.5rem 0 0;
  }
@media (max-width: 47.99rem) {
    .mm-escapes__title {
      font-size: clamp(1.75rem, 7vw, 2.25rem);
    }
  }
.mm-escapes__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: oklch(0.42 0.014 55);
    text-wrap: pretty;
    max-width: 38em;
    margin: 0;
  }
@media (max-width: 48rem) {
    .mm-escapes__body {
      font-size: 1rem;
      line-height: 1.75;
    }
  }
.mm-escapes__cadence {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: oklch(0.42 0.012 50);
    margin: 0.5rem 0 0;
  }
@media (max-width: 48rem) {
    .mm-escapes__cadence {
      letter-spacing: 0.2em;
    }
  }
/* ── RIGHT COLUMN — tactile day-strip zine composition ──
      A figure containing the "THE LETTER ESCAPES" marginalia + hand-
      drawn arrow, and the seven vertical torn-paper day strips. The
      figure is role="img"; all decorative layers are aria-hidden. */
.mm-escapes__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    margin: 0;
    width: 100%;
    max-width: 30rem;
  }
/* ── Seven vertical torn-paper day strips ──
      A horizontal flex row of seven vertical strips. Each strip is a
      tall narrow torn-paper card with a day label near the top. The
      MON strip is highlighted terracotta/oxblood with an envelope icon
      and a coffee-ring stain; TUE–SUN are muted greys fading beige→
      grey. All strips carry paper-grain texture and torn top/bottom
      edges via CSS mask-image. Non-interactive. */
.mm-escapes__strips {
    display: flex;
    flex-direction: row;
    gap: clamp(0.4rem, 1vw, 0.75rem);
    width: 100%;
    /* Strips are tall and narrow — a 7:1 height-to-width ratio per
       strip keeps the vertical paper-strip feel of the reference. */
    aspect-ratio: 7 / 1;
    min-height: 14rem;
  }
.mm-escapes__strip {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0.25rem 1.5rem;
    border-radius: 0.125rem;
    /* Paper-grain overlay on every strip so they read as physical
       torn cardstock, not flat digital cards. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/></svg>");
    background-repeat: repeat;
    /* Torn top + bottom edges via a rough SVG mask. The mask uses an
       irregular path so the strip edges read as slightly torn/rough
       cardstock, not crisp digital rectangles. */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='400' preserveAspectRatio='none'><path d='M 0 4 L 12 2 L 28 5 L 44 3 L 60 6 L 78 3 L 96 5 L 112 2 L 128 4 L 146 3 L 164 5 L 182 2 L 200 4 L 199 396 L 182 398 L 164 395 L 146 397 L 128 394 L 112 396 L 96 395 L 78 397 L 60 394 L 44 396 L 28 395 L 12 397 L 0 396 Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='400' preserveAspectRatio='none'><path d='M 0 4 L 12 2 L 28 5 L 44 3 L 60 6 L 78 3 L 96 5 L 112 2 L 128 4 L 146 3 L 164 5 L 182 2 L 200 4 L 199 396 L 182 398 L 164 395 L 146 397 L 128 394 L 112 396 L 96 395 L 78 397 L 60 394 L 44 396 L 28 395 L 12 397 L 0 396 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    box-shadow: 0 1px 2px oklch(0.25 0.01 50 / 0.1), 0 6px 18px
      oklch(0.25 0.01 50 / 0.08);
  }
/* ── MON delivery strip — highlighted terracotta/oxblood ──
      Deep terracotta (~#A54235) with a slightly stronger shadow so it
      reads as the active strip. Carries the envelope icon near the top
      and the coffee-ring stain overlapping its bottom. */
.mm-escapes__strip--delivery {
    background-color: oklch(0.55 0.13 32);
    box-shadow: 0 2px 4px oklch(0.25 0.01 50 / 0.16), 0 10px 28px
      oklch(0.25 0.01 50 / 0.14), 0 0 0 1px oklch(0.4 0.09 28 / 0.25);
    z-index: 2;
  }
.mm-escapes__strip--delivery .mm-escapes__strip-label {
    color: oklch(0.96 0.018 82 / 0.95);
  }
/* ── TUE–SUN strips — muted greys fading beige→grey ──
      Each fade step darkens slightly so the week reads as a gradual
      fade from light beige (TUE) to medium grey (SUN). All stay within
      the warm bone/espresso family — no cool greys, no pastels. */
.mm-escapes__strip--fade-1 {
    background-color: oklch(0.88 0.012 78);
  }
.mm-escapes__strip--fade-2 {
    background-color: oklch(0.84 0.011 76);
  }
.mm-escapes__strip--fade-3 {
    background-color: oklch(0.8 0.01 74);
  }
.mm-escapes__strip--fade-4 {
    background-color: oklch(0.76 0.01 72);
  }
.mm-escapes__strip--fade-5 {
    background-color: oklch(0.72 0.009 70);
  }
.mm-escapes__strip--fade-6 {
    background-color: oklch(0.68 0.008 68);
  }
.mm-escapes__strip--fade-1 .mm-escapes__strip-label,
  .mm-escapes__strip--fade-2 .mm-escapes__strip-label,
  .mm-escapes__strip--fade-3 .mm-escapes__strip-label,
  .mm-escapes__strip--fade-4 .mm-escapes__strip-label,
  .mm-escapes__strip--fade-5 .mm-escapes__strip-label,
  .mm-escapes__strip--fade-6 .mm-escapes__strip-label {
    color: oklch(0.42 0.012 55 / 0.85);
  }
/* ── Day label near the top of each strip ──
      Wide-tracked sans-serif (General Sans), uppercase, small. */
.mm-escapes__strip-label {
    font-family: var(--font-body);
    font-size: clamp(0.625rem, 1.1vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    margin-top: 0.5rem;
  }
/* ── Envelope icon — only on the MON delivery strip ──
      Sits near the top of the strip, above the day label. Cream stroke
      on the terracotta ground. */
.mm-escapes__envelope {
    width: clamp(1.25rem, 2.2vw, 1.75rem);
    height: auto;
    flex: 0 0 auto;
  }
/* ── Coffee-ring stain — only on the MON delivery strip ──
      Overlaps the bottom of the strip, bleeding past the torn edge.
      Positioned absolutely relative to the strip so it can overflow
      the strip's box (the figure allows overflow). Rendered as an
      inline SVG in the markup; sized here. */
.mm-escapes__coffee-ring {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(4.5rem, 8vw, 6rem);
    height: auto;
    pointer-events: none;
    z-index: 3;
    /* The ring should overlap the strip's bottom torn edge and bleed
       onto the cream background. The figure allows overflow so the
       stain is not clipped. */
    opacity: 0.92;
  }
/* ── Mobile — strips shrink to fit, no horizontal overflow ──
      The seven strips remain horizontal but shrink: smaller gap,
      smaller min-height, smaller labels. The coffee stain, envelope
      icon, and hand-drawn arrow all stay visible. */
@media (max-width: 47.99rem) {
    .mm-escapes__strips {
      gap: 0.3rem;
      min-height: 11rem;
    }
    .mm-escapes__strip {
      padding: 0.9rem 0.15rem 1.1rem;
    }
    .mm-escapes__strip-label {
      font-size: 0.6rem;
      letter-spacing: 0.12em;
    }
    .mm-escapes__envelope {
      width: 1.1rem;
    }
    .mm-escapes__coffee-ring {
      width: 3.75rem;
      bottom: -1.1rem;
    }
  }
/* ── Reduced motion ──
      The module has no entrance animation by default, but guard any
      future transform additions here so the tactile zine stays static
      for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .mm-escapes,
    .mm-escapes__strip,
    .mm-escapes__coffee-ring {
      transition: none !important;
    }
  }
/* ── Monday Margins · Archive section ──
      Two-column layout: left = numbered list of past editions, right = the
      zine cover preview. Collapses to a single stacked column on tablet and
      mobile, with the cover rendered below the list. The cover reuses the
      paper-sheet styling (cream paper, grain overlay, torn edge mask) shared
      with the hero illustration so the archive reads as part of the same zine. */
.mm-archive-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
    -moz-column-gap: clamp(2rem, 5vw, 4.5rem);
         column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
.mm-archive-section__intro {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 38rem;
  }
.mm-archive-section__headline {
    font-family: var(--font-display, "Fraunces", serif);
    font-style: italic;
    font-weight: 500;
    color: var(--mm-espresso, oklch(0.32 0.04 50));
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
.mm-archive-section__description {
    font-family: var(--font-body, "General Sans", sans-serif);
    color: var(--muted-foreground, oklch(0.45 0.02 60));
    font-size: 1rem;
    line-height: 1.6;
  }
.mm-archive-section__list {
    display: flex;
    flex-direction: column;
  }
.mm-archive-section__cover {
    display: flex;
    justify-content: center;
  }
/* Numbered list of past editions. */
.mm-archive-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
.mm-archive-rows--loading,
  .mm-archive-rows--error,
  .mm-archive-rows--empty {
    padding: 1.5rem 0;
  }
.mm-archive-rows__item {
    list-style: none;
  }
.mm-archive-rows__message {
    font-family: var(--font-body, "General Sans", sans-serif);
    color: var(--muted-foreground, oklch(0.45 0.02 60));
    font-size: 0.95rem;
    line-height: 1.6;
  }
/* A single archive row: number · date · title · read time · arrow. */
.mm-archive-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 0.25rem;
    border-top: 1px solid var(--mm-hairline, oklch(0.32 0.04 50 / 0.18));
    text-decoration: none;
    color: inherit;
    transition: background-color 200ms ease;
  }
.mm-archive-row:hover {
    /* Warm bone hover wash — uses the brand background token so the
       hover state stays on-palette in both light and dark mode. */
    background-color: color-mix(in oklch, var(--background) 55%, transparent);
  }
.mm-archive-row:focus-visible {
    outline: 2px solid var(--mm-oxblood, oklch(0.4 0.13 28));
    outline-offset: 2px;
    border-radius: 2px;
  }
.mm-archive-row--skeleton {
    pointer-events: none;
    opacity: 0.6;
  }
.mm-archive-row__number {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    color: var(--mm-oxblood, oklch(0.4 0.13 28));
    font-size: 0.85rem;
    font-weight: 500;
    width: 2.25rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    /* Zero-padded two-digit issue numbers. */
    letter-spacing: 0.02em;
  }
.mm-archive-row__date {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    color: var(--muted-foreground, oklch(0.45 0.02 60));
    font-size: 0.8rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
.mm-archive-row__title {
    font-family: var(--font-display, "Fraunces", serif);
    color: var(--mm-espresso, oklch(0.32 0.04 50));
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.mm-archive-row__readtime {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    color: var(--muted-foreground, oklch(0.45 0.02 60));
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }
.mm-archive-row__arrow {
    color: var(--mm-oxblood, oklch(0.4 0.13 28));
    flex-shrink: 0;
    transition: transform 200ms ease;
  }
.mm-archive-row:hover .mm-archive-row__arrow {
    transform: translateX(4px);
  }
/* The zine cover preview, reusing the paper-sheet styling. */
.mm-archive-cover {
    display: block;
    position: relative;
    max-width: 36rem;
    width: 100%;
    background: var(--ais-hero-paper-cream);
    border-radius: var(--radius, 0.5rem);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--shadow-paper-sheet);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: box-shadow 250ms ease;
  }
.mm-archive-cover:hover {
    box-shadow: var(--shadow-paper-sheet-hover);
  }
/* Torn paper edge along the bottom via the shared mask. */
.mm-archive-cover::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0.75rem;
    background: var(--mm-oxblood, oklch(0.4 0.13 28));
    -webkit-mask-image: var(--ais-hero-paper-edge-mask);
    mask-image: var(--ais-hero-paper-edge-mask);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0.85;
    pointer-events: none;
  }
.mm-archive-cover__grain {
    position: absolute;
    inset: 0;
    background-image: var(--ais-hero-paper-grain);
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    border-radius: inherit;
  }
.mm-archive-cover__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
.mm-archive-cover__masthead {
    font-family: var(--font-display, "Fraunces", serif);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mm-oxblood, oklch(0.4 0.13 28));
    letter-spacing: 0.12em;
    text-align: center;
    font-size: 1.1rem;
  }
.mm-archive-cover__issue-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.72rem;
    color: var(--muted-foreground, oklch(0.45 0.02 60));
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
.mm-archive-cover__issue-no,
  .mm-archive-cover__issue-date {
    font-variant-numeric: tabular-nums;
  }
.mm-archive-cover__rule {
    height: 1px;
    background: var(--mm-oxblood, oklch(0.4 0.13 28));
    opacity: 0.35;
    border: 0;
    margin: 0;
  }
.mm-archive-cover__illustration {
    margin: 0 auto;
    max-width: 14rem;
    display: flex;
    justify-content: center;
  }
.mm-archive-cover__title {
    font-family: var(--font-display, "Fraunces", serif);
    font-style: italic;
    font-weight: 500;
    color: var(--mm-espresso, oklch(0.32 0.04 50));
    font-size: clamp(1.5rem, 2.5vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
  }
.mm-archive-cover__standfirst {
    font-family: var(--font-body, "General Sans", sans-serif);
    color: var(--muted-foreground, oklch(0.45 0.02 60));
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: center;
  }
.mm-archive-cover__body-text {
    font-family: var(--font-body, "General Sans", sans-serif);
    color: var(--muted-foreground, oklch(0.45 0.02 60));
    font-size: 0.82rem;
    line-height: 1.6;
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
    /* Hairline rule between the two body columns — uses the brand
       hairline token so it adapts to dark mode. */
    -moz-column-rule: 1px solid var(--mm-hairline, oklch(0.255 0.015 54 / 0.18));
         column-rule: 1px solid var(--mm-hairline, oklch(0.255 0.015 54 / 0.18));
  }
.mm-archive-cover__body-column {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
.mm-archive-cover__cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-oxblood, oklch(0.4 0.13 28));
    margin-top: 0.25rem;
  }
.mm-archive-cover__cta-arrow {
    transition: transform 200ms ease;
  }
.mm-archive-cover:hover .mm-archive-cover__cta-arrow {
    transform: translateX(4px);
  }
/* ── Archive section · responsive ── */
@media (max-width: 68.75rem) {
    .mm-archive-section {
      grid-template-columns: 1fr;
      row-gap: 2.5rem;
    }

    .mm-archive-section__cover {
      order: 2;
    }

    .mm-archive-cover {
      max-width: 30rem;
    }
  }
@media (max-width: 48rem) {
    .mm-archive-cover {
      max-width: 24rem;
    }

    .mm-archive-cover__body-text {
      -moz-column-count: 1;
           column-count: 1;
    }
  }
/* ── Archive section · reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .mm-archive-row,
    .mm-archive-row__arrow,
    .mm-archive-cover,
    .mm-archive-cover__cta-arrow {
      transition: none !important;
    }

    .mm-archive-row:hover .mm-archive-row__arrow,
    .mm-archive-cover:hover .mm-archive-cover__cta-arrow {
      transform: none !important;
    }
  }
/* ════════════════════════════════════════════════════════════════════
     THE NEWS DIGEST — full-bleed banner + centered single-column hero
     A distinct layout from the two-column .mm-hero* / .ais-hero*
     heroes: a full-viewport-width banner image above a single centred
     editorial column (eyebrow, name, italic Fraunces headline, dek,
     inline subscription form, cadence line, secondary link). The CTA
     button uses the muted-terracotta / charcoal-hover / warm-cream
     tokens (--nd-button-bg / --nd-button-hover / --nd-button-text)
     already declared in :root and .dark — a slightly warmer button
     treatment than the weathered-leather mm/ais buttons, matching the
     user-supplied palette. Warm bone ground, espresso ink, oxblood
     accent, tight 0.125rem radius throughout. No gradients, glass, or
     SaaS pills. All motion guarded by prefers-reduced-motion.
     ════════════════════════════════════════════════════════════════════ */
/* ── Full-bleed banner ──
      The <img> spans the content column width — display block, width 100%,
      max-width 90rem so it aligns with the wider .nd-inside-inner module
      below (not the narrow .nd-content intro). Centred with horizontal
      padding 0 1.5rem so it sits inside the page content column. height
      auto so the panoramic sheet scales proportionally — no crop, no
      artificial height cap. A subtle CSS drop shadow lifts the sheet off
      the warm bone page ground. No background, no rounded container. */
.news-banner {
    display: block;
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    height: auto;
    padding: 0 1.5rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
  }
/* ── Centred content column ──
     max-width 59.375rem (950px), centred, generous 5rem top/bottom
     padding so the column breathes as its own editorial spread below
     the full-bleed banner. */
.nd-content {
    max-width: 59.375rem;
    margin: 0 auto;
    text-align: center;
    padding: 5rem 1.5rem;
  }
/* ── Eyebrow — JetBrains Mono, small, tracked, muted espresso ──
     Mirrors .mm-hero__eyebrow but centred and at a muted espresso
     opacity so it reads as a quiet kicker above the name. */
.nd-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: oklch(0.4 0.012 55);
    font-weight: 500;
    text-align: center;
    margin: 0 0 1.5rem;
  }
/* ── Name — JetBrains Mono, larger than eyebrow, tracked, espresso ──
     Mirrors .mm-hero__label but centred. Slightly larger than the
     eyebrow and more widely tracked so it reads as the newsletter's
     nameplate, not a kicker. */
.nd-name {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--foreground);
    font-weight: 600;
    text-align: center;
    margin: 0 0 2rem;
  }
/* ── Headline — italic Fraunces, fluid, centred ──
     Mirrors .mm-hero__headline (italic, weight 400, Fraunces) but
     centred and tuned for the single-column measure. clamp() keeps the
     headline comfortable from mobile to desktop without breaking the
     editorial scale. */
.nd-headline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--foreground);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-size: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    text-wrap: balance;
    margin: 0 0 2rem;
  }
/* ── Hero CTA — outlined editorial ghost button ──
     Mirrors the .ais-arrival__ghost-btn language (transparent bg, 1px
     oxblood border, tight 0.125rem radius, hover → oxblood bg + cream
     text) but as a new .nd-hero-cta family. Uses CSS custom properties
     (--foreground, --accent, --background) so it adapts to light + dark
     mode. The hand-drawn oxblood arrow (.nd-hero-cta__arrow) follows the
     label and nudges ~0.25rem right on hover. >=44px hit target,
     visible focus-visible. Transition 220ms. */
.nd-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    padding: 0.8125rem 1.5rem;
    min-height: 2.75rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--foreground);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 0.125rem;
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease, border-color
      220ms ease, transform 220ms ease;
  }
.nd-hero-cta:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--background);
  }
.nd-hero-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
.nd-hero-cta:active {
    transform: translateY(1px);
  }
.nd-hero-cta__label {
    flex: 0 1 auto;
  }
.nd-hero-cta__arrow {
    flex: 0 0 auto;
    width: 1.875rem;
    height: 0.875rem;
    display: block;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }
.nd-hero-cta:hover .nd-hero-cta__arrow {
    transform: translateX(0.25rem);
  }
@media (prefers-reduced-motion: reduce) {
    .nd-hero-cta {
      transition: none;
    }
    .nd-hero-cta:active {
      transform: none;
    }
    .nd-hero-cta:hover .nd-hero-cta__arrow {
      transform: none;
    }
    .nd-hero-cta__arrow {
      transition: none;
    }
  }
/* ── Dek — General Sans, muted espresso, centred, narrow measure ──
     Mirrors .mm-hero__dek but centred and capped at 42rem within the
     content block so the standfirst reads as a comfortable editorial
     measure, not a full-width line. Each paragraph gets 1.5rem bottom
     margin so multiple dek paragraphs breathe. */
.nd-dek {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: oklch(0.4 0.012 55);
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 1.5rem;
    text-wrap: pretty;
  }
.nd-dek:last-of-type {
    margin-bottom: 0;
  }
/* ── Inline subscription form ──
     The form sits centred below the dek with a 3rem top margin so
     there is a clearly larger gap between the dek and the form than
     between the dek paragraphs. */
.nd-form {
    margin-top: 3rem;
    text-align: center;
  }
/* The email field + CTA button sit on ONE row, centred, capped at
     45rem (720px) so the row never stretches the full content width.
     On small screens (≤640px) the row stacks to a single column so
     neither the field nor the button is cramped. */
.nd-form-row {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    max-width: 45rem;
    margin: 0 auto;
    align-items: stretch;
  }
@media (max-width: 40rem) {
    .nd-form-row {
      flex-direction: column;
    }
  }
/* ── Email field — warm cream, oxblood border, tight radius ──
     Mirrors .mm-hero__field styling: warm cream background, oxblood
     1px border, 0.125rem radius, General Sans, espresso ink. flex:1 so
     the field grows to fill the row alongside the fixed-width button. */
.nd-input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    background: var(--ais-hero-paper-cream, oklch(0.95 0.006 80));
    border: 1px solid var(--accent);
    border-radius: 0.125rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--foreground);
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }
.nd-input::-moz-placeholder {
    color: oklch(0.55 0.01 60);
  }
.nd-input::placeholder {
    color: oklch(0.55 0.01 60);
  }
.nd-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
  }
.nd-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
/* ── CTA button — muted terracotta / charcoal hover / warm cream ──
     Distinct from the weathered-leather mm/ais buttons: the muted
     terracotta background (--nd-button-bg) shifts to charcoal on hover
     (--nd-button-hover) with warm-cream text (--nd-button-text). The
     trailing arrow span nudges 3px right on hover. Tight 0.125rem
     radius, General Sans, nowrap so the label never wraps. */
.nd-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--nd-button-bg);
    color: var(--nd-button-text);
    border: 1px solid var(--nd-button-bg);
    border-radius: 0.125rem;
    padding: 0.75rem 1.5rem;
    min-height: 2.75rem;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
  }
.nd-button:hover:not(:disabled) {
    background: var(--nd-button-hover);
    border-color: var(--nd-button-hover);
  }
.nd-button:hover:not(:disabled) .nd-button__arrow {
    transform: translateX(3px);
  }
.nd-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
.nd-button:active:not(:disabled) {
    transform: translateY(1px);
  }
.nd-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
.nd-button__arrow {
    display: inline-block;
    transition: transform 200ms ease;
    margin-left: 0.5rem;
  }
/* ── Consent — centred, muted espresso, oxblood checkbox ──
     Mirrors .mm-hero__consent but centred (justify-content: center)
     so the checkbox + label sit aligned under the centred form row. */
.nd-consent {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: oklch(0.4 0.012 55);
    margin-top: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    justify-content: center;
    cursor: pointer;
  }
.nd-consent input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    accent-color: var(--accent);
    width: 1rem;
    height: 1rem;
  }
/* ── Privacy link — oxblood, underline, darker oxblood on hover ──
     Mirrors .mm-hero__privacy-link: oxblood ink, underline with
     offset, darkens to a deeper oxblood on hover. */
.nd-privacy-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color 180ms ease;
  }
.nd-privacy-link:hover {
    color: oklch(0.32 0.09 28);
  }
.nd-privacy-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
/* ── Cadence — JetBrains Mono, small, tracked, muted, centred ──
     Mirrors .mm-hero__cadence but centred. Sits below the form as a
     quiet editorial colophon stating the delivery cadence. */
.nd-cadence {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: oklch(0.4 0.012 55);
    font-weight: 500;
    text-align: center;
    margin-top: 2.5rem;
  }
/* ── Secondary link — espresso, transparent border, oxblood on hover ──
     A quiet inline link below the cadence. The bottom border is
     transparent by default and shifts to oxblood on hover so the link
     reads as an editorial underline-on-hover, not a SaaS pill. The
     trailing arrow span nudges 3px right on hover. */
.nd-secondary-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
  }
.nd-secondary-link:hover {
    border-bottom-color: var(--accent);
  }
.nd-secondary-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
.nd-secondary-link__arrow {
    display: inline-block;
    transition: transform 200ms ease;
    margin-left: 0.25rem;
  }
.nd-secondary-link:hover .nd-secondary-link__arrow {
    transform: translateX(3px);
  }
/* ── Feedback — aria-live region, centred, muted ──
     Mirrors .mm-hero__feedback: a small centred aria-live region below
     the form that surfaces success / error / duplicate states. min-height
     keeps the layout stable when the region is empty. */
.nd-feedback {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
    color: oklch(0.4 0.012 55);
    margin-top: 1rem;
    min-height: 1.25rem;
  }
.nd-feedback--success {
    color: oklch(0.4 0.09 145);
  }
.nd-feedback--error,
  .nd-feedback--duplicate {
    color: var(--accent);
  }
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .nd-button,
    .nd-button__arrow,
    .nd-input,
    .nd-privacy-link,
    .nd-secondary-link,
    .nd-secondary-link__arrow {
      transition: none !important;
    }
    .nd-button:active:not(:disabled) {
      transform: none !important;
    }
    .nd-button:hover:not(:disabled) .nd-button__arrow,
    .nd-secondary-link:hover .nd-secondary-link__arrow {
      transform: none !important;
    }
  }
/* ════════════════════════════════════════════════════════════════════
     THE NEWS DIGEST — split-screen newsletter registration module
     A full-width two-column <section> (50/50 on desktop, stacking to a
     single column on mobile with the left content first then the form)
     that closes the page. It replaces the previous centered .nd-content
     block that held the dek + TheNewsDigestSubscribeCard + cadence +
     secondary link.

       LEFT column (.nd-split-left) — cream/bone background (#F4F0E9),
       center-aligned text, contains:
         • eyebrow "THE MORNING LETTER" (reuses .nd-eyebrow)
         • Fraunces serif headline "One story before the day gets noisy."
           (.nd-split-headline)
         • two supporting paragraphs (reuses .nd-dek, restyled for the
           left column via .nd-split-left .nd-dek)
         • a subtle ghosted clock-face watermark (.nd-split-clock) —
           inline SVG, espresso/ink stroke, low opacity (~0.07),
           absolute + centered, pointer-events none, aria-hidden, sits
           BEHIND the text (z-index 0; the text wrapper is z-index 1)

       RIGHT column (.nd-split-right) — dark charcoal/near-black
       background (charcoal family, oklch(0.22 0.01 60)), left-aligned
       form, contains:
         • label "RECEIVE TOMORROW'S DIGEST" (.nd-split-label, small
           caps, tracked, cream/bone text)
         • intro line "Begin with one story worth knowing."
           (.nd-split-intro, cream/bone text)
         • TheNewsDigestSubscribeCard rendered as-is — its child elements
           are restyled for the dark background via scoped CSS overrides
           under .nd-split-right (the component's JSX, ids, and form
           logic are NOT modified):
             - .nd-split-right .nd-form — left-aligned, no top margin
             - .nd-split-right .nd-form-row — left-aligned, full width
             - .nd-split-right .nd-input — dark surface, cream text,
               oxblood border
             - .nd-split-right .nd-button — unchanged terracotta CTA
               (already reads on dark)
             - .nd-split-right .nd-consent — cream/bone text
             - .nd-split-right .nd-privacy-link — lifted oxblood for dark
             - .nd-split-right .nd-feedback — cream/bone text
         • cadence line "EVERY DAY · BEFORE NOON · ONE STORY · FREE"
           (reuses .nd-cadence, restyled for the dark background via
           .nd-split-right .nd-cadence — cream/bone text, left-aligned)
         • secondary link "Read today's digest →" (reuses
           .nd-secondary-link, restyled for the dark background via
           .nd-split-right .nd-secondary-link — cream/bone text, arrow
           nudges right on hover)

     The hero CTA smooth-scroll target (id "nd-subscribe-email") still
     resolves — it lives inside TheNewsDigestSubscribeCard, which is
     rendered unchanged inside the right column.

     RESPONSIVE — desktop (≥60rem / 960px): 50/50 two-column grid, each
     column ~6rem horizontal padding, ~5.5rem vertical padding. Mobile
     (<60rem): single column, left content first then the form, ~3.5rem
     horizontal padding, ~4.5rem vertical padding.

     DARK MODE — the left column stays cream in both modes (intentional
     editorial contrast against the dark right column); the right column
     stays charcoal/near-black in both modes. The watermark stroke uses
     a hardcoded espresso OKLCH (not a token) so it reads as ink on the
     cream left column in both modes.

     REDUCED MOTION — all transitions and arrow nudges are disabled. */
.nd-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    /* Contain the split inside the page content column — aligns with
        the .nd-inside-inner module above (max-width 90rem). margin 0 auto
        centres it; horizontal padding 0 1.5rem keeps both panels off the
        screen edges on wide viewports. */
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    background: var(--background);
  }
/* ── LEFT column — cream/bone, editorial copy with watermark below ──
     Stays cream in both light and dark mode (intentional editorial
     contrast against the dark right column). justify-content: flex-start
     so the editorial copy anchors at the top and the in-flow watermark
     follows beneath it. overflow: visible (no clipping needed now that
     the watermark is in-flow). */
.nd-split-left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 3rem 4rem;
    background: oklch(0.956 0.01 82); /* warm bone #F4F0E9 = light --background */
    min-height: 26rem;
  }
/* Text wrapper — editorial copy. max-width ~36rem so the headline and
     dek read as a comfortable editorial measure, not a full-width line. */
.nd-split-left__inner {
    position: relative;
    width: 100%;
    max-width: 36rem;
  }
/* ── Headline — Fraunces serif, fluid, centered ──
     Distinct from .nd-headline (italic) — this one is upright (weight
     500) so it reads as a confident editorial statement, not an italic
     flourish. clamp() keeps it comfortable from mobile to desktop. */
.nd-split-headline {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-size: clamp(2rem, 4vw, 3.25rem);
    text-align: left;
    text-wrap: balance;
    margin: 0 0 2rem;
  }
/* ── Dek — restyled for the left column ──
     The shared .nd-dek rule already centers and caps the measure at
     42rem; here we narrow the measure to match the headline (36rem)
     and lift the colour slightly so the dek reads as espresso ink on
     cream, not muted graphite. */
.nd-split-left .nd-eyebrow {
    text-align: left;
    margin: 0 0 1.5rem;
  }
.nd-split-left .nd-dek {
    max-width: 36rem;
    color: oklch(0.32 0.012 55);
    text-align: left;
    margin: 0 0 1.5rem;
  }
.nd-split-left .nd-dek:last-of-type {
    margin-bottom: 0;
  }
/* ── Clock-face watermark — decorative, low opacity, bottom-right ──
     position: absolute so it overlaps the bottom edge of the cream
     left column (.nd-split-left already has position: relative and no
     overflow: hidden, so the watermark can bleed past the bottom edge
     without clipping). Anchored bottom-right with bottom + right
     offsets so it reads as a subtle background mark tucked into the
     lower-right corner of the left column, BELOW the editorial copy.
     Sized at ~13rem on desktop (~30% of the column width, kept small
     per prior user feedback). pointer-events: none so it never
     captures clicks. aria-hidden on the SVG element itself. opacity
     ~0.06 so it reads as a faint ghosted mark, not a foreground
     graphic. Scales down on mobile. */
.nd-split-clock {
    position: absolute;
    bottom: 1.5rem;
    right: 1rem;
    width: 13rem;
    height: 13rem;
    opacity: 0.06;
    pointer-events: none;
    /* The stroke colours are set on the SVG elements themselves
       (hardcoded espresso OKLCH) so they read as ink on cream in both
       light and dark mode. */
  }
/* ── RIGHT column — dark charcoal, left-aligned form ──
     Uses the site's charcoal family (oklch(0.22 0.01 60) — a near-black
     linen). Stays charcoal in both light and dark mode (intentional
     editorial contrast against the cream left column). Left-aligned so
     the form, label, intro, cadence, and secondary link all read as a
     left-anchored column, not a centered block. */
.nd-split-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 1.75rem 4rem;
    background: oklch(0.22 0.01 60); /* charcoal family, near-black linen */
    min-height: 26rem;
  }
/* ── Label — small caps, tracked, cream/bone text ──
     Mirrors .nd-eyebrow but left-aligned and in cream/bone so it reads
     on the dark background. */
.nd-split-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: oklch(0.92 0.013 82); /* cream/bone = dark-mode --foreground */
    font-weight: 500;
    text-align: left;
    margin: 0 0 1.25rem;
  }
/* ── Intro line — cream/bone text, General Sans ──
     A short welcoming line above the form. Slightly larger than the
     label, Fraunces serif italic so it reads as an editorial invitation,
     not a SaaS subhead. */
.nd-split-intro {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.3;
    color: oklch(0.92 0.013 82); /* cream/bone */
    text-align: left;
    max-width: 30rem;
    margin: 0 0 2.5rem;
    text-wrap: pretty;
  }
/* ── Form overrides scoped to the right column ──
     TheNewsDigestSubscribeCard is rendered as-is; these overrides restyle
     its child elements for the dark background. The component's JSX,
     ids, and form logic are NOT modified. */
/* The form sits left-aligned with no extra top margin (the intro line
     above already provides the spacing). */
.nd-split-right .nd-form {
    margin-top: 0;
    text-align: left;
  }
/* Form zone wrapper — defensive visibility net. Guarantees the
     subscribe card's form is always rendered and never clipped,
     regardless of any inherited overflow or display rules. The
     component itself is NOT modified. */
.nd-split-right .nd-form-zone {
    display: block;
    width: 100%;
    max-width: 36rem;
  }
/* The email + CTA row stretches to the column's content width (capped
     at ~36rem so the row never gets too wide on large screens). */
.nd-split-right .nd-form-row {
    max-width: 36rem;
    margin: 0;
  }
/* Email field — dark surface, cream text, oxblood border. The shared
     .nd-input rule uses a cream background + espresso text; here we
     invert to a darker surface so the field reads on the charcoal
     column. Placeholder lifts to a muted cream. */
.nd-split-right .nd-input {
    background: oklch(0.17 0.012 54); /* near-black, slightly darker than the column */
    border: 1px solid oklch(0.6 0.09 28); /* lifted oxblood for dark */
    color: oklch(0.92 0.013 82); /* cream/bone */
  }
.nd-split-right .nd-input::-moz-placeholder {
    color: oklch(0.62 0.012 75); /* muted cream */
  }
.nd-split-right .nd-input::placeholder {
    color: oklch(0.62 0.012 75); /* muted cream */
  }
.nd-split-right .nd-input:focus-visible {
    outline: 2px solid oklch(0.6 0.09 28); /* lifted oxblood */
    outline-offset: 1px;
    border-color: oklch(0.6 0.09 28);
  }
/* The CTA button keeps its terracotta background (already reads on
     dark). No override needed — the shared .nd-button rule + the
     --nd-button-* tokens handle it. */
/* Consent — cream/bone text so the label reads on the dark column.
     max-width matches the .nd-form-row cap (36rem) so the consent label
     aligns with the email field above. */
.nd-split-right .nd-consent {
    color: oklch(0.82 0.012 75); /* softened cream for body copy */
    justify-content: flex-start;
    max-width: 36rem;
  }
/* Privacy link — lifted oxblood so it stays visible on the dark
     background. */
.nd-split-right .nd-privacy-link {
    color: oklch(0.7 0.1 28); /* lifted oxblood */
  }
.nd-split-right .nd-privacy-link:hover {
    color: oklch(0.8 0.11 28); /* brighter oxblood on hover */
  }
.nd-split-right .nd-privacy-link:focus-visible {
    outline: 2px solid oklch(0.7 0.1 28);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
/* Feedback — cream/bone text so the aria-live region reads on dark.
     The success/error/duplicate colour overrides below keep the
     semantic colours but lift them for the dark background. */
.nd-split-right .nd-feedback {
    color: oklch(0.82 0.012 75);
    text-align: left;
  }
.nd-split-right .nd-feedback--success {
    color: oklch(0.7 0.1 150); /* lifted sage */
  }
.nd-split-right .nd-feedback--error,
  .nd-split-right .nd-feedback--duplicate {
    color: oklch(0.75 0.11 28); /* lifted oxblood */
  }
/* Cadence — cream/bone text, left-aligned, tracked. The shared
     .nd-cadence rule centers; here we left-align and lift the colour. */
.nd-split-right .nd-cadence {
    color: oklch(0.7 0.012 75); /* muted cream */
    text-align: left;
    margin-top: 1.75rem;
  }
/* Secondary link — cream/bone text, arrow nudges right on hover. The
     shared .nd-secondary-link rule uses --foreground; here we override
     to cream/bone and lift the hover border to oxblood. */
.nd-split-right .nd-secondary-link {
    color: oklch(0.92 0.013 82); /* cream/bone */
    margin-top: 1.5rem;
  }
.nd-split-right .nd-secondary-link:hover {
    border-bottom-color: oklch(0.7 0.1 28); /* lifted oxblood */
  }
.nd-split-right .nd-secondary-link:focus-visible {
    outline: 2px solid oklch(0.7 0.1 28);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }
/* ── Responsive — mobile (<60rem / 960px) ──
     Single column: left content first, then the form. Reduced padding
     and a smaller watermark so the column breathes on small screens. */
@media (max-width: 59.999rem) {
    .nd-split {
      grid-template-columns: 1fr;
    }
    .nd-split-left {
      padding: 2rem 1.5rem;
      min-height: 0;
    }
    .nd-split-clock {
      width: 9rem;
      height: 9rem;
      bottom: 1rem;
      right: 0.625rem;
    }
    .nd-split-right {
      padding: 1.75rem 1.5rem;
      min-height: 0;
    }
  }
/* ── Reduced motion — disable transitions and arrow nudges ──
     Mirrors the shared .nd-* reduced-motion block but scoped to the
     split module's overrides. */
@media (prefers-reduced-motion: reduce) {
    .nd-split-right .nd-button,
    .nd-split-right .nd-button__arrow,
    .nd-split-right .nd-input,
    .nd-split-right .nd-privacy-link,
    .nd-split-right .nd-secondary-link,
    .nd-split-right .nd-secondary-link__arrow {
      transition: none !important;
    }
    .nd-split-right .nd-button:active:not(:disabled) {
      transform: none !important;
    }
    .nd-split-right .nd-button:hover:not(:disabled) .nd-button__arrow,
    .nd-split-right .nd-secondary-link:hover .nd-secondary-link__arrow {
      transform: none !important;
    }
  }
/* ════════════════════════════════════════════════════════════════════
     THE NEWS DIGEST — 02 INSIDE THE DIGEST editorial module
     A full-width editorial <section> inserted between the full-bleed
     banner and the second .nd-content block. A thin muted-terracotta
     rule runs across the top of the section. Inside, a max-width 1440px
     two-column grid (44% left / 56% right, ~80px gap, ~110px vertical
     padding, 5–7vw horizontal page padding) holds:

       LEFT COLUMN — explanatory content (no card, no rounded corners):
         small mono section label, terracotta kicker, Fraunces serif
         headline (two lines), intro paragraph, an <ol> of four benefit
         rows separated by thin rules (each row a three-column internal
         grid: narrow number / medium label / wider description; on hover
         the rule turns terracotta and the description shifts ~4px
         right), and a rectangular outlined editorial stamp.

       RIGHT COLUMN — sample newsletter page (<article>) resting on two
         slightly offset decorative paper layers (aria-hidden) for depth.
         Warm cream background, subtle grain, fine borders, soft natural
         shadow, max-width ~680px, slight rotation ≤1deg, NO rounded
         corners. Publication header (THE NEWS DIGEST | SAMPLE EDITION)
         with a thin charcoal rule below, sample headline, wildfire
         photograph (16:6, object-fit cover, eager load), and four
         structured editorial rows (circled number + lucide line icon +
         label + preview + thin divider). Row 02 carries four tracked
         terracotta topics below its preview.

     EDITORIAL ANNOTATIONS — on desktop (≥1100px) two subtle
     handwritten-style annotations sit OUTSIDE the right edge of the
     sample page in muted terracotta with hand-drawn arrows: "LOOK
     AHEAD" → WHAT TO WATCH row, "LEAVE SMARTER" → KNOWLEDGE BOOSTERS
     row. Hidden below ~1100px via a max-width media query (NOT the
     48rem one) so they never create horizontal overflow. Decorative
     arrows are aria-hidden.

     RESPONSIVE — tablet (<1024px): keep two columns if room remains,
     reduce headline size and gap, hide annotations, keep the sample
     page within its container. Mobile (<760px): single column,
     explanatory content first then the sample digest, ~64px vertical
     padding, benefit rows collapse to two-line (number + label on line
     one, description underneath), sample page stays square-edged,
     headline wraps naturally, no horizontal scroll, wildfire image full
     container width.

     Palette (Margins of Tomorrow): background #F5F2E9, paper #FAF7F0,
     text #333333, secondary-text #5A524C, accent #A65D53 (terracotta),
     rule rgba(51,51,51,0.22). Mapped to existing oklch tokens
     (--background, --foreground, --accent, --nd-button-bg). No blue,
     green, yellow, or bright interface colours. No gradients, glass,
     or rounded SaaS cards. All motion guarded by prefers-reduced-motion.
     ════════════════════════════════════════════════════════════════════ */
/* ── Section wrapper — full-width editorial section ──
      Full-width <section> with a thin muted-terracotta rule across the
      top. The inner .nd-inside-inner caps content at 1440px and applies
      the page padding (5–7vw horizontal, ~110px vertical). Background
      is the warm bone page ground (no card wrapping the content). */
.nd-inside {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-top: 1px solid oklch(var(--accent) / 0.45);
    background: transparent;
  }
.nd-inside-inner {
    max-width: 90rem; /* 1440px */
    margin: 0 auto;
    padding: 6.875rem 5vw; /* ~110px vertical, 5–7vw horizontal */
  }
/* ── Two-column grid — 44% left / 56% right ──
      Desktop columns ~44% / 56% with an ~80px gap. minmax(0, …) on
      both tracks plus min-width: 0 on each column guarantees an exact
      split regardless of inner content (a column with wider min-content
      would otherwise render wider than its peer). Both columns align
      near the top. Tablet (<1024px) keeps two columns but narrows the
      gap; mobile (<760px) collapses to a single column with the
      explanatory content first and the sample digest underneath. */
.nd-inside-grid {
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    gap: 5rem; /* ~80px */
    align-items: start;
  }
.nd-inside-left,
  .nd-inside-right {
    min-width: 0;
  }
@media (max-width: 64rem) {
    /* tablet — keep two columns, narrow the gap */
    .nd-inside-grid {
      gap: 2.5rem;
    }
    .nd-inside-inner {
      padding: 5rem 4vw;
    }
  }
@media (max-width: 47.5rem) {
    /* mobile — single column, explanatory content first */
    .nd-inside-grid {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
    .nd-inside-inner {
      padding: 4rem 1.25rem; /* ~64px vertical */
    }
  }
/* ── Left column — explanatory content (no card) ──
      No background, no border, no rounded corners — the content sits
      directly on the warm bone page ground. text-align left so the
      label, kicker, headline, body, step list, and stamp read as a
      left-anchored editorial column. */
.nd-inside-left {
    text-align: left;
  }
/* ── Section label — JetBrains Mono, small, tracked, espresso ──
      "02  INSIDE THE DIGEST" — a quiet section number/nameplate in
      tracked mono. Sits at the very top of the left column. */
.nd-inside-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--foreground);
    font-weight: 600;
    text-align: left;
    margin: 0 0 1.25rem;
  }
/* ── Kicker — terracotta, uppercase, tracked ──
      "ONE STORY, FOLLOWED FURTHER" — a terracotta kicker sitting
      between the section label and the headline. Uppercase, tracked,
      in the muted terracotta accent. */
.nd-inside-kicker {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--nd-button-bg);
    font-weight: 600;
    text-align: left;
    margin: 0 0 1.25rem;
  }
/* ── Headline — Fraunces, weight 500–600, line-height ~1.0 ──
      "One story. / The context to understand it." — a two-line Fraunces
      serif headline, upright, weight 500–600, line-height ~0.98–1.05
      so the two lines sit tightly. Left-aligned. clamp() keeps the scale
      comfortable from mobile to desktop. */
.nd-inside-headline {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.02;
    letter-spacing: -0.012em;
    font-size: clamp(2rem, 3.6vw, 3rem);
    text-align: left;
    text-wrap: balance;
    margin: 0 0 1.75rem;
  }
/* ── Intro paragraph — General Sans, line-height ~1.6 ──
      The standfirst. Capped at ~34rem so it reads as a comfortable
      editorial measure within the left column. */
.nd-inside-body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: oklch(0.4 0.012 55);
    text-align: left;
    max-width: 34rem;
    margin: 0 0 2.75rem;
    text-wrap: pretty;
  }
/* ── Four benefit rows — <ol> with thin rules between rows ──
       An ordered list of four horizontal rows separated by thin rules
       (border-top on all but the first). Each row uses a three-column
       internal grid: a narrow number column (01–04), a medium label
       column (ORIENTATION / RELEVANCE / FORESIGHT / UNDERSTANDING), and
       a wider description column. The whole row is subtly interactive:
       on hover the rule turns terracotta and the description shifts
       ~4px to the right. No background-filled cards, no large
       animations. list-style is stripped; the counter is carried in the
       .nd-inside-step-num span. */
.nd-inside-steps {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    counter-reset: none;
  }
.nd-inside-step {
    display: grid;
    grid-template-columns: minmax(0, 2.5rem) minmax(0, 9rem) minmax(0, 1fr);
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
    align-items: baseline;
    padding: 1.375rem 0;
    border-top: 1px solid oklch(0.255 0.015 54 / 0.22); /* rule rgba(51,51,51,0.22) */
    transition: border-color 0.25s ease;
  }
.nd-inside-step:first-child {
    border-top: none;
    padding-top: 0;
  }
.nd-inside-step:last-child {
    padding-bottom: 0;
  }
/* ── Hover: rule → terracotta, description shifts ~4px right ──
       Subtle interaction only — no background fill, no large animation.
       The description's transform is animated on transform (never
       layout properties) and guarded by prefers-reduced-motion below. */
.nd-inside-step:hover {
    border-color: var(--nd-button-bg);
  }
.nd-inside-step:hover .nd-inside-step-desc {
    transform: translateX(0.25rem); /* ~4px */
  }
.nd-inside-step-desc {
    transition: transform 0.25s ease;
  }
/* ── Number column (01–04) — narrow, mono, tracked ──
       The step number in tracked mono, espresso ink. Sits in the narrow
       first column of the row grid. */
.nd-inside-step-num {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--foreground);
    line-height: 1.4;
  }
/* ── Label column — medium, mono, tracked, uppercase ──
       ORIENTATION / RELEVANCE / FORESIGHT / UNDERSTANDING. Bold
       uppercase tracked mono so the label reads as a section nameplate. */
.nd-inside-step-label {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--foreground);
    font-weight: 700;
    line-height: 1.4;
  }
/* ── Description column — wider, body, muted espresso ──
       The benefit description in General Sans, muted espresso. The
       wider third column carries the row's main text. */
.nd-inside-step-desc {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(0.4 0.012 55);
    text-wrap: pretty;
  }
/* ── Mobile benefit rows — two-line layout ──
       Below 760px each benefit row collapses to a two-line layout:
       the number and label sit on the first line, the description
       underneath. The three-column grid becomes a two-column grid
       (number + label on one line) with the description spanning the
       full width on the second line. */
@media (max-width: 47.5rem) {
    .nd-inside-step {
      grid-template-columns: minmax(0, 2.25rem) minmax(0, 1fr);
      grid-template-rows: auto auto;
      -moz-column-gap: 0.875rem;
           column-gap: 0.875rem;
      row-gap: 0.25rem;
      padding: 1.125rem 0;
    }
    .nd-inside-step-num {
      grid-row: 1;
      grid-column: 1;
    }
    .nd-inside-step-label {
      grid-row: 1;
      grid-column: 2;
    }
    .nd-inside-step-desc {
      grid-row: 2;
      grid-column: 1 / -1;
      margin-top: 0.25rem;
    }
  }
/* ── Editorial stamp — rectangular outlined ──
      "INFORMED, NOT MERELY UPDATED" — a rectangular outlined editorial
      stamp with square corners, a 1px terracotta border, and tracked
      uppercase typography. Sits below the benefit rows, closing the
      left column. Inline-block so it sizes to its content (a stamp,
      not a full-width bar). */
.nd-inside-stamp {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nd-button-bg);
    border: 1px solid var(--nd-button-bg);
    border-radius: 0; /* square corners */
    padding: 0.625rem 1rem;
    margin: 0;
    font-weight: 600;
    text-align: left;
    line-height: 1.2;
  }
/* ── Right column — sample newsletter page (<article>) ──
      position: relative so the decorative paper layers and the
      editorial annotations can be absolutely positioned against it.
      The .nd-inside-page is the visible sample newsletter sheet; the
      two .nd-inside-sheet layers sit BEHIND it for depth. max-width
      ~680px keeps the sample page at a comfortable editorial measure. */
.nd-inside-right {
    position: relative;
    text-align: left;
    max-width: 42.5rem; /* ~680px */
    margin: 0 auto; /* centre within the wider right column */
  }
/* ── Decorative offset paper layers (back + mid) ──
       Two slightly offset and rotated rectangles sitting BEHIND the
       main sample page to create the impression of the page resting on
       a second (and third) sheet of paper. Purely decorative —
       aria-hidden="true" in the markup. Warm cream fill, fine border,
       soft natural shadow, subtle grain. NO rounded corners. Slight
       rotation ≤1deg. The back sheet peeks out at the top-left; the
       mid sheet peeks out at the bottom-right, so the two layers read
       as a diagonal stack rather than a clean digital pile. */
.nd-inside-sheet {
    position: absolute;
    inset: 0;
    display: block;
    background: oklch(0.97 0.006 80);
    border: 1px solid oklch(0.255 0.015 54 / 0.14);
    box-shadow: 0 1px 2px oklch(0.25 0.01 50 / 0.05), 0 6px 18px
      oklch(0.25 0.01 50 / 0.06);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/></svg>");
    pointer-events: none;
    z-index: 0;
  }
.nd-inside-sheet--back {
    /* peeks out at the top-left, slight counter-clockwise rotation */
    transform: translate(-0.75rem, -0.625rem) rotate(-0.8deg);
  }
.nd-inside-sheet--mid {
    /* peeks out at the bottom-right, slight clockwise rotation */
    transform: translate(0.75rem, 0.625rem) rotate(0.7deg);
    z-index: 1;
  }
/* ── Sample newsletter page — the visible sheet ──
       Warm cream paper (#FAF7F0), fine charcoal border, soft natural
       shadow, subtle grain texture, slight rotation ≤1deg. NO rounded
       corners. Sits above the two decorative layers (z-index: 2). The
       page holds the publication header, sample headline, wildfire
       photograph, and four structured editorial rows. position: relative
       so the editorial annotations can be anchored to the right edge of
       the page (not the column). */
.nd-inside-page {
    position: relative;
    z-index: 2;
    background: oklch(0.975 0.006 80); /* paper #FAF7F0 */
    border: 1px solid oklch(0.255 0.015 54 / 0.18);
    box-shadow: 0 1px 2px oklch(0.25 0.01 50 / 0.06), 0 10px 28px
      oklch(0.25 0.01 50 / 0.1), 0 18px 48px oklch(0.25 0.01 50 / 0.06);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
    padding: 2.25rem 2.5rem 2rem;
    transform: rotate(-0.4deg);
  }
@media (max-width: 47.5rem) {
    .nd-inside-page {
      padding: 1.75rem 1.5rem 1.5rem;
      transform: rotate(-0.2deg); /* gentler rotation on mobile */
    }
  }
/* ── Publication header — THE NEWS DIGEST | SAMPLE EDITION ──
       A two-cell header: nameplate top-left, "SAMPLE EDITION" top-right.
       A thin charcoal rule sits below the header. No fabricated issue
       number or historical date. */
.nd-inside-masthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid oklch(0.255 0.015 54 / 0.55); /* charcoal rule */
    margin: 0 0 1.75rem;
  }
.nd-inside-masthead-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    color: var(--foreground);
    line-height: 1.1;
  }
.nd-inside-masthead-edition {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: oklch(0.4 0.012 55);
    font-weight: 600;
    line-height: 1.1;
    text-align: right;
  }
@media (max-width: 47.5rem) {
    .nd-inside-masthead {
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .nd-inside-masthead-name {
      font-size: 1.0625rem;
    }
  }
/* ── Sample headline — Fraunces, two lines ──
       "EUROPE'S WILDFIRE / SEASON INTENSIFIES" — a two-line Fraunces
       serif headline. Left-aligned so it reads as the article's own
       headline within the page. On mobile the headline wraps naturally. */
.nd-inside-article-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--foreground);
    text-align: left;
    text-wrap: balance;
    margin: 0 0 1.5rem;
  }
/* ── Wildfire photograph — directly below the headline ──
       The existing asset at /assets/generated/nd-inside-wildfire.png.
       object-fit: cover, aspect ratio ~16:6, no text overlay, no
       lazy-load (loading="eager" in the markup — the section sits
       immediately beneath the hero). The figure spans the full content
       width of the page (negative margins offset the page's internal
       padding so the image reads as a full-bleed editorial photo). */
.nd-inside-photo {
    margin: 0 -2.5rem 1.75rem;
    padding: 0;
    aspect-ratio: 16 / 6;
    overflow: hidden;
  }
@media (max-width: 47.5rem) {
    .nd-inside-photo {
      margin: 0 -1.5rem 1.5rem;
    }
  }
.nd-inside-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* ── Four structured editorial rows inside the page ──
       An <ol> of four rows. Each row contains: a circled number, a
       simple lucide line icon (List / Users / Eye / BookOpen — no
       emoji), a section label, a short preview, and a thin divider
       (border-top on all but the first). Row 02 (WHY IT MATTERS) carries
       four tracked terracotta topics below its preview. */
.nd-inside-sections {
    list-style: none;
    margin: 0;
    padding: 0;
  }
.nd-inside-section {
    display: grid;
    grid-template-columns: minmax(0, 2.25rem) minmax(0, 1.75rem) minmax(0, 1fr);
    -moz-column-gap: 0.875rem;
         column-gap: 0.875rem;
    align-items: start;
    padding: 1.25rem 0;
    border-top: 1px solid oklch(0.255 0.015 54 / 0.18);
  }
.nd-inside-section:first-child {
    border-top: none;
    padding-top: 0;
  }
.nd-inside-section:last-child {
    padding-bottom: 0;
  }
@media (max-width: 47.5rem) {
    .nd-inside-section {
      grid-template-columns: minmax(0, 2rem) minmax(0, 1.5rem) minmax(0, 1fr);
      -moz-column-gap: 0.75rem;
           column-gap: 0.75rem;
      padding: 1rem 0;
    }
  }
/* ── Circled number (01–04) ──
       A small circular badge carrying the row number in tracked mono.
       Espresso ink on a soft cream fill with a hairline espresso ring.
       border-radius: 50% so it reads as a true circle (the only round
       element in the module — the rest is square-edged). */
.nd-inside-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: oklch(0.95 0.008 80);
    border: 1px solid oklch(0.255 0.015 54 / 0.55);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
  }
@media (max-width: 47.5rem) {
    .nd-inside-circle {
      width: 2rem;
      height: 2rem;
      font-size: 0.6875rem;
    }
  }
/* ── Lucide line icon (List / Users / Eye / BookOpen) ──
       A single-weight lucide line icon sitting between the circled
       number and the text block. Espresso ink, 1.25 stroke for the
       thin-line editorial feel. Sized to sit comfortably beside the
       circle. */
.nd-inside-section-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.375rem;
    color: var(--foreground);
  }
@media (max-width: 47.5rem) {
    .nd-inside-section-icon {
      width: 1.25rem;
      height: 1.25rem;
      margin-top: 0.375rem;
    }
  }
/* ── Section text block — label above preview ──
       The row's text column: a bold uppercase tracked mono label above
       the preview (body, muted espresso). min-width 0 so the grid child
       can shrink and wrap inside the row. */
.nd-inside-section-text {
    min-width: 0;
  }
.nd-inside-section-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--foreground);
    font-weight: 700;
    margin: 0 0 0.375rem;
    line-height: 1.2;
  }
.nd-inside-section-preview {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(0.4 0.012 55);
    margin: 0;
    text-wrap: pretty;
  }
/* ── Four tracked terracotta topics (row 02 only) ──
       "COMMUNITIES · ECONOMY · INFRASTRUCTURE · CLIMATE POLICY" — small
       tracked terracotta text sitting below the WHY IT MATTERS preview.
       Uses the muted terracotta accent so the four topics read as a
       distinct editorial signal within the row. */
.nd-inside-section-topics {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nd-button-bg);
    font-weight: 600;
    margin: 0.625rem 0 0;
    line-height: 1.4;
    text-wrap: balance;
  }
/* ── Editorial annotations (marginalia) ──
       Two subtle handwritten-style annotations OUTSIDE the right edge
       of the sample page, in muted terracotta with hand-drawn arrows.
       "LOOK AHEAD" points at the WHAT TO WATCH row; "LEAVE SMARTER"
       points at the KNOWLEDGE BOOSTERS row. Each annotation is an
       absolutely-positioned wrapper (against .nd-inside-right) holding
       a tracked mono label and an inline hand-drawn SVG arrow. The
       arrow points LEFTWARD into the page (the arrowhead sits at the
       LEFT end of the SVG). The wrapper sits in the right margin of
       the page (right: -X) so the label + arrow float outside the
       page's right edge.

       Hidden below ~1100px via a max-width media query (NOT the 48rem
       one) so they never create horizontal overflow on tablets or
       mobile. The decorative arrows are aria-hidden="true" in the
       markup; the whole annotation wrapper is aria-hidden="true". */
.nd-inside-annotation {
    position: absolute;
    right: -7.5rem; /* float in the right margin of the page */
    display: flex;
    /* row-reverse renders the arrow (second child) on the LEFT of the
       label (first child) so the arrow originates at the label and
       points left into the section it labels. The SVG path geometry
       already points left (arrowhead at x≈12), so no path edits are
       needed — only the visual order is reversed here. */
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    z-index: 3;
  }
.nd-inside-annotation-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--nd-button-bg);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    /* Handwritten feel: a slight italic + a touch of letter-spacing
       reduction so the tracked mono label reads as a handwritten
       marginalia note rather than a UI label. */
    font-style: italic;
    letter-spacing: 0.14em;
  }
.nd-inside-annotation-arrow {
    width: 3rem;
    height: 2.25rem;
    flex: 0 0 auto;
    display: block;
  }
/* LOOK AHEAD — lines up with the WHAT TO WATCH row (row 03). The
     vertical offset is tuned against the page's internal layout so
     the arrowhead points at the row's label. */
.nd-inside-annotation--look-ahead {
    bottom: 9.5rem;
  }
/* LEAVE SMARTER — lines up with the KNOWLEDGE BOOSTERS row (row 04),
     sitting just below the LOOK AHEAD annotation. */
.nd-inside-annotation--leave-smarter {
    bottom: 4.75rem;
  }
/* Hide annotations below ~1100px so they never create horizontal
     overflow. This is a max-width media query (NOT the 48rem one) per
     the spec. */
@media (max-width: 68.75rem) {
    .nd-inside-annotation {
      display: none;
    }
  }
/* ── 02 INSIDE THE DIGEST · reduced motion ──
       The module's only motion is the benefit-row hover transition
       (border-color + description transform). Both are suppressed
       under prefers-reduced-motion so the rows remain fully legible
       without any movement. The guard also covers any future
       transition added to .nd-inside-* elements. */
@media (prefers-reduced-motion: reduce) {
    .nd-inside,
    .nd-inside-grid,
    .nd-inside-left,
    .nd-inside-right,
    .nd-inside-page,
    .nd-inside-step,
    .nd-inside-step-desc,
    .nd-inside-stamp,
    .nd-inside-annotation,
    .nd-inside-annotation-arrow {
      transition: none !important;
    }
    .nd-inside-step:hover .nd-inside-step-desc {
      transform: none !important;
    }
  }
/* ── Article body embeds — public page embed containers ──
     Scoped surfaces for the live social/video embeds that can appear
     anywhere inside the article reading column. Each embed is a
     self-contained card that fills the max-w-2xl reading column
     width responsively, sits on a warm card surface with a hairline
     border, and keeps consistent vertical rhythm with the surrounding
     body text. Per-platform modifiers carry no extra colour — they
     only adjust aspect ratio / min-height so the live widget mounts
     without dramatic reflow. The fallback state shows the original
     URL as an oxblood clickable link. Reuses existing OKLCH tokens
     (--card, --border, --accent, --muted-foreground) so light + dark
     mode adapt automatically. No new tokens. */
.article-embed {
    width: 100%;
    margin-block: 2rem;
    background: oklch(var(--card));
    border: 1px solid oklch(var(--border));
    border-radius: 0.25rem;
    overflow: hidden;
    /* Reserve a sensible amount of vertical space so the surrounding
       text does not reflow dramatically when the live widget mounts. */
    min-height: 4rem;
  }
/* The first embed in a body section should not add top margin on top
     of the preceding paragraph's bottom margin — keep the rhythm even. */
.article-body > .article-embed:first-child {
    margin-top: 0;
  }
.article-body > .article-embed:last-child {
    margin-bottom: 0;
  }
/* Placeholder shown before the live widget mounts. A quiet centered
     label so the reader knows an embed is loading, without a spinner
     that may never resolve. */
.article-embed__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    padding: 1.25rem 1rem;
  }
.article-embed__placeholder-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: oklch(var(--muted-foreground));
  }
/* ── Per-platform modifiers ──
     Only adjust the reserved space / aspect ratio. No per-platform
     colour — the platform's own widget supplies its visual identity. */
/* Twitter / X — tweet widget. Reserve a comfortable height for a
     single tweet (text + actions row). */
.article-embed--twitter {
    min-height: 8rem;
  }
.article-embed--twitter > .article-embed__placeholder {
    min-height: 8rem;
  }
/* Twitter's iframe is width-constrained by the platform; center it
     and let it fill the column up to its own max width. */
.article-embed--twitter iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    display: block;
  }
/* LinkedIn — post embed. Taller by default; LinkedIn posts vary. */
.article-embed--linkedin {
    min-height: 10rem;
  }
.article-embed--linkedin > .article-embed__placeholder {
    min-height: 10rem;
  }
/* YouTube — 16:9 responsive video player. The wrapper holds the
     aspect ratio; the iframe fills it. */
.article-embed--youtube {
    min-height: 0;
    background: oklch(0 0 0);
    border-color: oklch(var(--border));
  }
.article-embed--youtube > .article-embed__placeholder {
    min-height: 9rem;
  }
.article-embed__youtube-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: oklch(0 0 0);
  }
.article-embed__youtube-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
/* Instagram — embed card. Reserve a square-ish height; the platform
     card settles to its own size once mounted. */
.article-embed--instagram {
    min-height: 12rem;
  }
.article-embed--instagram > .article-embed__placeholder {
    min-height: 12rem;
  }
.article-embed--instagram iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    display: block;
  }
/* ── Fallback state — shown when a platform's embed script fails ──
     A quiet card with the original URL as an oxblood clickable link.
     Uses --accent (oxblood) for the link so it reads as an editorial
     detail, not a broken-image icon. */
.article-embed--fallback {
    min-height: 0;
    background: oklch(var(--card));
    border-color: oklch(var(--border));
  }
.article-embed__fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    padding: 1rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: oklch(var(--muted-foreground));
  }
.article-embed__fallback-label {
    font-weight: 600;
    color: oklch(var(--foreground) / 0.7);
  }
.article-embed__fallback-link {
    color: oklch(var(--accent));
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: oklch(var(--accent) / 0.5);
    transition: text-decoration-color var(--transition-smooth), color
      var(--transition-smooth);
  }
.article-embed__fallback-link:hover {
    color: oklch(var(--accent));
    text-decoration-color: oklch(var(--accent));
  }
.article-embed__fallback-link:focus-visible {
    outline: none;
    border-radius: 0.125rem;
    box-shadow: 0 0 0 2px oklch(var(--accent) / 0.45), 0 0 0 4px
      oklch(var(--card));
  }
/* On small screens the reading column narrows; keep embeds filling
     the column and avoid horizontal overflow from platform iframes. */
@media (max-width: 639px) {
    .article-embed {
      margin-block: 1.5rem;
    }
    .article-embed iframe {
      max-width: 100%;
    }
  }
/* ── Page shell ──
     Reuses `.nl-spread` for the centred 46rem column; `.sh-page` adds
     the seven-section vertical rhythm and a faint layered-paper
     texture underlay on the bone ground. */
.sh-page {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 7vw, 6rem);
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5rem);
    position: relative;
    isolation: isolate;
    max-width: 72rem;
    margin-inline: auto;
  }
.sh-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(
        circle at 18% 12%,
        oklch(from var(--card) l c h / 0.55) 0,
        transparent 38%
      ),
      radial-gradient(
        circle at 84% 78%,
        oklch(from var(--muted) l c h / 0.4) 0,
        transparent 42%
      );
    opacity: 0.6;
  }
/* ── Section heading — reuses `.nl-section`; `.sh-heading` is a thin
     alias for scoped overrides only (number + label kicker, Fraunces
     title, fine rule). */
.sh-heading {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  }
.sh-heading .nl-section__kicker {
    color: oklch(var(--accent));
  }
/* ════════════════════════════════════════════════════════════════
     Section 1 — Welcome Hero
     ════════════════════════════════════════════════════════════════ */
.sh-hero {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-top: clamp(1rem, 2vw, 1.5rem);
  }
.sh-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(var(--accent));
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
  }
.sh-hero__eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: oklch(var(--accent));
    opacity: 0.7;
  }
.sh-hero__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: oklch(var(--foreground));
    max-width: 32rem;
  }
.sh-hero__intro {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.65;
    color: oklch(var(--foreground));
    opacity: 0.82;
    max-width: 40rem;
  }
/* Embedded signup form sits inside the hero; reuse `.newsletter-panel`
     embedded variant. `.sh-hero__form` only narrows the max width. */
.sh-hero__form {
    max-width: 38rem;
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
  }
/* ════════════════════════════════════════════════════════════════
     Section 2 — Choose Your Margin (four full-width horizontal rows)
     One line each: number + title + description + arrow CTA. NOT a
     grid, NOT heavy cards. A fine rule divides each row; the row lifts
     subtly on hover/focus-within.
     ════════════════════════════════════════════════════════════════ */
.sh-margins {
    display: flex;
    flex-direction: column;
    border-top: 1px solid oklch(var(--border));
  }
.sh-margins__row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    -moz-column-gap: clamp(1rem, 2vw, 1.75rem);
         column-gap: clamp(1rem, 2vw, 1.75rem);
    align-items: baseline;
    padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
    border-bottom: 1px solid oklch(var(--border));
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
  }
.sh-margins__row:hover,
  .sh-margins__row:focus-within {
    background: oklch(from var(--card) l c h / 0.45);
    padding-left: clamp(0.5rem, 1vw, 0.75rem);
    padding-right: clamp(0.5rem, 1vw, 0.75rem);
  }
.sh-margins__num {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: oklch(var(--accent));
    align-self: center;
  }
.sh-margins__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
  }
.sh-margins__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    line-height: 1.2;
    color: oklch(var(--foreground));
    letter-spacing: -0.01em;
  }
.sh-margins__desc {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(var(--foreground));
    opacity: 0.72;
    max-width: 38rem;
  }
.sh-margins__arrow {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    color: oklch(var(--accent));
    align-self: center;
    transition: transform var(--transition-smooth);
    white-space: nowrap;
  }
.sh-margins__row:hover .sh-margins__arrow,
  .sh-margins__row:focus-within .sh-margins__arrow {
    transform: translateX(4px);
  }
@media (max-width: 39.99rem) {
    .sh-margins__row {
      grid-template-columns: 2.25rem minmax(0, 1fr);
      grid-template-areas:
        "num body"
        "arrow arrow";
      row-gap: 0.625rem;
      -moz-column-gap: 0.75rem;
           column-gap: 0.75rem;
    }
    .sh-margins__num {
      grid-area: num;
      align-self: start;
      padding-top: 0.125rem;
    }
    .sh-margins__body {
      grid-area: body;
    }
    .sh-margins__arrow {
      grid-area: arrow;
      justify-self: end;
    }
  }
/* ════════════════════════════════════════════════════════════════
     Section 3 — Three Places to Begin (three sample signature essays)
     A vertical stack of three pieces, each subtly marked as sample.
     Each piece: category kicker, Fraunces headline, standfirst, reading
     time, "Read the essay →" link. Sample marker is a quiet mono tag.
     ════════════════════════════════════════════════════════════════ */
.sh-signatures {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
  }
.sh-signature {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid oklch(var(--border));
    position: relative;
  }
.sh-signature:first-child {
    padding-top: 0;
    border-top: none;
  }
.sh-signature__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
.sh-signature__category {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: oklch(var(--accent));
  }
.sh-signature__sample {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    border: 1px solid oklch(var(--border));
    border-radius: 0.125rem;
    padding: 0.125rem 0.4375rem;
  }
.sh-signature__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: oklch(var(--foreground));
    margin: 0;
  }
.sh-signature__standfirst {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: oklch(var(--foreground));
    opacity: 0.78;
    max-width: 42rem;
  }
.sh-signature__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: oklch(var(--muted-foreground));
  }
.sh-signature__meta::before {
    content: "";
    width: 1rem;
    height: 1px;
    background: oklch(var(--border));
  }
.sh-signature__link {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: oklch(var(--accent));
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    align-self: flex-start;
    margin-top: 0.25rem;
    transition: var(--transition-smooth);
  }
.sh-signature__link .sh-signature__arrow {
    display: inline-block;
    margin-left: 0.25rem;
    transition: transform var(--transition-smooth);
  }
.sh-signature__link:hover .sh-signature__arrow {
    transform: translateX(4px);
  }
/* ════════════════════════════════════════════════════════════════
     Section 4 — What Will Arrive (four-row inbox expectations table)
     A quiet editorial table: header row + four letter rows. Each row:
     Letter name | What readers receive | Cadence. Hairline rules,
     no heavy borders, oxblood column-one emphasis.
     ════════════════════════════════════════════════════════════════ */
.sh-inbox {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
  }
.sh-inbox thead th {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    text-align: left;
    font-weight: 500;
    padding: 0 0 0.875rem 0;
    border-bottom: 1px solid oklch(var(--border));
  }
.sh-inbox tbody td {
    padding: clamp(0.875rem, 1.8vw, 1.125rem) 0;
    border-bottom: 1px solid oklch(var(--border));
    vertical-align: top;
    line-height: 1.55;
  }
.sh-inbox tbody tr:last-child td {
    border-bottom: none;
  }
.sh-inbox__letter {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: oklch(var(--accent));
    letter-spacing: -0.01em;
    width: 22%;
  }
.sh-inbox__receive {
    font-size: 0.9375rem;
    color: oklch(var(--foreground));
    opacity: 0.82;
    width: 48%;
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  }
.sh-inbox__cadence {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: oklch(var(--muted-foreground));
    text-align: right;
    width: 30%;
    white-space: nowrap;
  }
.sh-inbox__cta {
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: oklch(var(--accent));
    text-decoration: underline;
    text-underline-offset: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
.sh-inbox__cta .sh-inbox__cta-arrow {
    transition: transform var(--transition-smooth);
  }
.sh-inbox__cta:hover .sh-inbox__cta-arrow {
    transform: translateX(4px);
  }
@media (max-width: 39.99rem) {
    .sh-inbox thead {
      display: none;
    }
    .sh-inbox,
    .sh-inbox tbody,
    .sh-inbox tr,
    .sh-inbox td {
      display: block;
      width: 100%;
    }
    .sh-inbox tr {
      padding: clamp(0.875rem, 2vw, 1.125rem) 0;
      border-bottom: 1px solid oklch(var(--border));
    }
    .sh-inbox tr:last-child {
      border-bottom: none;
    }
    .sh-inbox td {
      padding: 0.25rem 0;
      border: none;
      text-align: left;
    }
    .sh-inbox__receive {
      padding-inline: 0;
    }
    .sh-inbox__cadence {
      text-align: left;
    }
    .sh-inbox__letter {
      margin-bottom: 0.125rem;
    }
  }
/* ════════════════════════════════════════════════════════════════
     Section 5 — How a Margins Article Works (three-part explainer)
     Three numbered parts (01 The signal, 02 The context, 03 The
     argument) in a vertical stack, each with a mono number, Fraunces
     part title, and body description. A closing line sits beneath.
     ════════════════════════════════════════════════════════════════ */
.sh-structure {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
  }
.sh-structure__part {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    -moz-column-gap: clamp(1rem, 2vw, 1.5rem);
         column-gap: clamp(1rem, 2vw, 1.5rem);
    align-items: baseline;
    padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    border-bottom: 1px solid oklch(var(--border));
  }
.sh-structure__part:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
  }
.sh-structure__num {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: oklch(var(--accent));
  }
.sh-structure__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
.sh-structure__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: oklch(var(--foreground));
  }
.sh-structure__desc {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(var(--foreground));
    opacity: 0.78;
    max-width: 40rem;
  }
.sh-structure__close {
    margin-top: clamp(1rem, 2vw, 1.5rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid oklch(var(--border));
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.45;
    color: oklch(var(--foreground));
    opacity: 0.88;
    max-width: 42rem;
  }
@media (max-width: 39.99rem) {
    .sh-structure__part {
      grid-template-columns: 2.5rem minmax(0, 1fr);
      -moz-column-gap: 0.75rem;
           column-gap: 0.75rem;
    }
  }
/* ════════════════════════════════════════════════════════════════
     Section 6 — A Personal Note
     A modest, human block: small mono "A NOTE" kicker, Fraunces
     headline, body copy. Slightly indented from the column to read as
     a signed aside. No card, no shadow — quiet restraint.
     ════════════════════════════════════════════════════════════════ */
.sh-note {
    padding-left: clamp(1.25rem, 3vw, 2.5rem);
    border-left: 1px solid oklch(var(--border));
    display: flex;
    flex-direction: column;
    gap: clamp(0.875rem, 1.8vw, 1.25rem);
  }
.sh-note__kicker {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
  }
.sh-note__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: oklch(var(--foreground));
    margin: 0;
  }
.sh-note__body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: oklch(var(--foreground));
    opacity: 0.82;
    max-width: 40rem;
  }
.sh-note__body p + p {
    margin-top: 1rem;
  }
/* ════════════════════════════════════════════════════════════════
     Section 7 — End With One Action (single CTA, no form)
     A quiet closing block: Fraunces headline, oxblood "Explore the
     Notebook →" link (arrow nudges on hover), secondary text beneath.
     NO form — the page ends here, deliberately.
     ════════════════════════════════════════════════════════════════ */
.sh-cta {
    display: flex;
    flex-direction: column;
    gap: clamp(0.875rem, 1.8vw, 1.25rem);
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid oklch(var(--border));
    text-align: left;
  }
.sh-cta__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: oklch(var(--foreground));
    max-width: 34rem;
    margin: 0;
  }
.sh-cta__link {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    font-weight: 600;
    color: oklch(var(--accent));
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
  }
.sh-cta__link .sh-cta__arrow {
    display: inline-block;
    transition: transform var(--transition-smooth);
  }
.sh-cta__link:hover .sh-cta__arrow,
  .sh-cta__link:focus-visible .sh-cta__arrow {
    transform: translateX(4px);
  }
.sh-cta__secondary {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: oklch(var(--muted-foreground));
    max-width: 38rem;
  }
/* ════════════════════════════════════════════════════════════════
     Essay modules — `.sh-essay-*`
     Three split-screen essay cards that follow the welcome hero.
     Each sits on a cream surface (--newsletter-panel-bg) with a thin
     muted-red (--accent) horizontal line across the top. Illustration
     and text alternate sides for visual rhythm: left, right, left.
     Side-by-side on desktop, stacked on mobile. Generous vertical
     padding so the modules breathe. CTAs are understated text links
     with an arrow, not buttons.
     ════════════════════════════════════════════════════════════════ */
.sh-essay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    -moz-column-gap: clamp(2rem, 4vw, 4rem);
         column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
    background: oklch(var(--newsletter-panel-bg));
    border-top: 1px solid oklch(var(--accent));
    border-radius: 0;
  }
/* Default order: media left, text right. */
.sh-essay__media {
    order: 1;
    min-width: 0;
  }
.sh-essay__text {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(0.875rem, 1.6vw, 1.125rem);
    min-width: 0;
  }
/* Mirrored variant: text left, media right. */
.sh-essay--media-right .sh-essay__media {
    order: 2;
  }
.sh-essay--media-right .sh-essay__text {
    order: 1;
  }
/* The illustration fills its column nicely, height auto. Photographic
     WebPs are placed as-is — no background, no crop, no rounded frame.
     The SVG placeholder uses the same class plus a modifier. */
.sh-essay__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 32rem;
    -o-object-fit: contain;
       object-fit: contain;
  }
.sh-essay__img--svg {
    max-height: 30rem;
  }
/* Eyebrow — sans-serif, small, muted. */
.sh-essay__eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: oklch(var(--muted-foreground));
    margin: 0;
  }
/* Headline — Fraunces serif, large. */
.sh-essay__headline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: oklch(var(--foreground));
    margin: 0;
    max-width: 32rem;
  }
/* Standfirst — medium, the lead sentence. */
.sh-essay__standfirst {
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.55;
    color: oklch(var(--foreground));
    opacity: 0.85;
    margin: 0;
    max-width: 34rem;
  }
/* Body — sans, smaller, supporting paragraph. */
.sh-essay__body {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: oklch(var(--foreground));
    opacity: 0.72;
    margin: 0;
    max-width: 34rem;
  }
/* CTA — understated text link with an arrow, not a button. Rendered
     as a non-navigating <span> (the whole .sh-essay module is the link)
     so it keeps the same visual affordance without a nested-link
     violation. Sentence case ("Read the article") — no uppercase
     transform, slightly larger and tighter-tracked than the old
     uppercase treatment, consistent with the quiet editorial tone. */
.sh-essay__cta {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: oklch(var(--accent));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin: 0;
    margin-top: clamp(0.25rem, 0.6vw, 0.5rem);
    padding: 0.25rem 0;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
  }
.sh-essay__cta .sh-essay__cta-arrow {
    display: inline-block;
    transition: transform var(--transition-smooth);
  }
.sh-essay__cta:hover,
  .sh-essay__cta:focus-visible {
    border-bottom-color: oklch(var(--accent));
    outline: none;
  }
.sh-essay__cta:hover .sh-essay__cta-arrow,
  .sh-essay__cta:focus-visible .sh-essay__cta-arrow {
    transform: translateX(4px);
  }
/* ── Whole-module link variant — `.sh-essay--link` ──
     When the entire `.sh-essay` module is wrapped in a TanStack Router
     `<Link>`, the link element itself carries the `.sh-essay` classes.
     Reset the default anchor treatment so the module reads as an
     editorial block, not a text link: inherit colour, no underline, no
     outline ring. The clickable affordance is a quiet accent shift on
     the top hairline rule and a subtle arrow nudge on hover/focus — no
     boxes, no shadows, consistent with the restrained editorial tone.
     Keyboard focus shows a thin accent outline on the module itself. */
a.sh-essay {
    color: inherit;
    text-decoration: none;
    outline: none;
  }
a.sh-essay:hover {
    border-top-color: oklch(var(--accent));
  }
a.sh-essay:hover .sh-essay__cta-arrow {
    transform: translateX(4px);
  }
a.sh-essay:focus-visible {
    outline: 1px solid oklch(var(--accent));
    outline-offset: clamp(0.25rem, 0.6vw, 0.5rem);
  }
a.sh-essay:focus-visible .sh-essay__cta {
    border-bottom-color: oklch(var(--accent));
  }
a.sh-essay:focus-visible .sh-essay__cta-arrow {
    transform: translateX(4px);
  }
/* Responsive — stack on mobile, illustration first regardless of
     side (so the visual always leads on small screens). */
@media (max-width: 47.99rem) {
    .sh-essay {
      grid-template-columns: 1fr;
      padding: clamp(2.25rem, 5vw, 3rem) clamp(1.25rem, 3vw, 1.75rem);
    }
    .sh-essay__media,
    .sh-essay--media-right .sh-essay__media {
      order: 1;
    }
    .sh-essay__text,
    .sh-essay--media-right .sh-essay__text {
      order: 2;
    }
    .sh-essay__img {
      max-height: 24rem;
    }
    .sh-essay__img--svg {
      max-height: 22rem;
    }
  }
/* ════════════════════════════════════════════════════════════════
     FULL-BLEED ORIENTATION STATEMENT — `.sh-orientation-*`
     A quiet, full-width editorial statement that breaks out of the
     72rem `.sh-page` container to be truly full-width. NO box, NO
     card, NO background panel — just the cream page background
     showing through with ONE thin terracotta horizontal rule. Inner
     content is constrained to a readable measure (44rem). Fraunces
     headline, body serif copy. Generous vertical padding.
     Rendered as a sibling OUTSIDE `.sh-page`.
     ════════════════════════════════════════════════════════════════ */
.sh-orientation {
    /* Full-bleed: span the full viewport width, ignoring the parent
       container's max-width. width: 100vw + margin-inline: calc to
       recenter against the viewport. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Generous vertical padding so the statement breathes. */
    padding-block: clamp(3.5rem, 8vw, 6rem);
    /* No background, no border around the whole thing — the cream
       page background shows through. */
    background: transparent;
    border: 0;
  }
.sh-orientation__inner {
    /* Inner content constrained to a readable measure, centred. */
    max-width: 44rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
  }
@media (min-width: 768px) {
    .sh-orientation__inner {
      padding-inline: 2rem;
    }
  }
/* The single thin terracotta horizontal rule — the only line.
     Full width of the inner measure, 1px, --accent. */
.sh-orientation__rule {
    border: 0;
    border-top: 1px solid oklch(var(--accent));
    margin: 0;
    width: 100%;
  }
/* Headline — Fraunces serif, large, espresso ink. */
.sh-orientation__headline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: oklch(var(--foreground));
    text-wrap: balance;
    max-width: 36rem;
    margin: 0;
  }
/* Copy — body serif, comfortable measure. */
.sh-orientation__copy {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.7;
    color: oklch(var(--foreground));
    opacity: 0.82;
    text-wrap: pretty;
    max-width: 40rem;
    margin: 0;
  }
/* ════════════════════════════════════════════════════════════════
     FULL-BLEED DARK ESPRESSO CLOSING SECTION — `.sh-closing-*`
     A dark espresso closing section that breaks out of the 72rem
     `.sh-page` container to true full viewport width. Uses a warm
     near-black espresso ground (--foreground darkened slightly), with
     light/cream headline and copy. Primary CTA: solid terracotta
     button (--newsletter-button-bg). Secondary CTA: text/outline
     link. Fraunces headline. Generous vertical padding. Rendered as a
     sibling OUTSIDE `.sh-page`.
     ════════════════════════════════════════════════════════════════ */
.sh-closing {
    /* Full-bleed: span the full viewport width. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Warm near-black espresso ground — a touch darker than
       --foreground for a true closing band. */
    background: oklch(0.21 0.018 50);
    /* Generous vertical padding so the closing breathes. */
    padding-block: clamp(4rem, 9vw, 7rem);
    /* Light cream ink by default for the whole section. */
    color: oklch(0.957 0.013 82);
  }
.sh-closing__inner {
    /* Inner content constrained to a readable measure, centred. */
    max-width: 44rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    text-align: left;
  }
@media (min-width: 768px) {
    .sh-closing__inner {
      padding-inline: 2rem;
    }
  }
/* Headline — Fraunces serif, large, light cream on dark ground. */
.sh-closing__headline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: oklch(0.957 0.013 82);
    text-wrap: balance;
    max-width: 34rem;
    margin: 0;
  }
/* Copy — body serif, light cream at reduced opacity for hierarchy. */
.sh-closing__copy {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.7;
    color: oklch(0.957 0.013 82);
    opacity: 0.82;
    text-wrap: pretty;
    max-width: 40rem;
    margin: 0;
  }
/* Actions row — primary + secondary CTAs. Stacks on mobile, row on
     larger screens with a comfortable gap. */
.sh-closing__actions {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: clamp(0.5rem, 1.5vw, 1rem);
  }
@media (min-width: 640px) {
    .sh-closing__actions {
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.75rem;
    }
  }
/* Shared CTA base — uppercase, tracked, inline-flex with arrow. */
.sh-closing__cta {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    align-self: flex-start;
    transition: var(--transition-smooth);
  }
.sh-closing__cta:focus-visible {
    outline: none;
  }
.sh-closing__cta-arrow {
    display: inline-block;
    transition: transform var(--transition-smooth);
  }
/* Primary CTA — solid terracotta/oxblood button using
     --newsletter-button-bg. Solid cream text. Sharp corners. */
.sh-closing__cta--primary {
    background: oklch(var(--newsletter-button-bg));
    color: oklch(var(--newsletter-button-ink));
    padding: 0.875rem 1.5rem;
    border: 1px solid oklch(var(--newsletter-button-bg));
    border-radius: 0;
  }
.sh-closing__cta--primary:hover {
    background: oklch(var(--newsletter-button-hover-bg));
    border-color: oklch(var(--newsletter-button-hover-bg));
  }
.sh-closing__cta--primary:focus-visible {
    box-shadow: 0 0 0 2px oklch(var(--newsletter-button-bg) / 0.45), 0 0 0 4px
      oklch(0.21 0.018 50);
  }
.sh-closing__cta--primary:hover .sh-closing__cta-arrow,
  .sh-closing__cta--primary:focus-visible .sh-closing__cta-arrow {
    transform: translateX(4px);
  }
/* Secondary CTA — text/outline link style. Light cream text with a
     thin bottom border that intensifies on hover. No fill. */
.sh-closing__cta--secondary {
    color: oklch(0.957 0.013 82);
    padding: 0.25rem 0;
    border-bottom: 1px solid oklch(0.957 0.013 82 / 0.4);
  }
.sh-closing__cta--secondary:hover,
  .sh-closing__cta--secondary:focus-visible {
    border-bottom-color: oklch(0.957 0.013 82);
    color: oklch(0.957 0.013 82);
  }
.sh-closing__cta--secondary:focus-visible {
    box-shadow: 0 0 0 2px oklch(0.957 0.013 82 / 0.35);
  }
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .sh-margins__row,
    .sh-margins__arrow,
    .sh-signature__link .sh-signature__arrow,
    .sh-inbox__cta .sh-inbox__cta-arrow,
    .sh-cta__link .sh-cta__arrow,
    .sh-essay__cta .sh-essay__cta-arrow,
    a.sh-essay .sh-essay__cta-arrow,
    .sh-closing__cta .sh-closing__cta-arrow {
      transition: none !important;
      transform: none !important;
    }
    .sh-margins__row:hover,
    .sh-margins__row:focus-within {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 800;
  font-style: normal;
}
/* ── Editor embed placeholder ──
   The Quill SocialEmbedBlot persists an EMPTY .article-embed div with only
   data-* attributes (no child elements), so the public-page parseEmbeds regex
   (which requires the embed div to contain only whitespace) keeps matching.
   The editor placeholder is rendered purely via CSS pseudo-elements on the
   data-embed-platform attribute, so writers can see, select, and delete the
   embed block like any other block. These rules only apply inside the
   contenteditable editor (scoped via .ql-editor). */
.ql-editor .article-embed[data-embed-platform] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: 0.125rem;
  box-shadow: var(--shadow-editorial-card);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
}
.ql-editor .article-embed[data-embed-platform]::before {
  content: "EMBED · " attr(data-embed-platform);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(var(--muted-foreground));
}
.ql-editor .article-embed[data-embed-platform]::after {
  content: attr(data-embed-url);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: oklch(var(--foreground));
  opacity: 0.7;
  word-break: break-all;
}
.ql-editor .article-embed[contenteditable="false"]::before,
.ql-editor .article-embed[contenteditable="false"]::after {
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   Start Here Landing Page — `.sh-*` utilities
   A seven-section editorial reader's guide for the AI & Society
   newsletter. Reuses the existing palette (--background, --foreground,
   --accent, --border, --shadow-editorial-card, --transition-smooth),
   Fraunces display, General Sans body, JetBrains Mono kickers. Built
   on the `.nl-spread` centred 46rem column shell and the `.nl-section`
   numbered-heading pattern. No new tokens, no new fonts, no Tailwind
   config edits. Scoped to `.sh-*` only.
   ════════════════════════════════════════════════════════════════════ */ /* end @layer utilities */ .selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
} .selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
} .selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
} .selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
} .selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
} .selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
} .selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
} .selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
} .file\:inline-flex::file-selector-button {
  display: inline-flex;
} .file\:h-7::file-selector-button {
  height: 1.75rem;
} .file\:border-0::file-selector-button {
  border-width: 0px;
} .file\:bg-transparent::file-selector-button {
  background-color: transparent;
} .file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
} .file\:font-medium::file-selector-button {
  font-weight: 500;
} .file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
} .placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
} .after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
} .after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
} .after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
} .after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
} .after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
} .after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
} .first\:border-l:first-child {
  border-left-width: 1px;
} .first\:border-t-0:first-child {
  border-top-width: 0px;
} .first\:pt-0:first-child {
  padding-top: 0px;
} .last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
} .last\:border-b-0:last-child {
  border-bottom-width: 0px;
} .focus-within\:outline-none:focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
} .focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} .focus-within\:ring-ring:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
} .focus-within\:ring-offset-1:focus-within {
  --tw-ring-offset-width: 1px;
} .focus-within\:ring-offset-background:focus-within {
  --tw-ring-offset-color: oklch(var(--background));
} .hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .hover\:border-accent\/40:hover {
  border-color: oklch(var(--accent) / 0.4);
} .hover\:border-foreground:hover {
  border-color: oklch(var(--foreground));
} .hover\:border-primary\/60:hover {
  border-color: oklch(var(--primary) / 0.6);
} .hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .hover\:bg-accent\/90:hover {
  background-color: oklch(var(--accent) / 0.9);
} .hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
} .hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
} .hover\:bg-muted\/40:hover {
  background-color: oklch(var(--muted) / 0.4);
} .hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
} .hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
} .hover\:bg-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
} .hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
} .hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
} .hover\:bg-transparent:hover {
  background-color: transparent;
} .hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
} .hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
} .hover\:text-accent\/80:hover {
  color: oklch(var(--accent) / 0.8);
} .hover\:text-destructive:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
} .hover\:text-foreground:hover {
  color: oklch(var(--foreground));
} .hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .hover\:text-primary\/80:hover {
  color: oklch(var(--primary) / 0.8);
} .hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
} .hover\:underline:hover {
  text-decoration-line: underline;
} .hover\:opacity-100:hover {
  opacity: 1;
} .hover\:opacity-90:hover {
  opacity: 0.9;
} .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --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);
} .hover\:ring-4:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} .hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
} .focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
} .focus\:absolute:focus {
  position: absolute;
} .focus\:left-4:focus {
  left: 1rem;
} .focus\:top-4:focus {
  top: 1rem;
} .focus\:z-10:focus {
  z-index: 10;
} .focus\:z-50:focus {
  z-index: 50;
} .focus\:rounded-sm:focus {
  border-radius: calc(var(--radius) - 4px);
} .focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .focus\:bg-background:focus {
  background-color: oklch(var(--background));
} .focus\:px-3:focus {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
} .focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
} .focus\:text-sm:focus {
  font-size: 0.875rem;
  line-height: 1.25rem;
} .focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
} .focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} .focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
} .focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
} .focus-visible\:z-10:focus-visible {
  z-index: 10;
} .focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
} .focus-visible\:underline:focus-visible {
  text-decoration-line: underline;
} .focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
} .focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
} .focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
} .focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} .focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} .focus-visible\:ring-4:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} .focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} .focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
} .focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
} .focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
} .focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
} .focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
} .focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
} .focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: oklch(var(--background));
} .focus-visible\:ring-offset-card:focus-visible {
  --tw-ring-offset-color: oklch(var(--card));
} .active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
} .active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
} .disabled\:pointer-events-none:disabled {
  pointer-events: none;
} .disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
} .disabled\:no-underline:disabled {
  text-decoration-line: none;
} .disabled\:opacity-30:disabled {
  opacity: 0.3;
} .disabled\:opacity-50:disabled {
  opacity: 0.5;
} .disabled\:opacity-60:disabled {
  opacity: 0.6;
} .group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
} .group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .group\/dot:hover .group-hover\/dot\:bg-muted-foreground\/70 {
  background-color: oklch(var(--muted-foreground) / 0.7);
} .group:hover .group-hover\:text-accent {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
} .group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
} .group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
} .group:hover .group-hover\:opacity-95 {
  opacity: 0.95;
} .peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
} .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
} .peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
} .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
} .has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
} .has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
} .has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
} .has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
} .aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
} .aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
} .aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
} .data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
} .data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
} .data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
} .data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
} .data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
} .data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
} .data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
} .data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
} .data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
} .data-\[active\=true\]\:z-10[data-active="true"] {
  z-index: 10;
} .data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
} .data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
} .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
} .data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
} .data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
} .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
} .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
} .data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
} .data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
} .data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
} .data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
} .data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
} .data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
} .data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
} .data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
} .data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
} .data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
} .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
} .data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
} .data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
} .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} @keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
} .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
} @keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
} .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
} .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
} .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
} .data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
} .data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
} .data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
} .data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
} .data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
} .data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
} .data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
} .data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
} .data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
} .data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
} .data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
} .data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
} .data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
} .data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
} .data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
} .data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
} .data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
} .data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
} .data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
} .data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
} .data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
} .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
} .data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
} .data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
} .data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
} .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
} .data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
} .data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
} .data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
} .data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
} .data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
} .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
} .data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
} .data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
} .data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
} .data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
} .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
} .data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
} .data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
} .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
} .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
} .data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
} .data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
} .data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} .data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} .data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} .data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
  --tw-ring-color: oklch(var(--ring) / 0.5);
} .data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
} .data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
} .data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
} .data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
} .data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
} .data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
} .data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
} .data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
} .data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
} .data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
} .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
} .data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
} .data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
} .data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
} .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
} .data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
} .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
} .data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
} .data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
} .data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
} .data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
} .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
} .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
} .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
} .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
} .data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
} .data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
} .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
} .data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
} .data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
} .data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
} .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
} .data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
} .data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
} .data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
} .\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
} .\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
} .\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
} .\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
} .\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
} .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
} .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
} .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
} .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
} .data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
} .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
} .data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} .data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
} .data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
} .group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
} .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
} .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
} .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
} .group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
} .group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
} .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
} .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
} .group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
} .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
} .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
} .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
} .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
} .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
} .group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
} .group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
} .group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
} .group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
} .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
} .group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
} .group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
} .group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
} .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
} .group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
} .group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -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);
} .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
} .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
} .group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar));
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
} .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
} .peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
} .peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
} .peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
} .peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
} .dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
} .dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
} .dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
} .dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
} .dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
} .dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
} .dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
} .dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
} .dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
} .dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
} .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
} @media (min-width: 640px) {

  .sm\:-left-14 {
    left: -3.5rem;
  }

  .sm\:-right-14 {
    right: -3.5rem;
  }

  .sm\:col-start-2 {
    grid-column-start: 2;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:max-w-3xl {
    max-width: 48rem;
  }

  .sm\:max-w-lg {
    max-width: 32rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 20rem\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,20rem);
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:border-l {
    border-left-width: 1px;
  }

  .sm\:border-border {
    border-color: oklch(var(--border));
  }

  .sm\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:pl-2\.5 {
    padding-left: 0.625rem;
  }

  .sm\:pl-6 {
    padding-left: 1.5rem;
  }

  .sm\:pl-8 {
    padding-left: 2rem;
  }

  .sm\:pr-2\.5 {
    padding-right: 0.625rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
} @media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:grid-cols-\[1\.4fr_1fr_1fr_1fr\] {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:opacity-0 {
    opacity: 0;
  }

  .md\:after\:hidden::after {
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
} @media (min-width: 1024px) {

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[55fr_45fr\] {
    grid-template-columns: 55fr 45fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_300px\] {
    grid-template-columns: minmax(0,1fr) 300px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] {
    grid-template-columns: minmax(0,1fr) 340px;
  }

  .lg\:items-start {
    align-items: flex-start;
  }
} .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
} .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
} .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
} .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .\[\&\>button\]\:hidden>button {
  display: none;
} .\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} .\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
} .\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
} .\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
} .\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
} .\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
} .\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
} .\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
} .\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
} .\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
} .\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
} .\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
} .\[\&\>svg\]\:translate-y-0\.5>svg {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .\[\&\>svg\]\:text-current>svg {
  color: currentColor;
} .\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
} .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
} .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: oklch(var(--muted-foreground) / 1);
} .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: oklch(var(--border));
} .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
} .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: oklch(var(--border));
} .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted) / 1);
} .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
} .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: oklch(var(--border));
} .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
} .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
} .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
} .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
} .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
} .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
} .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
} .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
} .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
} .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
} .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
} .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
} .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
} .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
} .\[\&_a\:hover\]\:text-accent\/80 a:hover {
  color: oklch(var(--accent) / 0.8);
} .\[\&_a\]\:text-accent a {
  --tw-text-opacity: 1;
  color: oklch(var(--accent) / var(--tw-text-opacity, 1));
} .\[\&_a\]\:underline a {
  text-decoration-line: underline;
} .\[\&_a\]\:underline-offset-2 a {
  text-underline-offset: 2px;
} .\[\&_blockquote\]\:border-l-2 blockquote {
  border-left-width: 2px;
} .\[\&_blockquote\]\:border-accent blockquote {
  --tw-border-opacity: 1;
  border-color: oklch(var(--accent) / var(--tw-border-opacity, 1));
} .\[\&_blockquote\]\:pl-6 blockquote {
  padding-left: 1.5rem;
} .\[\&_blockquote\]\:font-display blockquote {
  font-family: var(--font-display), serif;
} .\[\&_blockquote\]\:text-xl blockquote {
  font-size: 1.25rem;
  line-height: 1.75rem;
} .\[\&_blockquote\]\:font-medium blockquote {
  font-weight: 500;
} .\[\&_blockquote\]\:leading-snug blockquote {
  line-height: 1.375;
} .\[\&_figcaption\]\:mt-2 figcaption {
  margin-top: 0.5rem;
} .\[\&_figcaption\]\:text-sm figcaption {
  font-size: 0.875rem;
  line-height: 1.25rem;
} .\[\&_figcaption\]\:text-muted-foreground figcaption {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .\[\&_figure\]\:my-8 figure {
  margin-top: 2rem;
  margin-bottom: 2rem;
} .\[\&_h2\]\:mt-12 h2 {
  margin-top: 3rem;
} .\[\&_h2\]\:font-display h2 {
  font-family: var(--font-display), serif;
} .\[\&_h2\]\:text-2xl h2 {
  font-size: 1.5rem;
  line-height: 2rem;
} .\[\&_h2\]\:font-medium h2 {
  font-weight: 500;
} .\[\&_h2\]\:leading-tight h2 {
  line-height: 1.25;
} .\[\&_h2\]\:text-foreground h2 {
  color: oklch(var(--foreground));
} .\[\&_h3\]\:mt-10 h3 {
  margin-top: 2.5rem;
} .\[\&_h3\]\:font-display h3 {
  font-family: var(--font-display), serif;
} .\[\&_h3\]\:text-xl h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
} .\[\&_h3\]\:font-medium h3 {
  font-weight: 500;
} .\[\&_h3\]\:text-foreground h3 {
  color: oklch(var(--foreground));
} .\[\&_img\]\:border img {
  border-width: 1px;
} .\[\&_img\]\:border-border img {
  border-color: oklch(var(--border));
} .\[\&_li\]\:leading-relaxed li {
  line-height: 1.625;
} .\[\&_ol\]\:list-decimal ol {
  list-style-type: decimal;
} .\[\&_ol\]\:pl-6 ol {
  padding-left: 1.5rem;
} .\[\&_p\:first-child\]\:mt-0 p:first-child {
  margin-top: 0px;
} .\[\&_p\]\:mt-5 p {
  margin-top: 1.25rem;
} .\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
} .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
} .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
} .\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
} .\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
} .\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
} .\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
} .\[\&_ul\]\:list-disc ul {
  list-style-type: disc;
} .\[\&_ul\]\:pl-6 ul {
  padding-left: 1.5rem;
} [data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
} [data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
} [data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
} [data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
} [data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
} [data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
} a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
} a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
} a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
} a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
} a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}