/* ============================================================
   Grand Rapids 101
   Editorial layout — long-form sections, pull quotes,
   display stats, sticky in-page nav.
   ============================================================ */

/* ── Page head ───────────────────────────────────────────── */
.gr101-head{
  background:var(--ink); color:var(--on-dark);
  padding-top:calc(74px + clamp(3.5rem,8vw,6.5rem));
  padding-bottom:clamp(3rem,6vw,5rem);
  position:relative; overflow:hidden;
}
.gr101-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--moss), transparent 55%);
}
.gr101-head__inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:end;
}
@media (max-width:860px){ .gr101-head__inner{ grid-template-columns:1fr; } }

.gr101-head h1{
  font-size:var(--step-4); margin:0 0 .8rem;
  line-height:.95;
}
.gr101-head__lede{
  font-size:var(--step-1); color:var(--on-dark-mute);
  line-height:1.55; margin:0; max-width:44ch;
}
.gr101-head__aside{
  display:flex; flex-direction:column; gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark); border-radius:14px; overflow:hidden;
}
.gr101-head__stat{
  background:var(--ink-2); padding:.9rem 1.1rem;
}
.gr101-head__stat dt{
  font-family:var(--ui); font-size:.68rem; font-weight:600;
  letter-spacing:0.04em; color:var(--fog); margin-bottom:.2rem;
}
.gr101-head__stat dd{
  margin:0; font-family:var(--display); font-size:var(--step-1);
  font-weight:700; letter-spacing:-0.02em; color:var(--on-dark);
  line-height:1.1;
}

/* ── In-page nav ─────────────────────────────────────────── */
.gr101-nav{
  position:sticky; top:74px; z-index:90;
  background:var(--paper);
  border-bottom:1px solid var(--line-light);
  overflow-x:auto; scrollbar-width:none;
}
.gr101-nav::-webkit-scrollbar{ display:none; }
.gr101-nav__inner{
  display:flex; align-items:center; gap:0;
  padding:0 var(--gutter);
  min-width:max-content;
}
.gr101-nav__link{
  display:inline-flex; align-items:center;
  padding:.85rem 1.1rem;
  font-family:var(--ui); font-size:.78rem; font-weight:600;
  color:var(--on-light-mute); text-decoration:none;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .22s var(--ease-out), border-color .22s var(--ease-out);
}
.gr101-nav__link:hover,.gr101-nav__link:focus-visible{
  color:var(--on-light); outline:none;
}
.gr101-nav__link.is-active{
  color:var(--moss); border-bottom-color:var(--moss);
}

/* ── Body layout ─────────────────────────────────────────── */
.gr101-body{
  padding-block:clamp(3rem,6vw,5rem);
}
.gr101-section{
  max-width:min(820px, 100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-bottom:clamp(3.5rem,7vw,6rem);
  border-bottom:1px solid var(--line-light);
  scroll-margin-top:calc(74px + 52px + 1rem);
}
.gr101-section:last-child{ border-bottom:none; }

.gr101-section .channel{ margin-bottom:1.25rem; }
.gr101-section h2{
  font-size:var(--step-3); margin:0 0 1.25rem; max-width:18ch;
}
.gr101-section p{
  font-size:var(--step-0); line-height:1.75;
  color:var(--on-light); margin-bottom:1.1rem;
}
.gr101-section p:last-child{ margin-bottom:0; }

/* Pull quote */
.gr101-pull{
  border-left:3px solid var(--moss);
  margin:2rem 0; padding:.75rem 0 .75rem 1.5rem;
}
.gr101-pull p{
  font-family:var(--display); font-size:var(--step-2);
  font-weight:600; letter-spacing:-0.025em;
  line-height:1.2; color:var(--on-light); margin:0;
}
.gr101-pull cite{
  display:block; margin-top:.5rem;
  font-family:var(--ui); font-size:.74rem;
  color:var(--on-light-mute); font-style:normal;
}

/* Stat callout — inline display number */
.gr101-stat{
  display:flex; align-items:baseline; gap:.6rem;
  margin:1.5rem 0;
}
.gr101-stat__n{
  font-family:var(--display); font-size:var(--step-4);
  font-weight:700; letter-spacing:-0.04em; color:var(--moss);
  line-height:1; flex:0 0 auto;
}
.gr101-stat__label{
  font-family:var(--ui); font-size:var(--step--1);
  color:var(--on-light-mute); line-height:1.4; max-width:26ch;
}

/* Term list — for the glossary */
.gr101-terms{ list-style:none; margin:1.5rem 0 0; padding:0; }
.gr101-terms li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(.75rem,3vw,2.5rem);
  padding:1.1rem 0; border-top:1px solid var(--line-light);
  align-items:start;
}
.gr101-terms li:last-child{ border-bottom:1px solid var(--line-light); }
@media (max-width:580px){
  .gr101-terms li{ grid-template-columns:1fr; gap:.35rem; }
}
.gr101-terms dt{
  font-family:var(--display); font-size:var(--step-1);
  font-weight:700; letter-spacing:-0.02em; color:var(--on-light);
  line-height:1.1;
}
.gr101-terms dd{
  margin:0; font-size:var(--step--1); color:var(--on-light-mute);
  line-height:1.65;
}

/* Link cards — for related pages */
.gr101-links{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.85rem; margin-top:1.75rem;
}
.gr101-link{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.1rem 1.15rem; border-radius:14px;
  border:1px solid var(--line-light);
  text-decoration:none; color:inherit;
  background:var(--paper-2);
  transition:border-color .28s var(--ease-out), transform .25s var(--ease-out),
             background-color .28s var(--ease-out);
}
.gr101-link:hover,.gr101-link:focus-visible{
  border-color:var(--moss); transform:translateY(-3px);
  background:var(--paper); outline:none;
}
.gr101-link__label{
  font-family:var(--ui); font-size:.68rem; font-weight:700;
  letter-spacing:0.05em; color:var(--moss); text-transform:uppercase;
}
.gr101-link h3{ font-size:var(--step-0); margin:0; }
.gr101-link p{
  font-size:.82rem; color:var(--on-light-mute); margin:0; line-height:1.5;
}

/* Neighborhood brief grid */
.gr101-nbhd-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:.7rem; margin-top:1.5rem;
}
.gr101-nbhd-card{
  padding:.9rem 1rem; border-radius:12px;
  border:1px solid var(--line-light);
  background:var(--paper-2);
}
.gr101-nbhd-card h3{
  font-size:var(--step-0); margin:0 0 .25rem;
}
.gr101-nbhd-card p{
  font-size:.78rem; color:var(--on-light-mute);
  margin:0; line-height:1.5;
}

/* Transport items */
.gr101-transport{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.65rem; }
.gr101-transport li{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.85rem 1rem; border-radius:12px;
  background:var(--paper-2); border:1px solid var(--line-light);
}
.gr101-transport__icon{
  flex:0 0 36px; width:36px; height:36px; border-radius:50%;
  background:var(--ink); display:grid; place-items:center;
  font-size:1rem; line-height:1;
}
.gr101-transport__body{ flex:1 1 auto; }
.gr101-transport__body strong{
  display:block; font-family:var(--ui); font-size:.84rem;
  font-weight:700; color:var(--on-light); margin-bottom:.2rem;
}
.gr101-transport__body span{
  font-size:.8rem; color:var(--on-light-mute); line-height:1.5;
}

/* Verify notice */
.gr101-verify{
  background:var(--paper-2); border:1px solid var(--line-light);
  border-left:3px solid var(--copper);
  border-radius:0 10px 10px 0;
  padding:.75rem 1rem; margin-top:1.25rem;
  font-family:var(--ui); font-size:.76rem; color:var(--on-light-mute);
  line-height:1.55;
}

/* ── Editorial note tooltip ──────────────────────────────── */
.gr101-note-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--on-light-mute);
  font-family:var(--ui); font-size:.65rem; font-weight:700;
  color:var(--on-light-mute); cursor:default;
  vertical-align:middle; margin-left:.55rem;
  position:relative; flex:0 0 18px;
  transition:border-color .2s var(--ease-out), color .2s var(--ease-out);
  /* Keep it inline with the heading */
  top:-.1em;
}
.gr101-note-icon:hover,.gr101-note-icon:focus-visible{
  border-color:var(--copper); color:var(--copper); outline:none;
}

/* Tooltip pill */
.gr101-note-icon::after{
  content:attr(data-note);
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:min(320px, 80vw);
  background:var(--ink); color:var(--on-dark);
  font-size:.72rem; font-weight:400; line-height:1.55;
  letter-spacing:0; text-transform:none;
  padding:.65rem .9rem; border-radius:10px;
  border:1px solid var(--line-dark);
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.7);
  opacity:0; pointer-events:none; white-space:normal;
  text-align:left;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
  z-index:10;
}
/* Arrow */
.gr101-note-icon::before{
  content:'';
  position:absolute;
  bottom:calc(100% + 4px);
  left:50%; transform:translateX(-50%) translateY(4px);
  border:5px solid transparent;
  border-top-color:var(--line-dark);
  opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
  z-index:11;
}
.gr101-note-icon:hover::after,
.gr101-note-icon:focus-visible::after{
  opacity:1; transform:translateX(-50%) translateY(0);
}
.gr101-note-icon:hover::before,
.gr101-note-icon:focus-visible::before{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ── Harder stuff section specifics ─────────────────────── */
.gr101-harder h3{
  font-size:var(--step-1); margin:1.75rem 0 .45rem;
}
.gr101-harder h3:first-of-type{ margin-top:0; }

.gr101-harder .gr101-flock-stance{
  background:var(--ink); color:var(--on-dark);
  border-left:3px solid var(--copper);
  border-radius:0 10px 10px 0;
  padding:1rem 1.15rem; margin:1rem 0;
  font-size:var(--step--1); line-height:1.65;
}
.gr101-harder .gr101-flock-stance a{
  color:var(--moss-lt); text-underline-offset:3px;
}
.gr101-harder .gr101-flock-stance a:hover{ color:var(--on-dark); }

/* ── About Grand Rapids page — extends gr101 editorial pattern ── */
.about-gr-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line-light);
  border:1px solid var(--line-light); border-radius:14px; overflow:hidden;
  margin:1.5rem 0;
}
.about-gr-fact{ background:var(--paper-2); padding:.9rem 1rem; }
.about-gr-fact dt{
  font-family:var(--ui); font-size:.68rem; font-weight:600;
  letter-spacing:0.03em; color:var(--fog); margin-bottom:.2rem;
}
.about-gr-fact dd{
  margin:0; font-family:var(--display); font-size:var(--step-0);
  font-weight:700; letter-spacing:-0.02em; color:var(--on-light);
}

.about-gr-timeline{
  list-style:none; margin:1.5rem 0 0; padding:0;
}
.about-gr-timeline li{
  display:grid; grid-template-columns:90px minmax(0,1fr);
  gap:1.25rem; padding:1rem 0; border-top:1px solid var(--line-light);
}
.about-gr-timeline li:last-child{ border-bottom:1px solid var(--line-light); }
@media (max-width:540px){
  .about-gr-timeline li{ grid-template-columns:1fr; gap:.25rem; }
}
.about-gr-timeline__year{
  font-family:var(--display); font-weight:700; font-size:var(--step-1);
  color:var(--moss);
}
.about-gr-timeline__text{ font-size:var(--step--1); color:var(--on-light-mute); line-height:1.65; }

.about-gr-employers{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:.7rem; margin-top:1.25rem;
}
.about-gr-employer{
  padding:.85rem 1rem; border-radius:12px;
  background:var(--paper-2); border:1px solid var(--line-light);
}
.about-gr-employer strong{
  display:block; font-family:var(--ui); font-weight:700; font-size:.85rem;
  color:var(--on-light); margin-bottom:.2rem;
}
.about-gr-employer span{ font-size:.78rem; color:var(--on-light-mute); }