/* ============================================================================
   GLOBAL LINK AFFORDANCE (NEW)
   ============================================================================ */
a{
  position:relative;
  color:#6fe3d6;
  font-weight:600;
  text-decoration:none;
}

a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(.25);
  transform-origin:left;
  opacity:.7;
  transition:transform .25s ease;
}

a:hover::after,
a:focus-visible::after{
  transform:scaleX(1);
}

@media (hover:hover){
  a:hover{
    text-shadow:0 0 12px rgba(69,208,194,.25);
  }
}

/* External link cue (citations only) */
.citations a[target="_blank"]::before{
  content:"↗";
  font-size:.75em;
  margin-right:.35em;
  opacity:.7;
}

/* Keyboard focus */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* ============================================================================
   SITE LOGO
   ============================================================================ */
.site-logo{
  display:flex;
  justify-content:center;
  transform: translateY(1.5rem); 
}

.site-logo img{
  width:56px;       
  height:auto;
  opacity:0.9;
  
}

/* Slightly larger on desktop */
@media (min-width: 768px){
  .site-logo img{
    width:64px;
  }
}

/* Print/PDF: keep but mute */
@media print{
  .site-logo img{
    opacity:0.5;
  }
}

@media (hover:hover){
  .site-logo img{
    transition:opacity .3s ease;
  }
  .site-logo img:hover{
    opacity:1;
  }
}

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */
:root{
  --dark:#0b0f14;
  --light:#f5f7fa;
  --accent:#45d0c2;
  --accent2:#6a7cff;
  --glass:rgba(255,255,255,0.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,sans-serif;
  background:var(--dark);
  color:var(--light);
  line-height:1.55; /* WCAG readability improvement */
}

/* ============================================================================
   LAYOUT
   ============================================================================ */
section{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1.5rem,5vw,4rem);
}

.card{
  max-width:1200px;
  width:100%;
  background:var(--glass);
  backdrop-filter:blur(14px);
  border-radius:22px;
  padding:clamp(2rem,4vw,4rem);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1{
  text-align:center;
  margin-bottom:0.2em;
  font-size:clamp(2.2rem,7vw,4rem);
  font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

h2{
  text-align:center;
  margin-top:0;
  margin-bottom:2.2rem;
  opacity:.9;
}

.subtitle{
  text-align:center;
  opacity:.85;
  margin-bottom:2.5rem;
}

/* ============================================================================
   HERO GRID
   ============================================================================ */
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
}
@media(min-width:768px){
  .hero-grid{grid-template-columns:repeat(3,1fr)}
}

.hero-item{position:relative}

.hero-image{
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-caption{
  margin-top:.8rem;
  text-align:center;
  font-weight:600;
  color:#fff;
}

/* ============================================================================
   HOVER / FOCUS DISCLOSURE
   WCAG: hover content also available via keyboard focus
   ============================================================================ */
.hover-panel{
  position:absolute;
  inset:0;
  background:rgba(11,15,20,.92);
  border-radius:18px;
  padding:1.6rem;
  opacity:0;
  transform:translateY(10px);
  transition:.35s ease;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.hero-item:hover .hover-panel,
.hero-item:focus-within .hover-panel{
  opacity:1;
  transform:none;
}

.hover-panel h3{
  color:var(--accent);
  margin-top:0;
  margin-bottom:.4rem;
}

.hover-panel p{
  font-size:.92rem;
  line-height:1.5;
  max-width:90%;
}

/* ============================================================================
   CITATIONS
   ============================================================================ */
.citations ul{
  list-style:none;
  padding-left:0;
  margin-bottom:2.5rem;
}

.citations li{
  margin-bottom:2.2rem;
  line-height:1.6;
}

.citations a,
.citations strong{
  color:#6fe3d6;
  font-weight:600;
  text-decoration:none;
}

.citations a:hover{
  color:#9cf0ff;
  text-decoration:underline;
}

.citation-meta{
  color:#d6d9e0;
  font-size:.95rem;
  padding-left:.2rem;
}

h3{
  margin-top:3rem;
  margin-bottom:1.6rem;
}

/* ============================================================================
   MODAL
   ============================================================================ */
.poster-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .55rem;
  border-radius:8px;
  cursor:pointer;

  color:#6fe3d6;
  font-weight:600;
  line-height:1.4;

  background:linear-gradient(
    90deg,
    rgba(69,208,194,.12),
    rgba(106,124,255,.08)
  );

  border:1px solid rgba(111,227,214,.25);

  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

/* Icon cue */
.poster-link::after{
  content:"⤢";
  font-size:.85em;
  opacity:.7;
  transform:translateY(-.02em);
}

/* Hover (pointer users) */
@media (hover:hover){
  .poster-link:hover{
    background:linear-gradient(
      90deg,
      rgba(69,208,194,.2),
      rgba(106,124,255,.14)
    );
    box-shadow:0 6px 18px rgba(0,0,0,.35);
    transform:translateY(-1px);
  }
}

/* Keyboard focus */
.poster-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(69,208,194,.15);
}

/* Active (click / tap feedback) */
.poster-link:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,.4) inset;
}

/* Print / PDF: revert to simple text */
@media print{
  .poster-link{
    background:none;
    border:none;
    padding:0;
  }
  .poster-link::after{
    content:"";
  }
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:2rem;
}

.modal.active{display:flex}

.modal-content{
  background:var(--glass);
  backdrop-filter:blur(18px);
  border-radius:18px;
  max-width:900px;
  width:100%;
  padding:1.2rem;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  position:relative;
}

.modal-content img{
  width:100%;
  height:auto;
  border-radius:12px;
}

.modal-close{
  position:absolute;
  top:.6rem;
  right:.8rem;
  font-size:1.4rem;
  color:#fff;
  cursor:pointer;
  opacity:.7;
}

/* ============================================================================
   GRID CONTENT
   ============================================================================ */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.8rem;
  margin-top:2.4rem;
}

@media(min-width:768px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1100px){
  .grid{grid-template-columns:repeat(4,1fr)}
}

.box{
  background:rgba(255,255,255,.06);
  padding:1.7rem;
  border-radius:18px;
}

.box h3{
  color:var(--accent);
  margin-top:0;
  margin-bottom:.4rem;
}

/* ============================================================================
   CONTACT & FOOTER
   ============================================================================ */
.contact span,.contact a{
  color:var(--accent);
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
}

footer{
  margin-top:2rem;
  font-size:.85rem;
  opacity:.6;
  text-align:center;
}

/* ============================================================================
   MOBILE UX
   ============================================================================ */
.mobile-hint{
  display:none;
  position:absolute;
  bottom:-0.9rem;
  left:50%;
  transform:translateX(-50%);
  font-size:.8rem;
  background:rgba(11,15,20,.85);
  color:#eafdfb;
  padding:.4rem .75rem;
  border-radius:999px;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}

@media (max-width:768px), (hover:none) and (pointer:coarse){
  .mobile-hint{display:block}
}

/* ============================================================================
   SCROLL INDICATOR
   ============================================================================ */

.scroll-arrow{
  display:none;
  transition: opacity .4s ease;
}

@media (hover:hover) and (pointer:fine){
  .scroll-arrow{
    display:flex;
    position:fixed;
    bottom:1.4rem;
    left:50%;
    transform:translateX(-50%);
    justify-content:center;
    opacity:.6;
    z-index:500;
  }

  .scroll-arrow span{
    width:28px;
    height:28px;
    border-bottom:2px solid var(--accent);
    border-right:2px solid var(--accent);
    transform:rotate(45deg);
    animation:arrow-float 1.8s infinite;
  }
}

@keyframes arrow-float{
  0%{transform:rotate(45deg) translate(0,0);opacity:.4}
  50%{transform:rotate(45deg) translate(6px,6px);opacity:1}
  100%{transform:rotate(45deg) translate(0,0);opacity:.4}
}

/* ============================================================================
   PRINT / PDF STYLES
   ============================================================================ */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  section{min-height:auto;padding:1.5cm;page-break-after:always}
  .card{background:none;box-shadow:none;backdrop-filter:none;padding:0}
  h1,h2,h3{-webkit-text-fill-color:#000;color:#000}
  a{text-decoration:underline;color:#000}
  .scroll-arrow,.mobile-hint,.modal{display:none!important}
}