/* ==========================================================================
   Agora Research — shared styles
   Design system v3 (8.8.2026)
   ========================================================================== */

:root{
  /* palette */
  --ghost:#F2F2F8;
  --white:#FFFFFF;
  --ink:#161616;
  --ink-2:#5D5D6B;
  --sky:#ADF1FF;
  --sky-deep:#8FE3F5;
  --peach:#FCC99C;
  --coral:#F67451;
  --hair:#DBDBE4;

  /* type */
  --serif:"Instrument Serif","Cormorant Garamond",Georgia,serif;
  --heavy:"Archivo Black","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --hand:"Caveat","Bradley Hand",cursive;

  /* metrics */
  --measure:34rem;
  --wide:58rem;
  --gut:1.5rem;
  --navh:4.6rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ghost);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
::selection{background:var(--sky)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ==========================================================================
   Liquid glass nav
   ========================================================================== */

.nav{
  position:sticky;top:0;z-index:100;
  padding:1.375rem 1rem .75rem;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;min-height:var(--navh);
}
.nav > *{pointer-events:auto}

/* glass surface, shared */
.glass{
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(20px) saturate(185%);
  -webkit-backdrop-filter:blur(20px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 8px 26px rgba(22,22,22,.14);
}

/* mark — hard top-left */
.brand{
  position:fixed;left:.75rem;top:.75rem;z-index:101;
  display:block;line-height:0;cursor:default;user-select:none;
  padding:.55rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(20px) saturate(185%);
  -webkit-backdrop-filter:blur(20px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 8px 26px rgba(22,22,22,.14);
}
.brand img{height:34px;width:auto}

/* get in touch — mirror of the brand pill, hard top-right */
.contact{
  position:fixed;right:.75rem;top:.75rem;z-index:101;
  display:inline-flex;align-items:center;gap:.5rem;
  height:52px;padding:0 1.25rem;border-radius:999px;
  font-size:.84rem;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;color:var(--ink);white-space:nowrap;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(20px) saturate(185%);
  -webkit-backdrop-filter:blur(20px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 8px 26px rgba(22,22,22,.14);
  transition:background .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
.contact:hover{
  background:rgba(255,255,255,.66);transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 14px 34px rgba(22,22,22,.18);
}

/* one pill. sub-links live inside it, between Research and Writing. */
.pill{
  display:flex;align-items:center;gap:2px;
  height:40px;padding:0 5px;border-radius:999px;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(20px) saturate(185%);
  -webkit-backdrop-filter:blur(20px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 8px 26px rgba(22,22,22,.14);
}
.pill a{
  display:flex;align-items:center;gap:.4rem;
  height:30px;padding:0 15px;border-radius:999px;
  font-size:.82rem;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;color:var(--ink);white-space:nowrap;
  transition:background .2s ease;
}
.pill a:hover{background:rgba(255,255,255,.62)}
.pill a[aria-current="page"]{
  background:rgba(255,255,255,.8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 1px 4px rgba(22,22,22,.08);
}
.pill svg{width:15px;height:15px;display:block}

/* the drawer that pulls out of the bar inside a section */
.pill .sub{
  display:flex;align-items:center;gap:.1rem;
  margin:0 .22rem;padding:0 .28rem;
  border-left:1px solid rgba(22,22,22,.15);
  border-right:1px solid rgba(22,22,22,.15);
  animation:drawer .45s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes drawer{
  from{opacity:0;transform:scaleX(.72);transform-origin:left center}
  to{opacity:1;transform:none}
}
.pill .sub a{
  height:28px;padding:0 .72rem;font-size:.74rem;font-weight:600;opacity:.74;
}
.pill .sub a:hover{opacity:1}
.pill .sub a[aria-current="page"]{
  opacity:1;background:rgba(255,255,255,.82);
  box-shadow:0 0 0 1px rgba(246,116,81,.55);
}

@media (max-width:820px){
  .nav{justify-content:flex-end;padding:.7rem .7rem}
  .brand{left:.6rem;top:.6rem;padding:.42rem .75rem}
  .brand img{height:26px}
  .contact{display:none}
  .pill{max-width:calc(100vw - 8.5rem);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pill::-webkit-scrollbar{display:none}
  .pill a{padding:.4rem .66rem;font-size:.76rem}
  .pill .sub a{padding:.36rem .55rem;font-size:.7rem}
}

/* ==========================================================================
   Shared bits
   ========================================================================== */

.glassbtn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:999px;
  font-family:var(--body);font-size:.95rem;font-weight:600;
  text-decoration:none;color:var(--ink);border:0;cursor:pointer;
  background:rgba(255,255,255,.44);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 8px 26px rgba(22,22,22,.16);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), background .22s ease, box-shadow .22s ease;
}
.glassbtn:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.66);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 14px 34px rgba(22,22,22,.2);
}
.glassbtn .arr{color:var(--coral);font-weight:700}

.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gut)}

.eyebrow{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral);margin:0 0 .9rem;
}

h1,h2,h3{text-wrap:balance}

footer.site{
  border-top:1px solid var(--ink);
  margin-top:3.5rem;padding:1.3rem 0 3rem;
  font-size:.78rem;color:var(--ink-2);line-height:1.6;
}
footer.site a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--coral)}
footer.site a:hover{background:var(--peach)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}