/* =========================
   styles.css — Satoshi Nawata
   Dark minimalist theme + responsive header + dropdown + content layout
   ========================= */

/* ---- Design tokens ---- */
:root{
  --max: 950px;
  --pad: 24px;

  --bg: #000;
  --fg: #fff;

  --border: rgba(255,255,255,.25);
  --borderSoft: rgba(255,255,255,.18);
  --hover: rgba(255,255,255,.08);

  --shadow: 0 12px 30px rgba(0,0,0,.35);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
          "Apple Color Emoji","Segoe UI Emoji";
}

/* ---- Base ---- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{
  color: #7fbfff;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover{ 
  color: #a8d4ff;
  text-decoration: underline;
}

/* =========================
   Header / Navigation
   ========================= */
header{
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.topbar{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand{
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Desktop nav */
nav.desktop{
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}

nav.desktop a,
nav.desktop button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  text-decoration: none; /* navbar links not underlined */
}

nav.desktop a:hover,
nav.desktop button:hover{ opacity: .8; }

/* Optional: active state */
.active{ font-weight: 700; }

/* Dropdown */
.dropdown{
  position: relative;
}

/* the Teaching link */
.dropdown-toggle{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* submenu */



.dropdown-menu{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;

  width: 175px;          /* fixed, narrower width */
  padding: 8px;

  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 9999;
}


/* IMPORTANT: hover-bridge so moving mouse down doesn't "drop" hover */
.dropdown-menu::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;             /* must match margin-top above */
  height: 10px;
}

/* submenu links */
.dropdown-menu a{
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--fg);

  white-space: normal;   /* allow wrapping */
  line-height: 1.25;
}

.dropdown-menu a:hover{
  background: var(--hover);
}

/* show menu when hovering anywhere over dropdown OR focusing inside */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display: block;
}

.lecture-list {
  list-style: none;   /* remove bullets */
  padding-left: 0;    /* align with other text */
  margin: 8px 0; 
}

.lec {
  font-weight: 600;
  margin-right: 0.4em;
}



/* Mobile menu (no JS) */
details.mobile{
  display: none;
  position: relative;
}

details.mobile summary{
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  user-select: none;
  color: var(--fg);
}

details.mobile summary::-webkit-details-marker{ display: none; }

details.mobile .mobile-panel{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(80vw, 320px);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 10px;
}

.mobile-panel a{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--fg);
}

.mobile-panel a:hover{ background: var(--hover); }

.mobile-panel .section{
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--borderSoft);
}

.mobile-panel .label{
  font-size: 12px;
  color: rgba(255,255,255,.75);
  margin: 6px 10px 4px;
}

/* =========================
   Main layout
   ========================= */
main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--pad) 70px; /* more concise top spacing */
}

/* Page title like "Home", "Teaching" etc. */
.hero-title{
  text-align: center;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 500;
  letter-spacing: .3px;
  margin: 6px 0 14px; /* higher */
}

/* Centered content block */
.content{
  display: grid;
  place-items: center;
}

.info{
  width: min(720px, 100%);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.9;
}

.info p{ margin: 0 0 10px; }
.info .spacer{ height: 26px; }

/* On large screens, keep the content narrower like your screenshot */
@media (min-width: 900px){
  .info{ width: 660px; }
}

/* =========================
   Teaching list (optional)
   If you use the compact centered list:
   <div class="list-wrap"><div class="course-list compact">...</div></div>
   ========================= */
.list-wrap{
  display: grid;
  place-items: center;
}

 .space-list li{ margin: 4px 0; }
 
 .page-date {
  font-size: 0.85em;
  color: #aaa;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}



/* =========================
   Responsive: show mobile menu
   ========================= */
@media (max-width: 820px){
  nav.desktop{ display: none; }
  details.mobile{ display: block; }
  .topbar{ padding: 14px var(--pad); }
  main{ padding-top: 12px; }
}