/* raul-guides93-v1: free template / how-to pages. On top of base.css + pages.css. */
body.gd .hero{padding-bottom:10px}
body.gd .hero h1{font-size:clamp(2.1rem,5vw,4rem);max-width:21ch}
.crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 18px;padding:0;list-style:none;font:500 .86rem var(--f-b);color:var(--sub)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.gnote{margin-top:16px;font:500 .9rem var(--f-b);color:var(--sub)}
.btn .fi{font:700 .7rem var(--f-m);padding:.25em .5em;border-radius:6px;background:var(--hl);color:#111318;letter-spacing:.04em}
/* the worked example */
.gprev{max-width:900px;margin:clamp(36px,5vw,56px) auto 0;padding:clamp(16px,2.6vw,26px);text-align:left}
.gprev .gph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;font:700 1rem var(--f-h);color:var(--ink)}
.gprev .gph small{font:600 .68rem var(--f-b);letter-spacing:.12em;text-transform:uppercase;color:var(--sub);text-align:right}
@media (max-width:640px){.gprev .gph{flex-direction:column;gap:4px}.gprev .gph small{text-align:left}}
.gtw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.gt{width:100%;border-collapse:collapse;font:500 .9rem/1.45 var(--f-b);min-width:520px}
.gt th{font:700 .72rem var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--sub);text-align:left;padding:10px 12px;background:color-mix(in srgb,var(--bg2) 80%,transparent)}
.gt td{padding:10px 12px;border-top:1px solid var(--line);color:var(--text);vertical-align:top}
.gt td.n,.gt th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gt tfoot td{font-weight:600;color:var(--ink)}
.gt tfoot tr:last-child td{font-weight:700;background:color-mix(in srgb,var(--hl) 35%,transparent)}
/* prose blocks */
.gsec{padding-block:clamp(44px,6vw,80px)!important}
.gsec h2{margin-bottom:18px}
.gpro{max-width:760px;margin:0 auto}
.gsec>.gpro{box-sizing:content-box;padding-inline:clamp(18px,5vw,40px)}
.gpro p{font-size:1.06rem}.gpro p+p{margin-top:14px}
.gpro a,.gfl a,.gtips a{text-decoration:underline;text-decoration-color:var(--hl-2);text-underline-offset:3px;text-decoration-thickness:2px}
.gpro a.btn{text-decoration:none}
.gfl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:26px 0 0;padding:0;list-style:none}
.gfl li{padding:20px 22px}
.gfl b{display:block;font:700 1.05rem var(--f-h);color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.gfl span{display:block;color:var(--sub);font-size:.96rem;line-height:1.6}
@media (max-width:760px){.gfl{grid-template-columns:1fr}}
.gtips{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.gtips li{display:flex;gap:12px;font-size:1rem;line-height:1.65}
.gtips li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-top:.62em}
.gtips b{color:var(--ink)}
/* Raul card */
.graul{max-width:900px;margin:0 auto;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.graul h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:10px 0 12px}
.graul p{color:var(--sub)}
.graul ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.graul li{display:flex;gap:10px;font-size:.97rem;line-height:1.6}
.graul li::before{content:"\2713";flex:none;color:var(--teal);font-weight:700}
.graul .btn{margin-top:20px}
@media (max-width:760px){.graul{grid-template-columns:1fr}}
/* hub */
.ghub{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:40px;text-align:left}
.ghub article{padding:24px;display:flex;flex-direction:column}
.ghub b{display:block;font:700 1.15rem var(--f-h);color:var(--ink);margin-bottom:6px}
.ghub p{color:var(--sub);font-size:.94rem;line-height:1.55;flex:1}
.ghub .acts{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font:600 .9rem var(--f-b)}
.ghub .acts a{color:var(--ink);text-decoration:none;background:linear-gradient(transparent 58%,var(--hl) 58%)}
:root[data-theme="dark"] .gt th{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .btn.blue .fi{background:#111318;color:var(--hl)}
:root[data-theme="dark"] .gt tfoot tr:last-child td{background:rgba(255,225,77,.12)}