/* Two-task directory. Shared palette/theme mechanics stay authoritative. */
html{scroll-padding-top:24px}
body.hub-page{--hub-display:"Optima","Candara","Trebuchet MS",sans-serif;font-family:"Avenir Next","Trebuchet MS",Verdana,sans-serif;line-height:1.65}
.utility-header.hub-header{gap:28px;min-height:88px;padding-right:96px}
.hub-header .brand{font-family:var(--hub-display);font-size:30px;font-weight:700;letter-spacing:-.065em}
.hub-header .brand span{color:var(--blue)}
.hub-nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-left:auto}
.hub-nav a{padding:8px 0;font-size:15px;text-decoration:none}
.hub-nav a:hover{text-decoration:underline}
.hub-page .utility-main{padding-top:48px;padding-bottom:48px}
.hub-page .page-heading{max-width:960px;margin-bottom:20px}
.hub-page h1,.hub-page h2,.hub-page h3{font-family:var(--hub-display)}
.hub-page .page-heading h1{font-family:var(--hub-display);font-size:clamp(34px,4.6vw,58px);font-weight:600;line-height:1.1;letter-spacing:-.045em;max-width:21ch;margin:0}
.hub-page .lead{max-width:65ch;font-size:20px;margin:0 0 34px}
.tool-grid{display:grid;gap:20px}
.tool-card{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);column-gap:48px;row-gap:22px;align-items:start;min-width:0;padding:32px;background:var(--white);border:1px solid var(--line);border-radius:20px}
.hub-tool-identity{grid-column:1;grid-row:1;min-width:0}
.tool-icon{display:block;height:56px;width:56px;padding:8px;margin-bottom:18px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;background:var(--soft-blue);border-radius:14px}
.hub-page .tool-card h2{font-size:clamp(25px,2.5vw,32px);font-weight:600;letter-spacing:-.035em;line-height:1.2;margin:0;max-width:19ch}
.hub-tool-details{grid-column:2;grid-row:1/3;min-width:0;max-width:64ch}
.hub-tool-details p{margin:0 0 18px}
.hub-tool-details p:last-child{margin-bottom:0}
.hub-tool-details .example{font-size:15px;color:var(--muted)}
.hub-tool-details .example strong{color:var(--ink);font-weight:650}
.hub-tool-details .limits{font-size:14px;color:var(--muted)}
.tool-link{grid-column:1;grid-row:2;justify-self:start;display:inline-flex;align-items:center;min-height:48px;max-width:100%;padding:11px 18px;border-radius:9px;background:var(--soft-blue);color:var(--blue);font-size:16px;font-weight:700;line-height:1.4;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tool-link:hover{text-decoration-thickness:2px}
.tool-link:focus-visible{outline-offset:5px}
.help-section{padding-block:38px}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 42px}
.help-grid h3{font-size:17px;font-weight:700;margin:12px 0 8px}
.help-grid p{margin:0;color:var(--muted);max-width:65ch}
.about-strip{display:grid;grid-template-columns:2fr 1fr;gap:24px;padding:28px;background:var(--soft);border-radius:14px}
.about-strip p{margin:0;color:var(--muted);max-width:65ch}
.strip-links{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
.strip-links a{padding:3px 0}
.utility-footer{font-size:14px;justify-content:space-between}
.utility-footer nav{display:flex;flex-wrap:wrap;gap:12px 24px}
.utility-footer a{padding:6px 0}
.prose{max-width:75ch}
.prose .intro{font-size:20px}
.prose section{margin-top:32px}
.prose p{margin:12px 0}
.muted{color:var(--muted)}
code{overflow-wrap:anywhere;font-size:.9em}
.tool-grid,.help-section,.about-strip{scroll-margin-top:24px}
@media(max-width:700px){
 .utility-header.hub-header{gap:12px;padding-right:16px;align-items:flex-start}
 .hub-nav{flex-basis:100%;margin:0;gap:4px 20px}
 .hub-page .utility-main{padding-top:30px}
 .hub-page .lead,.prose .intro{font-size:18px}
 .tool-card{grid-template-columns:1fr;gap:20px;padding:24px;border-radius:16px}
 .hub-tool-identity,.hub-tool-details,.tool-link{grid-column:auto;grid-row:auto}
 .tool-icon{height:48px;width:48px;margin-bottom:14px}
 .hub-page .tool-card h2{font-size:27px}
 .help-grid,.about-strip{grid-template-columns:1fr}
 .help-grid{gap:20px}
 .help-section{padding-block:30px}
 .about-strip{padding:24px}
 .utility-footer{gap:12px}
}
@media(forced-colors:active){.tool-card,.about-strip,.tool-link{border:1px solid CanvasText}.tool-icon{stroke:CanvasText}}
@media print{.theme-switcher,.skip-link,noscript{display:none}.tool-card{break-inside:avoid;margin-bottom:20px}.tool-link{color:inherit;background:none}}