/* ============================================================
   Sharon S. Newman — personal site
   Warm / personal direction
   Display:  Fraunces (soft serif)
   Body:     Mulish (humanist sans)
   Utility:  IBM Plex Mono (dates, labels, skills — the computational signal)
   ============================================================ */

:root {
   --ground:   #F3EBDF;   /* warm wheat paper */
   --surface:  #FBF6EE;   /* raised cards */
   --ink:      #2B2520;   /* espresso near-black */
   --muted:    #877A6B;   /* warm taupe */
   --line:     #E2D7C6;   /* hairline on paper */
   --accent:   #C0426A;   /* raspberry — fluorescent stain */
   --accent-ink:#9A3052;  /* darker raspberry for text/links */
   --accent-2: #CF9026;   /* honey — used sparingly */

   --wrap: 1080px;
   --radius: 16px;
   --radius-sm: 10px;
   --shadow: 0 1px 2px rgba(43,37,32,.04), 0 8px 24px rgba(43,37,32,.06);

   --ff-display: "Fraunces", Georgia, serif;
   --ff-body: "Mulish", system-ui, -apple-system, sans-serif;
   --ff-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
   margin: 0;
   background: var(--ground);
   color: var(--ink);
   font-family: var(--ff-body);
   font-size: 17px;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
   border-radius: 3px;
}

h1, h2, h3 { font-family: var(--ff-display); font-weight: 500; line-height: 1.12; margin: 0; }

/* ---- layout helpers ---- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.section { padding: 84px 0; scroll-margin-top: 76px; }
.section + .section { padding-top: 0; }

.eyebrow {
   font-family: var(--ff-mono);
   font-size: 12px;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--accent-ink);
   margin: 0 0 14px;
   display: flex;
   align-items: center;
   gap: 10px;
}
.eyebrow::before {
   content: "";
   width: 22px; height: 2px;
   background: var(--accent);
   display: inline-block;
}

.section-title { font-size: clamp(28px, 4vw, 40px); margin-bottom: 36px; letter-spacing: -.01em; }

/* ============================================================
   Top navigation
   ============================================================ */
.nav {
   position: sticky;
   top: 0;
   z-index: 50;
   background: color-mix(in srgb, var(--ground) 88%, transparent);
   backdrop-filter: saturate(140%) blur(8px);
   border-bottom: 1px solid var(--line);
}
.nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   max-width: var(--wrap);
   margin: 0 auto;
   padding: 14px 24px;
}
.brand {
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 18px;
   letter-spacing: -.01em;
   color: var(--ink);
   display: flex;
   align-items: center;
   gap: 9px;
}
.brand:hover { text-decoration: none; }
.brand .dot {
   width: 11px; height: 11px; border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
   flex: none;
}
.nav-links {
   display: flex;
   align-items: center;
   gap: 26px;
   list-style: none;
   margin: 0; padding: 0;
}
.nav-links a {
   font-family: var(--ff-mono);
   font-size: 13px;
   letter-spacing: .02em;
   color: var(--ink);
}
.nav-links a:hover { color: var(--accent-ink); text-decoration: none; }
.nav-links a.active { color: var(--accent-ink); }
.nav-links a.nav-cv {
   border: 1px solid var(--accent);
   color: var(--accent-ink);
   padding: 7px 14px;
   border-radius: 999px;
}
.nav-links a.nav-cv:hover { background: var(--accent); color: #fff; }

.nav-toggle {
   display: none;
   background: none; border: 1px solid var(--line);
   border-radius: 8px;
   padding: 8px 10px;
   cursor: pointer;
   color: var(--ink);
   font-family: var(--ff-mono);
   font-size: 13px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: 72px 0 64px; }
.hero-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr;
   gap: 56px;
   align-items: center;
}
.hero h1 {
   font-size: clamp(40px, 7vw, 76px);
   font-weight: 500;
   letter-spacing: -.02em;
   margin: 6px 0 0;
}
.hero h1 .last { color: var(--accent-ink); font-style: italic; font-weight: 400; }
.hero .tagline {
   font-family: var(--ff-display);
   font-size: clamp(19px, 2.4vw, 24px);
   line-height: 1.3;
   color: var(--ink);
   margin: 22px 0 0;
   max-width: 30ch;
}
.hero .intro { color: var(--ink); margin: 20px 0 0; max-width: 46ch; }
.hero .intro .wink { color: var(--accent-ink); border-bottom: 1px dotted var(--accent); }
.hero .intro .wink:hover { background: color-mix(in srgb, var(--accent-2) 22%, transparent); text-decoration: none; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }

.btn {
   display: inline-flex; align-items: center; gap: 9px;
   background: var(--accent); color: #fff;
   font-family: var(--ff-mono); font-size: 13px; letter-spacing: .02em;
   padding: 12px 20px; border-radius: 999px;
   border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; text-decoration: none; }

.social { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.social a {
   display: grid; place-items: center;
   width: 40px; height: 40px;
   border: 1px solid var(--line);
   border-radius: 50%;
   color: var(--ink);
   background: var(--surface);
}
.social a:hover { color: var(--accent-ink); border-color: var(--accent); text-decoration: none; }
.social svg { width: 18px; height: 18px; }

/* portrait with offset halo */
.portrait { position: relative; justify-self: center; max-width: 320px; }
.portrait::before {
   content: "";
   position: absolute; inset: 18px -18px -18px 18px;
   border-radius: var(--radius);
   background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, var(--ground)), var(--accent-2));
   z-index: 0;
}
.portrait img {
   position: relative; z-index: 1;
   border-radius: var(--radius);
   width: 100%;
   box-shadow: var(--shadow);
}

/* ============================================================
   About
   ============================================================ */
.about-body { max-width: 64ch; }
.about-body p { margin: 0 0 18px; }

/* ============================================================
   Experience — connected timeline (the signature element)
   ============================================================ */
.timeline { position: relative; }
.timeline::before {
   content: "";
   position: absolute;
   left: 11px; top: 8px; bottom: 8px;
   width: 2px;
   background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 25%, var(--line)));
}
.xp { position: relative; padding-left: 48px; padding-bottom: 22px; }
.xp:last-child { padding-bottom: 0; }
.xp::before {
   content: "";
   position: absolute; left: 4px; top: 26px;
   width: 16px; height: 16px; border-radius: 50%;
   background: var(--accent);
   border: 4px solid var(--ground);
   box-shadow: 0 0 0 1px var(--line);
}
.xp-card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 22px 24px;
   box-shadow: var(--shadow);
}
.xp-head { display: flex; align-items: flex-start; gap: 16px; }
.xp-logo {
   flex: none;
   width: 50px; height: 50px;
   border-radius: var(--radius-sm);
   background: #fff;
   border: 1px solid var(--line);
   display: grid; place-items: center;
   overflow: hidden;
}
.xp-logo img { width: 38px; height: 38px; object-fit: contain; }
.xp-logo.mono {
   background: var(--ink);
   color: var(--ground);
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 20px;
}
.xp-role { font-size: 19px; font-weight: 600; }
.xp-org { color: var(--muted); font-size: 15px; margin-top: 2px; }
.xp-date {
   font-family: var(--ff-mono); font-size: 12px; letter-spacing: .02em;
   color: var(--accent-ink);
   white-space: nowrap;
   margin-left: auto;
   padding-top: 4px;
}
.xp-card p { margin: 14px 0 0; }
.xp-card ul { margin: 12px 0 0; padding: 0; list-style: none; }
.xp-card ul li { position: relative; padding-left: 20px; margin: 8px 0; }
.xp-card ul li::before {
   content: ""; position: absolute; left: 2px; top: 11px;
   width: 6px; height: 6px; border-radius: 50%;
   background: var(--accent-2);
}

/* ============================================================
   Skills — mono chips
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
   font-family: var(--ff-mono); font-size: 13px;
   padding: 8px 14px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--surface);
   color: var(--ink);
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ============================================================
   Teaching — card grid
   ============================================================ */
.grid-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tcard {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 22px 24px;
   box-shadow: var(--shadow);
}
.tcard h3 { font-size: 18px; font-weight: 600; }
.tcard .meta { font-family: var(--ff-mono); font-size: 12px; color: var(--accent-ink); margin: 8px 0 0; }
.tcard p { margin: 12px 0 0; font-size: 15px; }

/* ============================================================
   Honors
   ============================================================ */
.honors { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.honors li {
   display: flex; align-items: baseline; gap: 14px;
   padding: 14px 0;
   border-bottom: 1px solid var(--line);
}
.honors li:last-child { border-bottom: 0; }
.honors .award { font-weight: 600; }
.honors .yr { font-family: var(--ff-mono); font-size: 13px; color: var(--accent-ink); margin-left: auto; white-space: nowrap; }
.honors .star { color: var(--accent-2); flex: none; }

/* ============================================================
   Publications — numbered catalog
   ============================================================ */
.pub-note { margin: 0 0 26px; font-size: 15px; color: var(--muted); }
.pubs { list-style: none; counter-reset: pub; margin: 0; padding: 0; max-width: 820px; }
.pubs li {
   counter-increment: pub;
   position: relative;
   padding: 18px 0 18px 52px;
   border-top: 1px solid var(--line);
}
.pubs li::before {
   content: counter(pub, decimal-leading-zero);
   position: absolute; left: 0; top: 18px;
   font-family: var(--ff-mono); font-size: 13px;
   color: var(--accent-ink);
}
.pubs .me { font-weight: 700; }
.pubs .venue { font-style: italic; color: var(--muted); }

/* ============================================================
   Presentations
   ============================================================ */
.talks { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.talks li { padding: 14px 0; border-top: 1px solid var(--line); }
.talks .me { font-weight: 700; }
.talks .award-tag {
   font-family: var(--ff-mono); font-size: 11px; letter-spacing: .04em;
   color: var(--accent-2);
   border: 1px solid var(--accent-2);
   border-radius: 999px; padding: 2px 8px;
   margin-left: 6px; white-space: nowrap;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
   margin-top: 84px;
   border-top: 1px solid var(--line);
   background: var(--surface);
}
.footer-inner {
   display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
   gap: 24px;
   padding: 40px 0;
}
.footer h2 { font-size: 24px; }
.footer .contact-line { font-family: var(--ff-mono); font-size: 14px; margin-top: 10px; }
.footer .social a { background: var(--ground); }
.footer .colophon { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); margin-top: 24px; }
.footer-flourish { max-width: 220px; opacity: .9; }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
   .hero-grid { grid-template-columns: 1fr; gap: 40px; }
   .portrait { order: -1; justify-self: start; max-width: 240px; }
   .grid-cards { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
   body { font-size: 16px; }
   .section { padding: 60px 0; }
   .nav-toggle { display: inline-block; }
   .nav-links {
      position: absolute;
      top: 100%; left: 0; right: 0;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      background: var(--ground);
      border-bottom: 1px solid var(--line);
      padding: 12px 24px 20px;
      display: none;
   }
   .nav-links.open { display: flex; }
   .nav-links li { width: 100%; }
   .nav-links a { display: block; padding: 8px 0; font-size: 15px; }
   .nav-links a.nav-cv { display: inline-block; margin-top: 8px; }
   .xp-head { flex-wrap: wrap; }
   .xp-date { margin-left: 0; width: 100%; padding-top: 2px; }
   .footer-flourish { display: none; }
}

@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   .reveal { opacity: 1; transform: none; transition: none; }
}