/* ==========================================================
   OZ4HN — stylesheet
   Theme: vintage radio dial / paper logbook
   ========================================================== */

:root{
  --navy:        #16212e;
  --navy-2:      #1f2f40;
  --cream:       #f4ecda;
  --cream-2:     #ece1c8;
  --paper:       #fbf7ec;
  --amber:       #c97f3a;
  --amber-bright:#e0993f;
  --teal:        #3c5a6e;
  --ink:         #232323;
  --ink-soft:    #4a4a46;
  --rule:        #d8cdb0;

  --display: 'Courier Prime', 'Courier New', monospace;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
}

img{max-width:100%; display:block;}
a{color:var(--teal); text-decoration:none;}
a:hover{color:var(--amber);}
a:focus-visible, button:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--navy);
  margin:0 0 .5em;
}
h1{font-size:1.9rem;}
h2{font-size:1.3rem; text-transform:uppercase; letter-spacing:.08em;}
h3{font-size:1.05rem; color:var(--teal);}

p{margin:0 0 1em;}

/* ---------- top bar : callsign strip ---------- */
.callstrip{
  background:var(--navy);
  color:var(--cream-2);
  font-family:var(--display);
  font-size:.78rem;
  letter-spacing:.12em;
  text-align:center;
  padding:.45em 1em;
  text-transform:uppercase;
}
.callstrip span{color:var(--amber-bright);}

/* ---------- header / nav ---------- */
header.site{
  background:var(--paper);
  position:sticky; top:0; z-index:50;
  border-bottom:3px solid var(--amber);
}
.nav-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.7em 1.2em;
  gap:1.5em;
  flex-wrap:wrap;
}
.brand{
  font-family:var(--display);
  color:var(--cream);
  font-size:1.15rem;
  letter-spacing:.06em;
}
.brand b{color:var(--amber-bright);}
nav.main ul{
  list-style:none; display:flex; gap:.2em; margin:0; padding:0; flex-wrap:wrap;
}
nav.main a{
  display:block;
  color:var(--navy);
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.5em .7em;
  border-radius:3px;
}
nav.main a:hover{background:var(--cream-2); color:var(--amber);}
nav.main a.active{color:var(--paper); background:var(--amber);}
.lang-switch{
  display:flex; gap:.4em; font-family:var(--display); font-size:.78rem;
}
.lang-switch a{
  color:var(--navy); border:1px solid var(--teal); padding:.25em .55em; border-radius:3px;
}
.lang-switch a.active{background:var(--amber); color:var(--paper); border-color:var(--amber);}

/* ---------- banner ---------- */
.banner{
  width:100%;
  overflow:hidden;
  background:var(--navy);
  border-bottom:1px solid var(--rule);
}
.banner img{width:100%; height:auto; max-height:170px; object-fit:cover; margin:0 auto;}

/* ---------- main layout ---------- */
main{max-width:var(--maxw); margin:0 auto; padding:2.4em 1.2em 4em;}

.lede{
  font-family:var(--display);
  font-size:1.05rem;
  color:var(--teal);
  border-left:3px solid var(--amber);
  padding-left:.8em;
  margin-bottom:1.6em;
}

/* dial-style divider */
.dial-rule{
  display:flex; align-items:center; gap:.6em;
  margin:2.6em 0 1.6em;
  color:var(--amber);
  font-family:var(--display);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.dial-rule::before, .dial-rule::after{
  content:""; flex:1; height:1px;
  background:repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 10px);
}

/* ---------- two column ---------- */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:2.4em;}
@media (max-width:720px){.cols{grid-template-columns:1fr;}}

/* ---------- gear card grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:1.4em;
  margin-top:1.2em;
}
.card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:1em 1em 1.2em;
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 6px 16px rgba(22,33,46,.12);}
.card img{
  border:1px solid var(--rule);
  border-radius:3px;
  margin:0 auto .8em;
  background:#fff;
}
.card .label{
  font-family:var(--display);
  font-size:.9rem;
  color:var(--navy);
}
.card .meta{font-size:.78rem; color:var(--ink-soft); margin-top:.3em;}

/* ---------- logbook entry (home signature element) ---------- */
.logbook{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:5px;
  padding:1.2em 1.4em;
  margin:1.6em 0 2.2em;
  font-family:var(--display);
  font-size:.85rem;
  overflow-x:auto;
}
.logbook .row{display:flex; gap:1.6em; padding:.35em 0; border-bottom:1px dashed var(--rule); white-space:nowrap;}
.logbook .row:last-child{border-bottom:none;}
.logbook .row span{color:var(--ink-soft); min-width:90px;}
.logbook .row b{color:var(--amber);}
.logbook .head{color:var(--teal); border-bottom:1px solid var(--rule); padding-bottom:.5em; margin-bottom:.3em;}

/* ---------- QSL gallery + watermark protection ---------- */
.qsl-block{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:5px;
  padding:1.4em;
  margin-bottom:1.8em;
}
.qsl-flex{display:flex; gap:1.6em; flex-wrap:wrap; align-items:flex-start; margin-top:1em;}
.qsl-flex .text{flex:1; min-width:240px;}
.qsl-img-wrap{
  position:relative;
  width:240px;
  flex-shrink:0;
  border:6px solid #fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  user-select:none;
  -webkit-user-select:none;
}
.qsl-img-wrap img{
  pointer-events:none;
  -webkit-user-drag:none;
}
.qsl-img-wrap::after{
  content:"\00a9 OZ4HN";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-size:1.1rem;
  color:rgba(255,255,255,.55);
  letter-spacing:.12em;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  transform:rotate(-22deg);
  pointer-events:none;
  mix-blend-mode:overlay;
  background:repeating-linear-gradient(
    -22deg,
    rgba(0,0,0,0) 0 80px,
    rgba(255,255,255,.05) 80px 81px
  );
}

/* ---------- warning / log table ---------- */
.warn-box{
  background:#fff7ec;
  border:1px solid var(--amber);
  border-left:5px solid var(--amber);
  border-radius:4px;
  padding:1em 1.2em;
  margin-bottom:1.6em;
}
table.spotlog{
  width:100%;
  border-collapse:collapse;
  font-family:var(--display);
  font-size:.8rem;
  margin-top:1em;
}
table.spotlog caption{text-align:left; font-family:var(--body); color:var(--ink-soft); margin-bottom:.5em;}
table.spotlog th{
  text-align:left; text-transform:uppercase; letter-spacing:.06em;
  font-size:.7rem; color:var(--teal);
  border-bottom:2px solid var(--rule);
  padding:.5em .6em;
}
table.spotlog td{
  padding:.5em .6em;
  border-bottom:1px solid var(--rule);
}
table.spotlog tr:nth-child(even) td{background:rgba(201,127,58,.06);}

/* ---------- contact button ---------- */
.btn{
  display:inline-block;
  font-family:var(--display);
  background:var(--amber);
  color:var(--navy);
  padding:.7em 1.4em;
  border-radius:4px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.85rem;
  border:none;
  cursor:pointer;
}
.btn:hover{background:var(--amber-bright); color:var(--navy);}

/* ---------- placeholder image (for missing originals) ---------- */
.ph{
  background:linear-gradient(135deg, var(--teal), var(--navy));
  color:rgba(255,255,255,.65);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:.7rem; text-align:center;
  letter-spacing:.04em; line-height:1.4; padding:.6em;
}

/* ---------- footer ---------- */
footer.site{
  background:var(--paper);
  color:var(--ink-soft);
  text-align:center;
  padding:2em 1em;
  font-size:.82rem;
  border-top:3px solid var(--amber);
}
footer.site .call{
  font-family:var(--display);
  color:var(--teal);
  letter-spacing:.1em;
  font-size:1rem;
  margin-bottom:.4em;
}
footer.site a{color:var(--teal); text-decoration:underline;}
footer.site a:hover{color:var(--amber);}

@media (max-width:600px){
  .nav-wrap{flex-direction:column; align-items:flex-start;}
  h1{font-size:1.5rem;}
}