/* =========================================================
   TAKAAKI'S NEST — shared stylesheet
   Design language: NYC / Philadelphia transit signage.
   Bebas Neue for display, Helvetica for body (the real NYCTA
   typeface family), IBM Plex Mono for schedule/data captions.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* enamel / signage neutrals */
  --ink:        #f3efe4;
  --ink-dim:    #b9b2a1;
  --void:       #0a0d10;
  --steel:      #171b1f;
  --steel-2:    #21262c;
  --hairline:   rgba(243,239,228,0.14);

  /* route-bullet colors, borrowed from real NYC subway lines */
  --line-red:    #EE352E;   /* 1/2/3  — Home */
  --line-blue:   #0039A6;   /* A/C/E  — Apple History */
  --line-green:  #00933C;   /* 4/5/6  — Music */
  --line-orange: #FF6319;   /* B/D/F/M — Game */
  --line-purple: #B933AD;   /* 7      — Contact */

  --brass:      #c9a24b;
  --brass-dim:  #8a7038;

  --radius-sm: 4px;
  --radius-md: 8px;
  --maxw: 1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  background:var(--void);
  color:var(--ink);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.display{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:0.04em;
  line-height:1.02;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}

/* ---------------------------------------------------------
   Header / route-line navigation
   The five pages are drawn as five stops on a single line,
   each bullet colored like a real subway route.
   --------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,16,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hairline);
}
.brand-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px 6px;
  max-width:var(--maxw); margin:0 auto;
}
.brand{
  font-family:'Bebas Neue', sans-serif;
  font-size:22px;
  letter-spacing:0.08em;
  color:var(--ink);
  text-decoration:none;
}
.brand .dot{ color:var(--brass); }

.route{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px 26px 16px;
  gap:4px;
}
.route::before{
  content:"";
  position:absolute;
  left:26px; right:26px; top:24px;
  height:3px;
  background:linear-gradient(90deg,
    var(--line-red), var(--line-blue), var(--line-green),
    var(--line-orange), var(--line-purple));
  opacity:0.55;
}
.stop{
  position:relative;
  flex:1;
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
  text-decoration:none;
  color:var(--ink-dim);
  min-width:0;
}
.bullet{
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  font-weight:600; font-size:12px;
  background:var(--steel);
  border:2px solid var(--hairline);
  color:var(--ink-dim);
  z-index:1;
  transition:transform .15s ease, box-shadow .15s ease;
}
.stop-name{
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
}
.stop.r-red .bullet{ border-color:var(--line-red); }
.stop.r-blue .bullet{ border-color:var(--line-blue); }
.stop.r-green .bullet{ border-color:var(--line-green); }
.stop.r-orange .bullet{ border-color:var(--line-orange); }
.stop.r-purple .bullet{ border-color:var(--line-purple); }

.stop.current.r-red .bullet{ background:var(--line-red); color:#fff; box-shadow:0 0 0 4px rgba(238,53,46,0.22); }
.stop.current.r-blue .bullet{ background:var(--line-blue); color:#fff; box-shadow:0 0 0 4px rgba(0,57,166,0.28); }
.stop.current.r-green .bullet{ background:var(--line-green); color:#fff; box-shadow:0 0 0 4px rgba(0,147,60,0.25); }
.stop.current.r-orange .bullet{ background:var(--line-orange); color:#fff; box-shadow:0 0 0 4px rgba(255,99,25,0.25); }
.stop.current.r-purple .bullet{ background:var(--line-purple); color:#fff; box-shadow:0 0 0 4px rgba(185,51,173,0.25); }
.stop.current .stop-name{ color:var(--ink); font-weight:700; }
.stop.current .bullet{ transform:scale(1.12); }
.stop:hover .bullet{ transform:scale(1.08); }

/* ---------------------------------------------------------
   Page shell / sections
   --------------------------------------------------------- */
main{ display:block; }
.section{
  padding:64px 0;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 10px;
}
.page-title{
  font-size:clamp(40px, 8vw, 76px);
  margin:0 0 8px;
  color:var(--ink);
}
.page-sub{
  color:var(--ink-dim);
  font-size:15px;
  max-width:560px;
}

footer{
  border-top:1px solid var(--hairline);
  padding:26px 0 40px;
  color:var(--ink-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-align:center;
}
footer .dash{ color:var(--brass-dim); margin:0 8px; }

/* ---------------------------------------------------------
   Signage plate (used for headers / callouts)
   --------------------------------------------------------- */
.plate{
  background:linear-gradient(180deg,#faf6ea,#efe8d4);
  color:#1c1a13;
  border-radius:var(--radius-md);
  border:3px solid var(--brass);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25), 0 18px 40px -14px rgba(0,0,0,0.6);
  position:relative;
  padding:34px 32px;
}
.plate::before, .plate::after{
  content:"";
  position:absolute; top:10px; width:8px; height:8px; border-radius:50%;
  background:#8a7038; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4);
}
.plate::before{ left:12px; }
.plate::after{ right:12px; }
.plate .rivet-b1, .plate .rivet-b2{
  position:absolute; bottom:10px; width:8px; height:8px; border-radius:50%;
  background:#8a7038; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4);
}
.plate .rivet-b1{ left:12px; } .plate .rivet-b2{ right:12px; }

/* ---------------------------------------------------------
   Buttons / links
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:11px 18px;
  border:1px solid var(--brass-dim);
  border-radius:var(--radius-sm);
  color:var(--ink);
  text-decoration:none;
  background:var(--steel);
  transition:border-color .15s ease, color .15s ease;
}
.btn:hover{ border-color:var(--brass); color:var(--brass); }

/* ---------------------------------------------------------
   Mobile hamburger menu
   --------------------------------------------------------- */
.menu-toggle{
  display:none;
  width:36px; height:36px;
  background:none; border:none; cursor:pointer;
  padding:0;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px;
}
.menu-toggle span{
  display:block; width:22px; height:2px;
  background:var(--ink);
  border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:640px){
  .menu-toggle{ display:flex; }

  .route{
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px 20px 14px;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--void);
    border-bottom:1px solid var(--hairline);
    box-shadow:0 20px 40px -20px rgba(0,0,0,0.7);
  }
  .route.open{ display:flex; }
  .route::before{ display:none; }

  .stop{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    padding:13px 4px;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .stop:last-child{ border-bottom:none; }
  .stop-name{ display:block; font-size:13px; }
  .stop.current .bullet{ transform:none; }
  .stop:hover .bullet{ transform:none; }

  .section{ padding:44px 0; }
}