/* Reading tools on icharles.com letters and the /highlights library (reader.js). Tokens come from public.css (Paper, Ink, Sage, Night). */
:root{--rd-ease:cubic-bezier(.2,.8,.2,1);--rd-night:#1c231f;--rd-night-ink:#f2efe7;--rd-sage-hl:color-mix(in oklab,#9db89f 38%,transparent);--rd-sun-hl:color-mix(in oklab,#e8c76a 40%,transparent);--rd-sky-hl:color-mix(in oklab,#8fb6c9 38%,transparent);--rd-rose-hl:color-mix(in oklab,#d9a0a0 38%,transparent)}
.rd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rd-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* The masthead's one row: Listen · Save · Share · Copy link · Print */
body[data-public-layout] .reader-tools{gap:6px;flex-wrap:nowrap;flex:none}
body[data-public-layout] .reader-tools>*{flex:none;white-space:nowrap}
body[data-public-layout] .reader-tools .public-share-button.reader-listen{width:auto;padding:0 14px 0 12px;gap:7px;border-color:color-mix(in oklab,var(--ic-sage) 55%,var(--public-line));color:var(--ic-sage);font-weight:600}
body[data-public-layout] .reader-tools .reader-listen small{font:500 12px/1 var(--ic-sans);color:var(--ic-muted)}
body[data-public-layout] .reader-tools .reader-listen.is-playing{background:var(--ic-sage);color:var(--ic-paper)}
body[data-public-layout] .reader-tools .reader-listen.is-playing small{color:inherit;opacity:.8}
body[data-public-layout] .reader-save[aria-pressed=true]{color:var(--ic-sage);border-color:var(--ic-sage)}
.public-share-button{transition:background-color .16s var(--rd-ease),color .16s var(--rd-ease),transform .16s var(--rd-ease)}
.public-share-button:active{transform:scale(.96)}
@media(max-width:480px){body[data-public-layout] .reader-tools [data-share=copy]{display:none}}
@media(max-width:720px){body[data-public-layout] .reader-tools .public-share-button.reader-print{display:none}body[data-public-layout] .article-meta-row .reader-tools{width:100%}}
@media(max-width:380px){body[data-public-layout] .reader-tools .reader-listen small{display:none}}
.rd-header-link{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;margin:0 -8px 0 0;border-radius:999px;color:var(--ic-sage);transition:background-color .16s var(--rd-ease)}
.rd-header-link:hover{background:color-mix(in oklab,var(--ic-sage) 12%,transparent)}
@media(max-width:720px){.rd-header-link{margin:0 0 0 auto}.rd-header-link~.public-open{margin-left:0}}

/* Highlights in the text */
mark.rd-mark{background:var(--rd-sage-hl);color:inherit;border-radius:2px;padding:.04em 0;box-decoration-break:clone;-webkit-box-decoration-break:clone;cursor:pointer;transition:background-color .16s var(--rd-ease)}
mark.rd-mark.rd-sun{background:var(--rd-sun-hl)}mark.rd-mark.rd-sky{background:var(--rd-sky-hl)}mark.rd-mark.rd-rose{background:var(--rd-rose-hl)}
mark.rd-mark:focus-visible{outline:2px solid var(--ic-sage);outline-offset:2px}
mark.rd-popular{background:none;color:inherit;text-decoration:underline dotted color-mix(in oklab,var(--ic-sage) 70%,transparent);text-decoration-thickness:1.5px;text-underline-offset:.28em}
::highlight(rd-reading){background-color:color-mix(in oklab,#e8c76a 34%,transparent);color:inherit}
.rd-now{transition:background-color .3s var(--rd-ease)}
body.rd-listening .reading .rd-now:not(h2,h3){background:linear-gradient(to right,color-mix(in oklab,var(--ic-sage) 7%,transparent),transparent);box-shadow:-14px 0 0 color-mix(in oklab,var(--ic-sage) 7%,transparent);border-radius:4px}

/* Floating layers: the selection bubble, a highlight's pop-out, play-from-here */
.rd-bubble,.rd-pop,.rd-here{position:absolute;left:0;top:0;transform:translate(var(--x,0),var(--y,0)) scale(.96);opacity:0;pointer-events:none;z-index:60;transition:opacity .14s var(--rd-ease),transform .16s var(--rd-ease)}
.rd-bubble.is-on,.rd-pop.is-on,.rd-here.is-on{opacity:1;pointer-events:auto;transform:translate(var(--x,0),var(--y,0)) scale(1)}
.rd-bubble{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--rd-night);color:var(--rd-night-ink);box-shadow:0 10px 30px #0e140f38,0 1px 2px #0e140f30}
.rd-bubble button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:0;border-radius:999px;background:none;color:inherit;font:600 13px/1 var(--ic-sans);cursor:pointer;transition:background-color .14s var(--rd-ease)}
.rd-bubble button:hover,.rd-bubble button:focus-visible{background:#ffffff1c;outline:0}
.rd-pop{width:min(360px,calc(100vw - 16px));padding:14px;border:1px solid var(--ic-line);border-radius:14px;background:var(--ic-paper);color:var(--ic-ink);box-shadow:0 18px 50px #1a221d24;display:grid;gap:10px;font:14px/1.4 var(--ic-sans)}
.rd-display{position:absolute;left:0;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid var(--ic-line);border-radius:16px;background:var(--ic-paper);color:var(--ic-ink);box-shadow:0 18px 50px #1a221d24;transform:translate(var(--x,0),var(--y,0)) scale(.96);transform-origin:top right;opacity:0;pointer-events:none;transition:opacity .14s var(--rd-ease),transform .16s var(--rd-ease)}
.rd-display.is-on{opacity:1;pointer-events:auto;transform:translate(var(--x,0),var(--y,0)) scale(1)}
.rd-seg{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--ic-mist,#efeee7)}
.rd-seg button{display:grid;place-items:center;min-width:38px;min-height:34px;padding:0 11px;border:0;border-radius:8px;background:none;color:var(--ic-muted);font:600 13px/1 var(--ic-sans);cursor:pointer;transition:background-color .14s var(--rd-ease),color .14s var(--rd-ease)}
.rd-seg button:hover{color:var(--ic-ink)}
.rd-seg button[aria-checked=true]{background:var(--ic-paper);color:var(--ic-ink);box-shadow:0 1px 2px #1a221d24}
.rd-sizes button{padding:0;font-family:var(--ic-serif);font-weight:500}
.rd-sizes [data-set-size=s] span{font-size:12px}.rd-sizes [data-set-size=m] span{font-size:15px}.rd-sizes [data-set-size=l] span{font-size:18px}.rd-sizes [data-set-size=xl] span{font-size:21px}
body[data-public-layout] .reader-tools .reader-display span{display:block;font:500 15px/1 var(--ic-serif);letter-spacing:-.02em;transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.rd-display{transition:none}}
.rd-pop-title{margin:0;font:600 12px/1 var(--ic-sans);letter-spacing:.02em;color:var(--ic-sage)}
.rd-pop textarea,.rd-pop input[type=text]{width:100%;min-width:0;padding:9px 11px;border:1px solid var(--ic-line);border-radius:9px;background:transparent;color:inherit;font:15px/1.45 var(--ic-sans);resize:none;box-sizing:border-box}
.rd-pop textarea:focus,.rd-pop input:focus{outline:2px solid color-mix(in oklab,var(--ic-sage) 55%,transparent);outline-offset:0;border-color:transparent}
.rd-tags{flex-wrap:nowrap}.rd-tags input{flex:1}
.rd-colors{display:flex;gap:6px;flex-shrink:0}
.rd-dot{flex:none;width:22px;height:22px;min-width:0!important;min-height:0!important;border-radius:999px;border:2px solid transparent;cursor:pointer;padding:0}
.rd-dot.rd-sage{background:#b9cdb9}.rd-dot.rd-sun{background:#ecd58f}.rd-dot.rd-sky{background:#b3cfdc}.rd-dot.rd-rose{background:#e3bcbc}
.rd-dot[aria-pressed=true]{border-color:var(--ic-ink)}
.rd-pop-actions{justify-content:space-between;border-top:1px solid var(--ic-line);padding-top:10px}
.rd-pop-actions>*{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--ic-ink);font:600 13px/1 var(--ic-sans);text-decoration:none;cursor:pointer}
.rd-pop-actions>*:hover{background:color-mix(in oklab,var(--ic-sage) 12%,transparent)}
.rd-pop-actions .rd-quiet{color:var(--ic-muted)}
.rd-here{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--ic-line);border-radius:999px;background:var(--ic-paper);color:var(--ic-sage);cursor:pointer}
.rd-here svg{width:14px;height:14px}

/* Chips, buttons, segmented controls (shared by the pop-out, composer and library) */
.rd-chips{display:flex;flex-wrap:wrap;gap:6px}
.rd-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--ic-line);border-radius:999px;background:transparent;color:var(--ic-ink);font:500 13px/1 var(--ic-sans);cursor:pointer;transition:background-color .14s var(--rd-ease),border-color .14s var(--rd-ease)}
.rd-chip small{color:var(--ic-muted);font-size:12px}
.rd-chip:hover{border-color:color-mix(in oklab,var(--ic-sage) 50%,var(--ic-line))}
.rd-chip[aria-pressed=true]{background:var(--ic-ink);border-color:var(--ic-ink);color:var(--ic-paper)}
.rd-chip[aria-pressed=true] small{color:inherit;opacity:.75}
.rd-chip-new{color:var(--ic-sage);border-style:dashed}
.rd-chip-input{min-height:32px;width:150px;padding:0 12px;border:1px solid var(--ic-sage);border-radius:999px;background:transparent;color:var(--ic-ink);font:500 13px/1 var(--ic-sans)}
.rd-primary,.rd-button,.rd-danger-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font:600 14px/1 var(--ic-sans);text-decoration:none;cursor:pointer;transition:background-color .16s var(--rd-ease),transform .16s var(--rd-ease)}
.rd-primary{border:1px solid var(--ic-sage);background:var(--ic-sage);color:var(--ic-paper)}
.rd-primary:hover{background:color-mix(in oklab,var(--ic-sage) 86%,var(--ic-ink))}
.rd-primary:disabled{opacity:.6;cursor:progress}
.rd-button{border:1px solid var(--ic-line);background:transparent;color:var(--ic-ink)}
.rd-button:hover{background:color-mix(in oklab,var(--ic-sage) 10%,transparent)}
.rd-danger-button{border:1px solid #9b3b32;background:#9b3b32;color:#fff}
.rd-primary:active,.rd-button:active{transform:scale(.97)}
.rd-seg{display:inline-flex;padding:3px;border-radius:999px;background:color-mix(in oklab,var(--ic-ink) 6%,transparent)}
.rd-seg button{min-height:34px;padding:0 13px;border:0;border-radius:999px;background:none;color:var(--ic-muted);font:600 13px/1 var(--ic-sans);cursor:pointer;display:inline-flex;align-items:center}
.rd-seg button[aria-checked=true]{background:var(--ic-paper);color:var(--ic-ink);box-shadow:0 1px 3px #1a221d1f}

/* Dialogs: join, compose, confirm */
.rd-dialog{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:28px;border:1px solid var(--ic-line);border-radius:20px;background:var(--ic-paper);color:var(--ic-ink);box-shadow:0 30px 80px #10161238;font:15px/1.5 var(--ic-sans)}
.rd-dialog::backdrop{background:#10161259;backdrop-filter:blur(3px)}
.rd-dialog[open]{animation:rd-in .2s var(--rd-ease)}
@keyframes rd-in{from{opacity:0;transform:translateY(8px) scale(.985)}}
.rd-dialog h2{margin:0 0 16px;font:400 28px/1.15 var(--ic-serif);letter-spacing:-.015em;padding-right:36px}
.rd-dialog .rd-lead{margin:0 0 20px;color:var(--ic-muted)}
.rd-dialog-close{position:absolute;top:14px;right:14px;margin:0}
/* The close button matches the share sheet's: a 38px circle with the × at its centre (owner, Nov 9). */
.rd-dialog-close button{display:grid;place-items:center;box-sizing:border-box;width:38px;height:38px;min-width:0!important;min-height:0!important;padding:0!important;margin:0;border:0!important;outline-offset:2px;border-radius:999px;background:none;color:var(--ic-muted);line-height:0;cursor:pointer;transition:background-color .14s var(--rd-ease),color .14s var(--rd-ease)}
.rd-dialog-close button svg{display:block;width:18px;height:18px;stroke-width:1.8}
.rd-dialog-close button:hover{background:color-mix(in oklab,var(--ic-ink) 7%,transparent);color:var(--ic-ink)}
/* A passage's share sheet: the card stands beside its words instead of a wide link preview. */
body[data-public-layout] .public-share-dialog.passage-share-dialog .public-share-preview{grid-template-columns:auto minmax(0,1fr)}
body[data-public-layout] .public-share-dialog.passage-share-dialog .public-share-preview img{width:auto;max-width:140px;height:auto;max-height:180px;aspect-ratio:auto;object-fit:contain;border-radius:8px}
body[data-public-layout] .public-share-dialog.passage-share-dialog .public-share-preview h3{font-size:17px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
body[data-public-layout] .public-share-dialog.passage-share-dialog .public-share-preview p{font-style:italic}
@media(max-width:640px){body[data-public-layout] .public-share-dialog.passage-share-dialog .public-share-preview img{max-width:96px;max-height:132px}body[data-public-layout] .public-share-dialog.passage-share-dialog .public-share-preview h3{-webkit-line-clamp:4;font-size:15.5px}}
.rd-join-form .rd-row{flex-wrap:nowrap}
.rd-join-form input[type=email]{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--ic-line);border-radius:999px;background:transparent;color:inherit;font:16px var(--ic-sans)}
.rd-join-form input[type=email]:focus{outline:2px solid color-mix(in oklab,var(--ic-sage) 55%,transparent);border-color:transparent}
.rd-check{display:flex;align-items:center;gap:9px;margin-top:14px;color:var(--ic-muted);font-size:14px;cursor:pointer}
.rd-check input{width:17px;height:17px;accent-color:var(--ic-sage)}
.rd-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rd-error{margin:10px 0 0;color:#9b3b32;font-size:13px;min-height:1em}
.rd-error:empty{display:none}
.rd-composer{width:min(980px,calc(100vw - 24px));padding:24px}
.rd-composer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:28px;align-items:center}
.rd-card-preview{margin:0;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;height:min(68dvh,640px);border-radius:14px;background:color-mix(in oklab,var(--ic-ink) 5%,transparent);overflow:hidden}
.rd-card-preview img{display:block;width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 12px 40px #1a221d26;transition:opacity .2s var(--rd-ease)}
.rd-card-preview.is-loading img{opacity:.45}
.rd-composer-side{display:grid;gap:18px;align-content:center}
.rd-composer-side h2{margin:0}
.rd-swatches{display:flex;gap:10px;flex-wrap:wrap}
.rd-swatch{flex:none;min-width:0!important;min-height:0!important;width:34px;height:34px;border-radius:999px;border:2px solid var(--ic-paper);box-shadow:0 0 0 1px var(--ic-line);cursor:pointer;padding:0;background-size:cover;background-position:center}
.rd-swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--ic-ink)}
.rd-sw-paper{background:#efebe1}.rd-sw-night{background:#18201b}.rd-sw-sage{background:#41604c}
.rd-sw-mist{background-image:url(/icharles/reflections/art/mistsun.webp)}.rd-sw-lake{background-image:url(/icharles/reflections/art/wanaka.webp)}.rd-sw-dune{background-image:url(/icharles/reflections/art/dunes.webp)}
.rd-composer-actions{gap:8px;flex-wrap:nowrap}.rd-composer-actions>*{padding:0 14px;font-size:13.5px;white-space:nowrap}
@media(max-width:760px){.rd-composer{padding:16px}.rd-composer-grid{grid-template-columns:minmax(0,1fr);gap:14px}.rd-card-preview{height:46dvh;padding:10px}.rd-composer-side{gap:14px}.rd-composer-side h2{display:none}.rd-composer .rd-seg{display:flex;width:100%;box-sizing:border-box}.rd-composer .rd-seg button{flex:1;justify-content:center;padding:0 6px}.rd-composer-actions .rd-primary{flex:1}.rd-composer-actions .rd-button{width:44px;padding:0}.rd-composer-actions .rd-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.rd-dialog-close{z-index:2}}

/* The player: one floating row, docked bottom */
.rd-player{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:70;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;grid-template-areas:'play back track fwd speed close' 'play back voice fwd speed close';align-items:center;column-gap:6px;row-gap:2px;width:min(760px,calc(100vw - 24px));padding:10px 12px 8px 10px;border-radius:20px;background:color-mix(in oklab,var(--rd-night) 97%,transparent);color:var(--rd-night-ink);box-shadow:0 20px 60px #0b100d4d,0 0 0 1px #ffffff12 inset;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);transform:translate(-50%,calc(100% + 40px));opacity:0;pointer-events:none;transition:transform .32s var(--rd-ease),opacity .2s var(--rd-ease);font:13px/1.2 var(--ic-sans)}
.rd-player.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.rd-player button{display:grid;place-items:center;border:0;background:none;color:inherit;cursor:pointer;border-radius:999px;transition:background-color .14s var(--rd-ease),transform .14s var(--rd-ease)}
.rd-player button:hover{background:#ffffff16}.rd-player button:active{transform:scale(.94)}
.rd-play{grid-area:play;width:46px;height:46px;background:var(--rd-night-ink)!important;color:var(--rd-night)!important}
.rd-skip{width:40px;height:40px}
.rd-player [data-back]{grid-area:back}.rd-player [data-fwd]{grid-area:fwd}.rd-player .rd-close{grid-area:close}
.rd-speed{grid-area:speed;min-width:46px;height:34px;padding:0 10px;border:1px solid #ffffff2b!important;font:700 12.5px/1 var(--ic-sans);font-variant-numeric:tabular-nums}
.rd-track{grid-area:track;display:grid;grid-template-columns:minmax(0,1fr);gap:7px;min-width:0;padding:0 6px;align-self:end}
.rd-track-top{min-width:0;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rd-track-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 14px/1.2 var(--ic-serif)}
.rd-time{flex-shrink:0;color:#ffffffa6;font-variant-numeric:tabular-nums;font-size:12px}
.rd-track input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:0;border-radius:4px;background:linear-gradient(to right,var(--rd-night-ink) var(--p,0%),#ffffff30 var(--p,0%));cursor:pointer}
.rd-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--rd-night-ink);box-shadow:0 1px 4px #0006}
.rd-track input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--rd-night-ink)}
.rd-voice{grid-area:voice;margin:0;padding:0 6px;color:#ffffff73;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.rd-listening{padding-bottom:110px}
@media(max-width:600px){.rd-player{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:'play track speed close' 'play voice speed close';padding:10px 8px 9px 10px;border-radius:18px}.rd-player [data-back],.rd-player [data-fwd]{display:none}.rd-play{width:44px;height:44px}.rd-player .rd-close{width:36px;height:36px}.rd-time{display:none}}

/* Toast */
.rd-toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:11px 12px 11px 18px;border-radius:999px;background:var(--rd-night);color:var(--rd-night-ink);font:500 14px/1.3 var(--ic-sans);box-shadow:0 14px 40px #0b100d40;transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .22s var(--rd-ease),opacity .18s var(--rd-ease)}
.rd-toast.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
body.rd-listening .rd-toast{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 96px)}
.rd-toast button{border:0;border-radius:999px;padding:7px 12px;background:#ffffff1f;color:inherit;font:700 13px/1 var(--ic-sans);cursor:pointer}

/* /highlights */
.hl-page{width:min(var(--public-width,1312px),calc(100% - 64px));margin:28px auto 72px;font-family:var(--ic-sans)}
.hl-loading,.hl-none{color:var(--ic-muted)}
.hl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.hl-head h1{margin:0 8px 0 0;font:400 40px/1 var(--ic-serif);letter-spacing:-.03em}
.hl-head h1 small{font:500 14px var(--ic-sans);color:var(--ic-muted);letter-spacing:0}
.hl-search input{min-height:38px;width:200px;padding:0 14px;border:1px solid var(--ic-line);border-radius:999px;background:transparent;color:inherit;font:14px var(--ic-sans)}
.hl-filters{flex:1;min-width:0}
.hl-account{position:relative}
.hl-account .rd-button{min-height:38px;width:38px;padding:0}
.hl-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:220px;padding:6px;border:1px solid var(--ic-line);border-radius:12px;background:var(--ic-paper);box-shadow:0 16px 40px #1a221d24}
.hl-menu p{margin:6px 10px 8px;color:var(--ic-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.hl-menu button{display:block;width:100%;padding:10px;border:0;border-radius:8px;background:none;color:var(--ic-ink);text-align:left;font:500 14px var(--ic-sans);cursor:pointer}
.hl-menu button:hover{background:color-mix(in oklab,var(--ic-sage) 10%,transparent)}
.hl-menu .rd-danger{color:#9b3b32}
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.hl-card{position:relative;display:grid;gap:12px;align-content:start;padding:22px 22px 18px;border:1px solid var(--ic-line);border-radius:16px;background:color-mix(in oklab,var(--ic-paper) 70%,#fff);transition:border-color .16s var(--rd-ease),transform .18s var(--rd-ease),box-shadow .18s var(--rd-ease)}
@media(prefers-color-scheme:dark){.hl-card{background:color-mix(in oklab,var(--ic-paper) 92%,#fff)}}
.hl-card::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:0 3px 3px 0;background:#b9cdb9}
.hl-card.rd-sun::before{background:#ecd58f}.hl-card.rd-sky::before{background:#b3cfdc}.hl-card.rd-rose::before{background:#e3bcbc}.hl-card.hl-letter::before{background:var(--ic-ink)}
.hl-card:hover{border-color:color-mix(in oklab,var(--ic-sage) 45%,var(--ic-line));transform:translateY(-2px);box-shadow:0 12px 30px #1a221d14}
.hl-link{position:absolute;inset:0;border-radius:inherit;z-index:1}
.hl-link:focus-visible{outline:2px solid var(--ic-sage);outline-offset:2px}
.hl-card blockquote{margin:0;font:400 19px/1.55 var(--ic-serif);color:var(--ic-ink);display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.hl-card h3{margin:0;font:400 22px/1.25 var(--ic-serif)}
.hl-kind{margin:0;font:600 12px/1 var(--ic-sans);color:var(--ic-sage)}
.hl-note{margin:0;padding:10px 12px;border-radius:10px;background:color-mix(in oklab,var(--ic-sage) 8%,transparent);color:var(--ic-ink);font-size:14px;white-space:pre-wrap}
.hl-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;color:var(--ic-muted);font-size:12.5px}
.hl-meta span:first-child{color:var(--ic-ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.hl-tag{color:var(--ic-sage)}
.hl-actions{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--rd-night);color:var(--rd-night-ink);opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .14s var(--rd-ease),transform .16s var(--rd-ease)}
.hl-card:hover .hl-actions,.hl-card:focus-within .hl-actions{opacity:1;transform:none;pointer-events:auto}
.hl-actions button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer}
.hl-actions button:hover{background:#ffffff1c}
.hl-more{display:none}
@media(hover:none){.hl-more{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;min-width:0!important;min-height:0!important;border:0;border-radius:999px;background:color-mix(in oklab,var(--ic-paper) 80%,transparent);color:var(--ic-muted)}.hl-card:hover .hl-actions,.hl-card:focus-within .hl-actions{opacity:0;pointer-events:none}.hl-card.is-open .hl-actions{opacity:1;transform:none;pointer-events:auto;right:52px;top:10px}}
.hl-move{position:absolute;top:54px;right:12px;z-index:3;min-width:180px;padding:6px;border:1px solid var(--ic-line);border-radius:12px;background:var(--ic-paper);box-shadow:0 16px 40px #1a221d24}
.hl-move button{display:block;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--ic-ink);text-align:left;font:500 14px var(--ic-sans);cursor:pointer}
.hl-move button:hover,.hl-move button[aria-checked=true]{background:color-mix(in oklab,var(--ic-sage) 12%,transparent)}
.hl-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity}
.hl-column{display:grid;gap:12px;align-content:start;min-height:200px;padding:12px;border-radius:16px;background:color-mix(in oklab,var(--ic-ink) 4%,transparent);scroll-snap-align:start;transition:background-color .16s var(--rd-ease)}
.hl-column.is-over{background:color-mix(in oklab,var(--ic-sage) 14%,transparent)}
body[data-public-layout] .hl-column h2{margin:4px 6px;font:600 13px/1 var(--ic-sans);letter-spacing:0;color:var(--ic-muted)}
.hl-column h2 small{font-weight:500;margin-left:4px}
.hl-column .hl-card{cursor:grab}.hl-card.is-dragging{opacity:.5}
.hl-empty{display:grid;gap:16px;justify-items:start;max-width:560px;margin:40px 0}
.hl-empty h1{margin:0;font:400 44px/1.05 var(--ic-serif);letter-spacing:-.03em}
.hl-empty p{margin:0;color:var(--ic-muted);font-size:17px}
@media(max-width:720px){.hl-page{width:calc(100% - 32px);margin-top:18px}.hl-head{gap:10px}.hl-head h1{font-size:32px;flex:1}.hl-search{order:5;flex:1 1 100%}.hl-search input{width:100%}.hl-filters{order:6;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.hl-filters .rd-chip{flex-shrink:0}}

@media(prefers-reduced-motion:reduce){.rd-bubble,.rd-pop,.rd-here,.rd-player,.rd-toast,.hl-card,.hl-actions{transition:none}.rd-dialog[open]{animation:none}}

/* Print: the letter, its notes and where it lives; none of the site around it */
/* The letter's right-click menu: one panel, selection actions as one row of three, the rest a short grouped list. */
.rd-menu{position:fixed;left:0;top:0;z-index:80;box-sizing:border-box;width:252px;padding:6px;border:1px solid var(--ic-line);border-radius:14px;background:var(--ic-paper);color:var(--ic-ink);box-shadow:0 1px 2px #1a221d14,0 18px 48px -12px #1a221d40;font:500 13.5px/1.2 var(--ic-sans);transform:translate(var(--x,0),var(--y,0)) scale(.97);opacity:0;transition:opacity .12s var(--rd-ease),transform .16s var(--rd-ease)}
.rd-menu.is-on{opacity:1;transform:translate(var(--x,0),var(--y,0)) scale(1)}
.rd-menu[hidden]{display:none}
.rd-menu-list{display:grid}
.rd-menu-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.rd-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .12s var(--rd-ease),color .12s var(--rd-ease)}
.rd-menu button svg{flex:none;width:17px;height:17px;color:var(--ic-muted);transition:color .12s var(--rd-ease)}
.rd-menu-row button{flex-direction:column;justify-content:center;gap:5px;min-height:56px;padding:6px 4px;font-size:12px;text-align:center;background:color-mix(in oklab,var(--ic-ink) 4%,transparent)}
.rd-menu button:hover,.rd-menu button:focus,.rd-menu button:focus-visible{background:color-mix(in oklab,var(--ic-sage) 13%,transparent);outline:0!important}
.rd-menu button:hover svg,.rd-menu button:focus svg{color:var(--ic-sage)}
.rd-menu-sep{height:1px;margin:5px 8px;background:var(--ic-line)}
/* On touch screens Print becomes ⋯ and opens the menu (print, PDF, send), so it stays in the masthead on phones too. */
@media(max-width:720px){body[data-public-layout] .reader-tools .public-share-button.reader-print.rd-more{display:inline-flex}}
@media(max-width:440px){body[data-public-layout] .reader-tools:has(.rd-more) .reader-listen small{display:none}}
@media(prefers-reduced-motion:reduce){.rd-menu{transition:none}}
@media print{
  @page{margin:18mm 16mm}
  body[data-public-layout]{background:#fff!important;color:#111!important}
  .public-header,.public-footer,.reader-tools,.share-controls,.inline-share,.article-end,.related,.subscribe,.reading-privacy,.rd-player,.rd-toast,.rd-bubble,.rd-pop,.rd-here,.article-toc,.article-contents,.article-breadcrumb,.video-facade,.article-video,dialog,[data-todd],#todd-widget,.public-share-dialog,.skip,.rd-menu{display:none!important}
  body.rd-listening{padding-bottom:0}
  .article-heading h1{font-size:28pt!important}
  .reading{max-width:none!important;font-size:11.5pt!important;line-height:1.55!important}
  .reading a{color:inherit!important;text-decoration:underline!important}
  .reading a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555;word-break:break-all}
  mark.rd-mark{background:#eef2e8!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  mark.rd-popular{text-decoration:none}
  figure.hero img{max-height:80mm;object-fit:cover;width:100%}
  h2,h3{break-after:avoid}p,li,blockquote,figure{break-inside:avoid}
  main[data-slug]::after{content:"Read online and share: icharles.com/articles/" attr(data-slug);display:block;margin-top:14mm;padding-top:4mm;border-top:1px solid #ccc;font:9pt/1.4 -apple-system,sans-serif;color:#555}
}