:root{
  --text:#ffffff;
  --glass-bg:rgba(255,255,255,0.16);
  --glass-border:rgba(255,255,255,0.28);
  --glass-shadow:0 12px 28px rgba(0,0,0,0.22);
  --tile-text:#ffffff;
  --overlay:rgba(8,20,35,0.28);
  --content-max:760px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{
  background:
    linear-gradient(var(--overlay),var(--overlay)),
    url("assets/background.png") center center / cover no-repeat fixed;
}
.page-shell{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 12px;
}
.page{width:min(100%,var(--content-max));text-align:center}
.logo{
  width:min(78vw,360px);
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto 8px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.24));
}
.page-title{
  margin:0 0 6px;
  font-size:clamp(1.55rem,3vw,2.5rem);
  line-height:1.02;
  font-weight:800;
  letter-spacing:.01em;
  text-shadow:0 3px 12px rgba(0,0,0,.35);
}
.subtitle{
  margin:0 0 14px;
  font-size:clamp(.88rem,1.5vw,1.05rem);
  opacity:.96;
  text-shadow:0 2px 8px rgba(0,0,0,.28);
}
.tile-grid{
  width:min(100%,560px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.tile{
  display:block;
  text-decoration:none;
  color:var(--tile-text);
  padding:12px 16px;
  border-radius:18px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  text-align:left;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tile:hover,.tile:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(0,0,0,0.28);
  background:rgba(255,255,255,0.2);
  outline:none;
}
.tile-title{
  display:block;
  font-size:clamp(.98rem,1.6vw,1.2rem);
  line-height:1.15;
  font-weight:800;
  margin-bottom:2px;
}
.tile-meta{
  display:block;
  font-size:clamp(.76rem,1.2vw,.9rem);
  opacity:.9;
  line-height:1.15;
}
.event-card{
  width:min(100%,920px);
  margin:0 auto;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(12px) saturate(135%);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
}
.event-graphic img{
  width:100%;
  max-width:760px;
  height:auto;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.qr-area{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.qr-label{
  font-size:clamp(.92rem,1.3vw,1.05rem);
  font-weight:700;
}
.qr-code{
  width:min(46vw,180px);
  background:#fff;
  padding:10px;
  border-radius:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.24);
}
.qr-help{
  max-width:420px;
  font-size:clamp(.82rem,1.1vw,.95rem);
  opacity:.92;
}
.back-link{
  display:inline-block;
  margin-top:18px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding:10px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
}
@media (max-width:680px){
  .page-shell{padding:12px 10px}
  .logo{width:min(74vw,240px)}
  .page-title{font-size:clamp(1.35rem,7vw,1.9rem)}
  .subtitle{margin-bottom:12px;font-size:.85rem}
  .tile-grid{width:100%;gap:8px}
  .tile{padding:11px 14px;border-radius:16px}
  .tile-title{font-size:.96rem}
  .tile-meta{font-size:.74rem}
}
@media (orientation: portrait) and (min-width: 900px){
  :root{ --content-max:860px; }
  .page-shell{padding:20px 20px}
  .logo{width:min(62vw,470px);margin-bottom:10px}
  .page-title{font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:8px}
  .subtitle{font-size:clamp(1rem,1.6vw,1.15rem);margin-bottom:18px}
  .tile-grid{width:min(100%,700px);gap:12px}
  .tile{padding:16px 20px;border-radius:22px}
  .tile-title{font-size:clamp(1.2rem,1.8vw,1.55rem)}
  .tile-meta{font-size:clamp(.9rem,1.2vw,1.04rem)}
  .qr-code{width:min(28vw,220px)}
}
@media (orientation: portrait) and (min-width: 1400px){
  .logo{width:min(58vw,560px)}
  .tile-grid{width:min(100%,760px)}
  .tile{padding:18px 22px}
  .tile-title{font-size:1.6rem}
  .tile-meta{font-size:1.06rem}
  .qr-code{width:min(24vw,240px)}
}
@media (max-height: 820px){
  .page-shell{padding:10px 10px}
  .logo{width:min(66vw,260px);margin-bottom:6px}
  .page-title{font-size:clamp(1.2rem,2.8vw,1.8rem);margin-bottom:4px}
  .subtitle{font-size:.78rem;margin-bottom:10px}
  .tile-grid{gap:6px}
  .tile{padding:9px 12px;border-radius:14px}
  .tile-title{font-size:.88rem;margin-bottom:1px}
  .tile-meta{font-size:.68rem}
}


/* Approved adjustment: slightly smaller title-page logo */
.home-logo{
  width:min(70vw,310px);
  margin:0 auto 6px;
}