/* =========================
   Tag Me Maybe — About page
   ========================= */

:root{
  --about-bg:#f4efe6;
  --about-card:rgba(255,253,248,.96);
  --about-card-warm:#fff9ee;
  --about-ink:#203536;
  --about-sub:#4d6866;
  --about-line:#8a968f;
  --about-line-soft:rgba(138,150,143,.18);
  --about-brand:#3a63ff;
  --about-warm:#d88d58;
  --about-warm-strong:#b66f3f;
  --about-shadow:0 14px 34px rgba(36,45,42,.075);
  --about-radius:22px;
}

*{box-sizing:border-box}
html,body{min-height:100%}

body.about-page{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--about-ink);
  background:
    linear-gradient(rgba(255,255,255,.20), rgba(255,255,255,.20)),
    linear-gradient(var(--about-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--about-line-soft) 1px, transparent 1px),
    var(--about-bg);
  background-size:auto, 26px 26px, 26px 26px, auto;
  line-height:1.55;
}

body.about-page main{flex:1}

/* Header and footer are intentionally aligned with the landing page proportions. */
#toolbar{
  position:sticky;
  top:0;
  z-index:2000;
  display:block !important;
  height:auto;
  padding:0;
  background:rgba(245,239,228,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(138,150,143,.32);
  box-shadow:none;
}

#toolbar .toolbar-inner{
  width:min(calc(100% - 32px), 1240px);
  min-height:92px;
  margin:0 auto;
  padding:0;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

#toolbar .brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex:0 0 auto;
}

#toolbar .brand-logo{
  height:140px;
  width:auto;
  margin-top:-44px;
  margin-bottom:-44px;
  object-fit:contain;
  display:block;
}

#toolbar .toolbar-inner nav{flex-grow:1}
#toolbar .nav-links{
  list-style:none;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:28px;
  margin:0;
  padding:0;
}
#toolbar .nav-links a{
  color:var(--about-sub);
  text-decoration:none;
  font-weight:750;
  position:relative;
  transition:color 180ms ease;
}
#toolbar .nav-links a:hover{color:var(--about-ink);text-decoration:none}
#toolbar .nav-links a[aria-current="page"]{color:var(--about-ink)}
#toolbar .nav-links a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  border-radius:999px;
  background:var(--about-warm);
}
#toolbar .toolbar-inner .lang-switcher{margin-left:0;display:flex;align-items:center;gap:6px;justify-content:flex-end;flex:0 0 auto}

footer{
  margin-top:auto;
  padding:28px 24px 42px;
  border-top:1px solid rgba(138,150,143,.32);
  color:var(--about-sub);
  text-align:center;
  background:rgba(255,255,255,.18);
}
footer a{color:var(--about-ink);font-weight:750;text-decoration:none}
footer a:hover{text-decoration:underline}

.about-wrap{
  width:min(calc(100% - 32px), 1120px);
  margin:0 auto;
  padding:38px 0 78px;
}

.about-hero,
.content-card,
.timeline-card{
  border:1px solid rgba(138,150,143,.32);
  background:var(--about-card);
  border-radius:var(--about-radius);
  box-shadow:var(--about-shadow);
}

.about-hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.7fr);
  gap:24px;
  align-items:stretch;
  padding:clamp(26px,4vw,42px);
}

.about-hero-copy{display:flex;flex-direction:column;justify-content:center}
.eyebrow-chip,
.section-label,
.badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  border-radius:999px;
  font-weight:850;
}

.eyebrow-chip{
  min-height:36px;
  padding:0 14px;
  border:1px solid rgba(138,150,143,.30);
  background:#fffaf1;
  color:#7b5e35;
  font-size:.9rem;
}

.about-hero h1{
  margin:12px 0 12px;
  font-size:clamp(2.25rem,4.4vw,3.25rem);
  line-height:1;
  letter-spacing:-.045em;
  color:var(--about-ink);
}

.hero-lead{
  margin:0;
  max-width:760px;
  color:var(--about-sub);
  font-size:clamp(1.03rem,1.9vw,1.18rem);
  line-height:1.7;
}

.status-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  min-height:210px;
  padding:24px;
  border:1px solid rgba(216,141,88,.34);
  border-radius:18px;
  background:#fff8eb;
}
.status-topline{display:flex;align-items:center;gap:10px;color:#80613a;font-weight:850;font-size:.92rem}
.status-dot{width:10px;height:10px;border-radius:999px;background:var(--about-warm);box-shadow:0 0 0 6px rgba(216,141,88,.18)}
.status-card h2{margin:0;font-size:clamp(1.22rem,2.2vw,1.55rem);line-height:1.2;letter-spacing:-.025em}
.status-card p{margin:0;color:var(--about-sub);line-height:1.55}

.about-section{margin-top:24px}
.about-card-stack{display:grid;grid-template-columns:1fr;gap:24px}
.content-card{padding:clamp(24px,3.3vw,36px)}

.section-label{
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(138,150,143,.30);
  color:#7b6a51;
  background:#fffaf1;
  font-size:.78rem;
  letter-spacing:.015em;
  text-transform:uppercase;
}

.content-card h2,
.section-heading h2{
  margin:10px 0 14px;
  font-size:clamp(1.45rem,3vw,2.05rem);
  line-height:1.1;
  letter-spacing:-.035em;
}
.content-card p,
.section-heading p,
.timeline-card p{color:var(--about-sub);line-height:1.68;font-size:1.02rem}
.content-card p{margin:0 0 13px}.content-card p:last-child{margin-bottom:0}

.how-card{background:var(--about-card-warm)}
.content-layout{margin-top:4px}
.content-layout--with-aside{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  align-items:start;
}
.text-flow{
  max-width:980px;
}
.text-flow .inline-link{margin-top:8px}

.fact-box{
  align-self:stretch;
  border:1px solid rgba(216,141,88,.28);
  border-radius:18px;
  background:rgba(255,255,255,.54);
  padding:18px;
}
.fact-box h3{margin:0 0 12px;font-size:1rem;letter-spacing:-.01em;color:var(--about-ink)}
.fact-box dl{display:grid;gap:12px;margin:0}
.fact-box dl div{padding-top:12px;border-top:1px solid rgba(138,150,143,.18)}
.fact-box dl div:first-child{padding-top:0;border-top:0}
.fact-box dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#80613a;font-weight:850}
.fact-box dd{margin:3px 0 0;color:var(--about-sub);font-weight:650;line-height:1.35}

.inline-link{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 15px;
  border:1px solid rgba(216,141,88,.44);
  border-radius:14px;
  background:#fff6e8;
  color:#7a4a28;
  font-weight:850;
  text-decoration:none;
}
.inline-link:hover{background:#ffefd7;text-decoration:none}

.section-heading{max-width:820px;margin:0 0 16px;text-align:left}
.timeline-section{margin-top:24px;padding:clamp(24px,3.3vw,36px)}
.timeline{
  position:relative;
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
.timeline::before{
  content:"";
  position:absolute;
  top:22px;
  bottom:22px;
  left:13px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(to bottom, rgba(216,141,88,.55), rgba(138,150,143,.26));
}
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.timeline-marker{
  width:28px;
  height:28px;
  margin-top:16px;
  border:2px solid #d6bd91;
  border-radius:999px;
  background:#fffdf8;
  box-shadow:0 0 0 8px rgba(216,141,88,.10);
  z-index:1;
}
.timeline-item.is-current .timeline-marker{
  background:var(--about-warm);
  border-color:var(--about-warm-strong);
  box-shadow:0 0 0 8px rgba(216,141,88,.16);
}
.timeline-card{
  padding:22px 24px;
  box-shadow:none;
  background:#fffdf8;
  min-height:0;
  border-color:rgba(211,194,163,.92);
}
.timeline-card:hover{
  border-color:rgba(216,141,88,.48);
  box-shadow:0 8px 24px rgba(85,65,38,.06);
}
.timeline-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;color:#6f7d70;font-weight:850;font-size:.9rem}
.badge{min-height:26px;padding:0 9px;border:1px solid rgba(138,150,143,.30);background:#fffaf1;color:#7b6a51;font-size:.78rem;text-transform:uppercase;letter-spacing:.02em}
.badge-warm{border-color:rgba(216,141,88,.42);background:#fff0dc;color:#8a4f25}
.timeline-card h3{margin:0 0 6px;font-size:1.25rem;letter-spacing:-.02em}.timeline-card p{margin:0}

.author-section{display:grid;grid-template-columns:1fr}
.author-card{background:#fffdf8}
.author-card p{font-size:1.06rem;max-width:900px}
.author-note{color:var(--about-sub)}
.author-link{color:var(--about-ink);font-weight:850;text-decoration:underline;text-decoration-color:rgba(216,141,88,.55);text-underline-offset:3px}
.author-link:hover{color:#7a4a28;text-decoration-color:#7a4a28}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:12px;top:12px;width:auto;height:auto;padding:.5rem .75rem;background:#fff;border:1px solid #325ff6;border-radius:8px;z-index:3000}

@media(max-width:960px){
  .about-hero{grid-template-columns:1fr}
  .content-layout--with-aside{grid-template-columns:1fr}
  .text-flow{max-width:none}
}
@media(max-width:680px){
  #toolbar .toolbar-inner{flex-wrap:wrap;justify-content:center;gap:12px;padding:6px 0 12px}
  #toolbar .brand-logo{height:118px;margin-top:-38px;margin-bottom:-38px}
  #toolbar .toolbar-inner nav{order:3;flex-basis:100%}
  #toolbar .nav-links{justify-content:center;gap:12px;flex-wrap:wrap;font-size:.94rem}
  #toolbar .toolbar-inner .lang-switcher{margin-left:0}
  .about-wrap{width:min(100% - 24px,1120px);padding-top:24px}
  .about-hero{padding:22px}
  .status-card{min-height:auto}
  .timeline-item{grid-template-columns:22px minmax(0,1fr);gap:12px}
  .timeline-marker{width:22px;height:22px;margin-top:15px}
}
@media print{#toolbar{display:none}.about-wrap{width:100%;padding:0}.about-hero,.content-card,.timeline-card{box-shadow:none}}