/* Little Twiglets — shared page styles.
   Loaded by every page. Design tokens live in _ds/…/tokens/. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);letter-spacing:var(--ls-display);line-height:var(--lh-heading);margin:0}
p{margin:0}
a{color:var(--color-primary-hover);text-decoration:none}
a:hover{color:var(--color-primary-press)}
img{display:block;max-width:100%}
section{scroll-margin-top:88px}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--sp-6)}
.overline{font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-overline);font-size:var(--fs-sm);color:var(--lt-tangerine-700)}
.lead{font-size:var(--fs-lg);line-height:var(--lh-snug);color:var(--text-body);text-wrap:pretty}
#root{min-height:100vh}
.lt-social{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:700;color:var(--lt-cocoa);background:var(--lt-sand);border:1.5px solid var(--border-subtle);padding:10px 16px;border-radius:var(--radius-pill);transition:transform var(--dur-fast) var(--ease-bounce),background var(--dur-base) var(--ease-soft)}
.lt-social:hover{color:var(--lt-cocoa);background:var(--lt-leaf-100);transform:translateY(-1px)}
.lt-nav-toggle{display:none}
code{font-family:ui-monospace,monospace;background:var(--lt-sand);padding:2px 6px;border-radius:6px;font-size:0.9em;color:var(--lt-twig)}
@media(max-width:820px){
  .lt-nav-desktop{display:none !important}
  .lt-nav-toggle{display:inline-flex !important}
  .lt-two-col{grid-template-columns:1fr !important}
  .lt-info-grid{grid-template-columns:1fr 1fr !important}
  .lt-hero-collage{grid-template-columns:1fr 1fr !important;grid-template-rows:160px 160px !important}
  .lt-hero-collage>*:first-child{grid-row:auto !important}
  .lt-hero-collage>*:last-child{grid-column:1 / span 2 !important}
}
@media(max-width:520px){
  .wrap{padding:0 var(--sp-4)}
  .lt-info-grid{grid-template-columns:1fr !important}
  .lt-info-grid>*{border-left:none !important;border-top:1.5px solid var(--border-subtle)}
  .lt-info-grid>*:first-child{border-top:none !important}
}

/* Skip link — hidden until a keyboard user tabs to it. */
.lt-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lt-cream);color:var(--lt-cocoa);
  font-family:var(--font-ui);font-weight:700;padding:12px 20px;border-radius:0 0 var(--radius-md) 0;
  box-shadow:var(--shadow-md)}
.lt-skip:focus{left:0}
/* Visible focus ring for keyboard users on every interactive element. */
a:focus-visible,button:focus-visible{outline:3px solid var(--lt-tangerine);outline-offset:2px;border-radius:4px}