/* ==========================================================================
   Osteostep — site styles
   Ported from the "Osteostep Website" Claude Design bundle.
   The design carries most styling inline on the elements themselves; this
   sheet holds the global rules, the hover states the design expressed as
   style-hover attributes, and the responsive behaviour it drove from JS.
   ========================================================================== */

:root{
  --ink:#2c3238;
  --muted:#5c666f;
  --blue:#23a9e0;
  --blue-d:#0f83b4;
  --blue-dd:#0b6b93;
  --line:#dde5ea;
  --line-strong:#2c3238;
  --field:#c3ced6;
  --dark:#10222e;
}

*{box-sizing:border-box}
body{margin:0;background:linear-gradient(135deg,#c9e4f4 0%,#e3f1fa 24%,#ffffff 50%,#e3f1fa 76%,#c9e4f4 100%) fixed;background-attachment:fixed;min-height:100vh;color:var(--ink);font-family:'Source Sans 3',system-ui,sans-serif;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--blue-d);text-underline-offset:4px}
a:hover{color:var(--blue-dd)}
h1,h2,h3,p{text-wrap:pretty}
img{max-width:100%}
[hidden]{display:none !important}

/* The design toggles layout on JS-measured width (wide = >860px). Media
   queries do the same without a flash of the wrong layout on first paint. */
@media(max-width:860px){ [data-wide]{display:none !important} }
@media(min-width:861px){ [data-narrow]{display:none !important} }

/* style-hover -> real hover rules ------------------------------------------ */
.ulink{color:var(--muted);text-decoration:none}
.ulink:hover{color:var(--blue-d)}
.nlink{color:var(--ink);text-decoration:none}
.nlink:hover{color:var(--blue-d)}
.flink{color:var(--muted);text-decoration:none}
.flink:hover{color:var(--blue-d)}

.btn-o{text-decoration:none;border:1px solid var(--blue-d);color:var(--blue-d);padding:9px 20px;border-radius:4px;font-size:15px;background:none;font:inherit;cursor:pointer;display:inline-block;min-height:40px}
.btn-o:hover{background:var(--blue-d);color:#fff}

.btn-solid{background:var(--blue-d);color:#fff;border:none;padding:13px 26px;border-radius:4px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;min-height:44px}
.btn-solid:hover{background:var(--blue-dd)}

.btn-bright{background:var(--blue);color:var(--dark);text-decoration:none;padding:13px 24px;border-radius:4px;font-weight:600;display:inline-block}
.btn-bright:hover{background:#fff;color:var(--dark)}

.btn-ghost{background:none;border:1px solid var(--blue-d);color:var(--blue-d);padding:11px 20px;border-radius:4px;font:inherit;font-size:15px;cursor:pointer;min-height:44px;text-decoration:none;display:inline-block}
.btn-ghost:hover{background:var(--blue-d);color:#fff}

/* audience cards on the home page */
.acard{text-decoration:none;color:var(--ink);background:transparent;transition:background .15s}
.acard:hover{background:rgba(255,255,255,.45)}

/* hero "Explore our science" */
.herolink{color:#fff;text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:4px}
.herolink:hover{color:#fff;text-decoration-thickness:2px}

/* the accordion rows under "Where our work applies" */
.arow{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 0;background:none;border:none;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.arow:hover{color:var(--blue-d)}

/* "Read biography" toggles */
.biotoggle{margin-top:12px;background:none;border:none;padding:6px 0;font:inherit;font-size:15px;color:var(--blue-d);cursor:pointer;text-align:left}
.biotoggle:hover{color:var(--blue-dd)}

/* anchors must clear the sticky header on a cold load of /#about */
html{scroll-behavior:smooth}
main [id]{scroll-margin-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

:focus-visible{outline:2px solid var(--blue-d);outline-offset:2px}
::selection{background:rgba(35,169,224,.22)}

/* Skip link — invisible until focused */
.skip{position:absolute;left:-9999px;top:0;z-index:70;background:#fff;color:var(--ink);font-size:15px;padding:10px 16px;border:1px solid var(--line)}
.skip:focus{left:8px;top:8px}

/* Honeypot: off-screen rather than display:none, since some bots skip hidden
   fields. Removed from the tab order and the accessibility tree in the markup. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}