/* ============================================================ sirucka.cz — note reading layer Sits on top of site.css, which owns the tokens, atmosphere, nav, footer, .card and the .note-card* grid this page reuses for "read next". Loaded by Pages/Notes/Detail.cshtml alone. Same navy glass language; accent spent sparingly; calm motion. ============================================================ */ :root { /* The design drove this from its tweaks panel; a Razor page has no panel, so one value. */ --read-main: 752px; /* The rail sticky offset. Also the top half of its height budget — keep the two in step. */ --rail-top: 104px; } /* ---------- layout columns ---------- */ .read-wide{max-width:var(--container);margin:0 auto;padding-left:40px;padding-right:40px} /* full-width band for the masthead, body grid and related block */ .read-head{max-width:var(--container);margin:0 auto;padding-left:40px;padding-right:40px} /* two-column reading body: sticky chapter rail + comfortable reading column, the pair centered inside the site container so page edges stay consistent */ .read-grid{display:grid;grid-template-columns:236px minmax(0, var(--read-main)); justify-content:center;gap:72px;max-width:var(--container);margin:0 auto;padding:8px 40px 0} /* a note with no "## " headings has no rail — one centered column instead */ .read-grid.solo{grid-template-columns:minmax(0, var(--read-main))} .read-main{min-width:0} .read-main > .reveal,.read-main > section{min-width:0} /* ---------- sticky reading rail ---------- */ /* The cap is what makes sticky work at all: a box taller than the viewport has nothing to pin against, so a 20-heading note used to scroll its rail off the bottom with the tail out of reach. Capped, the rail pins and the list scrolls inside it. A short list never reaches the cap, so it renders exactly as before — no breakpoint and no JS branch needed. */ .read-rail{position:sticky;top:var(--rail-top);align-self:start;display:flex;flex-direction:column; gap:26px;max-height:calc(100vh - var(--rail-top) - 32px)} .rail-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-tertiary);flex:none} /* Only the list gives way — the kicker and the share footer hold their size, so sharing stays one click away. min-height:0 is load-bearing: a flex item defaults to min-height:auto and refuses to shrink below its content, which would leave the cap above doing nothing. The border-left sits on the scrollport, so the spine holds still while the links move behind it. overscroll-behavior is left at its default on purpose — at the end of the list the wheel should carry on to the page instead of trapping the cursor over the rail. */ .rail-toc{display:flex;flex-direction:column;border-left:1.5px solid var(--border-subtle); min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-subtle) transparent} .rail-toc::-webkit-scrollbar{width:6px} .rail-toc::-webkit-scrollbar-track{background:transparent} .rail-toc::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:3px} .rail-toc:hover::-webkit-scrollbar-thumb{background:var(--border-accent)} .rail-toc a{display:flex;gap:10px;align-items:baseline;margin-left:-1.5px;border-left:1.5px solid transparent; padding:8px 0 8px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.4;color:var(--text-tertiary); text-decoration:none;transition:color .18s ease,border-color .18s ease} .rail-toc a .n{color:var(--text-tertiary);opacity:.5;font-size:11px} .rail-toc a:hover{color:var(--text-secondary)} .rail-toc a.active{color:var(--text-primary);border-left-color:var(--accent-glow)} .rail-toc a.active .n{color:var(--accent-glow);opacity:1} .rail-foot{display:flex;flex-direction:column;gap:16px;padding-top:22px; border-top:1px solid var(--border-subtle);flex:none} .rail-meta{display:flex;flex-direction:column;gap:9px;font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary)} .rail-meta > span{display:flex;align-items:center;gap:7px} /* lucide replaces each with an , so both have to be sized */ .rail-meta i,.rail-meta svg{width:14px;height:14px;flex-shrink:0;color:var(--accent-glow)} .rail-share{display:flex;gap:8px} /* the rail drops away below 980px — see the RESPONSIVE section, which has to come after the masthead rules below to win on source order */ /* ============================================================ MASTHEAD ============================================================ */ /* The masthead runs on the same grid as the body below it — same tracks, same gap, same centering — but its content spans the whole grid: rail column, gap and reading column. Sized on its own it landed on the page container while the body landed on the (narrower) grid, so the block edges disagreed. Keep the two in step, including the 980px collapse. */ .art-masthead{display:grid;grid-template-columns:236px minmax(0, var(--read-main)); justify-content:center;column-gap:72px;padding-top:144px;padding-bottom:18px} .art-masthead > *{grid-column:1 / -1} .art-masthead.solo{grid-template-columns:minmax(0, var(--read-main))} /* grid blockifies the inline-flex back link, which would otherwise stretch across the column */ .art-masthead .art-back{justify-self:start} .art-masthead .art-title{max-width:18ch} .art-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px; color:var(--text-tertiary);text-decoration:none;margin-bottom:30px;transition:color .16s ease,gap .16s ease} .art-back i,.art-back svg{width:15px;height:15px;flex-shrink:0} .art-back:hover{color:var(--accent-glow);gap:11px} /* draft preview bar — only ever rendered when an admin opens an unpublished note with ?preview=1 */ .draft-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 26px;padding:11px 16px; border:1px solid var(--warn);border-left-width:3px;border-radius:var(--radius-md); background:rgba(255,192,97,.07);font-family:var(--font-mono);font-size:var(--fs-caption)} .draft-bar i,.draft-bar svg{width:15px;height:15px;flex-shrink:0;color:var(--warn)} .draft-bar .db-tag{color:var(--warn);text-transform:uppercase;letter-spacing:.1em;font-weight:600} .draft-bar .db-note{color:var(--text-tertiary)} .draft-bar a{margin-left:auto;color:var(--text-secondary);text-decoration:none; border-bottom:1px solid var(--border-default);transition:color .16s ease,border-color .16s ease} .draft-bar a:hover{color:var(--accent-glow);border-bottom-color:var(--accent-glow)} .art-head-meta{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap} .art-title{font-family:var(--font-display);font-weight:700;font-size:clamp(2.1rem,3.8vw,3rem); line-height:1.08;letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance;color:var(--text-primary)} .art-title .accent{color:var(--accent-glow)} .art-dek{font-size:var(--fs-body-lg);color:var(--text-secondary);line-height:1.6;margin:0;max-width:640px;text-wrap:pretty} .art-byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;padding-top:22px; border-top:1px solid var(--border-subtle)} .art-byline .mark{width:34px;height:34px;border-radius:9px 3px 7px 2px;background:var(--fill-focal); display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700; font-size:15px;color:#fff;box-shadow:0 4px 16px -6px rgba(109,79,208,.8);flex-shrink:0} .art-byline .who{font-family:var(--font-mono);font-size:13.5px;color:var(--text-secondary)} .art-byline .who b{color:var(--text-primary);font-weight:600} .art-byline .bl-meta{display:flex;align-items:center;gap:12px;margin-left:auto; font-family:var(--font-mono);font-size:12.5px;color:var(--text-tertiary)} .art-byline .bl-meta .sep{opacity:.5} .art-byline .bl-meta > span{display:flex;align-items:center;gap:6px} .art-byline .bl-meta i,.art-byline .bl-meta svg{width:14px;height:14px;flex-shrink:0} /* ============================================================ HERO COVER ============================================================ */ /* The note model's ImagePath, promoted from a card below the masthead to a full-bleed band behind it. .art-hero is the only box on this page with no width cap — .read-head caps the masthead, not the wrapper — so the cover's inset:0 spans the viewport for free. Not 100vw: that counts the scrollbar gutter and would add a horizontal scroll. The band's height comes from the masthead, so there is no number to keep in step with its padding-top, and the scrim's last stop is --bg-primary, so the image dissolves exactly where the prose starts. */ .art-hero{position:relative} .art-hero > .art-masthead{position:relative;z-index:1} /* A short title would otherwise leave a squat band. align-content is not optional with the min-height: this is a grid, and grid's default stretches auto rows to fill, which would space the back link, meta, title and byline apart. end also puts the type in the bottom of the band, where the scrim is at its darkest. */ .art-hero.has-cover > .art-masthead{min-height:520px;padding-bottom:34px;align-content:end} .art-cover{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none; background:linear-gradient(135deg,rgba(155,123,224,.10),rgba(194,71,127,.06))} .art-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* .proj-visual's scrim, stretched: dark enough at the top for the nav's brand and links to read on raw image pixels, thinnest across the middle of the picture, opaque navy behind the title, dek and byline */ .art-cover::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(10,16,32,.55) 0%, rgba(10,16,32,.30) 30%, rgba(10,16,32,.88) 78%, var(--bg-primary) 100%)} /* The back link and the meta row land around 30% of the band, where the scrim is thinnest, and both are small mono type in --text-tertiary. Glass chip plus one contrast step — the .proj-cap idiom — rather than a text-shadow, which nothing else on this site uses. The negative margin cancels the chip's own padding so the arrow stays flush with the title's left edge. */ .art-hero.has-cover .art-back{padding:5px 10px;margin-left:-10px;border-radius:4px; background:rgba(10,15,28,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid var(--border-subtle);color:var(--text-secondary)} .art-hero.has-cover .note-card-kind{background:rgba(10,15,28,.6); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .art-hero.has-cover .note-card-kind.cs{background:rgba(155,123,224,.18)} .art-hero.has-cover .note-card-kind.proj{background:rgba(111,168,255,.2)} .art-hero.has-cover .note-card-date{color:var(--text-secondary)} /* the bar's warn tint is 7% alpha — nothing at all over a photo */ .art-hero.has-cover .draft-bar{background:rgba(10,15,28,.72); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} /* ============================================================ PROSE ============================================================ */ .art-prose{padding-top:8px} .art-prose > p{font-size:1.1875rem;line-height:1.78;color:var(--text-secondary);margin:0 0 26px;text-wrap:pretty} /* the opening paragraph, set larger — the design's .lead, applied by position instead of by class so nothing has to be injected into the rendered Markdown */ .art-prose.lead-in > p:first-child{font-size:1.3125rem;color:var(--text-primary);line-height:1.62} .art-prose strong{color:var(--text-primary);font-weight:600} .art-prose em{color:var(--text-primary);font-style:italic} .art-prose a{color:var(--accent-glow);text-decoration:underline; text-decoration-color:rgba(155,123,224,.4);text-underline-offset:3px;transition:text-decoration-color .16s ease} .art-prose a:hover{text-decoration-color:var(--accent-glow)} .art-prose code{font-family:var(--font-mono);font-size:.88em;color:var(--accent-glow); background:rgba(255,255,255,.05);border:1px solid var(--border-subtle);padding:2px 6px;border-radius:4px} .art-prose pre{margin:0 0 26px;padding:16px 18px;overflow-x:auto;background:rgba(255,255,255,.03); border:1px solid var(--border-subtle);border-radius:var(--radius-md)} .art-prose pre code{background:none;border:0;padding:0;color:var(--text-primary);font-size:12.5px;line-height:1.6} .art-prose ul,.art-prose ol{margin:0 0 26px;padding-left:24px;font-size:1.1875rem;line-height:1.7;color:var(--text-secondary)} .art-prose li{margin-bottom:11px;text-wrap:pretty} .art-prose li::marker{color:var(--accent-pink)} .art-prose li strong{color:var(--text-primary)} .art-prose h2{font-family:var(--font-display);font-weight:700;font-size:1.75rem;color:var(--text-primary); letter-spacing:-.015em;line-height:1.2;margin:56px 0 16px;text-wrap:balance} .art-prose h3{font-family:var(--font-sans);font-weight:600;font-size:1.25rem;color:var(--text-primary); margin:38px 0 12px;line-height:1.3} .art-prose h4{font-family:var(--font-sans);font-weight:600;font-size:1.05rem;color:var(--text-primary);margin:28px 0 10px} .art-prose blockquote{margin:0 0 26px;padding:2px 0 2px 18px;border-left:2px solid var(--border-accent);color:var(--text-tertiary)} .art-prose img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:0 0 26px} .art-prose hr{border:0;border-top:1px solid var(--border-subtle);margin:48px 0} .art-prose table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:var(--fs-small)} .art-prose th,.art-prose td{border:1px solid var(--border-subtle);padding:8px 11px;text-align:left;color:var(--text-secondary)} .art-prose th{color:var(--text-primary);font-weight:600;background:rgba(255,255,255,.03)} .art-prose > *:last-child{margin-bottom:0} /* The block-level spacing above is written for a heading that follows prose. A section that opens on a "### " has no prose above it — .ps-title is right there — so the heading's own top margin would be a second gap. */ .art-prose > *:first-child{margin-top:0} /* ---------- sections ---------- */ /* padding:0 undoes site.css's bare `section{padding:clamp(34px,3.5vw,52px) 0}`, which is meant for the full-width bands on the other public pages. A chapter is not a band: that rule added 52px above and below every one of them on top of the 60px margin here, so a heading sat ~213px below the paragraph before it. The admin preview pane never loaded site.css, which is why it and the published page disagreed about the same markup. */ .read-section{margin-top:56px;padding:0;scroll-margin-top:96px} .read-main > .read-section:first-child{margin-top:8px} /* A section written with a trailing "---" ends in an
whose 48px top margin stacks straight on the next section's margin. The section boundary is already the divider, so the rule the author typed is redundant exactly there — everywhere else in the prose it still draws. */ .art-prose > hr:last-child{display:none} /* the section's own title; the heading is not repeated inside .art-prose */ .ps-title{font-family:var(--font-display);font-weight:700;font-size:1.8rem;color:var(--text-primary); letter-spacing:-.015em;line-height:1.2;margin:0 0 18px;text-wrap:balance} /* ---------- pull quote (::: pullquote) ---------- */ .pullquote{margin:48px 0} .pullquote .pq-bar{width:48px;height:3px;background:var(--accent-gradient);border-radius:2px;margin-bottom:22px} .pullquote blockquote{margin:0;padding:0;border:0;font-family:var(--font-display);font-weight:700; font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.3;letter-spacing:-.015em;color:var(--text-primary);text-wrap:balance} .pullquote blockquote p{margin:0} .pullquote .pq-cite{font-family:var(--font-mono);font-size:13px;color:var(--text-tertiary);margin-top:18px} .pullquote .pq-cite::before{content:"— "} /* ---------- callout (::: callout) ---------- */ .callout{display:flex;gap:16px;align-items:flex-start;margin:36px 0;padding:22px 24px; border-radius:var(--radius-lg);border:1px solid var(--border-default); background:var(--glass-fill-faint);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:var(--shadow-inset);--c:var(--accent-glow)} .callout.note{--c:var(--info)} .callout.win{--c:var(--ok)} .callout.warn{--c:var(--warn)} .callout .cico{width:38px;height:38px;border-radius:8px 2px 2px 2px;flex-shrink:0;display:grid;place-items:center; background:color-mix(in srgb, var(--c) 14%, transparent);color:var(--c);border:1px solid var(--border-subtle)} .callout .cico i,.callout .cico svg{width:20px;height:20px} .callout .cbody{min-width:0} .callout .clabel{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--c);margin-bottom:7px} /* the design's .ctext is a

; container children are blocks, so the margin reset lives here */ .callout .ctext{font-size:var(--fs-body);color:var(--text-secondary);line-height:1.62;text-wrap:pretty} .callout .ctext > p{margin:0 0 12px;font-size:inherit;line-height:inherit;color:inherit} .callout .ctext > *:last-child{margin-bottom:0} .callout .ctext strong{color:var(--text-primary)} /* ============================================================ END OF PIECE — tags + share, prev/next, read next ============================================================ */ /* project links — where the thing actually lives. Sits above .art-end and borrows its rhythm. */ .art-links{margin-top:56px;padding-top:26px;border-top:1px solid var(--border-subtle); display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap} .art-links .lbl{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary)} .art-links-row{display:flex;gap:10px;flex-wrap:wrap} .art-link{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:6px; border:1px solid var(--border-default);background:rgba(255,255,255,.03);text-decoration:none; color:var(--text-secondary);font-family:var(--font-mono);font-size:13px;transition:all .16s ease} .art-link:hover{color:var(--text-primary);border-color:var(--border-strong);transform:translateY(-2px)} .art-link:focus-visible{outline:none;box-shadow:var(--focus-ring)} .art-link i,.art-link svg{width:15px;height:15px} .art-end{margin-top:60px;padding-top:30px;border-top:1px solid var(--border-subtle); display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap} /* Two stacked dividers 60px apart read as a mistake — the links block already drew one. */ .art-links + .art-end{margin-top:34px;padding-top:0;border-top:none} .art-end .end-tags{display:flex;gap:8px;flex-wrap:wrap} .art-end .end-share{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .art-end .end-share .lbl{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);margin-right:2px} .end-share-links{display:flex;gap:10px;align-items:center} .share-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border:1px solid var(--border-default);background:rgba(255,255,255,.03);border-radius:6px; color:var(--text-secondary);transition:all .16s ease;text-decoration:none; /* the copy-link control is a