:root{
  --ink:#0f172a;
  --ink-soft:#111827;
  --ink-muted:#6b7280;
  --card-light:rgba(255,255,255,.94);
  --card-dark:rgba(15,23,42,.96);
  --border-light:rgba(226,232,240,.95);
  --border-dark:rgba(148,163,184,.8);
  --accent:#f97316;
  --accent-soft:#fed7aa;
  --shadow-lg:0 32px 70px rgba(15,23,42,.48);
  --shadow-soft:0 12px 30px rgba(15,23,42,.32);
  --r-lg:26px;
  --r-md:999px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  height:100%;
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  min-height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
  background:#020617;
}

/* Background layers */
.sky-layer,
.precip-layer,
.stars-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
}
.sky-layer{z-index:0;}
.precip-layer{z-index:1;}
.stars-layer{z-index:2;}

/* Sun & moon orbs (DOUBLE SIZE) */
.sun-orb,
.moon-orb{
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
}

/* warm glowing sun */
.sun-orb{
  background:radial-gradient(circle at 30% 30%,#fef9c3,#f97316);
  box-shadow:0 0 55px rgba(251,191,36,.95);
  animation:sun-path 60s linear infinite;
}

/* textured moon orb with crater-like pattern */
.moon-orb{
  background:
    radial-gradient(circle at 30% 30%,#f9fafb 0,#e5e7eb 42%,#9ca3af 100%),
    radial-gradient(circle at 68% 32%,rgba(148,163,184,.95) 0,rgba(148,163,184,.6) 12%,rgba(148,163,184,.15) 28%,rgba(148,163,184,0) 40%),
    radial-gradient(circle at 32% 70%,rgba(148,163,184,.9) 0,rgba(148,163,184,.55) 10%,rgba(148,163,184,.12) 26%,rgba(148,163,184,0) 38%),
    radial-gradient(circle at 48% 48%,rgba(156,163,175,.9) 0,rgba(156,163,175,.5) 10%,rgba(156,163,175,.1) 24%,rgba(156,163,175,0) 36%),
    radial-gradient(circle at 22% 42%,rgba(148,163,184,.9) 0,rgba(148,163,184,0) 26%),
    radial-gradient(circle at 78% 58%,rgba(148,163,184,.85) 0,rgba(148,163,184,0) 24%),
    radial-gradient(circle at 60% 78%,rgba(148,163,184,.75) 0,rgba(148,163,184,0) 24%);
  box-shadow:0 0 40px rgba(148,163,184,.95);
  animation:moon-path 80s linear infinite;
}

/* show / hide depending on day or night */
body.weather--day .sun-orb{ opacity:1; }
body.weather--night .sun-orb{ opacity:0; }
body.weather--night .moon-orb{ opacity:1; }
body.weather--day .moon-orb{ opacity:0; }

/* Sun travels in a gentle arc */
@keyframes sun-path{
  0%   { transform:translate3d(-15vw,26vh,0); }
  50%  { transform:translate3d(40vw,6vh,0); }
  100% { transform:translate3d(105vw,26vh,0); }
}

/* Moon glides a bit higher and slower */
@keyframes moon-path{
  0%   { transform:translate3d(-20vw,12vh,0); }
  50%  { transform:translate3d(45vw,-2vh,0); }
  100% { transform:translate3d(110vw,12vh,0); }
}

body.weather--loading .sky-layer{
  background:linear-gradient(180deg,#0f172a,#020617 60%,#020617);
}

/* ===== Day palettes (colourful, soft) ===== */

body.weather--day.weather--clear .sky-layer{
  background:
    radial-gradient(900px 600px at 80% -10%,rgba(252,211,77,.95),transparent 55%),
    radial-gradient(1200px 900px at 50% 120%,rgba(56,189,248,.9),#0ea5e9 60%,#0369a1 100%),
    linear-gradient(180deg,#e0f2fe 0%,#bae6fd 38%,#60a5fa 80%,#38bdf8 100%);
}

body.weather--day.weather--cloud .sky-layer{
  background:
    radial-gradient(1400px 900px at 10% -10%,rgba(255,255,255,.85),transparent 55%),
    radial-gradient(1100px 800px at 90% -20%,rgba(209,213,219,.9),transparent 60%),
    linear-gradient(180deg,#e5e7eb 0%,#d4d4d8 35%,#9ca3af 75%,#6b7280 100%);
}

body.weather--day.weather--rain .sky-layer{
  background:
    radial-gradient(1200px 900px at 10% -10%,rgba(248,250,252,.7),transparent 55%),
    radial-gradient(1400px 1000px at 80% -20%,rgba(59,130,246,.45),transparent 60%),
    linear-gradient(180deg,#1f2937 0%,#0f172a 45%,#020617 100%);
}

body.weather--day.weather--snow .sky-layer{
  background:
    radial-gradient(1200px 900px at 15% -10%,rgba(255,255,255,.95),transparent 60%),
    radial-gradient(1400px 1000px at 80% 110%,rgba(191,219,254,.95),rgba(147,197,253,1) 55%,rgba(129,140,248,1) 100%),
    linear-gradient(180deg,#eff6ff 0%,#e0f2fe 40%,#bfdbfe 75%,#a5b4fc 100%);
}

body.weather--day.weather--fog .sky-layer{
  background:
    radial-gradient(1100px 800px at 50% -20%,rgba(255,255,255,.9),transparent 55%),
    radial-gradient(1400px 900px at 50% 120%,rgba(148,163,184,.9),rgba(107,114,128,1) 55%,rgba(75,85,99,1) 100%),
    linear-gradient(180deg,#e5e7eb 0%,#d1d5db 35%,#9ca3af 75%,#4b5563 100%);
}

/* ===== Night palettes (cinematic) ===== */

body.weather--night.weather--clear .sky-layer{
  background:
    radial-gradient(900px 700px at 10% -10%,rgba(251,191,36,.35),transparent 55%),
    radial-gradient(800px 600px at 80% -20%,rgba(96,165,250,.35),transparent 60%),
    linear-gradient(180deg,#020617 0%,#020617 55%,#020617 100%);
}
body.weather--night.weather--cloud .sky-layer{
  background:linear-gradient(180deg,#020617 0%,#020617 40%,#020617 100%);
}
body.weather--night.weather--rain .sky-layer{
  background:linear-gradient(180deg,#020617 0%,#0b1120 45%,#020617 100%);
}
body.weather--night.weather--snow .sky-layer{
  background:linear-gradient(180deg,#020617 0%,#111827 55%,#020617 100%);
}
body.weather--night.weather--fog .sky-layer{
  background:radial-gradient(circle at top,#4b5563 0,#020617 40%,#020617 100%);
}

/* Stars */
.stars-layer .star{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:999px;
  background:rgba(248,250,252,.95);
  animation:star-twinkle 4s ease-in-out infinite;
}

@keyframes star-twinkle{
  0%,100%{opacity:.2;transform:scale(.6);}
  50%{opacity:1;transform:scale(1.3);}
}

/* Rain / snow */
.precip-layer .precip{
  position:absolute;
  border-radius:999px;
  opacity:0;
}

.precip-layer .drop-rain{
  width:2px;
  height:60px;
  background:rgba(148,163,184,.85);
  box-shadow:0 0 6px rgba(148,163,184,.8);
  animation:rain-fall linear infinite;
}

@keyframes rain-fall{
  0%{transform:translate3d(0,-120%,0);opacity:0;}
  10%{opacity:1;}
  100%{transform:translate3d(0,120vh,0);opacity:0;}
}

.precip-layer .drop-snow{
  width:6px;
  height:6px;
  background:rgba(248,250,252,.96);
  box-shadow:0 0 10px rgba(248,250,252,.9);
  animation:snow-fall linear infinite;
}

@keyframes snow-fall{
  0%{transform:translate3d(0,-120%,0) rotate(0deg);opacity:0;}
  10%{opacity:1;}
  100%{transform:translate3d(20px,120vh,0) rotate(360deg);opacity:0;}
}

/* App shell */
.app-shell{
  position:relative;
  z-index:10;
  min-height:100vh;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Top bar – glass */
.top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.35);
  box-shadow:0 18px 40px rgba(15,23,42,.75);
  border:1px solid rgba(148,163,184,.65);
  color:#e5e7eb;
  backdrop-filter:blur(20px);
}

/* DAY variant */
body.weather--day .top-bar{
  background:rgba(248,250,252,.35);
  border-color:rgba(226,232,240,.95);
  color:#0f172a;
  box-shadow:0 14px 30px rgba(15,23,42,.25);
}

/* NIGHT variant */
body.weather--night .top-bar{
  background:rgba(15,23,42,.35);
  border-color:rgba(148,163,184,.7);
  color:#e5e7eb;
}

.top-group{
  display:flex;
  align-items:center;
  gap:8px;
}

.brand{
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px;
}

.brand-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#facc15,#f97316);
  box-shadow:0 0 12px rgba(250,204,21,.9);
}

/* Weather pill */
.weather-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.35);
  border:1px solid rgba(148,163,184,.7);
  font-size:11px;
  white-space:nowrap;
  backdrop-filter:blur(18px);
}

body.weather--day .weather-pill{
  background:rgba(255,255,255,.35);
  border-color:rgba(209,213,219,.9);
  color:#0f172a;
}

body.weather--night .weather-pill{
  background:rgba(15,23,42,.35);
  border-color:rgba(148,163,184,.8);
  color:#e5e7eb;
}

.weather-temp{
  font-weight:600;
}

.weather-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%,#4ade80,#16a34a);
  box-shadow:0 0 10px rgba(34,197,94,.9);
}

.weather-time{
  opacity:.8;
}

/* Main container */
.main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 0;
}

/* Quote panel — glass */
.quote-panel{
  width:100%;
  max-width:720px;
  border-radius:var(--r-lg);
  padding:22px 24px 18px;
  background:rgba(255,255,255,.35);
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(148,163,184,.6);
  backdrop-filter:blur(28px);
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  overflow:hidden;
}

/* DAY card */
body.weather--day .quote-panel{
  background:rgba(248,250,252,.35);
  border-color:rgba(226,232,240,.9);
  color:#0f172a;
}

/* NIGHT card */
body.weather--night .quote-panel{
  background:rgba(15,23,42,.35);
  color:#e5e7eb;
  border-color:rgba(148,163,184,.85);
}

/* soft colour wash */
.quote-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    rgba(251,191,36,.6),
    rgba(244,114,182,.45),
    rgba(59,130,246,.6)
  );
  opacity:.08;
  mix-blend-mode:screen;
  pointer-events:none;
}

body.weather--night .quote-panel::before{
  background:linear-gradient(
    135deg,
    rgba(56,189,248,.35),
    rgba(129,140,248,.45),
    rgba(15,23,42,.9)
  );
  opacity:.13;
}

/* inner frame */
.quote-panel::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:calc(var(--r-lg) - 8px);
  border:1px solid rgba(148,163,184,.3);
  pointer-events:none;
}

.quote-panel > *{
  position:relative;
  z-index:1;
}

/* header */
.quote-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--ink-muted);
}

body.weather--night .quote-header{
  color:#9ca3af;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(251,191,36,.12);
  border:1px solid rgba(251,191,36,.55);
  font-size:11px;
  color:#92400e;
}

body.weather--night .badge{
  background:rgba(56,189,248,.16);
  border-color:rgba(56,189,248,.7);
  color:#e0f2fe;
}

.badge-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%,#fb923c,#ea580c);
  box-shadow:0 0 8px rgba(248,181,91,.8);
}

.quote-count{
  font-size:11px;
  opacity:.8;
}

/* Quote text area */
.quote-box{
  position:relative;
  padding-top:4px;
  max-height:42vh;
  overflow-y:auto;
  padding-right:4px;
}

/* Scrollbar */
.quote-box::-webkit-scrollbar{
  width:6px;
}
.quote-box::-webkit-scrollbar-track{
  background:rgba(148,163,184,.2);
  border-radius:999px;
}
.quote-box::-webkit-scrollbar-thumb{
  background:rgba(31,41,55,.6);
  border-radius:999px;
}
body.weather--night .quote-box::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.9);
}

/* Decorative quotation mark */
.quote-box::before{
  content:"“";
  position:absolute;
  top:-40px;
  right:5px;
  font-size:130px;
  font-weight:700;
  color:rgba(148,163,184,.16);
  pointer-events:none;
}

/* Main quote text */
.quote-text{
  font-size:1.35rem;
  line-height:1.75;
  letter-spacing:.01em;
  font-weight:500;
}

/* Author & meta */
.quote-author{
  margin-top:14px;
  font-size:.98rem;
  font-weight:600;
  color:#0f172a;
}

body.weather--night .quote-author{
  color:#e5e7eb;
}

.quote-meta{
  margin-top:4px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  opacity:.7;
}

/* Controls */
.quote-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  gap:12px;
}

.nav-buttons{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Buttons */
.nav-btn{
  border:none;
  border-radius:999px;
  padding:6px 11px;
  background:rgba(15,23,42,.14);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  font-size:12px;
  color:#111827;
  backdrop-filter:blur(10px);
  transition:background .15s ease,transform .12s ease,box-shadow .15s ease;
  text-decoration:none;
}

.nav-btn span.chevron{
  font-size:14px;
  line-height:1;
}

.nav-btn:hover{
  background:rgba(15,23,42,.22);
  transform:translateY(-1px);
}

.nav-btn:active{
  transform:translateY(0);
  box-shadow:none;
}

.nav-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

body.weather--night .nav-btn{
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.7);
}

.nav-btn.main{
  background:linear-gradient(135deg,#f97316,#fb923c);
  color:#111827;
  border:1px solid rgba(248,181,91,1);
  box-shadow:0 18px 35px rgba(248,181,91,.45);
}

.nav-btn.main .chevron{
  transform:translateX(0);
  transition:transform .16s ease-out;
}

.nav-btn.main:hover .chevron{
  transform:translateX(2px);
}

/* Footer */
.footer{
  font-size:11px;
  color:#9ca3af;
  text-align:center;
  padding:4px 0 2px;
}

/* Mobile layout for main page */
@media (max-width: 640px){
  .app-shell{
    padding:10px;
    gap:10px;
  }

  .top-bar{
    flex-direction:column;
    align-items:flex-start;
    border-radius:18px;
    padding:8px 10px;
  }

  .quote-panel{
    padding:18px 14px 14px;
    border-radius:20px;
  }

  .quote-box{
    max-height:52vh;
  }

  .quote-text{
    font-size:1.08rem;
  }

  .weather-pill{
    width:100%;
    justify-content:space-between;
  }

  .quote-controls{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .nav-buttons{
    width:100%;
    justify-content:space-between;
  }

  .nav-btn{
    flex:1 1 auto;
    justify-content:center;
  }

  .nav-btn:nth-child(1),
  .nav-btn:nth-child(2){
    max-width:40%;
  }
}

/* ===== About page extras ===== */

.about-main{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:16px 0 20px;
}

.about-panel{
  width:100%;
  max-width:960px;
}

/* hide any raw <img> inside the glass card so the big photo can't blow it up */
.about-panel img{
  display:none;
}

.about-header{
  display:flex;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:12px;
}

/* Small avatar */
.about-avatar{
  width:72px;
  height:72px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(148,163,184,.7);
  background-image:url('https://thairefaruq.com/assets/img/thaire.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

/* Clickable overlay to open full-size photo */
.about-avatar a{
  position:absolute;
  inset:0;
  text-indent:-9999px;
}

/* Text blocks */
.about-title{
  font-size:1.1rem;
  margin:0 0 4px;
}

.about-subtitle{
  margin:4px 0 0;
  font-size:.86rem;
  color:var(--ink-muted);
}

body.weather--night .about-subtitle{
  color:#9ca3af;
}

.about-section{
  margin-top:16px;
}

.about-section-title{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  margin-bottom:4px;
  opacity:.8;
}

.about-body{
  font-size:.95rem;
  line-height:1.7;
  margin-top:4px;
}

.about-list{
  margin:8px 0 0 16px;
  font-size:.9rem;
  line-height:1.6;
}
.about-list li+li{
  margin-top:4px;
}

.about-tags{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.about-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.8rem;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.4);
  background:rgba(255,255,255,.9);
  text-decoration:none;
  color:inherit;
}
.about-tag:hover{
  background:#ffffff;
}

body.weather--night .about-tag{
  background:rgba(15,23,42,.9);
  border-color:rgba(148,163,184,.7);
  color:#e5e7eb;
}

@media (max-width:640px){
  .about-main{
    padding-top:12px;
  }
  .about-panel{
    max-width:100%;
  }
}

/* ===== Menu modal ===== */

.menu-modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  box-sizing:border-box;
}

.menu-modal.is-open{
  display:flex;
}

.menu-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.65);
  backdrop-filter:blur(6px);
}

/* dialog */
.menu-dialog{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  max-height:80vh;
  padding:16px 16px 12px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.7);
  box-shadow:0 24px 60px rgba(15,23,42,.8);
  display:flex;
  flex-direction:column;
  gap:10px;
  background:rgba(15,23,42,.85);
  color:#e5e7eb;
  backdrop-filter:blur(20px);
}

/* Day tint */
body.weather--day .menu-dialog{
  background:rgba(248,250,252,.9);
  color:#0f172a;
  border-color:rgba(226,232,240,.9);
  box-shadow:0 20px 50px rgba(15,23,42,.35);
}

/* Night tint */
body.weather--night .menu-dialog{
  background:rgba(15,23,42,.85);
  color:#e5e7eb;
}

.menu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.menu-title{
  font-size:1rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.menu-close{
  border:none;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:2px 4px;
  border-radius:999px;
}

.menu-close:hover{
  background:rgba(148,163,184,.18);
}

.menu-body{
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid rgba(148,163,184,.4);
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
  max-height:calc(80vh - 64px);
  padding-right:4px;
}

/* Scrollbar */
.menu-body::-webkit-scrollbar{
  width:6px;
}

.menu-body::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.7);
  border-radius:999px;
}

/* Menu items */
.menu-item{
  width:100%;
  text-align:left;
  border:none;
  border-radius:999px;
  padding:7px 11px;
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  background:rgba(15,23,42,.1);
  color:inherit;
  transition:background .15s ease, transform .1s ease;
}

body.weather--day .menu-item{
  background:rgba(255,255,255,.7);
}

body.weather--night .menu-item{
  background:rgba(15,23,42,.7);
}

.menu-item:hover{
  transform:translateY(-1px);
}

body.weather--day .menu-item:hover{
  background:rgba(248,250,252,.98);
  color:#0f172a;
}

body.weather--night .menu-item:hover{
  background:rgba(148,163,184,.9);
  color:#020617;
}

.menu-item-emoji{
  width:20px;
  text-align:center;
}

/* Mobile adjustments for modal (iPhone / Android) */
@media (max-width:640px){
  .menu-modal{
    align-items:flex-start;
    justify-content:center;
    padding:16px;
  }
  .menu-dialog{
    max-width:100%;
    border-radius:18px;
    max-height:calc(100vh - 32px);
    margin:16px auto 0;
  }
}