.style-guide .page-type{max-width:20ch}.style-guide section[id]{scroll-margin-top:7rem}.sg-tint{background:var(--portfolio-tint)}.sg-note{margin-top:1.5rem;max-width:80ch;font-size:.9rem;line-height:1.65;color:var(--ink-muted)}.sg-note code,.sg-guidance-grid code{font-family:var(--font-geist-mono),monospace;font-size:.86em;overflow-wrap:anywhere}.sg-palette-intro{display:grid;gap:2rem;align-items:center}.sg-portrait{max-width:22rem}.sg-portrait img{width:100%;height:auto;aspect-ratio:1.2;-o-object-fit:cover;object-fit:cover;-o-object-position:center 35%;object-position:center 35%}.sg-palette-intro h3{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:750;line-height:1.1;letter-spacing:-.04em}.sg-palette-intro p{margin-top:1rem;font-size:1.04rem;line-height:1.7;max-width:55ch;color:var(--ink-muted)}.sg-palette-intro a{margin-top:1rem}.sg-swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem;padding:0;list-style:none;margin:3rem 0}.sg-swatch{height:6rem;border:1px solid var(--line-strong);margin-bottom:1rem}.sg-swatches h3{font-size:1.08rem;font-weight:700;letter-spacing:-.02em}.sg-swatches code{display:block;font-family:var(--font-geist-mono),monospace;font-size:.72rem;color:var(--ink-muted);margin-top:.3rem;overflow-wrap:anywhere}.sg-swatches p{font-size:.84rem;line-height:1.55;color:var(--ink-muted);margin-top:.6rem}.sg-swatches .sg-color-value{font-family:var(--font-geist-mono),monospace;font-size:.8rem;color:var(--ink)}.sg-surface-grid{display:grid;gap:1rem}.sg-surface{padding:1.5rem;border:1px solid var(--line-strong)}.sg-surface h3{font-size:1.35rem;font-weight:700;letter-spacing:-.025em}.sg-surface p{font-size:.95rem;line-height:1.6;margin:.75rem 0 1rem;color:var(--ink-muted)}.sg-surface.bg-ink{color:#fff;border-color:var(--ink)}.sg-surface.bg-ink p{color:#c8cbd0}.sg-surface--denim{background:var(--portfolio-blue);color:#fff;border-color:var(--portfolio-blue)}.sg-surface--denim p{color:#d0dce7}.sg-fonts{display:grid;gap:2rem 3rem;margin-bottom:3rem}.sg-fonts article{padding-top:1rem;min-width:0}.sg-font-label{font-size:.87rem;color:var(--ink-muted)}.sg-fonts article>p:last-child{font-size:.98rem;line-height:1.65;color:var(--ink-muted);max-width:50ch}.sg-hanken,.sg-newsreader{font-size:clamp(2.2rem,4vw,3.4rem);letter-spacing:-.055em;line-height:1.1;margin:1.5rem 0}.sg-hanken{font-weight:800}.sg-newsreader{font-family:var(--font-fraunces),Georgia,serif;font-style:italic;color:var(--portfolio-blue)}.sg-mono{font-family:var(--font-geist-mono),monospace;font-size:clamp(.93rem,2.5vw,1.55rem);line-height:1.4;margin:2rem 0}.sg-logo{margin:1.7rem 0}.sg-specimen{min-width:0;margin-top:2.5rem}.sg-specimen-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;gap:1rem 2rem;margin-bottom:1.25rem}.sg-specimen-header>div{min-width:0;flex:1 1 25rem}.sg-specimen-header h3{font-size:1.4rem;font-weight:700;letter-spacing:-.03em;line-height:1.25}.sg-specimen-header p{margin-top:.65rem;max-width:72ch;font-size:.98rem;line-height:1.65;color:var(--ink-muted)}.sg-specimen-header>a{flex-shrink:0;font-size:.85rem}.sg-stage{border:1px solid var(--line-strong);background:var(--paper);padding:clamp(1.25rem,3vw,2.5rem);min-width:0}.sg-stage--dark{background:var(--ink);border-color:var(--ink);color:#fff}.sg-stage>:first-child{margin-top:0}.sg-stage .sg-type-page{max-width:18ch}.sg-type-section{margin-top:3rem}.sg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}.sg-icon-caption{display:inline-flex;gap:.65rem;align-items:center;font-size:.95rem}.sg-markup{border:1px solid var(--line-strong);border-top:0;padding:.3rem 1.25rem;background:var(--paper)}.sg-markup>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:48px;cursor:pointer;font-weight:600;font-size:.9rem;list-style:none}.sg-markup>summary::-webkit-details-marker,.sg-catalogue-group>summary::-webkit-details-marker{display:none}.sg-markup>summary>span{font-size:1.4rem}.sg-markup[open]>summary>span{transform:rotate(45deg)}.sg-markup .code-artifact{margin:.75rem 0 1rem}.sg-demo-form{display:flex;flex-direction:column;gap:1.25rem;max-width:38rem}.sg-field-error{font-size:.88rem;color:var(--portfolio-blue);margin-top:-.7rem}.sg-two-up,.sg-metrics{display:grid;gap:2rem}.sg-stage .article-prose{max-width:48rem;margin-inline:auto}.sg-tools{display:grid;gap:2.5rem;list-style:none;padding:0;margin:0}.sg-tools>li{min-width:0}.sg-tool-link{display:flex;flex-direction:column;height:100%;padding:1rem;border:1px solid #b7c6d2;transition:background .2s,border-color .2s}.sg-tool-link:hover{background:var(--paper);border-color:var(--portfolio-blue)}.sg-tool-link:hover h3{text-decoration:underline;text-underline-offset:5px}.sg-tool-link svg{width:100%;height:auto}.sg-tool-link h3{font-size:1.7rem;font-weight:750;line-height:1.15;letter-spacing:-.035em;margin-top:1.5rem}.sg-tool-link p{font-size:1rem;line-height:1.65;color:var(--ink-muted);margin:.85rem 0 1.5rem}.sg-tool-action{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto;color:var(--portfolio-blue);font-size:.95rem;font-weight:650;text-decoration:underline;text-underline-offset:5px}.sg-guidance-grid{display:grid;gap:2.5rem 4rem;margin-top:3rem}.sg-guidance-grid article{min-width:0;padding-top:1.25rem}.sg-guidance-grid h3{font-size:1.4rem;font-weight:700;letter-spacing:-.03em}.sg-guidance-grid p{font-size:1rem;line-height:1.7;color:var(--ink-muted);margin-top:1rem}.sg-guidance-grid .editorial-link{margin-top:1rem}.sg-widths{margin-top:1.5rem}.sg-widths>div{padding:.8rem 0}.sg-widths dt{display:flex;justify-content:space-between;gap:1rem;font-weight:650}.sg-widths dt code{font-size:.9rem}.sg-widths dt span{font-size:.9rem;color:var(--portfolio-blue)}.sg-widths dd{font-size:.9rem;color:var(--ink-muted);margin-top:.3rem}.sg-motion-sample{display:grid;gap:.5rem;margin-top:1rem;background:var(--portfolio-tint);border-left:3px solid var(--portfolio-blue);padding:1.5rem}.sg-motion-sample strong{font-size:1.4rem;letter-spacing:-.03em;line-height:1.2}.sg-motion-sample span{font-size:.9rem;color:var(--ink-muted)}.sg-motion-replay{animation:sg-entry .7s var(--ease-out) both}.sg-guidance-grid .sg-motion-status{min-height:1.5em;font-size:.85rem;color:var(--portfolio-blue)}.sg-catalogue{margin-top:2.5rem}.sg-catalogue-group>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:72px;cursor:pointer;font-size:clamp(1.2rem,2.5vw,1.7rem);font-weight:700;letter-spacing:-.03em;list-style:none}.sg-catalogue-group>summary>span{display:inline-flex;gap:1rem;align-items:center;font-size:.9rem;color:var(--ink-muted);font-weight:500}.sg-catalogue-group>summary>span>span{font-size:1.4rem}.sg-catalogue-group[open]>summary>span>span{transform:rotate(45deg)}.sg-catalogue-group ul{list-style:none;padding:0 0 1.5rem;margin:0}.sg-catalogue-group li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;gap:.7rem 2rem;padding:1.3rem 0}.sg-catalogue-group li>div{min-width:0;flex:1 1 25rem}.sg-catalogue-group h3{font-size:1.15rem;font-weight:700}.sg-catalogue-group p{font-size:.95rem;line-height:1.65;color:var(--ink-muted);margin-top:.5rem}.sg-catalogue-group code{display:block;margin-top:.65rem;font-family:var(--font-geist-mono),monospace;font-size:.74rem;color:var(--ink-muted);overflow-wrap:anywhere}.sg-catalogue-group a{font-size:.85rem}.style-guide :is(a,button,summary,input,textarea,[tabindex]):focus-visible{outline:3px solid var(--portfolio-blue);outline-offset:4px}.style-guide :is(.sg-surface--denim,.bg-ink) :is(a,button):focus-visible{outline-color:#fff}@media(min-width:640px){.sg-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-metrics{grid-template-columns:1fr 1fr}}@media(min-width:768px){.sg-palette-intro{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem}.sg-fonts,.sg-tools,.sg-guidance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1024px){.sg-swatches{grid-template-columns:repeat(5,minmax(0,1fr))}.sg-surface-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-two-up{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:639px){.sg-stage{padding:1rem}.sg-stage .sg-type-page{font-size:clamp(2.5rem,10vw,3.5rem)}.sg-swatch{height:4.5rem}}@media(prefers-reduced-motion:reduce){.style-guide *,.style-guide *:before,.style-guide *:after{transition:none!important;animation:none!important}}@keyframes sg-entry{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}