.reading-opening{display:none}html[data-opening]{--opening-ink:#12100e;--opening-paper:#efe6d6;background-color:var(--opening-ink);scrollbar-color:color-mix(in srgb, var(--opening-paper) 16%, var(--opening-ink)) var(--opening-ink)}html[data-opening] .reading-opening{z-index:90;cursor:default;user-select:none;animation:0s 6s forwards opening-failsafe;display:block;position:fixed;inset:0;overflow:hidden}html[data-opening=leave] .reading-opening{opacity:0;transition:opacity .22s var(--ease-out)}@keyframes opening-failsafe{to{visibility:hidden}}html[data-opening=play] .journal .editorial h1{animation:6s opening-hold}@keyframes opening-hold{0%,to{visibility:hidden}}.opening-panel{background:radial-gradient(120% 90% at 50% 46%, #1b1815, var(--opening-ink) 62%, #0b0a09);will-change:transform;position:absolute;inset:0;overflow:hidden;box-shadow:0 24px 60px #00000047}.opening-panel:after{content:"";pointer-events:none;background:radial-gradient(#0000 52%,#00000080);position:absolute;inset:0}.opening-inner{will-change:transform;position:absolute;inset:0}.opening-inner:after{content:"";pointer-events:none;opacity:.14;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:absolute;inset:0}.opening-field{perspective:1000px;position:absolute;inset:0}.opening-plate{--plate-w:clamp(150px, 19vw, 300px);width:var(--plate-w);aspect-ratio:3/2;height:auto;margin:calc(var(--plate-w) / -3) 0 0 calc(var(--plate-w) / -2);object-fit:cover;opacity:0;backface-visibility:hidden;filter:brightness(.9);position:absolute;top:50%;left:50%;transform:translateZ(-1800px);box-shadow:0 30px 50px -28px #000000e6}.opening-plate:first-child{--plate-w:min(46vw, 640px)}.opening-title{white-space:nowrap;transform-origin:0 0;will-change:transform;pointer-events:none;position:absolute;top:0;left:0}.opening-mark,.opening-skip,.opening-count{font:11px/1.6 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb, var(--opening-paper) 64%, transparent);opacity:0;margin:0;position:absolute}.opening-mark{top:clamp(22px,5.6vh,48px);left:clamp(20px,5vw,72px)}.opening-skip{letter-spacing:.12em;color:color-mix(in srgb, var(--opening-paper) 58%, transparent);bottom:clamp(22px,5.6vh,48px);left:clamp(20px,5vw,72px)}.opening-count{font-variant-numeric:tabular-nums;align-items:center;gap:12px;display:flex;bottom:clamp(22px,5.6vh,48px);right:clamp(20px,5vw,72px)}.opening-count i{transform-origin:0;background:currentColor;width:72px;height:1px;scale:0 1}.opening-count b{color:var(--opening-paper);font-weight:400}@media (width<=700px){.opening-plate{--plate-w:46vw}.opening-plate:first-child{--plate-w:78vw}.opening-plate:nth-child(n+7){display:none}.opening-count i{width:40px}}html[data-vt=opening][data-opening]::view-transition-old(root){animation:none}html[data-vt=opening][data-opening]::view-transition-new(root){animation:opening-dusk .42s var(--ease-out) both}@keyframes opening-dusk{0%{opacity:0}}@media (prefers-reduced-motion:reduce),print{html[data-opening] .reading-opening{display:none}html[data-opening] .journal .editorial h1{animation:none}}html[data-motion=reduced-motion][data-opening] .reading-opening{display:none}.journal{position:relative}.row-figure{z-index:3;aspect-ratio:3/2;pointer-events:none;border:5px solid color-mix(in srgb, var(--bg) 55%, #fffaf0);background:var(--soft);width:clamp(200px,18vw,248px);box-shadow:0 0 0 1px color-mix(in srgb, var(--fg) 13%, transparent), 0 18px 34px -14px #3b281257, 0 2px 6px #3b281217;clip-path:inset(calc(100% + 56px) -40px -56px);transition:clip-path .18s var(--ease-in);will-change:transform;position:absolute;top:0;left:0;overflow:hidden}.row-figure.is-shown{clip-path:inset(-40px -40px -56px);transition:clip-path .32s var(--ease-out)}.row-figure img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .2s var(--ease-out), scale .7s var(--ease-out);position:absolute;inset:0;scale:1.08}.row-figure img.is-front{opacity:1;scale:1}.row-figure img[data-kind=svg]{object-fit:contain}html[data-motion=reduced-motion] :is(.row-figure,.row-figure img){transition:none}@media (prefers-reduced-motion:reduce){:is(.row-figure,.row-figure img){transition:none}}@property --rx{syntax:"<length>";inherits:true;initial-value:0}@property --ry{syntax:"<length>";inherits:true;initial-value:0}.shelf{position:relative}.shelf [data-cat=daily]{--hue:#b58b4c}.shelf [data-cat=engineering]{--hue:#7d97a8}.shelf [data-cat=papers]{--hue:#86956f}.shelf [data-cat=tutorials]{--hue:#ab7e6d}.shelf [data-cat=thoughts]{--hue:#937f9c}.shelf [data-cat=travel]{--hue:#6f9a96}.shelf [data-cat=design]{--hue:#a98a63}.shelf-plate{background:color-mix(in srgb, var(--hue,var(--accent)) 12%, var(--soft));user-select:none;width:100%;height:100%;display:block;position:relative;overflow:hidden}.shelf-plate svg{width:100%;height:100%;display:block}.shelf-plate path{fill:none;stroke:color-mix(in srgb, var(--hue,var(--accent)) 70%, var(--fg));stroke-width:1px;vector-effect:non-scaling-stroke;opacity:.4}.shelf-plate path.crest{stroke-width:1.5px;opacity:.72}:root[data-tone=dark] .shelf-plate path{stroke:color-mix(in srgb, var(--hue,var(--accent)) 62%, var(--fg))}.shelf-plate i{border:1px solid color-mix(in srgb, var(--hue,var(--accent)) 55%, transparent);background:color-mix(in srgb, var(--bg) 72%, transparent);width:24px;height:24px;font:normal 400 13px/1 var(--reader);color:color-mix(in srgb, var(--hue,var(--accent)) 70%, var(--fg));border-radius:3px;place-items:center;display:grid;position:absolute;bottom:10px;right:10px}.shelf-more>summary{border-bottom:1px solid var(--line);cursor:pointer;font:13px/1.4 var(--mono);color:var(--muted);transition:color var(--dur-1) var(--ease-out);justify-content:center;padding:18px 0 19px;list-style:none;display:flex}.shelf-more>summary::-webkit-details-marker{display:none}.shelf-more>summary span:after{content:"";width:6px;height:6px;transition:rotate var(--dur-2) var(--ease-out);border:1px solid;border-width:0 1px 1px 0;margin:0 0 3px 10px;display:inline-block;rotate:45deg}.shelf-more[open]>summary span:after{margin-bottom:-1px;rotate:225deg}.shelf-more>summary:is(:hover,:focus-visible){color:var(--accent)}.ring-preview,.ring,.spine{display:none}.shelf-switch{z-index:40;border:1px solid var(--line);border-radius:var(--radius-pill);background:color-mix(in srgb, var(--bg) 82%, transparent);min-height:32px;font:12px/1.4 var(--mono);color:var(--muted);cursor:pointer;transition:var(--transition-colors);align-items:center;gap:8px;padding:5px 14px 5px 12px;display:inline-flex;position:absolute;top:22px;right:0}.shelf-switch[hidden]{display:none}.shelf-switch:is(:hover,:focus-visible){border-color:var(--accent);color:var(--accent)}.shelf-switch span{font-size:14px}.shelf[data-view=ring] .shelf-stage{-webkit-user-select:none;user-select:none;place-items:center;width:100cqw;height:clamp(600px,100svh - 118px,920px);margin-left:calc(50% - 50cqw);display:grid;position:relative;container-type:size}.shelf[data-view=ring] .shelf-stage>*{--e:.5;--rx:min(38.5cqw, calc(34cqh / var(--e)), 620px);--ry:calc(var(--rx) * var(--e));--cw:clamp(40px, 4.4cqw, 70px);--ch:calc(var(--cw) * 4 / 3);--hole:calc(2 * var(--rx) - 2.7 * var(--cw))}.shelf[data-view=ring] .editorial{z-index:3;width:min(720px, var(--hole));transition:opacity .26s var(--ease-out), visibility 0s linear 0s;grid-area:1/1;grid-template-columns:minmax(0,1fr) 216px;gap:32px;margin:0}.shelf[data-view=ring][data-previewing] .editorial{opacity:0;visibility:hidden;transition:opacity .2s var(--ease-in), visibility 0s linear .2s}.shelf[data-view=ring] .ring{z-index:2;touch-action:pan-y;display:block;position:absolute;inset:0}.ring-card{--t:var(--a);--turn:calc((var(--t) - round(var(--t), 180deg)) * .611);--k:cos(var(--turn));--sk:atan(calc(var(--e) * tan(var(--turn))));--s:calc(1 + sin(var(--t)) * .1);--lift:0px;z-index:calc(200 + round(sin(var(--t)) * 100));width:var(--cw);height:var(--ch);margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);opacity:calc(.86 + sin(var(--t)) * .14);transform:translate(calc(cos(var(--t)) * (var(--rx) + var(--lift))), calc(sin(var(--t)) * (var(--ry) + var(--lift)))) skewY(var(--sk)) scale(var(--s)) scaleX(var(--k));transition:transform .42s var(--ease-out), opacity .42s var(--ease-out);-webkit-tap-highlight-color:transparent;position:absolute;top:50%;left:50%}.ring-print{isolation:isolate;width:100%;height:100%;box-shadow:0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent), 0 10px 16px -12px #3b281280;background:#e4dbcc;display:block;overflow:hidden}.ring-print img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}:root[data-tone=dark] .ring-print{background:#c2b5a0}.ring-print img[data-diagram]{mix-blend-mode:multiply}.ring-print img[data-kind=svg]{object-position:50% 0}.ring-print .shelf-plate i,.ring-preview-print .shelf-plate i{display:none}.ring-title{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.ring-card[data-active]{--lift:12px;z-index:400;opacity:1}.ring-card[data-active] .ring-print{outline:2px solid var(--accent);outline-offset:2px}.ring-card:focus-visible{outline:none}.ring-card:focus-visible .ring-print{outline:2px solid var(--accent);outline-offset:5px}.ring-label{--t:var(--a);z-index:1;border-bottom:1px solid color-mix(in srgb, var(--fg) 30%, transparent);white-space:nowrap;font:400 15px/1.3 var(--reader);color:var(--fg);transform:translate(calc(cos(var(--t)) * (var(--rx) + var(--cw) * 1.05 + 14px)), calc(sin(var(--t)) * (var(--ry) + var(--ch) * .7 + 12px))) translate(calc((cos(var(--t)) - 1) * 50%), calc((sin(var(--t)) - 1) * 50%));transition:color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);padding-bottom:2px;position:absolute;top:50%;left:50%}.ring-label sup{font:11px/1 var(--mono);color:var(--muted);vertical-align:6px;margin-left:3px}.ring-label:is(:hover,:focus-visible),.ring-label[data-current]{color:var(--accent);border-color:var(--accent)}.shelf[data-view=ring] .ring-preview{z-index:3;--pw:min(600px, calc((2 * var(--rx) - var(--cw)) * .56));width:var(--pw);opacity:0;visibility:hidden;cursor:pointer;transition:opacity .16s var(--ease-in), visibility 0s linear .16s;grid-template:"print meta""print title""print desc"1fr"print date"/auto minmax(0,1fr);grid-area:1/1;align-items:start;column-gap:28px;display:grid}.shelf[data-view=ring][data-previewing] .ring-preview{opacity:1;visibility:visible;transition:opacity .28s var(--ease-out) 60ms, visibility 0s linear 0s}.ring-preview-meta{font:12px/1.6 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;grid-area:meta}.ring-preview-meta b{color:var(--accent);margin-right:10px;font-weight:400}.ring-preview strong{font:400 clamp(22px, 2.1vw, 28px)/1.4 var(--reader);color:var(--fg);text-wrap:balance;grid-area:title;margin:10px 0 12px}.ring-preview-desc{font:15px/1.8 var(--reader);color:var(--muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;grid-area:desc;display:-webkit-box;overflow:hidden}.ring-preview time{font:12px/1 var(--mono);letter-spacing:.06em;color:var(--muted);grid-area:date;margin-top:14px}.ring-preview-print{--ph:min(30cqh, 250px);--pmax:calc(var(--pw) * .46 - 12px);border:6px solid color-mix(in srgb, var(--bg) 55%, #fffaf0);background:var(--soft);box-shadow:0 0 0 1px color-mix(in srgb, var(--fg) 13%, transparent), 0 22px 38px -18px #3b281261;grid-area:print;place-items:center;display:grid;overflow:hidden}.ring-preview-print img{max-width:var(--pmax);max-height:calc(var(--ph) - 12px);display:block}.ring-preview-print .shelf-plate{width:min(var(--pmax), calc((var(--ph) - 12px) * .75));height:calc(var(--ph) - 12px)}@media (width<=959px){.journal .mast{padding-right:56px}.shelf[data-view=ring] .shelf-stage{flex-direction:column;place-items:stretch stretch;width:auto;height:auto;margin-left:0;display:flex;container-type:inline-size}.shelf[data-view=ring] .shelf-stage>*{--e:.6;--rx:min(41cqw, 330px);--cw:clamp(26px, 7.4cqw, 52px)}.shelf[data-view=ring] .editorial,.shelf[data-view=ring][data-previewing] .editorial{opacity:1;visibility:visible;width:auto;margin:64px 0 18px}.shelf[data-view=ring] .ring{height:calc(2 * var(--ry) + var(--ch) * 2.6 + 48px);flex-wrap:wrap;order:1;place-content:flex-end center;gap:6px 18px;padding-bottom:4px;display:flex;position:relative;inset:auto}.ring-card{top:calc(50% - 22px)}.ring-card[data-active]{--lift:10px}.shelf[data-view=ring] .ring-label{font-size:14px;position:static;transform:none}.shelf[data-view=ring] .ring-preview,.shelf[data-view=ring][data-previewing] .ring-preview{border-block:1px solid var(--line);opacity:1;visibility:visible;order:2;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,132px) minmax(0,1fr);column-gap:16px;width:auto;margin-top:22px;padding:18px 0 20px}.ring-preview strong{margin:4px 0 6px;font-size:19px;line-height:1.45}.ring-preview-desc{-webkit-line-clamp:2;font-size:14px;line-height:1.7}.ring-preview time{margin-top:8px}.ring-preview-print{aspect-ratio:3/4;border-width:4px;width:100%;position:relative}.ring-preview-print :is(img,.shelf-plate){object-fit:cover;width:100%;max-width:none;height:100%;max-height:none;position:absolute;inset:0}.ring-preview-print img[data-kind=svg]{object-position:50% 0}.shelf-switch{top:14px}}.shelf[data-view=spine] .shelf-index{display:none}.shelf[data-view=spine] .editorial{margin-bottom:36px}.shelf[data-view=spine] .spine{--sw:clamp(260px, 30cqw, 390px);--pitch:258px;--row:80px;--gutter:clamp(28px, 6vw, 90px);grid-template-columns:minmax(0, 1fr) var(--sw) minmax(0, 1fr);margin-inline:calc(-1 * var(--gutter));border-top:1px solid var(--fg);display:grid}.spine-stream{grid-area:1/2;justify-items:center;padding-bottom:28svh;display:grid}.spine-side{height:100svh;mask-image:linear-gradient(transparent calc(0px - var(--top,0px)), #000 calc(15svh - var(--top,0px)), #000 calc(85svh - var(--top,0px)), transparent calc(100svh - var(--top,0px)));grid-row:1;position:sticky;top:0;overflow:hidden}.spine-left{padding:0 34px 0 calc(var(--gutter) * .6);grid-column:1}.spine-right{padding:0 calc(var(--gutter) * .6) 0 34px;grid-column:3}.spine-roll{transform:translateY(calc(var(--pitch) * .4 - var(--row) * .5));will-change:transform;display:grid}.spine-row{--ink:color-mix(in srgb, var(--fg) 66%, var(--bg));height:var(--row);color:var(--ink);transition:color .32s var(--ease-out);align-content:center;display:grid;position:relative}.spine-row[data-d="3"]{--ink:color-mix(in srgb, var(--fg) 72%, var(--bg))}.spine-row[data-d="2"]{--ink:color-mix(in srgb, var(--fg) 80%, var(--bg))}.spine-row[data-d="1"]{--ink:color-mix(in srgb, var(--fg) 88%, var(--bg))}.spine-row[data-d="0"]{--ink:var(--fg)}.spine-left .spine-row{grid-template-columns:38px minmax(0,1fr);align-items:baseline}.spine-n{font:13px/1 var(--mono);font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--ink) 80%, var(--bg))}.spine-title{font:400 17px/1.5 var(--reader);-webkit-line-clamp:2;text-wrap:pretty;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.spine-right time{font:12px/1.6 var(--mono);letter-spacing:.04em;color:color-mix(in srgb, var(--ink) 80%, var(--bg))}.spine-desc{font:14.5px/1.65 var(--reader);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.spine-row[data-d="0"]:not(.is-chapter):after{content:"";border-top:1px solid var(--accent);width:22px;position:absolute;top:50%}.spine-left .spine-row:after{right:-30px}.spine-right .spine-row:after{left:-30px}.spine-row[data-d="0"] .spine-n{color:var(--accent)}.spine-row[data-d="0"] .spine-title{font-weight:500}.spine-row.is-chapter{border-bottom:1px solid color-mix(in srgb, var(--ink) 40%, transparent);font:12px/1.4 var(--mono);align-content:end;padding-bottom:14px}.spine-left .spine-row.is-chapter{flex-wrap:wrap;justify-content:space-between;align-items:baseline;display:flex}.spine-row.is-chapter b{font:400 19px/1.3 var(--reader);color:var(--ink)}.spine-right .spine-row.is-chapter{justify-items:end}a.spine-row:hover{--ink:var(--fg)}a.spine-row:hover :is(.spine-title,b){color:var(--accent)}.spine-item{width:58%;height:var(--pitch);transition:width .46s var(--ease-out);-webkit-tap-highlight-color:transparent;padding-block:4px;display:block;position:relative}.spine-item.is-on{width:100%}.spine-item>img{background:var(--soft);display:block}.spine-item>:is(img,.shelf-plate){object-fit:cover;width:100%;height:100%;box-shadow:0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent);filter:saturate(.82);transition:filter .46s var(--ease-out)}.spine-item.is-on>:is(img,.shelf-plate){filter:none}.spine-item>img[data-kind=svg]{object-position:50% 0}.spine-item:focus-visible{outline:none}.spine-item:focus-visible>:is(img,.shelf-plate){outline:2px solid var(--accent);outline-offset:4px}.spine-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.spine-chapter{width:100%;height:calc(var(--pitch) * .8);place-items:center;margin:0;display:grid}.spine-chapter a{writing-mode:vertical-rl;font:400 40px/1 var(--reader);letter-spacing:.32em;color:var(--fg);align-items:center;gap:16px;display:flex}.spine-chapter small{writing-mode:horizontal-tb;font:12px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}.spine-chapter a:is(:hover,:focus-visible){color:var(--accent)}@media (width<=959px){.shelf[data-view=spine] .spine{--pitch:210px;--row:72px}.spine-left{padding-left:20px}.spine-right{padding-right:20px}.spine-title{font-size:15.5px}.spine-desc{font-size:13.5px}}@media (width<=699px){.shelf[data-view=spine] .spine{--pitch:176px;--row:68px;grid-template-columns:42% minmax(0,1fr)}.spine-stream{padding-left:var(--gutter);grid-column:1;justify-items:start}.spine-side{height:calc(100svh - 72px);top:72px}.spine-left{grid-column:2;padding:0 16px 0 22px}.spine-right{display:none}.spine-left .spine-row{grid-template-columns:30px minmax(0,1fr)}.spine-left .spine-row:after{width:14px;left:-22px;right:auto}.spine-title{font-size:15px;line-height:1.45}.spine-n{font-size:12px}.spine-item{width:72%}.shelf-plate i{width:20px;height:20px;font-size:11px;bottom:6px;right:6px}.spine-chapter a{gap:12px;font-size:30px}}html[data-motion=reduced-motion] :is(.ring-card,.spine-item,.spine-row,.ring-preview,.shelf .editorial){transition:none}@media print{.shelf[data-view] .spine,.shelf[data-view] .ring,.shelf[data-view] .ring-preview,.shelf-switch{display:none}.shelf[data-view] .shelf-index{display:block}}
