/* Tidelines - the TypeGlish blog. Shared styles for index + articles. Tokens from ../styles.css */
*{box-sizing:border-box}html,body{margin:0}
:root{--ink:#12233E;--cream:#FBF6EC;--hair:rgba(18,35,62,.22);--hair2:rgba(18,35,62,.5);--mut:#44536E;--mut2:#67789A}
body{background:var(--cream);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono)}
a{color:var(--ink)}a:hover{color:var(--ocean-700)}
.bwrap{max-width:1240px;margin:0 auto;padding:0 48px}
#prog{position:fixed;top:0;left:0;height:2.5px;width:0;background:var(--ink);z-index:70}
/* ---- syntax tokens (shared with landing) ---- */
.t-sec{color:var(--code-section);font-weight:700}.t-imp{color:var(--code-import);font-weight:700}.t-op{color:var(--code-operator)}.t-str{color:var(--code-string)}.t-dec{color:var(--code-declaration);font-weight:700}.t-mod{color:var(--code-modal);font-weight:700}.t-neg{color:var(--code-negate);font-weight:700}.t-ctl{color:var(--code-control);font-weight:700}.t-ref{color:var(--code-ref)}.t-com{color:var(--code-comment);font-style:italic}.t-doc{color:var(--code-doc);font-style:italic}
.sqg{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Cpath d='M0 3.2 Q3.5 0.6 7 3.2 T14 3.2' fill='none' stroke='%23F04E2C' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100%/14px 6px;padding-bottom:3px}
.sqa{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Cpath d='M0 3.2 Q3.5 0.6 7 3.2 T14 3.2' fill='none' stroke='%23D9860A' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100%/14px 6px;padding-bottom:3px}
/* ---- masthead (index) ---- */
.bmast{padding:58px 0 0}
.bkick{display:flex;align-items:baseline;justify-content:space-between;gap:18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.bkick b{color:var(--ocean-700)}
.bmast h1{font-family:var(--font-display);font-weight:800;font-size:clamp(64px,10vw,138px);line-height:.95;letter-spacing:-.045em;margin:18px 0 0}
.bdek{font-size:18.5px;line-height:1.6;color:var(--mut);max-width:56ch;margin:20px 0 0}
.tiderule{display:block;width:100%;height:26px;margin:34px 0 0}
/* ---- tag chips ---- */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--hair);padding:16px 0}
.tags button{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid var(--hair2);border-radius:999px;padding:7px 14px;cursor:pointer}
.tags button:hover{border-color:var(--ink)}
.tags button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.tags .cnt{color:var(--mut2);margin-left:5px}.tags button.on .cnt{color:rgba(251,246,236,.6)}
/* ---- featured ---- */
.feat{display:grid;grid-template-columns:1.05fr .95fr;border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:5px;margin:44px 0 0}
.featl{padding:34px 38px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0}
.fmeta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut2)}
.fmeta .tide{color:var(--ocean-700);font-weight:700}
.feat h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.03em;line-height:1.06;margin:16px 0 0}
.feat h2 a{text-decoration:none}.feat h2 a:hover{color:var(--ocean-700)}
.feat .fdek{font-size:15.5px;line-height:1.6;color:var(--mut);margin:14px 0 0;max-width:46ch}
.feat .fby{margin-top:auto;padding-top:24px;font-family:var(--font-mono);font-size:11.5px;color:var(--mut2)}
.featr{border-left:1.5px solid var(--ink);background:var(--code-bg);min-width:0;display:flex;flex-direction:column}
.featr pre{flex:1;margin:0;font-family:var(--font-mono);font-size:12.5px;line-height:1.95;white-space:pre;color:var(--code-text);padding:22px 26px;overflow-x:auto}
.featr .cap{padding:9px 14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;gap:10px}
.featr .cap .ok{color:var(--palm-600)}
/* ---- post list ---- */
.tidehead{display:flex;align-items:baseline;gap:16px;margin:64px 0 0;border-bottom:1.5px solid var(--ink);padding-bottom:12px}
.tidehead .tt{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean-700)}
.tidehead .ts{font-family:var(--font-mono);font-size:11px;color:var(--mut2);margin-left:auto}
.prow{display:grid;grid-template-columns:150px 130px 1fr 90px;gap:22px;align-items:baseline;padding:24px 6px;border-bottom:1px solid var(--hair);text-decoration:none}
.prow:hover{background:rgba(18,35,62,.028)}
.prow .pd{font-family:var(--font-mono);font-size:12px;color:var(--mut2)}
.prow .ptag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ocean-700);font-weight:700}
.prow .pt{display:block;font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.015em;line-height:1.25}
.prow:hover .pt{color:var(--ocean-700)}
.prow .pdk{display:block;font-size:13.5px;color:var(--mut);line-height:1.5;margin-top:5px;font-family:var(--font-sans);font-weight:400}
.prow .pmin{font-family:var(--font-mono);font-size:11.5px;color:var(--mut2);text-align:right;white-space:nowrap}
.prow .pmin .arr{color:var(--ink)}
.prow.hid{display:none}
/* ---- article ---- */
.artgrid{display:grid;grid-template-columns:minmax(0,720px) 220px;gap:72px;justify-content:center;padding-top:54px}
.art{min-width:0}
.akick{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut2)}
.akick .home{text-decoration:none;color:var(--ink)}.akick .home:hover{color:var(--ocean-700)}
.akick .atag{color:var(--ocean-700);font-weight:700}
.art h1{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,4.6vw,58px);line-height:1.03;letter-spacing:-.035em;margin:20px 0 0}
.adek{font-size:18px;line-height:1.6;color:var(--mut);margin:18px 0 0;max-width:56ch}
.ameta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;color:var(--mut2);border-top:1.5px solid var(--ink);border-bottom:1px solid var(--hair);padding:12px 2px;margin:28px 0 0}
.ameta b{color:var(--ink);font-weight:700}
.abody{padding:8px 0 0}
.abody p{font-size:16px;line-height:1.72;color:var(--ink);margin:22px 0 0;text-wrap:pretty}
.abody p.lead{font-size:17.5px}
.abody h2{font-family:var(--font-display);font-weight:700;font-size:27px;letter-spacing:-.02em;line-height:1.15;margin:52px 0 0;scroll-margin-top:86px}
.abody h2 .si{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ocean-700);margin-right:12px;letter-spacing:.04em}
.abody h3{font-family:var(--font-display);font-weight:600;font-size:19px;margin:34px 0 0}
.abody ul,.abody ol{margin:18px 0 0;padding-left:24px;font-size:16px;line-height:1.7;color:var(--ink)}
.abody li{margin-top:8px}.abody li::marker{color:var(--ocean-700);font-weight:700}
.abody code{font-family:var(--font-mono);font-size:.88em;background:var(--code-bg-inset);border:1px solid var(--hair);padding:1.5px 6px;border-radius:3px}
.abody a{text-underline-offset:4px}
.cfig{border:1px solid var(--hair2);margin:26px 0 0}
.cfig .cap,.dfig .cap,.ifig .cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 8px 8px 14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--hair)}
.cfig .cap .no,.dfig .cap .no,.ifig .cap .no{color:var(--coral-600);font-weight:700}.cfig .cap .yes,.dfig .cap .yes,.ifig .cap .yes{color:var(--palm-600);font-weight:700}.cfig .cap .warn,.dfig .cap .warn,.ifig .cap .warn{color:var(--gold-700,#AE6A05);font-weight:700}
.cfig pre{margin:0;font-family:var(--font-mono);font-size:13px;line-height:1.85;white-space:pre;color:var(--code-text);padding:18px 22px;background:var(--code-bg);overflow-x:auto}
.ccopy{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:none;border:1px solid var(--hair2);border-radius:3px;color:var(--ink);padding:5px 10px;cursor:pointer}
.ccopy:hover{border-color:var(--ink)}.ccopy.did{color:var(--palm-600);border-color:var(--palm-600)}
.cnote{padding:10px 14px;border-top:1px dotted var(--hair2);font-size:13px;line-height:1.55;color:var(--mut)}
/* ---- image figures (screenshots) ---- */
.ifig{border:1px solid var(--hair2);margin:26px 0 0}
.ifig .ibody{padding:14px;background:var(--code-bg)}
.ifig .ibody img,.ifig .ibody image-slot{display:block;width:100%;border-radius:6px;border:1px solid var(--hair2);overflow:hidden}
.ifig .ibody image-slot{min-height:300px}
/* ---- hero plates ---- */
tg-hero{display:block;margin:30px 0 0;padding:5px}
tg-hero .hframe{border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;background:var(--cream)}
tg-hero .hin{display:flex;align-items:center;justify-content:space-between;gap:38px;padding:38px 44px 16px}
tg-hero .hkick{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ocean-700);margin-bottom:12px}
tg-hero .htitle{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4.2vw,46px);letter-spacing:-.035em;line-height:1.04;max-width:20ch;text-wrap:balance}
tg-hero .hicons{display:flex;gap:26px;align-items:flex-end;color:var(--ink);flex:none}
tg-hero .hground{display:block;width:100%;height:34px;color:var(--ink)}
tg-hero[og]{padding:0}
tg-hero[og] .ogwrap{position:relative;width:100%;aspect-ratio:1200/630;overflow:hidden}
tg-hero .ogcard{position:absolute;left:0;top:0;width:1200px;height:630px;background:var(--cream);transform-origin:0 0;font-family:var(--font-sans);color:var(--ink)}
tg-hero .ogf1{position:absolute;inset:14px;border:1px solid var(--ink)}
tg-hero .ogf2{position:absolute;inset:24px;border:2px solid var(--ink)}
tg-hero .ogin{position:absolute;left:70px;top:118px;right:70px}
tg-hero .ogin .hkick{font-size:16px;letter-spacing:.22em;margin-bottom:20px}
tg-hero .ogtitle{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1.12;max-width:760px;text-wrap:balance}
tg-hero .ogicons{position:absolute;right:84px;bottom:132px;display:flex;gap:40px;align-items:flex-end;color:var(--ink)}
tg-hero .ogground{position:absolute;left:24px;right:24px;bottom:106px;border-top:1.5px solid rgba(18,35,62,.45)}
tg-hero .ogwave{position:absolute;bottom:78px;color:var(--ink);opacity:.5}
tg-hero .ogfoot{position:absolute;left:70px;right:70px;bottom:38px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:16px;color:var(--mut2)}
@media (max-width:640px){tg-hero{padding:4px}tg-hero .hin{padding:22px 20px 8px;gap:18px}tg-hero .hicons svg{height:54px}.ifig .ibody{padding:10px}}
/* ---- diagram figures: process flows + architectures ---- */
.dfig{border:1px solid var(--hair2);margin:26px 0 0}
.dfig .dbody{padding:28px 14px;background:var(--code-bg);overflow-x:auto}
.flow{display:flex;align-items:center;min-width:min-content}
.flow+.flow{margin-top:18px}
.fnode{border:1.5px solid var(--ink);padding:10px 13px;text-align:center;background:var(--cream);flex:none;min-width:0}
.fnode .fn{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:-.01em;display:block;line-height:1.3}
.fnode .fm{font-family:var(--font-mono);font-size:12px;font-weight:500;display:block;line-height:1.5}
.fnode .fs{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--mut2);display:block;margin-top:3px}
.fnode.ok{border-color:var(--palm-600)}.fnode.ok .fn,.fnode.ok .fm{color:var(--palm-600)}
.fnode.bad{border-color:var(--coral-600)}.fnode.bad .fn,.fnode.bad .fm{color:var(--coral-600)}
.fnode.dim{border:1.5px dashed var(--hair2);background:transparent}
.farr{flex:1 0 30px;min-width:30px;height:1.5px;background:var(--ink);position:relative;margin:0 3px}
.farr::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.farr .fl{position:absolute;left:50%;transform:translateX(-50%);bottom:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--mut2);white-space:nowrap;background:var(--code-bg);padding:0 4px}
.farr.plain::after{display:none}
.flow.v{flex-direction:column;align-items:center}
.flow.v .farr{flex:none;width:1.5px;height:30px;min-width:0;margin:3px 0}
.flow.v .farr::after{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(135deg)}
.flow.v .farr .fl{left:auto;right:auto;bottom:auto;top:50%;transform:translate(12px,-50%)}
.dstack{display:flex;flex-direction:column;gap:10px;flex:none}
.dcols{display:flex;gap:26px;align-items:stretch;min-width:min-content}
.dgrp{border:1.5px dashed var(--hair2);padding:22px 18px 18px;position:relative;flex:1;min-width:min-content}
.dgrp>.gl{position:absolute;top:-8px;left:12px;background:var(--code-bg);padding:0 8px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
@media (max-width:640px){.dfig .dbody{padding:20px 14px}.fnode{padding:8px 12px}}
.fnote{border:1.5px dotted var(--hair2);background:var(--code-bg);padding:18px 22px;margin:30px 0 0}
.fnote .fl{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean-700);display:block;margin-bottom:8px}
.fnote p{margin:0;font-size:14.5px;line-height:1.65;color:var(--mut)}
.pq{border-left:2px solid var(--ink);padding:6px 0 6px 26px;margin:34px 0 0;font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.35;letter-spacing:-.015em}
.wavesep{display:block;width:120px;height:14px;margin:48px auto 0;color:var(--ocean-700)}
.endrow{display:flex;align-items:center;gap:16px;margin:56px 0 0;font-family:var(--font-mono);font-size:11.5px;color:var(--mut2)}
.endrow .ln{flex:1;border-top:1px solid var(--hair)}
/* ---- toc rail ---- */
.toc{position:sticky;top:96px;align-self:start;font-size:13px}
.toc .th{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin:0 0 14px;border-bottom:1px solid var(--hair);padding-bottom:9px}
.toc a{display:block;text-decoration:none;color:var(--mut);line-height:1.4;padding:5px 0 5px 14px;border-left:1.5px solid var(--hair)}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);font-weight:600;border-left-color:var(--ink)}
/* ---- prev / next ---- */
.pn2{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);margin:34px 0 0}
.pn2 a{display:block;padding:20px 24px;text-decoration:none;min-width:0}
.pn2 a+a{border-left:1.5px solid var(--ink);text-align:right}
.pn2 .dir{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);display:block;margin-bottom:7px}
.pn2 .ttl{font-family:var(--font-display);font-weight:600;font-size:16.5px;letter-spacing:-.01em;line-height:1.3}
.pn2 a:hover .ttl{color:var(--ocean-700)}
.pn2 .empty{pointer-events:none}
.backrow{margin:70px 0 96px}
.artpage .backrow{margin-top:0}
@media (max-width:1100px){.artgrid{grid-template-columns:minmax(0,720px);gap:0}.toc{display:none}}
@media (max-width:920px){.bwrap{padding:0 28px}.feat{grid-template-columns:1fr}.featr{border-left:0;border-top:1.5px solid var(--ink)}.prow{grid-template-columns:1fr 90px;gap:8px 22px}.prow .pd{order:3}.prow .ptag{order:1}.prow .pmin{order:2}.prow .pt2{order:4;grid-column:1/-1}}
@media (max-width:640px){.bwrap{padding:0 20px}.bmast{padding-top:40px}.bkick{flex-direction:column;gap:6px}.artgrid{padding-top:38px}.pn2{grid-template-columns:1fr}.pn2 a+a{border-left:0;border-top:1.5px solid var(--ink);text-align:left}.feat h2{font-size:26px}.featl{padding:24px 22px 22px}}