/* =====================================================================
   Pilot's Coffee — flightlog.css
   Flight Log page: route map, stats, aircraft note, photo gallery.
   Tokens (--paper/--ink/--rust/fonts) come from styles.css.
   ===================================================================== */

/* page is a normal scrolling document (override the landing's locked body) */
html:has(body.fl){ height:auto; overflow:visible; }
body.fl{
  overflow:visible; height:auto; min-height:100%;
  background:var(--paper); color:var(--ink);
  font-family:var(--cond);
}
body.fl .grain{ position:fixed; }

.fl-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,48px); }

/* faint paper grade behind everything */
.fl-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(176,86,46,.10), transparent 60%),
    radial-gradient(100% 70% at 50% 110%, rgba(36,31,24,.10), transparent 60%),
    var(--paper);
}

/* ---------------- PAGE HEADER ---------------- */
.fl-head{ padding:clamp(108px,15vh,168px) 0 clamp(26px,5vh,52px); text-align:center; }
.fl-kicker{
  font-family:var(--type); letter-spacing:.36em; text-transform:uppercase;
  font-size:clamp(10px,1vw,13px); color:var(--ink-mute); margin:0 0 clamp(14px,2vh,22px);
}
.fl-title{
  font-family:var(--display); text-transform:uppercase; color:var(--ink);
  line-height:.9; letter-spacing:.005em; margin:0;
  font-size:clamp(44px,8vw,118px);
}
.fl-title .ru{ color:var(--rust); }
.fl-sub{
  font-family:var(--type); font-size:clamp(13px,1.25vw,16.5px); line-height:1.75;
  color:var(--ink-soft); max-width:58ch; margin:clamp(18px,3vh,28px) auto 0;
}
.fl-byline{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:max-content; max-width:100%; margin:clamp(22px,3.4vh,32px) auto 0;
  white-space:nowrap;
  font-family:var(--type); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
}
.fl-byline::before, .fl-byline::after{ content:''; flex:0 0 34px; height:1px; background:rgba(36,31,24,.4); }

/* ---------------- MAP ---------------- */
.map-section{ padding-bottom:clamp(30px,6vh,64px); }
.map-wrap{
  position:relative; background:var(--paper-warm);
  border:1.5px solid rgba(36,31,24,.45);
  box-shadow:0 30px 60px -32px rgba(20,12,4,.6), 0 1px 0 rgba(255,255,255,.4) inset;
  border-radius:3px; padding:clamp(8px,1.4vw,16px);
}
/* corner ticks — chart registration marks */
.map-wrap::before, .map-wrap::after{
  content:''; position:absolute; width:16px; height:16px; pointer-events:none;
  border:1.5px solid rgba(36,31,24,.5);
}
.map-wrap::before{ top:7px; left:7px; border-right:none; border-bottom:none; }
.map-wrap::after{ bottom:7px; right:7px; border-left:none; border-top:none; }

.map-caption{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 18px;
  padding:4px clamp(8px,1.2vw,14px) 12px;
  font-family:var(--type); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}
.map-caption .mc-t{ color:var(--ink-soft); letter-spacing:.16em; }

.fm-host{ position:relative; width:100%; }
.fm-svg{ display:block; width:100%; height:auto; overflow:visible; }

/* graticule + regions */
.fm-grat line{ stroke:rgba(36,31,24,.13); stroke-width:1; }
.fm-regions text{
  font-family:var(--type); fill:rgba(60,50,38,.32);
  font-size:13px; letter-spacing:.28em;
}

/* arcs — solid hairlines that plot in */
.fm-arc{
  stroke-linecap:round;
  transition:stroke-dashoffset 1.15s cubic-bezier(.4,0,.15,1), opacity .5s, stroke-width .2s;
  transition-delay:calc(var(--i,0) * 24ms);
  opacity:.92;
}
.fm-arc.t1{ stroke:var(--rust);     stroke-width:1.7; }
.fm-arc.t2{ stroke:var(--ink-soft); stroke-width:1.25; opacity:.7; }
.fm-arc.t3{ stroke:var(--ink-mute); stroke-width:1;    opacity:.52; }
.fm-arc.far{ stroke:var(--rust-deep); stroke-width:1.5; opacity:.85; stroke-dasharray:none; }
.drawn .fm-arc{ stroke-dashoffset:0 !important; }
/* hover focus */
.fm-arc.lit{ stroke:var(--rust); stroke-width:2.4; opacity:1; }
.fm-arc.dim{ opacity:.16; }

/* dots */
.fm-dot{
  transform-box:fill-box; transform-origin:center; transform:scale(0); opacity:0;
  transition:transform .5s cubic-bezier(.3,1.5,.5,1), opacity .4s, fill .2s, stroke .2s;
  transition-delay:calc(240ms + var(--i,0) * 16ms);
  cursor:pointer; stroke:var(--paper-warm); stroke-width:1.4;
}
.drawn .fm-dot{ transform:scale(1); opacity:1; }
.fm-dot.t1{ fill:var(--rust); }
.fm-dot.t2{ fill:var(--ink-soft); }
.fm-dot.t3{ fill:var(--ink-mute); }
.fm-dot.far{ fill:var(--rust-deep); stroke:var(--paper); stroke-width:1.8; }
.fm-dot.hub{ fill:var(--rust); stroke-width:2; }
.fm-dot:focus{ outline:none; }
.fm-dot.lit{ transform:scale(1.55); fill:var(--rust); }
.fm-dot.dim{ opacity:.3; }

/* labels */
.fm-labels text, .fm-lab{
  font-family:var(--cond); font-weight:600; fill:var(--ink-soft);
  font-size:12.5px; letter-spacing:.06em;
  opacity:0; transition:opacity .5s; transition-delay:.7s;
}
.drawn .fm-lab{ opacity:.92; }
.fm-lab.hub{ fill:var(--rust-deep); font-weight:700; font-size:13.5px; }
.fm-lab.far{ fill:var(--rust-deep); }

/* home base marker */
.fm-home-core{ fill:var(--rust); stroke:var(--paper); stroke-width:2; }
.fm-home-ring{ fill:none; stroke:var(--rust); }
.fm-home-ring.r2{ stroke-opacity:.55; stroke-width:1.4; }
.fm-home-ring.r3{ stroke-opacity:.3; stroke-width:1.2; }
.drawn .fm-home-ring{ animation:fmpulse 3.4s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.drawn .fm-home-ring.r2{ animation-delay:.5s; }
@keyframes fmpulse{
  0%{ transform:scale(.55); opacity:.9; }
  70%{ opacity:0; }
  100%{ transform:scale(1.5); opacity:0; }
}
.fm-home-lab{
  font-family:var(--cond); font-weight:700; fill:var(--ink);
  font-size:13px; letter-spacing:.14em;
  opacity:0; transition:opacity .5s; transition-delay:.4s;
}
.drawn .fm-home-lab{ opacity:1; }

/* compass */
.fmc-ring{ fill:none; stroke:rgba(36,31,24,.5); stroke-width:1.2; }
.fmc-ring.thin{ stroke-opacity:.3; stroke-dasharray:2 4; }
.fmc-star{ fill:var(--rust); stroke:var(--ink); stroke-width:.6; }
.fmc-n{ font-family:var(--cond); font-weight:700; fill:var(--ink-soft); font-size:12px; letter-spacing:.1em; }

/* tooltip */
.fm-tip{
  position:absolute; z-index:5; left:0; top:0; transform:translate(-50%,-118%) translateY(-8px);
  min-width:150px; max-width:230px; padding:11px 14px 12px;
  background:var(--cream); border:1.5px solid var(--ink); border-radius:2px;
  box-shadow:0 14px 28px -16px rgba(20,12,4,.7); pointer-events:none;
  opacity:0; transition:opacity .16s, transform .16s; display:flex; flex-direction:column; gap:3px;
}
.fm-tip.show{ opacity:1; transform:translate(-50%,-118%); }
.fm-tip::after{
  content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%) rotate(45deg);
  width:11px; height:11px; background:var(--cream); border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
}
/* flipped variant — tip sits BELOW the dot (arrow on top) for top-row fields */
.fm-tip.below{ transform:translate(-50%, 14px) translateY(-6px); }
.fm-tip.below.show{ transform:translate(-50%, 14px); }
.fm-tip.below::after{
  top:-7px; bottom:auto;
  border-right:none; border-bottom:none;
  border-left:1.5px solid var(--ink); border-top:1.5px solid var(--ink);
}
.ft-code{ font-family:var(--display); font-size:21px; color:var(--ink); line-height:1; letter-spacing:.02em; }
.ft-city{ font-family:var(--cond); font-weight:600; font-size:13px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.ft-name{ font-family:var(--type); font-size:11px; color:var(--ink-mute); letter-spacing:.03em; }
.ft-visits{ font-family:var(--type); font-size:11px; color:var(--rust-deep); letter-spacing:.08em; margin-top:3px; }

/* legend */
.map-legend{
  display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:center;
  padding:16px 8px 4px;
  font-family:var(--type); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
}
.lg{ display:inline-flex; align-items:center; gap:8px; }
.lg .sw{ width:26px; height:0; border-top-width:2px; border-top-style:solid; }
.lg .sw.t1{ border-color:var(--rust); }
.lg .sw.t2{ border-color:var(--ink-soft); }
.lg .sw.far{ border-color:var(--rust-deep); }
.lg .dotmark{ width:11px; height:11px; border-radius:50%; background:var(--rust); border:2px solid var(--paper-warm); box-shadow:0 0 0 1px rgba(36,31,24,.3); }

/* ---------------- STATS ---------------- */
.stats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:rgba(36,31,24,.3); border:1.5px solid rgba(36,31,24,.4); border-radius:3px;
  margin:clamp(34px,7vh,72px) 0; overflow:hidden;
}
.stat{ background:var(--paper); padding:clamp(20px,3vh,34px) 14px; text-align:center; }
.stat .num{
  font-family:var(--display); font-size:clamp(34px,4.6vw,62px); color:var(--ink); line-height:.92;
}
.stat .num .u{ font-size:.42em; color:var(--rust); margin-left:.12em; }
.stat .lab{
  font-family:var(--type); font-size:clamp(9.5px,.85vw,11.5px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:10px;
}
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:last-child{ grid-column:1 / -1; }
}

/* ---------------- AIRCRAFT NOTE ---------------- */
.aircraft{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(14px,3vw,40px);
  padding:clamp(22px,4vh,40px) clamp(20px,4vw,48px); margin-bottom:clamp(30px,6vh,64px);
  border:1.5px solid rgba(36,31,24,.4); border-radius:3px; background:var(--paper-warm);
  text-align:center;
}
.ac-mark{ font-family:var(--display); text-transform:uppercase; font-size:clamp(20px,2.4vw,30px); color:var(--ink); letter-spacing:.02em; }
.ac-mark .ru{ color:var(--rust); }
.ac-sep{ width:1px; height:34px; background:rgba(36,31,24,.3); }
.ac-meta{ font-family:var(--type); font-size:12px; line-height:1.7; letter-spacing:.04em; color:var(--ink-soft); text-align:left; }
.ac-meta b{ color:var(--ink); }
.ac-tails{ font-family:var(--type); font-size:11px; letter-spacing:.14em; color:var(--ink-mute); }

/* ---------------- PHOTO GALLERY ---------------- */
.gallery-section{ padding-bottom:clamp(40px,8vh,90px); }
.gallery-head{ text-align:center; margin-bottom:clamp(22px,4vh,40px); }
.gallery-head .gh-k{ font-family:var(--type); letter-spacing:.34em; text-transform:uppercase; font-size:11px; color:var(--ink-mute); margin:0 0 12px; }
.gallery-head h2{ font-family:var(--display); text-transform:uppercase; font-size:clamp(30px,4.6vw,60px); color:var(--ink); margin:0; line-height:.92; }
.gallery-head p{ font-family:var(--type); font-size:13px; line-height:1.7; color:var(--ink-soft); max-width:54ch; margin:16px auto 0; }

.gallery{
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.6vw,20px);
}
.photo-card{
  position:relative; background:var(--cream); padding:10px 10px 0; border:1px solid rgba(36,31,24,.28);
  box-shadow:0 14px 26px -18px rgba(20,12,4,.55); border-radius:2px;
  display:flex; flex-direction:column;
}
.photo-card:nth-child(3n+1){ transform:rotate(-.7deg); }
.photo-card:nth-child(3n+2){ transform:rotate(.5deg); }
.photo-card:nth-child(3n+3){ transform:rotate(-.3deg); }
.photo-card .tape{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:64px; height:18px; background:rgba(176,86,46,.22);
  border:1px dashed rgba(176,86,46,.5); z-index:2;
}
.photo-card image-slot{ display:block; width:100%; border-radius:1px; overflow:hidden; background:#1a140d; }
.photo-card.wide image-slot{ aspect-ratio:16 / 9; }
.photo-card.med  image-slot{ aspect-ratio:4 / 3; }
.photo-card.tall image-slot{ aspect-ratio:3 / 4; }
.photo-card.sm   image-slot{ aspect-ratio:1 / 1; }
.photo-cap{
  font-family:var(--type); font-size:11px; letter-spacing:.04em; color:var(--ink-mute);
  padding:9px 2px 11px; text-align:center; line-height:1.5;
}
.photo-cap b{ color:var(--ink-soft); font-weight:400; display:block; letter-spacing:.1em; text-transform:uppercase; font-size:10px; }

/* swipe-strip counter — mobile only */
.gallery-count{ display:none; }

/* span patterns for a field-notebook collage */
.photo-card.wide{ grid-column:span 4; }
.photo-card.tall{ grid-column:span 2; }
.photo-card.med{ grid-column:span 3; }
.photo-card.sm{ grid-column:span 2; }
@media (max-width:820px){
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .photo-card{ min-width:0; }
  .photo-card image-slot{ min-width:0; }
  .photo-card.wide,.photo-card.tall,.photo-card.med,.photo-card.sm{ grid-column:span 1; }
  .photo-card.wide{ grid-column:span 2; }
}

/* ---------------- PHONE TUNING (≤ 600px) ---------------- */
@media (max-width:600px){
  .fl-head{ padding-top:clamp(98px,13vh,140px); }
  .fl-sub{ font-size:14px; line-height:1.7; }
  .ac-meta{ font-size:12.5px; }
  .map-caption{ font-size:10px; }

  /* MAP — fit to height and pan sideways like a real chart on a small table.
     Horizontal-only scroll keeps the labels legible without trapping the page. */
  /* edge-to-edge: let the chart span the whole phone like an unrolled map */
  .map-section{ margin-left:calc(-1 * clamp(18px,4vw,48px)); margin-right:calc(-1 * clamp(18px,4vw,48px)); }
  .map-wrap{ border-radius:0; border-left:none; border-right:none; padding-left:0; padding-right:0; }
  .map-wrap::before, .map-wrap::after{ display:none; }
  .map-caption, .map-legend{ padding-left:16px; padding-right:16px; }
  .fm-host.fm-pan{
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    touch-action:pan-x; cursor:grab; scrollbar-width:none;
    border:1px solid rgba(36,31,24,.16); border-left:none; border-right:none; border-radius:0;
  }
  .fm-host.fm-pan::-webkit-scrollbar{ display:none; }
  .fm-pan .fm-svg{ width:auto; height:62vh; max-height:520px; }
  .fm-pan .fm-lab{ font-size:13.5px; }
  .fm-pan .fm-home-lab{ font-size:14px; }
  .fm-pan .fm-regions text{ font-size:14px; }
  /* swipe affordance, fades after first pan */
  .fm-swipe{
    position:absolute; right:10px; bottom:10px; z-index:6; pointer-events:none;
    display:inline-flex; align-items:center; gap:7px;
    padding:7px 13px; border-radius:30px;
    background:rgba(36,31,24,.85); color:var(--cream);
    font-family:var(--type); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
    animation:fmSwipeNudge 1.7s ease-in-out infinite; transition:opacity .4s;
  }
  .fm-swipe::after{ content:'\21C4'; font-size:14px; letter-spacing:0; }
  .fm-host.fm-panned .fm-swipe{ opacity:0; }
  @keyframes fmSwipeNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-5px); } }

  /* GALLERY — horizontal film-strip instead of an endless vertical stack.
     Six (or any number of) frames stay one swipe tall. */
  .gallery{
    display:flex; grid-template-columns:none; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x;
    scrollbar-width:none;
    margin:0 calc(-1 * clamp(18px,4vw,48px));
    padding:6px clamp(18px,4vw,48px) 14px;
    scroll-padding-left:clamp(18px,4vw,48px);
  }
  .gallery::-webkit-scrollbar{ display:none; }
  .photo-card{
    flex:0 0 80%; max-width:340px; min-width:0;
    scroll-snap-align:start; grid-column:auto !important; transform:none !important;
  }
  .photo-card image-slot,
  .photo-card.wide image-slot,
  .photo-card.med image-slot,
  .photo-card.tall image-slot,
  .photo-card.sm image-slot{ aspect-ratio:4 / 3 !important; }
  /* strip counter */
  .gallery-count{
    display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px;
    font-family:var(--type); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
  }
  .gc-track{ display:inline-flex; gap:6px; }
  .gc-dot{ width:6px; height:6px; border-radius:50%; background:rgba(36,31,24,.24); transition:background .2s, transform .2s; }
  .gc-dot.on{ background:var(--rust); transform:scale(1.35); }
}

/* ---------------- BACK / FOOT LINK ---------------- */
.fl-return{ text-align:center; padding:8px 0 clamp(40px,8vh,80px); }
.fl-return a{
  font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:14px; color:var(--ink-soft); text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  border-bottom:1.6px solid transparent; padding-bottom:4px; transition:color .2s, border-color .2s, gap .2s;
}
.fl-return a:hover{ color:var(--rust-deep); border-color:var(--rust); gap:15px; }