/* ==============================
   Alaska Cruise Port Authority
   Authority UI (v2) - richer, still fast
   ============================== */

:root{
  --bg:#0b0d12;
  --panel:#0f1320;
  --fg:#e9eefc;
  --muted:#9aa6c6;
  --border:rgba(255,255,255,.08);
  --accent:#6aa5ff;
  --accent2:#8b5cf6;
  --maxw:1100px;
  --r:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header{
  position:sticky;top:0;z-index:20;
  background:rgba(11,13,18,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
nav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  gap:16px;
  font-weight:700;
}
nav a{padding:6px 10px;border-radius:10px}
nav a:hover{background:rgba(255,255,255,.06);text-decoration:none}

main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:28px 18px 70px;
}

footer{
  border-top:1px solid var(--border);
  color:var(--muted);
  padding:24px 18px;
  max-width:var(--maxw);
  margin:30px auto 0;
  font-size:.92rem;
}

.container{max-width:var(--maxw);margin:0 auto}

.hero{
  padding:26px 18px;
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(106,165,255,.10), rgba(139,92,246,.08));
  border-radius:var(--r);
  margin-bottom:18px;
}
.hero.small{padding:18px}
.kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
h1{
  margin:0 0 10px 0;
  font-size:42px;
  line-height:1.15;
  letter-spacing:-.02em;
}
.hero.small h1{font-size:34px}
.lede{
  margin:0;
  color:var(--muted);
  max-width:70ch;
}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(12, 1fr);
  margin:16px 0 6px;
}
.card{
  grid-column: span 4;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius:var(--r);
  padding:14px 14px 13px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(106,165,255,.45);
  background: rgba(255,255,255,.05);
  text-decoration:none;
}
.card-title{font-weight:900;font-size:16px;color:var(--fg)}
.card-desc{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45}

@media (max-width: 980px){ .card{grid-column: span 6;} }
@media (max-width: 640px){
  h1{font-size:34px}
  .card{grid-column: span 12;}
}

.block{
  margin-top:22px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  border-radius:var(--r);
  padding:16px 16px 6px;
}
.block h2{
  margin:0 0 10px 0;
  font-size:18px;
  letter-spacing:-.01em;
}

.row{
  display:flex;
  gap:16px;
  padding:10px 0;
  border-top:1px solid var(--border);
}
.row:first-child{border-top:none}
.right{margin-left:auto;text-align:right}

.note{
  margin-top:18px;
  padding:14px 16px;
  border:1px dashed rgba(106,165,255,.35);
  background: rgba(106,165,255,.06);
  border-radius:var(--r);
  color: var(--muted);
}

.prose{
  color: var(--fg);
}
.prose p{color: var(--fg);opacity:.95}
.prose h2,.prose h3{margin-top:22px}
.prose code{
  background: rgba(255,255,255,.06);
  padding:2px 6px;border-radius:8px
}
.prose pre{
  background: rgba(255,255,255,.06);
  padding:12px;border-radius:14px;overflow:auto;border:1px solid var(--border)
}

.btn{
  display:inline-block;
  background: linear-gradient(135deg, rgba(106,165,255,.95), rgba(139,92,246,.95));
  color:#08101f;
  padding:10px 14px;
  border-radius:12px;
  font-weight:900;
  text-decoration:none;
}
.btn:hover{filter:brightness(1.05);text-decoration:none}
.muted{color:var(--muted)}
.authority-article {
  max-width: 760px;
}

.authority-article h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.authority-article h2 {
  margin-top: 2.5rem;
  font-size: 1.4rem;
}

.authority-article p {
  margin: 0.75rem 0 1.25rem;
}

.authority-article ul {
  padding-left: 1.25rem;
}

.authority-article li {
  margin: 0.4rem 0;
}

.authority-article {
  max-width: 820px;
}

.authority-article .lede {
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.authority-article h2 {
  margin-top: 3rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .4rem;
}

.authority-article ul {
  margin-left: 1.25rem;
}

.wta-bridge {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.wta-bridge-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.wta-bridge-inner strong { font-weight: 700; }
.wta-bridge-inner span { opacity: .85; }
.wta-bridge-cta{
  margin-left: auto;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
}
.wta-bridge-cta:hover{
  border-color: rgba(255,255,255,.28);
}