/* -------------------------------------------------
   1.  Custom Font
   ------------------------------------------------- */
@font-face{
  font-family:"ToneOZ-Pinyin-Kai-Traditional";
  src:url("fonts/ToneOZ-Pinyin-Kai-Traditional.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* -------------------------------------------------
   2.  Reset & Base
   ------------------------------------------------- */
*,
*::before,
*::after{box-sizing:border-box}

html{font-size:clamp(17px,2.4vw,20px);}  /* fluid type */

body{
  margin:0;
  font-family:"ToneOZ-Pinyin-Kai-Traditional",
              "SF Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",
              Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.7;
  color:#fff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:clamp(1rem,4vw,2rem);

  /* page-level fade (in/out handled w/ classes) */
  opacity:0;
  transition:opacity .35s ease;
}
body.page-loaded{opacity:1;}
body.page-leave{opacity:0!important;transition:opacity .2s ease!important;}

p{font-weight:500;} /* bolder paragraphs */

/* -------------------------------------------------
   3.  Liquid-glass background (fixed, slow pan)
   ------------------------------------------------- */
@keyframes drift{
  0%  {background-position:0 50%}
  50% {background-position:100% 50%}
  100%{background-position:0 50%}
}

.liquid-bg{
  background:
    linear-gradient(115deg,
      rgba(30,30,40,.35) 0%,
      rgba(40,60,90,.35) 50%,
      rgba(20,20,30,.35) 100%),
    url("Media/bg.jpg") center/cover no-repeat;
  background-size:300% 300%,cover;
  background-attachment:fixed,fixed;    /* lock both layers */
  animation:drift 40s ease-in-out infinite;
}

/* -------------------------------------------------
   4.  Frosted-glass surfaces (always visible)
   ------------------------------------------------- */
.card{
  width:100%;
  margin:1rem 0;
  padding:clamp(1rem,3vw,2rem);
  border-radius:24px;
}
.glass{
  backdrop-filter:blur(24px) saturate(140%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 4px 40px rgba(0,0,0,.25);
}

/* -------------------------------------------------
   5.  Headings
   ------------------------------------------------- */
h1,h2,h3{font-weight:600;margin-top:0}
h1{font-size:1.9rem}
.lead{font-size:1.25rem;font-weight:600;margin-top:0}

/* -------------------------------------------------
   6.  Media & Tables
   ------------------------------------------------- */
/* Figures hold the image + caption; no clipping so image can size itself,
   but we center everything and let the image handle cropping via object-fit. */
figure{
  margin:1rem auto;
  max-width:100%;
  text-align:center;
}

/* Fully rounded images, centered, fill width, no white edges.
   We give them a container height of auto by default. If an image has built-in
   letterboxing, add class="img-cover" in HTML to force uniform height cropping. */
figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin-inline:auto;
  border-radius:16px;
  object-fit:cover;           /* ensure fill when constrained */
  object-position:center;     /* center crop */
  background-color:transparent;
}

/* optional helper to crop to viewport ratio (apply in HTML if wanted) */
.img-cover{width:100%;height:clamp(200px,60vw,600px);}

/* Captions: bold & larger to harmonize w/paragraphs */
figcaption{
  margin-top:.5rem;
  padding:.25rem 0;
  font-size:1.05rem;
  font-weight:600;
  color:#fff;
  line-height:1.4;
  text-align:center;
}

/* Tables */
table{
  width:100%;
  border-collapse:collapse;
  border-radius:16px;
  overflow:hidden;
}
thead th,
tbody td{
  padding:.6rem 1rem;
  border:1px solid rgba(255,255,255,.25);
}
thead th{background:rgba(255,255,255,.08);font-weight:600}

/* -------------------------------------------------
   7.  Buttons / Links  (frosted-white pill + hover glow)
   ------------------------------------------------- */
a,
.btn{
  display:inline-block;
  padding:.55rem 1.35rem;
  margin:.25rem 0;
  border-radius:9999px;                 /* pill */
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.8);
  color:#ffffff;
  font-weight:600;
  text-decoration:none;
  position:relative;
  transition:
    transform .15s ease,
    box-shadow .25s ease,
    background .25s ease,
    filter .25s ease;
  box-shadow:
     inset 0 0 6px rgba(255,255,255,.35),
     0 2px 6px rgba(0,0,0,.25);
}

/* Surrounding glow on hover / focus */
a:hover,
.btn:hover,
a:focus-visible,
.btn:focus-visible{
  background:rgba(255,255,255,.32);            /* lighter fill */
  transform:translateY(-3px);
  filter:brightness(1.15);
  box-shadow:
     inset 0 0 10px rgba(255,255,255,.6),
     0 0 24px rgba(255,255,255,.35),
     0 6px 14px rgba(0,0,0,.3);
  outline:none;
}

/* Pressed / active */
a:active,
.btn:active{
  transform:scale(.97) translateY(-1px);
  background:rgba(255,255,255,.4);
  box-shadow:
     inset 0 0 14px rgba(255,255,255,.7),
     0 0 28px rgba(255,255,255,.45),
     0 3px 8px rgba(0,0,0,.35);
}

/* -------------------------------------------------
   8.  Element Fade-In Utility
   ------------------------------------------------- */
/* JS assigns .fade-el to everything we animate individually.
   Hidden state: subtle downward shift + transparent. */
.fade-el{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity .6s ease-out,
    transform .6s ease-out;
  will-change:opacity,transform;
}

/* visible */
.fade-el.in{
  opacity:1;
  transform:none;
}

/* Header-hide utility preserved */
.hide{transform:translateY(-120%);transition:transform .4s ease}

/* No-IO fallback (if IntersectionObserver not available) */
body.no-io .fade-el{opacity:1;transform:none;transition:none}

/* -------------------------------------------------
   9.  Index Page Grid Layout (post list)
   ------------------------------------------------- */
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  border:0!important;
}

.post-list-wrapper{
  width:100%;
  max-width:1000px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:2.5rem;
  padding:clamp(1rem,4vw,2rem);
}

.post-card{
  padding:1.75rem 2rem;
  border-radius:32px;
  text-align:left;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:1rem;
  width:100%;
  max-width:100%;
  margin:0;
}
.post-card h2{
  margin:0;
  font-size:1.8rem;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}
.post-card .btn{
  white-space:nowrap;
  font-size:1rem;
  line-height:1.1;
}
@media (max-width:420px){
  .post-card{
    grid-template-columns:1fr;
    text-align:center;
  }
  .post-card h2{
    white-space:normal;
    margin-bottom:.75rem;
  }
}

/* -------------------------------------------------
   10.  Responsive tweaks
   ------------------------------------------------- */
@media(max-width:600px){
  .card{padding:1rem}
}