/* Site chrome: the bar that ties the three versions together, plus the hub page. */

/* ---------- top bar ---------- */

.sitebar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 22px;
  min-height: 56px;
  background: rgba(251,250,248,.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E6E3DE;
}

.sitebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fsw-ink);
}

.sitebar .mark {
  width: 27px; height: 27px;
  border-radius: 7px;
  background: var(--app);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
}

.sitebar .brand b {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .01em;
}

.sitebar .brand span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #9A958C;
  border-left: 1px solid #DDD8D0;
  padding-left: 10px;
  margin-left: 2px;
}

.vswitch { display: flex; align-items: center; gap: 5px; padding: 6px 0; }

.vswitch a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: #6E6A63;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}

.vswitch a:hover { background: #F1EEE9; color: var(--fsw-ink); }

.vswitch a.is-on {
  background: var(--white);
  border-color: #DCD7CE;
  color: var(--fsw-ink);
  box-shadow: var(--shadow-s);
}

.vswitch a i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  color: #A8A296;
}
.vswitch a.is-on i { color: var(--app); }

/* ---------- hub page ---------- */

.hub { max-width: 1120px; margin: 0 auto; padding: 0 22px 80px; }

.hero { padding: 74px 0 46px; border-bottom: 1px solid #E6E3DE; }

.hero .kicker {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fsw-orange-d);
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.hero .kicker::after { content: ''; flex: 1 1 auto; height: 1px; background: #E6E3DE; }

.hero h1 {
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(40px, 7.4vw, 82px);
  line-height: .96;
  letter-spacing: -.01em;
  margin: 0 0 22px;
  max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--app); }

.hero .lede {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  max-width: 62ch;
  color: #55595C;
  margin: 0 0 30px;
}

.dossier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: #E6E3DE;
  border: 1px solid #E6E3DE;
  border-radius: var(--r-s);
  overflow: hidden;
  max-width: 760px;
}

.dossier div { background: var(--paper); padding: 13px 15px; }

.dossier dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A29C92;
  margin: 0 0 3px;
}
.dossier dd { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--fsw-ink); }

/* version cards */

.versions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 20px;
  padding: 46px 0 0;
}

.vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #E6E3DE;
  border-radius: var(--r-m);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-s);
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s;
}

.vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: #D2CCC2; }

.vcard .top {
  position: relative;
  height: 208px;
  overflow: hidden;
  background: var(--app);
  display: grid;
  place-items: center;
  border-bottom: 1px solid #E6E3DE;
}

.vcard .num {
  position: absolute;
  top: 12px; left: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.62);
  letter-spacing: .08em;
  z-index: 3;
}

/* miniature phone used as card artwork */
.mini {
  width: 118px; height: 244px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(10,25,35,.32);
  overflow: hidden;
  transform: translateY(24px);
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.22,.85,.3,1);
}
.vcard:hover .mini { transform: translateY(16px); }

.mini .mtop { height: 20px; background: #F4F6F7; flex: 0 0 auto; }
.mini .mbody { flex: 1 1 auto; padding: 7px; display: grid; gap: 5px; align-content: start; }
.mini .row { height: 21px; border-radius: 4px; background: #EDF1F3; }
.mini .row.a { background: var(--app-xl); }
.mini .row.tall { height: 33px; }
.mini .bar { height: 9px; border-radius: 3px; background: #E3E8EB; }
.mini .bar.s { width: 58%; }

.vcard .bot { padding: 18px 19px 21px; display: flex; flex-direction: column; flex: 1 1 auto; }

.vcard h2 {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.08;
  margin: 0 0 4px;
  letter-spacing: .005em;
}

.vcard .by {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #A29C92;
  margin: 0 0 11px;
}

.vcard p { font-size: 14.5px; line-height: 1.55; color: #62666A; margin: 0 0 16px; flex: 1 1 auto; }

.vcard .tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 16px; }
.vcard .tags span {
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: #F2F4F5;
  color: #5E6A72;
}

.vcard .cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--app);
}
.vcard .cta svg { width: 16px; height: 16px; transition: transform .17s; }
.vcard:hover .cta svg { transform: translateX(4px); }

/* generic hub section */

.sec { padding: 54px 0 0; }

.sec h3 {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #A29C92;
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 13px;
}
.sec h3::after { content: ''; flex: 1 1 auto; height: 1px; background: #E6E3DE; }

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 30px;
}

.cols h4 {
  font-size: 16px; font-weight: 600; margin: 0 0 7px;
  color: var(--fsw-ink);
}
.cols p { font-size: 14.5px; line-height: 1.6; color: #62666A; margin: 0; }

.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { border-bottom: 1px solid #EDEAE4; }
.linklist a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 2px;
  text-decoration: none; color: var(--fsw-ink);
  font-size: 14.5px;
}
.linklist a:hover { color: var(--app); }
.linklist code {
  font-family: var(--mono); font-size: 12px; color: #8B857B;
  overflow-wrap: anywhere;
}

.sitefoot {
  margin-top: 62px;
  padding: 22px 0 0;
  border-top: 1px solid #E6E3DE;
  font-size: 13px;
  color: #918B81;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}

@media (max-width: 700px) {
  .hero { padding: 44px 0 34px; }
  .sitebar { padding: 0 15px; }
  .hub { padding: 0 15px 56px; }
}

/* Narrow phones: the version switcher must scroll, never widen the document.
   Without min-width:0 the flex item refuses to shrink and forces h-scroll. */
@media (max-width: 620px) {
  .sitebar { padding: 0 12px; gap: 10px; min-height: 50px; flex-wrap: nowrap; }
  .sitebar .brand { flex: 0 0 auto; }
  .sitebar .brand span { display: none; }
  .vswitch {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .vswitch::-webkit-scrollbar { display: none; }
  .vswitch a { padding: 6px 10px; font-size: 12.5px; }
}