/* ---------- Font ---------- */
@font-face {
  font-family: "Edition International 70";
  src: url("../fonts/EditionInternational-70.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

.black{
  color: black !important;
}

.carton a{
  color: #00be70;
  text-decoration: none;
}

/* ---------- Variables ---------- */
:root{
  --bg:#fffffa;
  --fg:#000;
  --accent:#000;
  --line:#000;
  --carton:#ffffff;
  --carton-text:#0082dc;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Edition International 70",Arial,sans-serif;
  overflow-x:hidden;
  transition:background .3s,color .3s;
}
/* covers the phone status bar area */
body::before{
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:env(safe-area-inset-top,0px);
  background:var(--bg);
  z-index:30;
}

/* ---------- Header / logos ---------- */
.logo-bar{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--bg);
  padding:2vw 1vw;
}
.logo-bar h1{
  position:relative;
  overflow:hidden;
}
.logo-bar img{
  display:block;
  width:100%;
  height:auto;
}
/* second logo sits on top of the first, moved by main.js while scrolling */
.logo-bar img:nth-child(2){
  position:absolute;
  top:0;
  left:0;
  opacity:0;
}

/* ---------- Schedule ---------- */
main{max-width:800px;margin:0 auto;padding:10vh 20px 80px}

.row{
  display:grid;
  grid-template-columns:minmax(100px,20%) 1fr;
  gap:80px;
  align-items:baseline;
  font-size:38px;
  padding:28px 0;
  border-top:1.5px solid var(--line);
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s,transform .7s;
}
.row.in{opacity:1;transform:none}

.time{
  font-size:38px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--accent);
}
.items{position:relative;font-size:38px}   /* reference for the carton */
.items h2{
  font-size:38px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  margin-bottom:.25em;
}
.items p{font-size:38px;color:#00be70;margin-bottom:.9em}
.items p:has(+ .carton){cursor:pointer}   /* only <p> with a carton are clickable */

/* ---------- Carton ---------- */
.carton{
  position:absolute;
  top:-60px;
  left:170px;
  z-index:999;
  width:calc(640px * .9);
  height:auto;   /* fits the text */
  padding:2vh;
  background:var(--carton);
  color:var(--carton-text);
  font-size:15px;
  line-height:20px;
  box-shadow:0 0 30px rgba(153,153,153,.448);
  rotate:-15deg;

  /* hidden by default */
  opacity:0;
  scale:.8;
  pointer-events:none;
  transition:opacity .3s,scale .3s;

  /* dragging */
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.carton.open{opacity:1;scale:1;pointer-events:auto}
.carton.dragging{cursor:grabbing}

/* ---------- Footer ---------- */
footer{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
  padding:32px 20px;
  border-top:1.5px solid var(--fg);
  font-size:15px;
}
footer a.live{color:#00be70}

/* ---------- Hover image (follows the cursor) ---------- */
.hover-img{
  position:fixed;
  top:0;
  left:0;
  z-index:100;
  width:min(30vw,320px);
  height:auto;
  opacity:0;
  pointer-events:none;
  transition:opacity .1s;
}
.hover-img.show{opacity:1}

/* ---------- Mobile (keep last) ---------- */
@media (max-width:560px){
  .row{grid-template-columns:1fr;gap:8px}

  .carton{
    width:85vw;
    height:auto;
    left:0;
    top:2.5em;
    font-size:13px;
  }
}