/* ============================================================
   First Time in Grand Rapids
   Companion to gr101.css — same editorial tokens,
   visitor-oriented layout. Lighter, more scannable.
   ============================================================ */

/* ── Page head ───────────────────────────────────────────── */
.ft-head{
  background:var(--ink); color:var(--on-dark);
  padding-top:calc(74px + clamp(3.5rem,8vw,6rem));
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
  position:relative; overflow:hidden;
}
.ft-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--moss), transparent 55%);
}
.ft-head h1{
  font-size:var(--step-4); margin:0 0 .9rem; max-width:16ch;
}
.ft-head__lede{
  font-size:var(--step-1); color:var(--on-dark-mute);
  line-height:1.55; margin:0 0 2rem; max-width:46ch;
}
.ft-head__quick{
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.ft-head__quick a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1.1rem; border-radius:999px;
  font-family:var(--ui); font-size:.8rem; font-weight:600;
  text-decoration:none;
  border:1px solid var(--line-dark); color:var(--on-dark-mute);
  transition:color .25s var(--ease-out), border-color .25s var(--ease-out),
             background-color .25s var(--ease-out);
}
.ft-head__quick a:hover,.ft-head__quick a:focus-visible{
  color:var(--on-dark); border-color:var(--moss-lt);
  background:rgba(87,167,143,0.1); outline:none;
}
.ft-head__quick a::before{
  content:'↓'; font-size:.75rem; opacity:.6;
}

/* ── In-page nav (reuse gr101 pattern) ──────────────────── */
.ft-nav{
  position:sticky; top:74px; z-index:90;
  background:var(--paper);
  border-bottom:1px solid var(--line-light);
  overflow-x:auto; scrollbar-width:none;
}
.ft-nav::-webkit-scrollbar{ display:none; }
.ft-nav__inner{
  display:flex; align-items:center;
  padding:0 var(--gutter); min-width:max-content;
}
.ft-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);
}
.ft-nav__link:hover,.ft-nav__link:focus-visible{
  color:var(--on-light); outline:none;
}
.ft-nav__link.is-active{ color:var(--moss); border-bottom-color:var(--moss); }

/* ── Body ────────────────────────────────────────────────── */
.ft-body{ padding-block:clamp(3rem,6vw,5rem); }

.ft-section{
  max-width:min(820px,100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-bottom:clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--line-light);
  scroll-margin-top:calc(74px + 52px + 1rem);
}
.ft-section:last-child{ border-bottom:none; }
.ft-section .channel{ margin-bottom:1.1rem; }
.ft-section h2{ font-size:var(--step-3); margin:0 0 1.1rem; max-width:20ch; }
.ft-section p{
  font-size:var(--step-0); line-height:1.75;
  color:var(--on-light); margin-bottom:1rem;
}
.ft-section p:last-child{ margin-bottom:0; }

/* Pull quote */
.ft-pull{
  border-left:3px solid var(--moss);
  margin:1.75rem 0; padding:.75rem 0 .75rem 1.5rem;
}
.ft-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;
}

/* Quick-fact strip */
.ft-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px; background:var(--line-light);
  border:1px solid var(--line-light); border-radius:14px;
  overflow:hidden; margin:1.5rem 0;
}
.ft-fact{
  background:var(--paper-2); padding:.85rem 1rem;
}
.ft-fact dt{
  font-family:var(--ui); font-size:.68rem; font-weight:600;
  letter-spacing:0.04em; color:var(--fog); margin-bottom:.2rem;
}
.ft-fact dd{
  margin:0; font-family:var(--display); font-size:var(--step-0);
  font-weight:700; letter-spacing:-0.02em; color:var(--on-light);
}

/* Checklist — "before you go" items */
.ft-checklist{
  list-style:none; margin:1.25rem 0 0; padding:0;
  display:grid; gap:.45rem;
}
.ft-checklist li{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:.75rem .9rem; border-radius:11px;
  background:var(--paper-2); border:1px solid var(--line-light);
  font-size:var(--step--1); line-height:1.55; color:var(--on-light);
}
.ft-checklist li::before{
  content:''; flex:0 0 7px; width:7px; height:7px;
  border-radius:50%; background:var(--moss);
  margin-top:.45rem;
}

/* Weekend grid — two-day suggested flow */
.ft-weekend{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1rem; margin:1.5rem 0;
}
@media (max-width:620px){ .ft-weekend{ grid-template-columns:1fr; } }
.ft-day{
  border:1px solid var(--line-light); border-radius:14px; overflow:hidden;
}
.ft-day__head{
  background:var(--ink); color:var(--on-dark);
  padding:.65rem 1rem;
  font-family:var(--ui); font-size:.72rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
}
.ft-day__body{ padding:.85rem 1rem; }
.ft-day__stop{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.5rem 0; border-top:1px solid var(--line-light);
}
.ft-day__stop:first-child{ border-top:none; padding-top:0; }
.ft-day__stop strong{
  display:block; font-family:var(--ui); font-size:.8rem;
  font-weight:700; color:var(--on-light); line-height:1.2;
}
.ft-day__stop span{
  font-size:.76rem; color:var(--on-light-mute); line-height:1.5;
}
.ft-day__time{
  flex:0 0 52px; font-family:var(--ui); font-size:.68rem;
  font-weight:600; color:var(--fog); padding-top:.15rem;
}

/* Area cards for "where to stay" */
.ft-areas{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:.7rem; margin:1.25rem 0;
}
.ft-area{
  padding:.9rem 1rem; border-radius:12px;
  border:1px solid var(--line-light); background:var(--paper-2);
}
.ft-area h3{ font-size:var(--step-0); margin:0 0 .25rem; }
.ft-area p{ font-size:.78rem; color:var(--on-light-mute); margin:0; line-height:1.5; }
.ft-area__tag{
  display:inline-block; margin-bottom:.45rem;
  font-family:var(--ui); font-size:.65rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--moss);
}

/* Link cards (reuse gr101 pattern) */
.ft-links{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.85rem; margin-top:1.5rem;
}
.ft-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);
}
.ft-link:hover,.ft-link:focus-visible{
  border-color:var(--moss); transform:translateY(-3px);
  background:var(--paper); outline:none;
}
.ft-link__label{
  font-family:var(--ui); font-size:.68rem; font-weight:700;
  letter-spacing:0.05em; color:var(--moss); text-transform:uppercase;
}
.ft-link h3{ font-size:var(--step-0); margin:0; }
.ft-link p{ font-size:.82rem; color:var(--on-light-mute); margin:0; line-height:1.5; }

/* Verify notice */
.ft-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:1rem;
  font-family:var(--ui); font-size:.76rem;
  color:var(--on-light-mute); line-height:1.55;
}