/* ============================================================
   START — the landing view
   ============================================================ */

.start{
  position:fixed; inset:0; z-index:75; background:var(--paper);
  overflow-y:auto; overscroll-behavior:contain;
  transition:opacity .7s var(--ease), transform .8s var(--ease-out), visibility .7s;
}
body.in-timeline .start{
  opacity:0; visibility:hidden; transform:scale(1.04); pointer-events:none;
}

.start-inner{
  min-height:100%;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:calc(var(--rail) * 2) calc(var(--rail) * 2);
  max-width:1500px; margin:0 auto;
}

/* --- top line ---------------------------------------------- */

.start-top{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:22px; border-bottom:var(--hair) solid var(--ink-22);
}
.start-top .t-mono{ color:var(--ink-38); }
.start-top .dot{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--red); margin-right:7px; vertical-align:middle;
}

/* --- body -------------------------------------------------- */

.start-body{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);
  gap:0 80px; align-items:start;
  padding:52px 0 44px;
}

.start-name{
  font-size:clamp(52px,8.6vw,132px); font-weight:700;
  letter-spacing:-.052em; line-height:.88; margin:0 0 26px;
}
.start-role{
  font-size:clamp(13px,1.35vw,16px); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--red);
  margin:0 0 8px;
}
.start-disc{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-38); margin:0 0 46px;
}
.start-stand{
  font-size:clamp(19px,2.5vw,32px); font-weight:400; line-height:1.34;
  letter-spacing:-.018em; max-width:19em; margin:0 0 40px;
  border-top:var(--hair) solid var(--ink); padding-top:26px;
}
.start-intro p{
  font-size:clamp(13px,1.2vw,16px); line-height:1.68; color:var(--ink-60);
  max-width:38em; margin:0 0 1.35em;
}

/* --- the three doors --------------------------------------- */

.doors{ border-top:var(--hair) solid var(--ink); }

.door{
  display:grid; grid-template-columns:34px 1fr 22px;
  align-items:center; gap:0 16px;
  width:100%; text-align:left; text-decoration:none; color:inherit;
  appearance:none; background:transparent; cursor:pointer;
  border:0; border-bottom:var(--hair) solid var(--ink-12);
  padding:26px 4px 26px 0; position:relative;
  transition:padding-left .4s var(--ease-out);
}
.door::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--ink-06); transition:width .45s var(--ease-out); z-index:-1;
}
.door:hover{ padding-left:16px; }
.door:hover::before{ width:100%; }

.door .num{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--ink-22);
  transition:color .3s var(--ease);
}
.door:hover .num{ color:var(--red); }
.door .lbl{
  display:block; font-size:clamp(20px,2.3vw,28px); font-weight:700;
  letter-spacing:-.032em; line-height:1.05; margin-bottom:6px;
}
.door .nte{
  display:block; font-family:var(--mono); font-size:9px;
  letter-spacing:.08em; color:var(--ink-38); line-height:1.5;
}
.door .arw{
  font-size:15px; color:var(--ink-22); justify-self:end;
  transition:transform .4s var(--ease-out), color .3s var(--ease);
}
.door:hover .arw{ color:var(--red); transform:translateX(4px); }
.door--primary .lbl{ color:var(--ink); }
.door--primary .num{ color:var(--red); }

.doors-hint{
  margin-top:22px; font-family:var(--mono); font-size:9px;
  letter-spacing:.12em; color:var(--ink-22);
}
.doors-hint kbd{
  font-family:var(--mono); font-size:9px; border:var(--hair) solid var(--ink-22);
  color:var(--ink-38); padding:3px 5px; margin-right:5px;
}

/* --- foot -------------------------------------------------- */

.start-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  padding-top:22px; border-top:var(--hair) solid var(--ink-22);
}
.start-note{
  font-size:12px; line-height:1.6; color:var(--ink-60); max-width:34em; margin:0;
}
.start-foot .links{ flex:0 0 auto; }

/* --- small screens ----------------------------------------- */

@media (max-width:900px){
  .start-body{ grid-template-columns:1fr; gap:52px; padding:44px 0 40px; }
  .start-stand{ max-width:none; }
  .start-inner{ padding:calc(var(--rail) * 2) var(--rail); }
}
@media (max-width:560px){
  .start-name{ font-size:clamp(40px,13vw,64px); }
  .start-stand{ font-size:19px; }
  .start-foot{ flex-direction:column; align-items:flex-start; gap:18px; }
  .door{ grid-template-columns:26px 1fr 18px; padding:20px 2px; }
  .doors-hint{ display:none; }
}