@font-face{
  font-family:'Holo';
  src:url('../fonts/NaNHolo-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:'Holo';
  src:url('../fonts/NaNHolo-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
}
@font-face{
  font-family:'NeoA';
  src:url('../fonts/GrotekNeoBrutA.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:'NeoB';
  src:url('../fonts/GrotekNeoBrutB.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
}

:root{
  --cream:#fffdfa;
  --ink:#000000;
  --pink:#ffdbeb;
  --pink-dark:#ffaed3;
  --green:#eefab3;
  --green-dark:#8fbc5b;
  --brown:#b09269;
  --brown-light:#d8cba4;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--green-dark);
  font-family:'Holo','Space Grotesk',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
}

/* ---------- mobile-only width ---------- */
.phone-frame{
  width:100%;
  max-width:430px;
  min-height:100vh;
  min-height:100dvh;
  background:var(--ink);
  position:relative;
  overflow-x:visible;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- title / gyroscope headline ---------- */
.title-wrap{
  position:relative;
  height:130px;
  padding-top:10px;
  padding-bottom:20px;
  overflow:hidden;
  perspective:600px;

}
.title-layer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:55px;
  line-height:1;
  letter-spacing:0.5px;
  will-change:transform;
  padding-bottom:10px;
  padding-top:5px;
}

.layer-lime{ color:var(--ink); font-family:'NeoA'; }


/* ---------- semester nav ---------- */
.semester-nav{
  display: flex;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-arrow{
  flex:0 0 52px;
  border:none;
  color:var(--ink);
  font-family:'NeoB';
  font-size:35px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background-color .35s ease;
}


.semester-mid{
  flex:1;
  display:flex;
  flex-direction:column;
}
.semester-label-box{
  text-align:center;
  overflow:hidden;
  align-items:center;
  justify-content:center;
}
.semester-code-box{
  padding:8px 0 9px;
  text-align:center;
  overflow:hidden;
  align-items:center;
  justify-content:center;
}
.semester-label{
  display:block;
  font-family:'Holo';
  font-size:12px;
  padding:8px 0 9px;
  align-items:center;
  justify-content:center;
}
.code-line{
  display:block;
  font-family:'NeoA',monospace;
  font-weight:700;
  font-size:23px;
  align-items:center;
  justify-content:center;
}


.intro-toggle, .outro-toggle{
  align-items:center;
  text-align:center;
  width:100%;
  padding:7px 0 9px;
  background:var(--brown-light);
  border:none;
  font-family:'Holo','Space Grotesk',sans-serif;
  font-size:12px;
  font-weight:400;
  color:var(--ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.itemcard-close-wrap{
  max-height:0;
  overflow:hidden;
  opacity:0;

  transition:
    max-height .45s cubic-bezier(.16,1,.3,1),
    opacity .25s ease;
}

.item-card.open .itemcard-close-wrap{
  max-height:40px;
  opacity:1;
}

.itemcard-close{
  overflow: hidden;

  width: 100%;
  padding: 5px 0 9px;
  background: var(--cream);
  border: none;
  font-family:'Holo','Space Grotesk',sans-serif;
  font-size:12px;
  color:var(--ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.intro-collapsible, .outro-collapsible{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1);
}
.intro-collapsible.open, .outro-collapsible.open{
  grid-template-rows:1fr;
}
.intro-inner, .outro-inner{ overflow:hidden; min-height:0; background:var(--cream); }

.semester-intro, .semester-outro{
  padding:0px 20px 17px 14px;
  font-family:'Holo','Space Grotesk',sans-serif;
  font-size:12px;
  line-height:1.55;
  background: var(--cream);
}



/* ---------- list ---------- */
.placeholder-note{
  font-family:'Space Mono',monospace;
  font-size:10px;
  color:#6b6855;
  padding:8px 16px;
  letter-spacing:0.02em;
}

.item-card{
  position:relative;
  background:var(--card-bg);
  color:var(--ink);
  overflow:hidden;
  scroll-margin-top: var(--nav-h, 60px);
}

/* links row — full-bleed, only present once expanded, sits above image+title */
.links-collapsible{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1);
}
.item-card.open .links-collapsible{ grid-template-rows:1fr; }
.links-inner{ overflow:hidden; min-height:0; }
.links-row{
  display:flex;
}
.links-row a{
  align-items:center;
  text-align:center;
  flex:1;
  text-align:center;
  padding:6px 0 7px;
  font-family:'Holo','Space Grotesk',sans-serif;
  font-weight:700;
  font-size:12px;
  color:var(--ink);
  text-decoration:none;
}

/* wraps thumbnail + title-row + meta-row + divider.
   thumb-wrap is absolutely positioned so it never affects this
   wrapper's height (that's set purely by the title + meta text).
   Its WIDTH (--img-w) is computed by JS on load, from the file's
   real aspect ratio measured against this wrapper's REAL rendered
   height — not guessed in PHP ahead of time. See assets/js/app.js
   sizeThumbnails(). */
.card-head-wrap{
  position:relative;
}

.thumb-wrap{
  position:absolute;
  top:0;
  bottom:0;
  width:var(--img-w, 36%);
  overflow:hidden;
  transition:width .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.item-card.side-left .thumb-wrap{ left:0; }
.item-card.side-right .thumb-wrap{ right:0; }
.item-card.open .thumb-wrap{
  width:0%;
  opacity:0;
}

.thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
.tint{
  position:absolute;
  inset:0;
  mix-blend-mode:color;
  opacity:0.8;
}

/* head: clickable title, inset away from the image */
.item-head{
  position:relative;
  display:block;
  width:100%;
  min-height:88px;
  border:none;
  background:none;
  cursor:pointer;
  font:inherit;
  color:inherit;
  padding:0;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}

.text-col{
  padding:4px 14px 4px 14px;
  transition:padding-left .45s cubic-bezier(.16,1,.3,1), padding-right .45s cubic-bezier(.16,1,.3,1);
}
.item-card.side-left .text-col{ padding-left:calc(var(--img-w, 36%) + 14px); }
.item-card.side-right .text-col{ padding-right:calc(var(--img-w, 36%) + 14px); }
.item-card.open .text-col{ padding-left:14px; padding-right:14px; }

.item-title{
  font-family:'NeoA','Space Grotesk',sans-serif;
  font-weight:700;
  font-size:25px;
  line-height:1.15;
  transition:font-size .4s ease;
}
.item-card.open .item-title{
  font-size:50px;
}

/* name / art — single shared accent color, sized to content, inset away from the image */
.meta-row{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:8px;
  padding:0 14px 0;
  transition:padding-left .45s cubic-bezier(.16,1,.3,1), padding-right .45s cubic-bezier(.16,1,.3,1);
}
.item-card.side-left .meta-row{ padding-left:calc(var(--img-w, 36%) + 14px); }
.item-card.side-right .meta-row{ padding-right:calc(var(--img-w, 36%) + 14px); }
.item-card.open .meta-row{ padding-left:14px; padding-right:14px; }

.meta-row span{
  display:inline-block;
  width:fit-content;
  max-width:50%;
  padding:4px 10px 0px 10px;
  background:var(--accent);
  font-family:'Holo','Space Grotesk',sans-serif;
  font-size:12px;
  font-weight:500;
  transition:background-color .4s ease;
}
.meta-type{ text-align:left; margin-left:auto; }
.item-card.open .meta-row span{
  background:var(--cream);
}

.item-card.open .accent-divider{
  background:var(--cream);
}

/* divider strip between cards — same color as this card's accent */
.accent-divider{
  height:10px;
  background:var(--accent);
}

.body-collapsible{
  max-height:0;
  overflow:hidden;

  opacity:0;
  transform:translateY(-8px);

  transition:
    max-height .55s cubic-bezier(.16,1,.3,1),
    opacity .3s ease,
    transform .45s cubic-bezier(.16,1,.3,1);
}

.item-card.open .body-collapsible{
  max-height:5000px;
  opacity:1;
  transform:translateY(0);
}

.body-inner{
  overflow:hidden;
}

.body-content{
  background:var(--cream);
  padding-bottom:10px;
}
.body-content p{
  font-family:'Holo','Space Grotesk',sans-serif;
  font-size:12px;
  line-height:1.45;
  padding-inline: 23.5px;
  margin-top:0;
}

.body-media-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
.body-media-item{
  width:100%;
  overflow:hidden;
}
.body-media-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.body-media-item video{
  width:100%;
  height:auto;
  display:block;
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important; animation-duration:0.01ms !important;}
}

h1{
  font-family:'Holo';
  font-weight:700;
  margin:0;
  margin-top: 14px;
  color:var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

a{
  color:var(--ink);
  text-decoration:none;
}

@media (min-width:431px){
  body{
    background:var(--ink);
  }
}