/* StoriKix's diagonal corner becomes the navigation language. */
:root{--control-bend:-24deg}
.feed-card{border-radius:22px;border-color:#ffffff24}
.cover-content{left:52px;right:52px}
.card-geometry{position:absolute;bottom:0;right:0;width:140px;height:140px;background:url('../brand/diagonal-corner.svg') right bottom/contain no-repeat;opacity:.19;pointer-events:none;z-index:-1}
.reading-slide:before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 90px,#ffffff04 90px 112px);z-index:-1}
.reading-slide .card-geometry{width:170px;height:170px;opacity:.26}
.carousel-arrow{top:50%;transform:translateY(-50%) skewY(var(--control-bend));width:46px;height:66px;border:0;border-radius:0;backdrop-filter:none;background:var(--gradient);color:#000;box-shadow:none;clip-path:none;transition:filter .15s,opacity .15s}
.carousel-arrow.prev{left:0;background:linear-gradient(135deg,#16beb0,#70c8be)}
.carousel-arrow.next{right:0}
.carousel-arrow .icon{width:22px;height:22px;stroke-width:2.2;transform:skewY(calc(0deg - var(--control-bend)))}
.carousel-arrow.prev .icon{transform:skewY(calc(0deg - var(--control-bend))) rotate(180deg)}
.carousel-arrow:hover{transform:translateY(-50%) skewY(var(--control-bend));background:var(--ivory);color:#000;filter:brightness(1.05)}
.carousel-arrow:focus-visible{outline:0;background:var(--ivory);box-shadow:inset 0 0 0 3px var(--teal)}
.carousel-arrow:disabled{opacity:0}
.slide-count{border-radius:0;border:0;background:#0009;padding:6px 12px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.slide-dot:after{border-radius:0;clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.carousel-progress{gap:3px}
.card-reading-meta{position:relative;z-index:1}
/* Slant the surface, not the label or the 44px touch target. */
.reading-status{--status-edge:#ffffff45;--status-surface:#080808f2;position:relative;isolation:isolate;gap:6px;padding:5px 22px 11px;border:0;border-radius:0;background:transparent}
.reading-status:before{content:'';position:absolute;inset:0 3px;z-index:-1;pointer-events:none;border:1px solid var(--status-edge);background:var(--status-surface);transform:skewX(var(--control-bend));transition:background .15s,border-color .15s}
.reading-status[data-reading-state="in-progress"]{--status-edge:#16beb099}
.reading-status[data-reading-state="read"]{--status-edge:#6cddd2b3}
.reading-status:hover{--status-edge:#6cddd2;--status-surface:#181818;background:transparent}
.reading-status:focus-visible{outline:0}
.reading-status:focus-visible:before{outline:2px solid var(--teal);outline-offset:3px}
.reading-progress{left:18px;right:18px;bottom:7px;height:3px;border-radius:0;transform:skewX(var(--control-bend));background:#ffffff30}
.reading-progress-fill{border-radius:0}
/* A real angle stays constant across narrow arrows and wide labels. */
.keep-exploring-space{display:flow-root;width:min(100%,224px);container-type:inline-size}
/* Half the skew rise is width * tan(24deg) / 2. Reserve it above and below. */
.keep-exploring{display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;margin:calc(22.261434cqw + 12px) 0;padding:16px 18px;background:var(--gradient);color:#000;font-size:13px;font-weight:600;line-height:1.35;min-height:64px;clip-path:none;transform:skewY(var(--control-bend));transform-origin:center}
/* Cancel the button's shear first so the lettering receives only a rotation. */
.keep-exploring-label{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:0;transform:skewY(calc(0deg - var(--control-bend))) rotate(var(--control-bend));transform-origin:center}
.keep-exploring .icon{width:18px;height:18px;flex-shrink:0}.keep-exploring:hover,.keep-exploring:focus-visible{background:var(--ivory)}
.keep-exploring:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--teal)}
.feed-navigation{height:54px;padding:5px 8px;gap:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;opacity:1;isolation:isolate}
/* Half the skew offset is 54px * tan(24deg) / 2, kept inside the existing footprint. */
.feed-navigation:before{display:block;content:'';position:absolute;inset:0 12px;z-index:-1;pointer-events:none;border:1px solid transparent;background:linear-gradient(#080808,#080808) padding-box,linear-gradient(110deg,#ffffff45,#16beb080 55%,#ff6b5870) border-box;transform:skewX(var(--control-bend))}
.feed-navigation button{position:relative;isolation:isolate;width:44px;height:44px;border-radius:0;color:var(--ivory);background:transparent;clip-path:none;transition:color .15s,transform .15s}
.feed-navigation button:before{content:'';position:absolute;inset:3px 10px;z-index:-1;pointer-events:none;transform:skewX(var(--control-bend));background:transparent;transition:background .15s}
.feed-navigation button .icon{width:19px;height:19px;stroke-width:1.8}
.feed-navigation button:hover{background:transparent;color:var(--teal)}
.feed-navigation button:hover:before{background:#252525}
.feed-navigation button:active{transform:translateY(1px)}
.feed-navigation button:disabled{opacity:.28;background:transparent;color:#aaa}
.feed-navigation button:focus-visible{outline:0;background:transparent;color:var(--ivory)}
.feed-navigation button:focus-visible:before{outline:2px solid var(--teal);outline-offset:0;background:#151515}
.feed-navigation #feed-position{position:relative;min-width:72px;padding:0 8px 5px;color:#dedede;font-size:11px;font-weight:500;letter-spacing:.025em;line-height:1.4}
.feed-navigation #feed-position:after{content:'';position:absolute;bottom:0;left:calc(50% - 15px);width:30px;height:3px;background:var(--gradient);transform:skewX(var(--control-bend))}
.category-tab.active:after{height:4px;border-radius:0;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.topbar-actions{gap:6px}
.topbar-action{position:relative;isolation:isolate;padding-left:19px;padding-right:19px;border-radius:0;background:transparent;box-shadow:none}
.topbar-action:before{content:'';position:absolute;inset:3px 8px;z-index:-1;pointer-events:none;border:1px solid #ffffff30;background:#080808;transform:skewX(var(--control-bend));transition:background .2s,border-color .2s}
.topbar-action:hover,.topbar-action.active,.topbar-action[aria-current=page]{background:transparent;box-shadow:none;color:var(--ivory)}
.topbar-action:hover:before{background:#202020;border-color:#ffffff70}
.topbar-action.active:before,.topbar-action[aria-current=page]:before{background:#1a1a1a;border-color:#16beb0a0;box-shadow:inset 3px 0 var(--teal)}
.topbar-action:focus-visible{outline:0}
.topbar-action:focus-visible:before{outline:2px solid var(--teal);outline-offset:2px}
/* Keep search controls in view while the results scroll inside the panel. */
.search-dialog[open]{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);width:min(580px,calc(100% - 32px));height:min(740px,calc(100svh - 40px));max-height:calc(100svh - 40px);padding:32px;overflow:hidden}
.search-dialog form{position:absolute;top:0;right:0}
.search-dialog>.eyebrow{margin:0 55px 0 0}
.search-dialog h2{margin:8px 50px 22px 0;padding:0}
.search-field{position:relative;isolation:isolate;min-width:0;gap:10px;padding:0 22px;border:0;background:transparent}
.search-field:before,.search-field:after{content:'';position:absolute;pointer-events:none;clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%)}
.search-field:before{inset:0;z-index:-2;background:#626262}
.search-field:after{inset:1px;z-index:-1;background:#151515}
.search-field:focus-within:before{background:var(--teal)}
.search-field .icon{flex:none;width:19px;height:19px}
.search-dialog .search-field input{min-width:0;padding:14px 2px;border:0;border-radius:0;outline:0;background:transparent;font-size:16px}
#search-results{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:4px 12px 8px 4px;margin:12px -4px 0;scrollbar-width:thin;scrollbar-color:#777 #171717}
#search-results::-webkit-scrollbar{width:7px}
#search-results::-webkit-scrollbar-track{background:#171717}
#search-results::-webkit-scrollbar-thumb{background:#777;border-radius:4px}
.search-result{position:relative;isolation:isolate;min-height:72px;margin:8px 0 0;padding:16px 38px;border:0;border-radius:0;background:transparent}
.search-result:before,.search-result:after{content:'';position:absolute;pointer-events:none;clip-path:polygon(32px 0,100% 0,calc(100% - 32px) 100%,0 100%)}
.search-result:before{inset:0;z-index:-2;background:#424242;transition:background .2s}
.search-result:after{inset:1px;z-index:-1;background:#1b1b1b;transition:background .2s}
.search-result:hover{background:transparent}
.search-result:hover:before{background:#16beb099}
.search-result:hover:after{background:#292929}
.search-result:focus-visible{outline:0}
.search-result:focus-visible:before{background:var(--teal)}
.search-result:focus-visible:after{inset:2px}
.search-dialog .dialog-close{border-radius:0;background:transparent;border:0}
.search-dialog .dialog-close:before{content:'';position:absolute;inset:4px 8px;z-index:-1;border:1px solid #ffffff50;background:#1a1a1a;transform:skewX(var(--control-bend))}
.search-dialog .dialog-close:hover{background:transparent;color:var(--ivory)}
.search-dialog .dialog-close:hover:before{border-color:var(--teal);background:#303030}
.search-dialog .dialog-close:focus-visible{outline:2px solid var(--teal);outline-offset:0}
@media(max-width:699px){.search-dialog[open]{width:calc(100% - 24px);height:min(740px,calc(100svh - 24px));max-height:calc(100svh - 24px);padding:24px 18px}.search-dialog h2{font-size:24px;margin-bottom:16px}.search-result{padding:14px 38px}}
.topbar-tagline:before{content:'';display:inline-block;width:22px;height:8px;margin-right:12px;background:var(--gradient);transform:skew(-35deg)}
.reading-content:focus-visible{outline-offset:2px}
@media(max-width:1199px){.cover-content{left:44px;right:44px}.carousel-arrow{width:38px;height:60px}.carousel-arrow .icon{width:20px;height:20px}}
@media(max-width:699px){.feed-card{border-radius:22px}.cover-content{left:42px;right:42px}.carousel-arrow{width:36px;height:60px}.feed-navigation{height:54px;bottom:calc(var(--feed-card-inset) + 7px + env(safe-area-inset-bottom));right:calc(var(--feed-card-inset) + 10px)}.feed-navigation button{width:44px;height:44px}.card-geometry{width:115px;height:115px}.reading-slide .card-geometry{width:135px;height:135px}.keep-exploring{font-size:12px}}
@media(max-height:520px){.carousel-arrow{height:48px}.reading-slide .card-geometry{width:100px;height:100px}}
@media(max-width:360px){.reading-status{gap:4px;font-size:11px}.reading-progress-value{font-size:9px}}
@media(prefers-reduced-motion:reduce){.reading-status,.reading-status:before,.reading-progress-fill,.feed-navigation button,.feed-navigation button:before{transition:none}}
@media(forced-colors:active){.reading-status:before,.feed-navigation:before{border:1px solid ButtonText;background:Canvas}.reading-status:focus-visible:before,.feed-navigation button:focus-visible:before{outline-color:Highlight}.reading-progress{background:GrayText}.reading-progress-fill,.feed-navigation #feed-position:after{background:Highlight}}