/* Guides — editorial content section. Text-forward by design: no stock
   photography stands in for the destinations, since none has been sourced
   or verified yet. The kinetic-cartography language (grid, monospace,
   radar green) carries the identity instead. */

.guides-page{background:#04080b;color:var(--paper)}
.guides-page header#nav{
  position:sticky;top:0;
  background:rgba(4,8,11,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* ---------- index ---------- */
.guides-hero{padding:150px 6% 60px;max-width:1180px;margin:0 auto}
.guides-hero .g-eyebrow{
  display:block;margin-bottom:22px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--radar);
}
.guides-hero h1{
  font-family:'Italiana',Georgia,serif;
  font-size:clamp(38px,6vw,72px);line-height:1.04;margin:0 0 20px;letter-spacing:-.01em;
}
.guides-hero p{
  font-size:clamp(15px,1.6vw,19px);line-height:1.7;color:rgba(245,240,231,.68);
  max-width:58ch;margin:0;
}

.guides-grid{
  max-width:1180px;margin:0 auto;padding:20px 6% 110px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;
}
.guide-card{
  display:flex;flex-direction:column;gap:14px;
  padding:30px 26px;border:1px solid rgba(245,240,231,.1);
  background:rgba(245,240,231,.02);
  text-decoration:none;color:inherit;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.guide-card:hover{border-color:rgba(255,90,46,.45);transform:translateY(-3px)}
.guide-card .g-tag{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--aqua);
}
.guide-card h3{
  margin:0;font-size:clamp(19px,2vw,23px);line-height:1.28;
  font-weight:500;color:var(--paper);letter-spacing:-.01em;
}
.guide-card p{margin:0;font-size:14px;line-height:1.65;color:rgba(245,240,231,.6)}
.guide-card .g-read{
  margin-top:auto;padding-top:6px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--radar);
}

/* ---------- individual guide ---------- */
.guide-main{max-width:760px;margin:0 auto;padding:150px 6% 100px}
.guide-back{
  display:inline-block;margin-bottom:38px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.1em;color:rgba(245,240,231,.55);text-decoration:none;
}
.guide-back:hover{color:var(--aqua)}
.guide-tag{
  display:block;margin-bottom:20px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--radar);
}
.guide-main h1{
  font-family:'Italiana',Georgia,serif;
  font-size:clamp(34px,5.2vw,58px);line-height:1.06;margin:0 0 20px;letter-spacing:-.01em;
}
.guide-dek{
  font-size:clamp(15px,1.7vw,19px);line-height:1.65;color:rgba(245,240,231,.68);
  margin:0 0 46px;padding-bottom:34px;border-bottom:1px solid rgba(255,90,46,.22);
}

.guide-body h2{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--radar);
  margin:50px 0 18px;padding-left:32px;position:relative;
}
.guide-body h2::before{
  content:'';position:absolute;left:0;top:.62em;width:20px;height:1px;background:var(--radar);
}
.guide-body p{font-size:16px;line-height:1.85;color:rgba(245,240,231,.76);margin:0 0 18px}
.guide-body strong{color:var(--paper);font-weight:600}
.guide-body em{font-style:italic;color:rgba(245,240,231,.9)}
.guide-body a{color:var(--aqua);text-decoration:none;border-bottom:1px solid rgba(255,90,46,.4)}
.guide-body a:hover{border-bottom-color:var(--aqua)}
.guide-body ul{margin:0 0 20px;padding-left:22px}
.guide-body li{margin-bottom:9px;font-size:16px;line-height:1.8;color:rgba(245,240,231,.76)}
.guide-body li::marker{color:var(--aqua)}

.guide-body table{
  width:100%;border-collapse:collapse;margin:8px 0 30px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
}
.guide-body th,.guide-body td{
  padding:11px 13px;text-align:left;border-bottom:1px solid rgba(245,240,231,.1);
}
.guide-body th{
  color:var(--radar);font-weight:500;letter-spacing:.04em;
  font-size:10px;text-transform:uppercase;border-bottom:1px solid rgba(255,90,46,.35);
}
.guide-body td{color:rgba(245,240,231,.8)}
.guide-body tr:last-child td{color:var(--paper);font-weight:600;border-bottom:none}

.guide-search-cta{
  margin:46px 0 10px;padding:26px 28px;
  border:1px solid rgba(255,90,46,.3);background:rgba(255,90,46,.05);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.guide-search-cta span{font-size:15px;color:rgba(245,240,231,.8);max-width:44ch}
.guide-search-cta a{
  flex:0 0 auto;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--aqua);color:#04080b;padding:13px 22px;text-decoration:none;font-weight:600;
}
.guide-search-cta a:hover{background:var(--paper)}

.guide-note{
  margin-top:44px;padding:18px 22px;
  border:1px solid rgba(245,240,231,.12);background:rgba(245,240,231,.02);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;line-height:1.7;color:rgba(245,240,231,.5);
}

@media (max-width:700px){
  .guide-main{padding:120px 7% 70px}
  .guide-body h2{padding-left:0}
  .guide-body h2::before{display:none}
  .guide-body table{font-size:11px}
  .guide-body th,.guide-body td{padding:8px}
}

/* ---------- real editorial photos (Wikimedia Commons, credited) ---------- */
.guide-photo{margin:30px 0 34px}
.guide-photo img{
  width:100%;height:auto;display:block;
  border:1px solid rgba(245,240,231,.1);
}
.guide-photo figcaption{
  margin-top:10px;font-size:13px;line-height:1.6;color:rgba(245,240,231,.55);
}
.guide-photo .photo-credit{
  display:block;margin-top:6px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;letter-spacing:.03em;color:rgba(245,240,231,.4);
}
.guide-photo .photo-credit a{color:rgba(245,240,231,.5);border-bottom-color:rgba(245,240,231,.2)}
.guide-photo .photo-credit a:hover{color:var(--aqua);border-bottom-color:var(--aqua)}