/* =====================================================================
   Pilot's Coffee — about.css
   The founder's story as a logbook. Tokens come from styles.css,
   page shell + reveals + footer come from coffee.css.
   ===================================================================== */

.ab{ background:var(--paper); }
.ab-wrap{ max-width:1160px; margin:0 auto; padding:0 clamp(20px,5vw,56px); }

/* ---------------- HERO ---------------- */
.ab-hero{
  padding-top:clamp(78px,13vh,132px); padding-bottom:clamp(48px,8vh,86px);
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(30px,5vw,72px); align-items:center;
}
.ab-hero .kicker{ display:block; margin-bottom:clamp(14px,2.2vh,22px); }
.ab-title{
  font-family:var(--display); text-transform:uppercase; color:var(--ink);
  font-size:clamp(40px,6.6vw,92px); line-height:.9; letter-spacing:.005em;
}
.ab-title .accent{ color:var(--rust); }
.ab-lede{
  font-family:var(--type); color:var(--ink-soft);
  font-size:clamp(14px,1.35vw,18px); line-height:1.8;
  max-width:34ch; margin-top:clamp(18px,2.6vh,28px);
  padding-top:clamp(16px,2.4vh,24px); border-top:1.5px solid rgba(60,50,38,.35);
}

/* ---- airman certificate card ---- */
.cert{
  position:relative; background:var(--cream); color:var(--ink);
  border:1px solid rgba(60,50,38,.28); border-radius:3px;
  padding:clamp(20px,2.4vw,30px);
  transform:rotate(-1.2deg);
  box-shadow:0 26px 52px -26px rgba(20,12,4,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.cert::after{ /* punched edge, same language as the boarding-pass concept */
  content:''; position:absolute; left:0; right:0; bottom:clamp(52px,5vw,64px);
  border-top:2px dashed rgba(60,50,38,.35);
}
.cert-top{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:2px solid var(--ink);
}
.cert-top img{ height:26px; width:auto; display:block; }
.cert-top span{
  font-family:var(--type); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-mute);
}
.cert-role{
  font-family:var(--display); text-transform:uppercase; color:var(--ink);
  font-size:clamp(26px,2.9vw,38px); line-height:.94; margin-bottom:clamp(16px,2vh,22px);
}
.cert dl{ display:grid; gap:13px; margin-bottom:clamp(22px,3vh,32px); }
.cert dt{
  font-family:var(--type); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:3px;
}
.cert dd{
  font-family:var(--cond); font-weight:600; font-size:clamp(14px,1.15vw,16px);
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
}
.cert dd.live{ color:var(--rust-deep); }
.cert-strip{
  height:34px; opacity:.8;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 7px, transparent 7px 12px, var(--ink) 12px 14px, transparent 14px 19px);
}

/* ---------------- LOGBOOK ---------------- */
/* z-index 1 keeps the plane (z-index 0) flying BEHIND the copy, same as home */
.ab-log{ position:relative; z-index:1; padding-top:clamp(20px,4vh,44px); padding-bottom:clamp(40px,7vh,80px); }
.ab-log::before{ /* the route the entries hang off */
  content:''; position:absolute; top:0; bottom:0; left:clamp(9px,3.2vw,40px);
  border-left:2px dashed rgba(60,50,38,.4);
}
.leg{ position:relative; padding-left:clamp(38px,7.5vw,104px); margin-bottom:clamp(38px,6vh,70px); }
.leg::before{ /* waypoint stamp on the route */
  content:''; position:absolute; top:7px; left:clamp(2px,3.2vw,33px);
  width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:3px solid var(--rust);
}
.leg-meta{
  font-family:var(--type); font-size:clamp(10px,.92vw,12px); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:9px;
}
.leg-head{
  font-family:var(--display); text-transform:uppercase; color:var(--ink);
  font-size:clamp(24px,3.4vw,46px); line-height:.96; margin-bottom:clamp(12px,1.8vh,18px);
}
.leg p{
  font-family:var(--type); color:var(--ink-soft);
  font-size:clamp(13.5px,1.12vw,16px); line-height:1.9;
}
/* asymmetric measure so the column edge is never a straight ruled line */
.leg-01 p{ max-width:56ch; }
.leg-02 p{ max-width:44ch; }
.leg-03 p{ max-width:50ch; }
.leg-04 p{ max-width:41ch; }

/* the daughter's line, pulled out of the paragraph it lives in */
.leg-quote{ margin:clamp(20px,3vh,30px) 0 clamp(16px,2.4vh,24px); }
.leg-quote q{
  display:block; quotes:none;
  font-family:var(--display); text-transform:uppercase; color:var(--rust);
  font-size:clamp(30px,5.4vw,72px); line-height:.92; letter-spacing:.005em;
  max-width:16ch;
}
.leg-quote cite{
  display:block; margin-top:clamp(14px,2.2vh,22px); font-style:normal;
  font-family:var(--type); font-size:clamp(10.5px,.95vw,12.5px);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
}

/* ---------------- ALTITUDE BAND ---------------- */
.ab-alt{
  position:relative; z-index:1; overflow:hidden; background:#1a140d;
  padding:clamp(64px,12vh,132px) clamp(20px,5vw,56px);
}
.ab-alt-photo{
  position:absolute; inset:0;
  background:url('assets/mountains.jpg') center 34%/cover no-repeat;
  filter:sepia(.42) saturate(.7) contrast(1.1) brightness(.62);
}
.ab-alt-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,10,4,.5) 0%, rgba(16,10,4,.22) 45%, rgba(16,10,4,.72) 100%);
}
.ab-alt-inner{ position:relative; z-index:1; max-width:1160px; margin:0 auto; }
.ab-alt h2{
  font-family:var(--display); text-transform:uppercase; color:var(--cream);
  font-size:clamp(32px,5.6vw,78px); line-height:.92;
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.ab-alt h2 .accent{ color:#e08a53; }
.ab-alt p{
  font-family:var(--type); color:rgba(239,231,212,.88);
  font-size:clamp(13.5px,1.15vw,16.5px); line-height:1.9;
  max-width:48ch; margin-top:clamp(18px,2.6vh,28px);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* ---------------- CLOSER ---------------- */
.ab-close{ position:relative; z-index:1; padding-top:clamp(56px,10vh,116px); padding-bottom:clamp(60px,11vh,124px); }
.ab-close-inner{ max-width:60ch; }
.ab-close p{
  font-family:var(--type); color:var(--ink-soft);
  font-size:clamp(14px,1.2vw,17px); line-height:1.95;
}
.ab-sign{
  display:inline-block; margin:clamp(28px,4vh,44px) 0 clamp(26px,4vh,40px);
  padding:clamp(10px,1.6vh,16px) clamp(20px,2.6vw,34px);
  border:3px solid var(--ink); border-radius:3px; transform:rotate(-.7deg);
}
.ab-sign b{
  display:block; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(22px,3vw,38px); line-height:1; color:var(--ink); font-weight:400;
}
.ab-sign span{
  display:block; margin-top:7px; font-family:var(--type); font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
}
.ab-cta{ display:block; }

/* ---------------- DESKTOP: the flight path IS the route ----------------
   Above 820px the entries flank the scroll-driven plane, so the dashed rail
   and the waypoints move onto the centre line the plane actually flies. */
@media (min-width:821px){
  .ab-log::before{ display:none; }
  .leg{ width:calc(50% - 58px); padding-left:0; }
  .leg-02, .leg-04{ margin-left:auto; }
  .leg::before{ top:10px; }
  .leg-01::before, .leg-03::before{ left:auto; right:-66px; }
  .leg-02::before, .leg-04::before{ left:-66px; }
  .leg p, .leg-01 p, .leg-02 p, .leg-03 p, .leg-04 p{ max-width:none; }
  .leg-quote q{ max-width:none; font-size:clamp(28px,3.4vw,52px); }
}

/* ---------------- PHONE ---------------- */
@media (max-width:820px){
  /* one column, so the plane flies behind the text the way it does on home */
  .ab-log::before{ display:none; }
  .leg::before{ display:none; }
  .leg{ padding-left:0; }
  .ab-hero{ grid-template-columns:1fr; gap:clamp(30px,5vh,46px); padding-top:clamp(96px,16vh,132px); }
  .cert{ transform:rotate(-.9deg); max-width:460px; }
  .ab-lede{ max-width:none; }
  .leg p, .leg-01 p, .leg-02 p, .leg-03 p, .leg-04 p{ max-width:none; }
  .leg-quote q{ max-width:none; }
}
@media (max-width:560px){
  .ab-cta .btn{ width:100%; }
}